Подключение кошелька через @tonconnect/ui-react

Подключишь кошелёк в React: TonConnectUIProvider, кнопка Connect и чтение адреса через хуки.

Подключение кошелька в React

Для React и Next.js бери @tonconnect/ui-react: провайдер, готовая кнопка и хуки. Кошелёк подключается через модалку TON Connect; адрес доступен в компонентах без ручной работы с bridge.

Перед кодом положи tonconnect-manifest.json на публичный HTTPS-URL — иначе кошелёк не подключится.

Минимальный Connect

tsx

// @tonconnect/ui-react ^3.0.0
import {
  TonConnectUIProvider,
  TonConnectButton,
  useTonAddress,
  useTonWallet,
} from "@tonconnect/ui-react";

const MANIFEST_URL =
  "https://raw.githubusercontent.com/ton-connect/demo-dapp-with-react-ui/master/public/tonconnect-manifest.json";

export function App() {
  return (
    <TonConnectUIProvider manifestUrl={MANIFEST_URL}>
      <WalletPanel />
    </TonConnectUIProvider>
  );
}

function WalletPanel() {
  const address = useTonAddress(); // user-friendly
  const wallet = useTonWallet();

  return (
    <div>
      <TonConnectButton />
      {wallet ? (
        <p>Подключено: {address}</p>
      ) : (
        <p>Кошелёк не подключён</p>
      )}
    </div>
  );
}

Установка:

bash

npm i @tonconnect/ui-react@^3.0.0

В production замени MANIFEST_URL на свой домен, например https://app.example.com/tonconnect-manifest.json.

Как это работает

TonConnectUIProvider — поднимает UI-коннектор и читает манифест по manifestUrl.

TonConnectButton — кнопка Connect / Disconnect из SDK; сама открывает список кошельков.

useTonAddress() — текущий адрес в user-friendly форме (пустая строка, если нет сессии).

useTonWallet() — объект кошелька или null; удобно для условного UI.

Пользователь может закрыть модалку или отклонить connect в кошельке — тогда wallet останется null. Не считай отсутствие адреса «багом сети».

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

Манифест на localhost / без HTTPS → мобильный кошелёк не загрузит JSON. Выложи манифест на публичный HTTPS или используй туннель (ngrok и т.п.) на время разработки.

Забыл обернуть дерево в TonConnectUIProvider → хуки падают или всегда пустые. Провайдер должен быть выше всех компонентов с Connect.

Читаешь адрес до connect и кэшируешь навсегда → после disconnect/смены аккаунта UI устаревает. Опирайся на хуки или onStatusChange.

Что дальше

Манифест приложения (tonconnect-manifest.json) — свой JSON вместо demo-URL
TON Proof: подтверждение владения кошельком — связать адрес с сессией бэкенда
Отправка транзакции через TON Connect — первый перевод после connect

Материалы gramdocs.tech носят образовательный характер и не являются финансовой, юридической или инвестиционной рекомендацией. Работа с блокчейном TON и токеном Gram связана с рисками потери средств. Правовая информация