Как мне получить список токенов, хранящихся в кошельке, используя TON Connect?

Как можно получить список токенов, хранящихся в кошельке пользователя, после подключения TON Connect в приложении на ReactJS (Telegram Mini Apps)?
  • 3 сентября 2024 г. 10:12
Ответы на вопрос 1
Для получения списка токенов, хранящихся в кошельке пользователя с использованием TON Connect в приложении на ReactJS (например, в Telegram Mini Apps), выполните следующие шаги:

### Шаг 1: Установка зависимостей

Если вы еще не установили библиотеку `ton-connect`, вам нужно это сделать. Вы можете использовать npm или yarn:

```bash
npm install ton-connect
```

или 

```bash
yarn add ton-connect
```

### Шаг 2: Подключение к TON Connect

После установки библиотеки, создайте экземпляр клиента TON Connect и установите слушатель для подключения. Например:

```javascript
import { TonConnect } from 'ton-connect'

const tonConnect = new TonConnect({
    name: 'Your App Name', // Укажите название вашего приложения
    bridgeUrl: 'https://bridge.ton.dev', // URL моста
    appUrl: 'https://yourapp.com', // URL вашего приложения
});

// Создание кнопки для подключения
const connectWallet = async () => {
    const wallet = await tonConnect.connect();
    // wallet теперь содержит информацию о подключенном кошельке
    console.log(wallet);
};
```

### Шаг 3: Получение списка токенов

После того, как кошелек подключен, вы можете получить список токенов, используя API TonConnect. Пример ниже иллюстрирует, как это можно сделать:

```javascript
const getTokens = async (wallet) => {
    try {
        const tokens = await wallet.getTokens();
        console.log('Список токенов:', tokens);
    } catch (error) {
        console.error('Ошибка получения токенов:', error);
    }
};

// Вызов функции после подключения кошелька
connectWallet().then((wallet) => {
    getTokens(wallet);
});
```

### Шаг 4: Обработка токенов

Полученный список токенов может выглядеть как массив объектов, содержащих информацию о каждом токене (например, адрес, количество, символ и т. д.). Вы можете отобразить его в вашем интерфейсе.

### Пример компонента

Ниже представлен простой пример React-компонента, который соединяется с кошельком и отображает список токенов:

```javascript
import React, { useState } from 'react';
import { TonConnect } from 'ton-connect';

const App = () => {
    const [tokens, setTokens] = useState([]);
    const [wallet, setWallet] = useState(null);

    const tonConnect = new TonConnect({
        name: 'Your App Name',
        bridgeUrl: 'https://bridge.ton.dev',
        appUrl: 'https://yourapp.com',
    });

    const connectWallet = async () => {
        const connectedWallet = await tonConnect.connect();
        setWallet(connectedWallet);
        getTokens(connectedWallet);
    };

    const getTokens = async (wallet) => {
        try {
            const fetchedTokens = await wallet.getTokens();
            setTokens(fetchedTokens);
        } catch (error) {
            console.error('Ошибка получения токенов:', error);
        }
    };

    return (
        <div>
            <button onClick={connectWallet}>Подключить кошелек</button>
            <ul>
                {tokens.map(token => (
                    <li key={token.address}>
                        {token.symbol}: {token.balance}
                    </li>
                ))}
            </ul>
        </div>
    );
};

export default App;
```

Этот код создаст простое приложение, которое позволяет подключить кошелек и отображает список токенов, хранящихся в нем.

### Заключение

Теперь у вас есть основы работы с TON Connect в приложении на ReactJS для получения списка токенов, хранящихся в кошельке. Не забывайте проверять документацию TON Connect на наличие обновлений и более подробной информации.
Похожие вопросы