Створюємо DEX у Telegram Mini App на TON

Екосистема TON злетіла: Mini Apps отримали доступ до 900 млн користувачів, блокчейн увійшов у топ-5 за активністю в DeFi, а сумарна ліквідність у пулах перевищила 300 млн TON. Багато команд намагалися портувати звичний Uniswap-інтерфейс, але зіткнулися з сюрпризом — DEX на TON кардинально відрізняється від Ethereum-аналогів. Ми спеціалізуємося на таких додатках і знаємо кожен підводний камінь: від асинхронних повідомлень до обмежень webview. Типовий DEX на TON — це не Uniswap-клон, архітектура будується на actor-моделі, де кожен контракт — незалежний процес, що обмінюється повідомленнями через черговість. Telegram Mini App зверху накладає свої обмеження: маленький екран, жести, теми.

Розглянемо ключові особливості обміну токенами.

Як працює своп у TON-версії?

В Ethereum swap() — атомарна операція: або все виконалося, або відкат. У 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 статусу транзакції через TON API (/v2/transactions/{hash}) з інтервалом 1-2 секунди. Середня вартість транзакції становить 0.05 TON — на порядок нижче, ніж на Ethereum.

Які обмеження накладає Telegram Mini App?

Mini App працює в webview з обмеженим простором — ширина зазвичай 375px, висота до 600px. Ось три патерни, які ми впроваджуємо в кожному проєкті.

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, при поверненні — ховаємо.

Як TON Connect перевершує вбудований гаманець?

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. TON Connect в 5 разів зручніший для Jetton-свопів: він підтримує будь-які децентралізовані перекази, а не тільки TON. Це означає deep link у мобільний додаток гаманця — додатковий UX крок, який ми пояснюємо користувачеві через підказку.

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

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

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

У TON немає глобальної адреси токена — кожен користувач має власний jetton wallet address (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 гальмує при завантаженні балансів — типова помилка початківців.

Графіки цін

Для відображення 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% — попередження користувачеві.

Процес роботи

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

• Інтеграція TON Connect та підтримка кількох гаманців (Tonkeeper, MyTonWallet).
• Повноцінний інтерфейс свопу з маршрутизацією через StonFi та DeDust.
• Відображення графіків цін (TradingView Lightweight Charts).
• Механізм кешування jetton wallet адрес для швидкого завантаження балансів.
• Обробка асинхронних транзакцій з polling статусу та bounced messages.
• Адаптив під теми Telegram (темна/світла) та нативні елементи (MainButton, HapticFeedback).
• Технічна документація та навчання команди.

Ми розробляємо DeFi-сервіси понад 10 років, реалізували 30+ проєктів на Ethereum, Solana та TON. Кожен код проходить аудит з використанням Slither та Mythril. Гарантуємо стабільну роботу смарт-контрактів та дотримання термінів. Зв'яжіться з нами для оцінки вашого проекту — ми запропонуємо оптимальне рішення з урахуванням ваших бізнес-вимог. Замовте розробку DEX Mini App та отримайте консультацію інженера.