📚Чтение Заметок
Библиотека TON Connect React предоставит нам некоторые полезные услуги, такие как:
- Показ конечному пользователю список поддерживаемых кошельков TON Connect 2
- Запрос кошелька пользователя для его публичного адреса
- Сделать запрос на транзакцию через кошелек
Установите библиотеку, забегая в терминале:
yarn add @tonconnect/ui-react
Когда наше приложение подключается к кошельку пользователя, мы должны предоставить пользователю некоторую информацию о личности. "Кто просит подтверждения?". Нам нужно будет идентифицировать себя с помощью файла манифеста. Кошелек запросит разрешение пользователя на подключение к приложению и отображение информации из манифеста.
Структура файла манифеста выглядит следующим образом:
Манифест должен быть общедоступным в Интернете, поэтому вы должны либо следовать моему примеру и развернуть свой пользовательский, либо на данный момент - вы можете использовать пример, который я развернул заранее во время разработки. Позже, когда мы развернем наш веб-сайт, вы должны заменить пример манифеста на ваш настоящий.
Измените файл src/main.tsx, чтобы использовать провайдера TON Connect:
Добавить кнопку подключения в приложение
Первое действие, которое мы собираемся предложить пользователю, - это подключить свой кошелек к приложению. Подключившись, пользователь соглашается поделиться своим публичным адресом кошелька с приложением. Это не очень опасно, так как вся история транзакций кошелька и его баланс в любом случае общедоступны в сети.
Отредактируйте файл src/App.tsx и замените его содержимое следующим:
import './App.css';
import { TonConnectButton } from '@tonconnect/ui-react';
function App() {
return (
<div> <TonConnectButton /> </div> );
}
export default App
The only thing our new app UI will have is the Connect button.
To run the app, run in command line:
npm run dev
Затем обновите веб-браузер, просматривая URL-адрес, отображаемый на экране. Я предполагаю, что вы используете веб-браузер на рабочем столе (где вы разрабатываете), и ваш кошелек Tonkeeper установлен на вашем мобильном устройстве. Нажмите "Подключить кошелек" на рабочем столе и выберите "Tonkeeper" (или любой другой поддерживаемый кошелек, который вы используете).
TON Connect поддерживает как мобильные потоки пользователей, так и потоки пользователей на настольных мобильных устройствах. Поскольку разработка является настольным и мобильным потоком, TON Connect будет полагаться на сканирование QR-кодов для связи с кошельком, работающим на вашем мобильном устройстве. Откройте мобильное приложение Tonkeeper, нажмите кнопку QR в правом верхнем углу и отсканируйте код с экрана рабочего стола.
Если все подключено правильно, вы должны увидеть подтверждение в мобильном приложении кошелька. Если вы одобрите соединение, вы увидите свой адрес в пользовательском интерфейсе веб-приложения!
P.S. Кредиты за вдохновение на большом коде в этом уроке идут к потрясающему Shahar Yakir from Orbs team.
