Інтеграція TON SDK у фронтенд
TON принципово відрізняється від EVM-екосистеми — інша модель облікових записів (кожен контракт — окрема ячейка з власним кодом та даними), асинхронна доставка повідомлень між контрактами та Cell-基础 серіалізація замість ABI. Перед інтеграцією TON SDK у фронтенд, важливо зрозуміти цю різницю, інакше поведінка додатку видаватиметься нелогічною.
Стек інструментів
Основні бібліотеки для фронтенду:
-
@ton/ton— основний SDK для взаємодії з блокчейном (читання стану, відправка повідомлень) -
@ton/core— примітиви: Cell, Address, Builder, Slice -
@tonconnect/sdk/@tonconnect/ui-react— стандарт підключення гаманців (аналог WalletConnect для TON)
TonConnect — де-факто стандарт. Підтримується Tonkeeper, MyTonWallet, Telegram Wallet та десятками інших. Не винаходьте власний протокол підключення.
Підключення гаманця через TonConnect
import { TonConnectUI } from '@tonconnect/ui-react';
// Ініціалізація (manifestUrl — обов'язковий параметр)
const tonConnectUI = new TonConnectUI({
manifestUrl: 'https://yourdomain.com/tonconnect-manifest.json',
});
// Підключення
await tonConnectUI.connectWallet();
const wallet = tonConnectUI.wallet;
const userAddress = wallet?.account.address; // сирова форма: 0:abc...
Файл tonconnect-manifest.json описує ваш додаток — назву, іконку, URL. Гаманець показує його користувачу при запиті на підключення. Без коректного маніфеста за публічною URL-адресою підключення не працює.
Відправка транзакцій
У TON фронтенд відправляє не транзакцію, а повідомлення (зовнішнє повідомлення) до контракту гаманця. Гаманець його підписує та транслює в мережу.
import { toNano } from '@ton/ton';
await tonConnectUI.sendTransaction({
validUntil: Math.floor(Date.now() / 1000) + 600,
messages: [
{
address: '0:contractAddress',
amount: toNano('0.05').toString(), // у нанотонах
payload: buildPayload().toBoc().toString('base64'), // Cell у base64
},
],
});
payload — це Cell, серіалізований у BOC (Bag of Cells). Для взаємодії з конкретним контрактом потрібно знати його TL-B схему та будувати Cell вручну через beginCell()...endCell().
Читання стану контракту
import { TonClient, Address } from '@ton/ton';
const client = new TonClient({
endpoint: 'https://toncenter.com/api/v2/jsonRPC',
apiKey: 'YOUR_KEY',
});
const address = Address.parse('EQD...');
const result = await client.runMethod(address, 'get_wallet_data', []);
// Результат — стек значень у форматі TVM
const balance = result.stack.readBigNumber();
Для production використовуйте власний toncenter або TON API від tonapi.io — публічний endpoint має rate limiting та нестійку роботу під навантаженням.
Особливості, які дивують EVM-розробників
Транзакція у TON не фіналізується миттєво — між відправкою та виконанням контракту проходить кілька секунд, а ланцюги міжконтрактних повідомлень розвиваються асинхронно. Для підтвердження факту виконання потрібно опитувати історію транзакцій облікового запису, а не просто чекати квитанцію як у Ethereum.