Для получения списка токенов, хранящихся в кошельке пользователя с использованием 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 на наличие обновлений и более подробной информации.