Разработка Telegram Mini App для DEX

Разработка Telegram Mini App для DEX

TON-экосистема выросла в 2024 году нетипично быстро: Telegram открыл Mini Apps для 900M+ пользователей, TON стал топ-5 по DAU в DeFi. Типичный DEX на TON (StonFi, DeDust) — это не Uniswap-клон, это другая архитектура: асинхронные сообщения вместо синхронных вызовов, account-based модель вместо контракт-центричной. Telegram Mini App поверх этого — отдельный слой сложности с собственными ограничениями.

Специфика DEX на TON: почему это не как Ethereum

Асинхронные транзакции

В Ethereum swap() — это атомарная операция: или всё исполнилось, или reversal. В TON каждый контракт — отдельный actor, сообщения между ними асинхронны. Swap на StonFi выглядит так:

1. Пользователь отправляет jetton transfer с op-code 0xf8a7ea5 к LP Pool
2. LP Pool обрабатывает сообщение, отправляет output jetton назад
3. Если что-то пошло не так — bounced message возвращает исходные токены

Этот флоу занимает 3-5 секунд и несколько блоков. UI должен это отражать: не спиннер 5 секунд, а явное состояние «транзакция отправлена, ожидаем подтверждения». Polling transaction status через TON API (/v2/transactions/{hash}) с интервалом 1-2 секунды.

TON Connect vs классические кошельки

TON Connect — протокол подключения кошелька, аналог WalletConnect для TON. В контексте Telegram Mini App есть нюанс: Tonkeeper, MyTonWallet и встроенный Telegram Wallet все реализуют TON Connect, но с разными возможностями.

Встроенный Telegram Wallet (доступен через window.Telegram.WebApp.openInvoice) работает только для TON transfers, не для jetton операций. Для DEX свопов нужен внешний кошелёк через @tonconnect/ui-react. Это означает deep link в мобильное приложение кошелька — дополнительный UX шаг, который нужно объяснить пользователю.

Jetton адреса и Friendly Address формат

В TON нет глобального адреса токена — каждый пользователь имеет собственный jetton wallet адрес (derived от master jetton contract + owner address). Прежде чем отображать баланс или делать swap, нужно получить jetton wallet address пользователя:

const jettonMaster = Address.parse(USDT_MASTER_ADDRESS);
const jettonWalletAddress = await tonClient.runMethod(
  jettonMaster, 
  'get_wallet_address',
  [{ type: 'slice', cell: beginCell().storeAddress(userAddress).endCell() }]
);

Это async вызов на каждый токен, который нужно кешировать. Без кеша — UI тормозит при загрузке балансов.

Архитектура Mini App

Технический стек

Frontend: React 18 + TypeScript + Tailwind CSS. @tonconnect/ui-react для wallet connection. @ton/ton для взаимодействия с TON blockchain. @ston-fi/sdk для StonFi роутера или прямые вызовы к DeDust contracts через собственные message builders.

TON API: TonCenter API v2 (free, rate-limited) или TON API от ton.access.tech (лучше для production). The Open Network имеет официальный @ton-api/client.

Telegram WebApp SDK: window.Telegram.WebApp для темы, haptic feedback, BackButton, MainButton.

Telegram-специфичный UX

Telegram Mini App работает в webview с ограниченным пространством. Важные паттерны:

MainButton — нативная кнопка Telegram внизу экрана. Использовать для основного действия (Swap, Confirm), не рендерить собственную кнопку поверх.

WebApp.MainButton.setText('Подтвердить своп');
WebApp.MainButton.onClick(() => executeSwap());
WebApp.MainButton.show();

HapticFeedback — при успешной транзакции: WebApp.HapticFeedback.notificationOccurred('success'). При ошибке: 'error'. Мелочь, но заметно улучшает ощущение приложения.

Тема: WebApp.themeParams возвращает цвета текущей темы Telegram. Приложение должно подстраиваться под тёмную/светлую тему пользователя, не фиксировать свою.

BackButton: при навигации вглубь (детали транзакции, выбор токена) — показываем WebApp.BackButton, при возврате — прячем.

Графики цен

Для отображения price chart внутри Mini App — TradingView Lightweight Charts (минимальный bundle ~50KB). Данные: OHLCV из StonFi subgraph или TON API historical prices. Обновление через WebSocket если нужен realtime, polling каждые 30 секунд если достаточно near-realtime.

Важно: графики не должны быть интерактивными в мобильном webview — pinch-to-zoom конфликтует с нативным scroll Telegram. Только статичный chart с тапом для просмотра конкретной свечи.

Управление ликвидностью

Если Mini App включает LP функциональность (add/remove liquidity), нужно отображать текущую долю пула и impermanent loss. IL рассчитывается off-chain:

IL% = 2 * sqrt(price_ratio) / (1 + price_ratio) - 1

Где price_ratio = current_price / entry_price. При IL > 5% — предупреждение пользователю.

Процесс работы

Дизайн и флоу (3-5 дней). Figma прототип, определение поддерживаемых операций (swap / LP / history).

Frontend разработка (1.5-2 недели). Wallet connection, token list, swap interface, transaction history.

Blockchain интеграция (1 неделя). StonFi/DeDust message building, transaction submission, status polling.

Тестирование (3-5 дней). Тест в Telegram на реальных устройствах (iOS + Android — поведение webview отличается). Тест на TON testnet.

Деплой. Mini App — это статичный сайт на HTTPS. Vercel/Netlify + домен. Регистрация через BotFather (/newapp).

Ориентиры по срокам

MVP с базовым свопом и балансами: 2-3 недели. Полноценный DEX Mini App с LP, историей и графиками: 4-6 недель.