Интеграция фронтенда с TON SDK
TON отличается от EVM-экосистемы принципиально — другая модель аккаунтов (каждый контракт — отдельная ячейка с собственным кодом и данными), асинхронная доставка сообщений между контрактами, и Cell-based сериализация вместо 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; // raw form: 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 не финализируется моментально — между отправкой и исполнением контракта проходит несколько секунд, а цепочки inter-contract сообщений разворачиваются асинхронно. Для подтверждения факта исполнения нужно опрашивать историю транзакций аккаунта, а не просто ждать receipt как в Ethereum.