gramdocs.tech
Документация

TON Connect в чистом JS без React

Подключишь кошелёк и отправишь транзакцию через @tonconnect/ui или headless @tonconnect/sdk без React.

Без React: два пакета

Если нет React — не тащи @tonconnect/ui-react.

ПакетКогда
@tonconnect/ui ^3.0.0Нужна готовая модалка и кнопка Connect
@tonconnect/sdk ^4.0.0Свой UI с нуля или серверный/скрипт-коннектор

Манифест на HTTPS обязателен в обоих случаях.

Вариант с UI (@tonconnect/ui)

html
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <title>TON Connect vanilla</title>
  </head>
  <body>
    <div id="connect-button"></div>
    <button id="pay" type="button">Отправить 0.01 Gram</button>
    <pre id="log"></pre>

    <script type="module">
      // @tonconnect/ui ^3.0.0
      import { TonConnectUI } from "https://esm.sh/@tonconnect/ui@3.0.0";

      const log = (m) => {
        document.getElementById("log").textContent += m + "\n";
      };

      const tonConnectUI = new TonConnectUI({
        manifestUrl:
          "https://raw.githubusercontent.com/ton-connect/demo-dapp-with-react-ui/master/public/tonconnect-manifest.json",
        buttonRootId: "connect-button",
      });

      tonConnectUI.onStatusChange((wallet) => {
        log(wallet ? `connected: ${wallet.account.address}` : "disconnected");
      });

      document.getElementById("pay").onclick = async () => {
        if (!tonConnectUI.connected) {
          await tonConnectUI.openModal();
          return;
        }
        try {
          const result = await tonConnectUI.sendTransaction({
            validUntil: Math.floor(Date.now() / 1000) + 300,
            network: "-239",
            messages: [
              {
                address:
                  "EQCD39VS5jcptHL8vMjEXrzGaRcCVYto7HUn4bpAOg8xqB2N",
                amount: "10000000",
              },
            ],
          });
          log("boc: " + result.boc);
        } catch (e) {
          log("rejected or failed: " + (e?.message ?? String(e)));
        }
      };
    </script>
  </body>
</html>

Установка в бандлере:

bash
npm i @tonconnect/ui@^3.0.0

Headless SDK (кратко)

typescript
// @tonconnect/sdk ^4.0.0
import { TonConnect } from "@tonconnect/sdk";

const connector = new TonConnect({
  manifestUrl: "https://app.example.com/tonconnect-manifest.json",
});

await connector.restoreConnection();
// дальше — свой UI списка кошельков + connector.connect(...)

Headless подходит, когда рисуешь пикер кошельков сам. Для большинства сайтов и лендингов достаточно @tonconnect/ui.

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

buttonRootId — SDK монтирует кнопку Connect в указанный DOM-узел.

onStatusChange — тот же контракт, что в React-хуках.

sendTransaction / отказ пользователя — идентичны React-обёртке; лови исключения.

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

Подключаешь @tonconnect/ui-react в Vue/Svelte «просто так» → лишний runtime и боль с peer deps. Бери @tonconnect/ui.

Манифест с file:// или без CORS → кнопка есть, connect не завершается. Нужен HTTPS + доступ кошелька к JSON.

Не вызываешь restoreConnection() в headless → после F5 сессия «пропадает», хотя storage ещё жив.

Что дальше

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