Простое приложение React, показывающее, как подключить браузерные кошельки с помощью useDapp и ethers.js
Прочитав эту статью, вы узнаете, как подключить браузерный кошелек к вашему веб-приложению. Я буду краток, насколько смогу. Чтобы запустить проект, мы будем использовать приложение Create React.
$ npx create-react-app connect-wallet $ cd connect-wallet
Примечание. Если вы здесь только ради кода, вы можете взять его с моего GitHub. Кроме того, вы найдете файлы CSS, отсутствующие в статье.
Примечание 2. Чтобы следовать этой статье, должно быть достаточно базовых знаний JavaScript. Также вам понадобятся node.js и npm на вашем компьютере. В противном случае вы не сможете вызывать приведенные выше команды.
Установите useDapp и ethers.js
В нашем проекте мы будем использовать две специализированные библиотеки для web3: useDapp и Ethers.js. Чтобы установить их, введите в своем терминале:
$ npm install @usedapp/core ethers
Добавьте useDapp в проект.
Чтобы включить библиотеку useDapp в нашем проекте, мы должны обернуть наше приложение с помощью DAppProvider. Базовая установка выглядит так:
Важные части приведенных выше фрагментов:
- config устанавливает конфигурацию,
- DAppProvider позволяет использовать приложение во всем приложении.
Добавьте фронтенд.
Не будем усложнять. Вся наша фронтальная часть будет выглядеть так.
Давайте разберем это:
- наше приложение состоит всего из двух компонентов; заголовок и кнопка,
- мы используем тернарный оператор, причудливое название синтаксиса со знаком вопроса (?). Он нужен нам для настройки кнопки и отображаемого текста,
- мы отображаем различные типы кнопок в зависимости от того, есть ли подключенная учетная запись.
Запустите Фронтенд.
Чтобы запустить приложение, введите в своем терминале:
$ npm start
Затем откройте http://localhost:3000
в браузере. Вы должны увидеть этот базовый макет:
Подключите браузерный кошелек.
Примечание. Я предполагаю, что у вас уже есть кошелек в расширениях браузера.
Конечно, мы хотим подключить кошелек. Нажатие кнопки «Подключить» вызывает функцию activateBrowserWallet()
. Давайте посмотрим на это в действии.
Идеальный! Наша кнопка подключения работает нормально. Позвольте мне сломать, что происходит:
- Я нажимаю «Подключиться» и звоню
activateBrowserWallet()
- всплывает окно MetaMask,
- Я выбираю учетную запись, которую хочу подключить к своему приложению, и нажимаю «Далее».
- Я подтверждаю, что хочу подключиться к своему приложению,
- мой аккаунт подключен.
Посмотрим, что произойдет, когда мы отключимся.
Когда мы нажимаем кнопку «Отключить», мы вызываем функцию deactivate()
. Он устанавливает для переменной account
значение undefined. Но когда мы снова пытаемся подключиться, всплывающего окна MetaMask больше нет. Это потому, что Metamask помнит, что мы подключили аккаунт к приложению. Это экономит время. Используя приложение Web 3, вы не хотите всегда подтверждать, что разрешаете MetaMask использовать приложение.
Чтобы отключить приложение, мы должны сделать это в самом MetaMask. Позвольте мне показать вам, как это сделать.
После отключения через MetaMask возвращаемся к началу. В следующий раз, когда вы нажмете «Подключиться», MetaMask снова появится, чтобы запросить ваше подтверждение.
Последние мысли
Вот оно! Вы узнали, как подключить браузерный кошелек к вашему приложению с помощью библиотеки useDapp. Хотя библиотека практична, она имеет чистую документацию. Я надеюсь, что его разработчики позаботятся об этом в ближайшее время.
Подключения кошелька недостаточно для создания приложения Web 3. Однако я не могу представить человека без этой способности.
Присоединяйтесь к Каналу Telegram и Каналу Youtube Coinmonks, чтобы узнать о криптотрейдинге и инвестировании
Также читайте
- Обзор 3Commas | Обзор Pionex | Обзор Coinrule
- Ledger vs Ngrave | Ledger nano s vs x | Binance Review
- Обзор биржи Bybit | Обзор Bityard | Обзор Jet-Bot
- 3Commas vs Cryptohopper | Зарабатывайте крипто проценты
- Лучший биткойн Аппаратный кошелек | Обзор BitBox02
- BlockFi vs Celsius | Обзор Hodlnaut | Обзор KuCoin