Перейти к основному содержимому

TON Connect для JS

warning

Эта страница переведена сообществом на русский язык, но нуждается в улучшениях. Если вы хотите принять участие в переводе свяжитесь с @alexgton.

Это руководство поможет вам интегрировать TON Connect в ваше Javascript приложение для аутентификации пользователей и подтверждения транзакций.

Если вы используете React для своего DApp, взгляните на TON Connect UI React SDK.

Реализация​

Установка​

Добавьте скрипт в элемент HEAD вашего веб-сайта:



<script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>

Начало работы TON Connect​

После установки пакета создайте файл manifest.json для вашего приложения. Более подробную информацию о том, как создать файл manifest.json, можно найти здесь.

Добавьте кнопку с идентификатором ton-connect для подключения к кошельку:

<div id="ton-connect"></div>

После этого тега добавьте скрипт для tonConnectUI в секцию <body> страницы вашего приложения:

<script>
    const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
        manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
        buttonRootId: 'ton-connect'
    });
</script>

Подключение к кошельку​

Кнопка "Connect" (добавленная в buttonRootId) автоматически обрабатывает нажатия.

Но вы можете программно открыть "connect modal", например, после нажатия на пользовательскую кнопку:

<script>
    async function connectToWallet() {
        const connectedWallet = await tonConnectUI.connectWallet();
        // Do something with connectedWallet if needed
        console.log(connectedWallet);
    }

    // Call the function
    connectToWallet().catch(error => {
        console.error("Error connecting to wallet:", error);
    });
</script>

Перенаправления​

Настройка стратегии возврата​

Чтобы перенаправить пользователя на конкретный URL после подключения, вы можете настроить стратегию возврата.

Мини-приложения Telegram​

Чтобы перенаправить пользователя в Мини-приложение Telegram после подключения кошелька, используйте параметр twaReturnUrl:

tonConnectUI.uiOptions = {
      twaReturnUrl: 'https://t.me/YOUR_APP_NAME'
  };

Подробнее читайте в документации SDK

Настройка пользовательского интерфейса​

TonConnect UI предоставляет интерфейс, который должен быть знаком и узнаваем пользователю при использовании различных приложений. Однако разработчик приложения может изменить этот интерфейс, чтобы он соответствовал интерфейсу приложения.

Документация SDK​

Использование​

Давайте рассмотрим пример использования TON Connect UI в приложении.

Отправка сообщений​

Вот пример отправки транзакции с использованием TON Connect UI:

import TonConnectUI from '@tonconnect/ui';

const tonConnectUI = new TonConnectUI({ //connect application
    manifestUrl: 'https://<YOUR_APP_URL>/tonconnect-manifest.json',
    buttonRootId: '<YOUR_CONNECT_BUTTON_ANCHOR_ID>'
});

const transaction = {
  validUntil: Math.floor(Date.now() / 1000) + 60, // 60 sec
  messages: [
        {
            address: "EQABa48hjKzg09hN_HjxOic7r8T1PleIy1dRd8NvZ3922MP0", // destination address
            amount: "20000000" //Toncoin in nanotons
        }
    ]
}

const result = await tonConnectUI.sendTransaction(transaction)

Понимание статуса транзакции по хэшу​

Принцип описан в разделе Обработка платежей (с использованием tonweb). Подробнее

Подпись и проверка​

Узнайте, как подписывать и проверять сообщения с помощью TON Connect:

Отключение кошелька​

Вызов для отключения кошелька:

await tonConnectUI.disconnect();

См. также​