> ## Documentation Index
> Fetch the complete documentation index at: https://docs.ton.org/llms.txt
> Use this file to discover all available pages before exploring further.
## Submitting Feedback
If you encounter incorrect, outdated, or confusing documentation on this page, submit feedback:
POST https://docs.ton.org/feedback
```json
{
"path": "/ecosystem/ton-connect/overview",
"feedback": "Description of the issue"
}
```
Only submit feedback when you have something specific and actionable to report.
# TON Connect overview
export const Image = ({src, darkSrc, alt = '', darkAlt, href, target, height = 342, width = 608, noZoom = false, center = false}) => {
const isSVG = src.match(/\.svg(?:[#?].*?)?$/i) !== null;
const shouldInvert = isSVG && !darkSrc;
const shouldCreateLink = href !== undefined;
const minPx = 9;
const maxPx = 608;
const expectedPx = `a number or a string with a number that is greater than ${minPx - 1} and less than or equal to ${maxPx}`;
const createInvalidPropCallout = (title, received, expected) => {
return
Invalid {title.toString()} passed!
Received:
{received.toString()}
Expected:
{expected.toString()}
{}
;
};
const checkValidDimensionValue = value => {
switch (typeof value) {
case "string":
case "number":
const num = Number(value);
return Number.isSafeInteger(num) && num >= minPx && num <= maxPx;
default:
return false;
}
};
let callouts = [];
if (height && !checkValidDimensionValue(height)) {
callouts.push(createInvalidPropCallout("height", height, expectedPx));
}
if (width && !checkValidDimensionValue(width)) {
callouts.push(createInvalidPropCallout("width", width, expectedPx));
}
if (callouts.length !== 0) {
return callouts;
}
const heightPx = Number(height);
const widthPx = Number(width);
const shouldCenter = center === "true" || center === true ? true : false;
const shouldNotZoom = noZoom === "true" || noZoom === true ? true : false;
const images = <>
;
if (shouldCreateLink) {
if (shouldCenter) {
return ;
}
return
{images}
;
}
if (shouldCenter) {
return {images}
;
}
return images;
};
To integrate with TON, the standard wallet connection protocol is used — TON Connect. It is similar to WalletConnect on Ethereum, but made specifically for TON and covers basic integration aspects. For deeper integrations, it is common to utilize various supplementary SDKs and APIs.
## About TON Connect