Розробка 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() — це атомарна операція: або все виконалось, або rollback. На 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 для взаємодії з blockchain. @ston-fi/sdk для StonFi роутера або прямі виклики DeDust контрактів через кастомні 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 тижнів.