Отключение сессии и повторное подключение

Сбросишь сессию TON Connect через disconnect, обработаешь смену аккаунта и безопасно переподключишь кошелёк.

Сессия ≠ навсегда

После Connect SDK хранит сессию (часто в localStorage) и может восстановить кошелёк при перезагрузке страницы. Disconnect рвёт эту сессию: dApp больше не считает адрес подключённым, повторные действия требуют нового подтверждения в кошельке.

Нужен и явный выход пользователя, и реакция на смену аккаунта / внешнего disconnect.

Disconnect и слежение за статусом

// @tonconnect/ui-react ^3.0.0
import { useEffect, useState } from "react";
import {
  TonConnectButton,
  useTonConnectUI,
  useTonWallet,
} from "@tonconnect/ui-react";

export function SessionControls() {
  const [tonConnectUI] = useTonConnectUI();
  const wallet = useTonWallet();
  const [hint, setHint] = useState("");

  useEffect(() => {
    const unsubscribe = tonConnectUI.onStatusChange((w) => {
      if (!w) {
        setHint("Сессия TON Connect сброшена");
        // здесь же чисти свою app-сессию / JWT, если логин был через ton_proof
        return;
      }
      setHint(`Активен: ${w.account.address}`);
    });
    return () => unsubscribe();
  }, [tonConnectUI]);

  async function disconnect() {
    if (!wallet) return;
    await tonConnectUI.disconnect();
  }

  async function reconnect() {
    if (wallet) {
      await tonConnectUI.disconnect();
    }
    await tonConnectUI.openModal();
  }

  return (
    <div>
      <TonConnectButton />
      <button type="button" onClick={disconnect} disabled={!wallet}>
        Выйти
      </button>
      <button type="button" onClick={reconnect}>
        Сменить кошелёк
      </button>
      <p>{hint}</p>
    </div>
  );
}

TonConnectButton уже умеет disconnect из своего меню — кастомные кнопки нужны, когда выход вплетён в твой UX (профиль, «сменить аккаунт»).

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

disconnect() — асинхронно завершает сессию; хуки (useTonWallet, useTonAddress) станут пустыми.

onStatusChange — единая точка: connect, reconnect, disconnect, смена аккаунта.

Повторный Connect после disconnect — снова модалка / QR; это не «тихий» restore той же сессии.

Если использовал ton_proof для логина на бэкенде — при wallet === null инвалидируй серверную сессию, иначе останется доступ «по старому cookie» без кошелька.

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

Чистишь только React state, не вызываешь disconnect() → после F5 сессия восстанавливается из storage, пользователь «снова внутри».

Не слушаешь onStatusChange → пользователь сменил аккаунт в кошельке, а UI шлёт tx от старого адреса в своём state.

После disconnect сразу шлёшь sendTransaction → получишь «Wallet not connected». Сначала дождись нового connect.

Что дальше

• TON Proof: подтверждение владения кошельком — связать disconnect с logout на бэкенде
• Ошибка: TON Connect — Wallet not connected — типичный симптом после сброса сессии
• Подключение кошелька через @tonconnect/ui-react — базовый Connect UI

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