Как правильно подключить TonConnect UI CDN, вывести номер кошелька и передать payload?

Question

Игнат

javascript , ajax , cdn

Как правильно подключить TonConnect UI CDN, вывести номер кошелька и передать payload?

Как правильно подключить <b>TonConnect UI CDN</b>, вывести номер кошелька, и корректно передать <b>payload</b>? <br/> <br/> <b>Процесс подключения скрипта:</b> <br/> <pre><code class="html">&lt;script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"&gt;&lt;/script&gt;</code></pre> <br/> <br/> <b>Инициализация:</b> <br/> <pre><code class="javascript">const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
        manifestUrl: 'сайт/tonconnect-manifest.json'
      });</code></pre> <br/> <br/> 1️⃣ <i>Как можно отобразить номер подключенного кошелька?</i> <br/> 2️⃣ <i>Как правильно сформировать и передать (payload)?</i> <br/> <br/> <b>Мой обработчик событий:</b> <br/> <pre><code class="javascript">$(document).on('click', 'a.tza', function (e) {
        e.preventDefault();
        let id = $(this).attr("data-id");
        let axresult = $(this).siblings('.ax-result')

        let formData = new FormData();
        formData.append('id', id);

        App.sendAx('/ax/pool/buy', formData, {
          silence: true,

          successFunction: function (d) {

            window.transactionData = {
              validUntil: Math.floor(Date.now() / 1000) + 60,
              messages: [{
                address: 'gfgfdgfdgfdgfdgfdgfdgdfg',
                amount: '0.001',
                payload: 'Hello Word'
              }]
            };

            if (!tonConnectUI.connected) {
              tonConnectUI.onStatusChange(wallet =&gt; {
                if (wallet) {
                  tonConnectUI.sendTransaction(window.transactionData);
                }
              });
            } else {
              tonConnectUI.sendTransaction(window.transactionData);
            }
          },

15 марта 2025 г. 15:34

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для того чтобы корректно подключить TonConnect UI через CDN, вывести номер подключенного кошелька и передать payload, следуйте приведённым ниже шагам.

### Подключение TonConnect UI

1. **Подключите скрипт TonConnect UI** (как вы уже указали):

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

2. **Инициализируйте TonConnect UI** с указанием URL вашего манифеста:

```javascript
const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
    manifestUrl: 'сайт/tonconnect-manifest.json'
});
```

### Вывод номера кошелька

Чтобы отобразить номер подключенного кошелька, вы можете использовать событие `onStatusChange`, которое срабатывает при изменении состояния подключения. Например, после успешного подключения:

```javascript
tonConnectUI.onStatusChange(wallet => {
    if (wallet) {
        // wallet.address содержит адрес кошелька
        document.getElementById('wallet-address').innerText = wallet.address;
    }
});
```

В этом примере предполагается, что у вас в HTML есть элемент с id `wallet-address`, где будет отображаться адрес кошелька.

### Формирование и передача payload

Вы уже создали payload как объект, который содержит информацию о транзакции. Просто убедитесь, что вы правильно формируете объект `transactionData`. Например:

```javascript
window.transactionData = {
    validUntil: Math.floor(Date.now() / 1000) + 60, // действителен в течение 1 минуты
    messages: [{
        address: 'gfgfdgfdgfdgfdgfdgfdgdfg', // адрес получателя
        amount: '0.001', // сумма
        payload: 'Hello World' // ваш payload
    }]
};
```

Затем, как вы и сделали, отправьте транзакцию:

```javascript
if (!tonConnectUI.connected) {
    tonConnectUI.onStatusChange(wallet => {
        if (wallet) {
            tonConnectUI.sendTransaction(window.transactionData);
        }
    });
} else {
    tonConnectUI.sendTransaction(window.transactionData);
}
```

### Полный код

Вот как может выглядеть полный пример с учетом всех вышеперечисленных шагов:

```html
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>TonConnect Example</title>
    <script src="https://unpkg.com/@tonconnect/ui@latest/dist/tonconnect-ui.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<div>
    <span>Адрес кошелька:</span>
    <span id="wallet-address"></span>
</div>
<a class="tza" data-id="your-id">Подключить кошелек</a>
<div class="ax-result"></div>

<script>
    const tonConnectUI = new TON_CONNECT_UI.TonConnectUI({
        manifestUrl: 'сайт/tonconnect-manifest.json'
    });

    $(document).on('click', 'a.tza', function (e) {
        e.preventDefault();
        let id = $(this).attr("data-id");
        let axresult = $(this).siblings('.ax-result');
        
        let formData = new FormData();
        formData.append('id', id);

        App.sendAx('/ax/pool/buy', formData, {
            silence: true,
            successFunction: function (d) {
                window.transactionData = {
                    validUntil: Math.floor(Date.now() / 1000) + 60,
                    messages: [{
                        address: 'gfgfdgfdgfdgfdgfdgfdgdfg',
                        amount: '0.001',
                        payload: 'Hello World'
                    }]
                };

                if (!tonConnectUI.connected) {
                    tonConnectUI.onStatusChange(wallet => {
                        if (wallet) {
                            document.getElementById('wallet-address').innerText = wallet.address;
                            tonConnectUI.sendTransaction(window.transactionData);
                        }
                    });
                } else {
                    tonConnectUI.sendTransaction(window.transactionData);
                }
            }
        });
    });

    // Обработчик для обновления адреса кошелька
    tonConnectUI.onStatusChange(wallet => {
        if (wallet) {
            document.getElementById('wallet-address').innerText = wallet.address;
        }
    });
</script>

</body>
</html>
```

### Обратите внимание:
- Замените `сайт/tonconnect-manifest.json` на корректный URL