TON Connect в Mini App

Интеграция TON Connect в Mini App — это ключ к полноценному Web3-опыту внутри Telegram. Без подключения кошелька пользователь не сможет взаимодействовать со смарт-контрактами или подписывать транзакции. Особенность TON Connect в Mini App — возможность использования встроенного кошелька Telegram (TON Space), что устраняет барьер «установи внешний кошелёк».

Mini App внутри Telegram может подключаться к блокчейну TON через TON Connect — тот же протокол, что мы изучали в M07. Но внутри Telegram работа с кошельками имеет важные особенности: два режима моста и комбинированная авторизация.

Два режима моста

В обычном dApp (веб-сайт в браузере) TON Connect работает через HTTP Bridge — QR-код или deeplink для подключения внешнего кошелька. Внутри Mini App появляется второй вариант: JS Bridge.

HTTP Bridge (стандартный)

Тот же механизм, что и в обычных dApp:

HTTP Bridge используется когда кошелёк — отдельное приложение (Tonkeeper, MyTonWallet и др.).

JS Bridge (встроенные кошельки)

Когда кошелёк встроен в Telegram (например, Wallet in Telegram), он инъектирует JavaScript-провайдер прямо в WebView:

Преимущества JS Bridge:

• Мгновенное подключение — нет сканирования QR или перехода по ссылке
• Нет сетевого round-trip — прямой вызов метода в том же процессе
• Бесшовный UX — пользователь не покидает Telegram

Определение доступного моста

// Проверка наличия JS Bridge
function detectBridge(): 'js' | 'http' {
  // JS Bridge: кошелёк инъектирует провайдер в window
  if (window.tonconnect) {
    return 'js';
  }
  // Fallback на HTTP Bridge
  return 'http';
}

SDK @tonconnect/ui-react определяет доступный мост автоматически — вам не нужно писать эту логику вручную:

import { TonConnectUIProvider, TonConnectButton } from '@tonconnect/ui-react';

function App() {
  return (
    // SDK автоматически определяет JS или HTTP Bridge
    <TonConnectUIProvider manifestUrl="https://your-app.com/tonconnect-manifest.json">
      <TonConnectButton />
      {/* ... */}
    </TonConnectUIProvider>
  );
}

Комбинированная авторизация

Внутри Mini App у вас два источника идентификации:

Комбинированный паттерн:

Это позволяет:

• Показывать персонализированный контент по Telegram-аккаунту
• Выполнять блокчейн-операции от имени подтверждённого кошелька
• Предотвращать подмену адресов (ton_proof подписан приватным ключом кошелька)

Серверная валидация: двойная проверка

1. Валидация initData — HMAC-SHA256 с bot_token (как в уроке 02)
2. Валидация ton_proof — Ed25519 подпись, доказывающая владение кошельком (как в M07 урок 04)
3. Создание сессии — связка Telegram user_id и TON address

TON Address Explorer

Используйте виджет для исследования форматов TON-адресов — вставьте адрес кошелька и увидите его декодированную структуру:

TON-адрес в user-friendly формате — это 48 символов base64url, кодирующих 36 байт:

• 1 байт — флаг (bounceable/non-bounceable, mainnet/testnet)
• 1 байт — workchain ID (0 = basechain, -1 = masterchain)
• 32 байта — hash аккаунта
• 2 байта — CRC16-CCITT контрольная сумма

Полный пример: Mini App с TON Connect

import { TonConnectUIProvider, useTonWallet } from '@tonconnect/ui-react';

function WalletInfo() {
  const wallet = useTonWallet();

  if (!wallet) {
    return <p>Подключите кошелёк для продолжения</p>;
  }

  return (
    <div>
      <p>Кошелёк: {wallet.account.address}</p>
      <p>Chain: {wallet.account.chain}</p>
    </div>
  );
}

function App() {
  return (
    <TonConnectUIProvider
      manifestUrl="https://your-app.com/tonconnect-manifest.json"
    >
      <div style={{
        backgroundColor: 'var(--tg-theme-bg-color)',
        color: 'var(--tg-theme-text-color)',
      }}>
        <h1>TON Connect в Mini App</h1>
        <WalletInfo />
      </div>
    </TonConnectUIProvider>
  );
}

Связь с M07

Этот урок развивает концепции из модуля M07:

Новое в Mini App: JS Bridge, комбинированная авторизация, интеграция с темой Telegram.

Итоги

В следующем уроке разберём интеграцию с ботом — как бот и Mini App обмениваются данными.

Частые ошибки

1. Не учитывают встроенный кошелёк TON Space и показывают только внешние кошельки, хотя большинство пользователей Telegram уже имеют TON Space.
2. Открывают QR-код для подключения внутри мобильного Telegram: в Mini App на мобильном устройстве QR-код бесполезен; нужен deep link.
3. Не адаптируют UI подключения кошелька под контекст Mini App: кнопки и модалки должны учитывать ограниченный viewport.
4. Забывают передавать ton_proof при подключении кошелька в Mini App: без proof серверная аутентификация невозможна.