Простое приложение 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, чтобы узнать о криптотрейдинге и инвестировании

Также читайте