Інтеграція TON Connect: dApp та Telegram Mini App

Ми інтегруємо TON Connect у ваше dApp або Telegram Mini App — не просто «гаманець для TON», а повноцінний протокол зв’язку між застосунком і гаманцем через bridge-сервер. На відміну від EVM, де window.ethereum інжектується в сторінку, TON-гаманці (Tonkeeper, MyTonWallet, Telegram Wallet) працюють як окремі застосунки і спілкуються з dApp через зашифрований канал. Це архітектурне розходження критично важливе для коректної інтеграції. За даними TON (The Open Network) TON Connect використовується більш ніж у 200 dApp, а час підключення гаманця скорочується на 40% порівняно з прямим RPC.

Чим TON Connect відрізняється від EVM-гаманців?

Основна відмінність — асинхронне з’єднання. В EVM гаманець вбудований у браузер, а в TON підключення встановлюється через QR-код або deeplink (в Telegram — напряму). Протокол використовує bridge-сервер для обміну повідомленнями, що підвищує безпеку: dApp ніколи не отримує приватний ключ. TON також підтримує множинні повідомлення в одній транзакції — це дозволяє робити складні виклики смарт-контрактів за один крок.

Як налаштувати TON Connect у React dApp за 15 хвилин?

Встановлення бібліотеки та ініціалізація:

npm install @tonconnect/ui-react 

Маніфест — JSON-файл, який гаманець показує користувачу при підключенні. Має бути доступний по HTTPS:

// public/tonconnect-manifest.json { "url": "https://yourapp.com", "name": "Your dApp", "iconUrl": "https://yourapp.com/icon.png" } 

Обгортка застосунку та готова кнопка:

// main.tsx import { TonConnectUIProvider } from '@tonconnect/ui-react' root.render( <TonConnectUIProvider manifestUrl="https://yourapp.com/tonconnect-manifest.json"> <App /> </TonConnectUIProvider> ) // Компонент з кнопкою та кастомним UI import { TonConnectButton, useTonConnectUI, useTonAddress, useTonWallet } from '@tonconnect/ui-react' function WalletInfo() { const address = useTonAddress() const rawAddress = useTonAddress(false) const wallet = useTonWallet() const [tonConnectUI] = useTonConnectUI() return ( <div> <TonConnectButton /> <p>Адреса: {address}</p> <p>Гаманець: {wallet?.device.appName}</p> <button onClick={() => tonConnectUI.disconnect()}>Disconnect</button> </div> ) } 

TON-адреси бувають двох форматів: user-friendly (EQD... або UQD...) та raw (0:abc...). User-friendly включає bounceable/non-bounceable. Для відправки на смарт-контракти використовуйте bounceable (EQ), для гаманців — non-bounceable (UQ).

Як відправити транзакцію та обробити помилки?

TON Connect відправляє повідомлення (messages). Одна транзакція може містити декілька повідомлень:

import { useTonConnectUI } from '@tonconnect/ui-react' import { toNano } from '@ton/ton' import { beginCell } from '@ton/ton' // Відправка транзакції function SendTon() { const [tonConnectUI] = useTonConnectUI() async function sendTransaction() { const transaction = { validUntil: Math.floor(Date.now() / 1000) + 360, messages: [ { address: 'EQD...contractAddress', amount: toNano('0.05').toString(), payload: 'te6ccgEBAQEAAgAAAA==', // base64 BOC } ] } const result = await tonConnectUI.sendTransaction(transaction) // result.boc — BOC підписаної транзакції } } // Побудова payload для виклику jetton transfer const body = beginCell() .storeUint(0xf8a7ea5, 32) .storeUint(0, 64) .storeCoins(toNano('10')) .storeAddress(destinationAddress) .storeAddress(responseAddress) .storeBit(false) .storeCoins(toNano('0.01')) .storeBit(false) .endCell() 

payload — це BOC (Bag of Cells), серіалізована структура для виклику контракту. Типова помилка — неправильний bounceable флаг, що призводить до Invalid boc. Завжди перевіряйте формат адреси та використовуйте toNano для конвертації.

Як відновити сесію та працювати з подіями?

TON Connect автоматично відновлює сесію з localStorage. Підписка на зміни статусу:

import { useTonConnectUI } from '@tonconnect/ui-react' const [tonConnectUI] = useTonConnectUI() useEffect(() => { const unsubscribe = tonConnectUI.onStatusChange((wallet) => { if (wallet) { console.log('Connected:', wallet.account.address) } else { console.log('Disconnected') } }) return unsubscribe }, [tonConnectUI]) 

У Telegram Mini App TON Connect працює через Telegram Wallet напряму — без QR-коду. TonConnectUIProvider автоматично визначає контекст і показує правильний UI. Перед рендером провайдера викличте window.Telegram.WebApp.ready().

Чому варто інтегрувати TON Connect через нас?

Ми провели понад 20 успішних інтеграцій TON Connect — від простих dApp до складних DeFi-протоколів. Наш досвід показує, що правильно налаштований TON Connect підвищує конверсію підключень на 30-50% завдяки зручному UX та підтримці всіх популярних гаманців. Ми гарантуємо коректну роботу на Tonkeeper, MyTonWallet, Telegram Wallet, а також на мобільних і десктопних пристроях.

Наш процес інтеграції TON

Терміни — від 5 до 15 днів залежно від складності. Вартість розраховується індивідуально. Точну оцінку отримаєте після консультації.

Що входить у роботу

У вартість входить: документація з інтеграції, налаштування manifest-файлу, розробка кастомного UI підключення, тестування на всіх популярних гаманцях (Tonkeeper, MyTonWallet, Telegram Wallet), навчання команди, пост-релізна підтримка.

Типові помилки при інтеграції TON Connect

• Неправильний bounceable флаг: для контрактів використовуйте EQ, для гаманців UQ. Інакше транзакція впаде з помилкою.
• Invalid boc: перевіряйте серіалізацію payload через beginCell(), особливо storeCoins з toNano.
• Завершення часу validUntil: ставте запас 5-10 хвилин, інакше гаманець відхилить транзакцію.
• Відсутність HTTPS для маніфесту: гаманець не підключається до dApp без HTTPS.

Як замовити інтеграцію TON Connect?

Зв’яжіться з нами для консультації — отримайте попередній план впровадження та точну оцінку вартості. Замовте інтеграцію TON Connect уже сьогодні й забезпечте своїм користувачам безпечний та зручний вхід у світ TON.

Згідно зі специфікацією TON Connect Protocol, протокол підтримує всі сучасні гаманці TON і продовжує розвиватися.