DEX in Telegram Mini App on TON: Building Swaps and Liquidity

Building a DEX in a Telegram Mini App on TON

The TON ecosystem has taken off: Mini Apps gained access to 900 million users, the blockchain entered the top 5 in DeFi activity, and total liquidity in pools exceeded 300 million TON. Many teams tried to port the familiar Uniswap interface but faced a surprise — a DEX on TON is fundamentally different from Ethereum counterparts. We specialize in such applications and know every pitfall: from asynchronous messages to webview limitations. A typical DEX on TON is not a Uniswap clone; the architecture is built on the actor model, where each contract is an independent process exchanging messages through queues. The Telegram Mini App adds its own constraints: a small screen, gestures, themes.

Let's dive into the key features of token swapping.

How Does a Swap Work on TON?

In Ethereum, swap() is an atomic operation: either everything executes or it rolls back. In TON, each contract is a separate actor, messages between them are asynchronous. A swap on StonFi works like this:

1. The user sends a jetton transfer with op-code 0xf8a7ea5 to the LP Pool.
2. The LP Pool processes the message and sends the output jetton back.
3. If something goes wrong, a bounced message returns the original tokens.

This flow takes 3–5 seconds and several blocks. The UI must reflect this: not a 5-second spinner, but a clear state "transaction sent, awaiting confirmation." We poll the transaction status via the TON API (/v2/transactions/{hash}) every 1–2 seconds. The average transaction cost is 0.05 TON — an order of magnitude lower than on Ethereum.

What Limitations Does the Telegram Mini App Impose?

The Mini App runs in a webview with limited space — typically 375px wide and up to 600px tall. Here are three patterns we implement in every project.

MainButton — Telegram's native button at the bottom of the screen. We use it for the primary action (Swap, Confirm), not rendering our own button on top.

WebApp.MainButton.setText('Confirm Swap'); WebApp.MainButton.onClick(() => executeSwap()); WebApp.MainButton.show(); 

HapticFeedback — on successful transaction: WebApp.HapticFeedback.notificationOccurred('success'). On error: 'error'. A small detail that noticeably improves the app's feel.

Theme: WebApp.themeParams returns the colors of the current Telegram theme. The app must adapt to the user's dark/light theme, not fix its own.

BackButton: when navigating deeper (transaction details, token selection) — show WebApp.BackButton, hide it on return.

How Does TON Connect Surpass the Built-in Wallet?

TON Connect is a wallet connection protocol, similar to WalletConnect for TON. In the context of Telegram Mini Apps, there's a nuance: Tonkeeper, MyTonWallet, and the built-in Telegram Wallet all implement TON Connect, but with different capabilities. The built-in Telegram Wallet (available via window.Telegram.WebApp.openInvoice) only works for TON transfers, not for jetton operations. For DEX swaps, an external wallet via @tonconnect/ui-react is required. TON Connect is 5 times more convenient for Jetton swaps: it supports any decentralized transfers, not just TON. This means a deep link to the wallet's mobile app — an extra UX step we explain to the user via a hint.

Mini App Architecture

Tech Stack

Jetton Addresses and the Friendly Address Format

In TON, there is no global token address — each user has their own jetton wallet address (derived from the master jetton contract + owner address). Before displaying a balance or performing a swap, you need to get the user's 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() }]
);

This is an async call for each token, which we cache. Without caching, the UI lags when loading balances — a typical beginner mistake.

Price Charts

To display a price chart inside the Mini App, we use TradingView Lightweight Charts (minimal bundle ~50KB). Data: OHLCV from the StonFi subgraph or TON API historical prices. Update via WebSocket if realtime is needed, polling every 30 seconds if near-realtime is sufficient. Important: charts are not interactive on mobile webview — pinch-to-zoom conflicts with Telegram's native scroll. We implement only a static chart with tap-to-view a specific candle.

Liquidity Management

If the Mini App includes LP functionality (add/remove liquidity), we display the current pool share and impermanent loss. IL is calculated off-chain:

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

Where price_ratio = current_price / entry_price. If IL > 5%, we show a warning to the user.

Working Process

What's Included

• Integration of TON Connect and support for multiple wallets (Tonkeeper, MyTonWallet).
• Full swap interface with routing through StonFi and DeDust.
• Price chart display (TradingView Lightweight Charts).
• Caching mechanism for jetton wallet addresses for fast balance loading.
• Handling of asynchronous transactions with status polling and bounced messages.
• Adaptation to Telegram themes (dark/light) and native elements (MainButton, HapticFeedback).
• Technical documentation and team training.

We have been developing DeFi services for over 10 years and have completed 30+ projects on Ethereum, Solana, and TON. Every code undergoes auditing with Slither and Mythril. We guarantee stable smart contract operation and deadlines. Contact us to evaluate your project — we'll offer an optimal solution considering your business requirements. Request DEX Mini App development and get an engineer's consultation.