Подключение вашего dApp к MetaMask — важный шаг на пути к безграничным возможностям, которые ваше приложение может открыть в Web3. Довольно просто создать собственный хук, который можно реализовать для взаимодействия с MetaMask во всем приложении.
Мы хотим достичь 3 вещей для этого проекта.
- Подключите MetaMask к приложению React.js
- Создайте пользовательский хук, чтобы отслеживать состояние вашего приложения, работающего с MetaMask.
- Оберните провайдера Web3 вокруг приложения для будущих транзакций в цепочке ETH по вашему выбору.
Конечный результат будет выглядеть примерно так:
Мы также собираемся включить возможность отключить ваше приложение от MetaMask, если это то, что хочет сделать пользователь.
Пойдем!
Давайте сначала начнем с создания нового приложения с помощью React. Я использую npx create-react-app . Я также использую VS Code для этого урока, просто чтобы отметить.
npx create-react-app react-metamask-medium && cd react-metamask && code .
Хорошо, хорошо идти! У вас должно быть простое реагирующее приложение, и если вы откроете App.js, оно должно выглядеть так:
Давайте сделаем небольшую очистку и удалим все, что нам не нужно. Я собираюсь удалить все, что находится между <header></header>, и поместить туда мой новый контент. Я собираюсь использовать существующий CSS для центрирования и удаления нового контента:
Теперь давайте добавим несколько пакетов, чтобы добавить несколько кнопок для содержимого. Я также собираюсь добавить логотип MetaMask и svg для взмаха руки, вот ссылка для скачивания, если вам интересно: metamask.svg. рука.svg
yarn add react-bootstrap [email protected]
Давайте добавим import ‘bootstrap/dist/css/bootstrap.min.css’ в наш файл index.js, а также удалим лишний код. Ваш index.js должен выглядеть так:
Теперь давайте добавим кнопки в приложение, чтобы мы могли подключиться к MetaMask.
Теперь нам нужно создать пользовательский хук, который мы можем использовать для вызова подключения и отключения этих кнопок. Этот настраиваемый хук также будет отслеживать состояние нашего приложения и предоставлять любые необходимые нам данные, такие как информация об учетной записи или баланс.
Мы должны создать папку с именем hooks и добавить useMetaMask.js для пользовательского хука, поэтому наша структура папок выглядит следующим образом: src/hooks/useMetaMask.js
Чтобы отслеживать состояние этого хука на протяжении всего жизненного цикла приложения, нам придется использовать createContext React.
Это слишком сложно, но для простого котла, который мы будем заполнять, см. следующий код:
Для этого компонента нам понадобится следующее из React, useState, useEffect, useMemo и useCallback.
Нам также потребуется использовать хук useWeb3React @web3-react/core, а также создать новый компонент с именем injected. Этот внедренный компонент будет использовать web3-react/injected-connector для подключения поддерживаемых цепочка к приложению и MetaMask.
Запустим следующее:
yarn add @web3-react/injected-connector @web3-react/core
Далее давайте начнем заполнять наш новый хук useMetaMask для работы с нашим приложением. Для этого мы поместим весь наш код внутрь компонента MetaMaskProvider.
Сначала мы хотим добавить хук useWeb3React для сбора некоторых важных ресурсов для подключения к MetaMask.
const { activate, account, library, connector, active, deactivate } = useWeb3React()
Я также начинаю создавать определенные состояния, которые хочу отслеживать, например isActive и isLoading.
isLoading будет полезен, чтобы узнать, когда хук useMetaMask загружается, чтобы прочитать его соединение с MetaMask. isActive будет полезен, чтобы узнать, подключен ли MetaMask в настоящее время к приложению с правильной цепочкой, которую я разрешаю внутри приложения.
const [isActive, setIsActive] = useState(false)
const [isLoading, setIsLoading] = useState(true)
Чтобы увидеть полный код этого кастомного хука, нажмите здесь.
Затем я должен создать свой внедренный компонент, который будет использоваться для подключения MetaMask к конкретным цепочкам, которые я хочу использовать с моим приложением.
Я создам папку с именем src/components/wallet/injected.js, чтобы поместить в нее файл внедренного компонента. Код прост:
import { InjectedConnector } from ‘@web3-react/injected-connector’
export const injected = new InjectedConnector({ supportedChainIds: [1, 42, 1337] })
supportedChainIds поможет убедиться, что MetaMask подключен к правильным цепочкам, которые использует мое приложение, иначе он не будет отображаться как активный в нашем пользовательском хуке.
Для получения дополнительной поддержки идентификаторов цепочек см. https://chainlist.org/
1 = Ethereum Mainnet
42 = Kovan Testnet — который я буду использовать для подключения в следующей статье с использованием Web3 и Infura, который пригодится, выполняет простые простые транзакции для тестирования моего приложения.
1337 = Локальная цепочка хостов. Для этого я использовал Ganache, чтобы создать локальную сеть и подключиться к своему кошельку MetaMask.
Теперь вернемся к нашему хуку useMetaMask.
Мы хотим использовать useEffect без зависимости, которая будет запускаться один раз при инициализации хука. Внутри этого хука useEffect появится функция connect() для инициализации подключения к приложению и MetaMask при первом запуске приложения:
Эти функции при вызове помогут подключить и отключить кошелек к приложению. Я использую их как функцию useCallback, потому что я не хочу, чтобы они повторно отображали больше, чем нужно в приложении, только когда они вызываются.
Далее давайте создадим функцию handleIsActive, чтобы проверить, подключен ли MetaMask к нашему приложению. Я собираюсь использовать useCallback для этого и добавить свойство active из нашего хука useWeb3React в качестве зависимости для обновления нашего хука при подключении MetaMask. и отключился от нашего приложения. Обычно это происходит потому, что пользователь переключает учетные записи в MetaMask для цепочки, которая не была связана с нашим приложением:
Я также создал обработчик useEffect, который будет зависеть от handleIsActive и запускать эту функцию только тогда, когда active изменяется внутри обратного вызова handleIsActive. Это будет обновлять наше приложение каждый раз, когда оно становится активным true или false. Отключение MetaMask от нашего приложения также приведет к тому, что active станет ложным.
Наконец, чтобы убедиться, что пользовательский хук useMetaMask обновляет остальную часть нашего приложения соответствующим образом, если какие-либо из его зависимостей изменяются, мы будем использовать useMemo для соответствующего изменения свойств нашего хука. Мы делаем это, чтобы остальная часть приложения могла определить, обновлено ли isActive или isLoading. Также это даст доступ к нашим функциям connect и disconnect, а также к нашей учетной записи. Они будут пересматриваться только при изменении необходимых зависимостей, таких как isActive и isLoading:
Круто теперь хорошо идти. Чтобы проверить полный исходный код этого пользовательского хука, нажмите здесь
Последний шаг — использовать Web3ReactProvider вокруг нашего существующего приложения, а также использовать наш MetaMaskProvider, чтобы обернуть приложение, чтобы мы могли постоянно иметь состояние нашего пользовательского хука. .
Наконец, нам нужно добавить нашу последнюю зависимость:
yarn add web3
Как только мы обернем приложение в index.js и будем использовать все, оно должно выглядеть так:
Причина закрытия приложения заключается в том, что Web3ReactProvider — это то, от чего зависит наш хук useWeb3React, а также прокладывает путь для использования Web3 и взаимодействия с наше приложение.
Использование MetaMaskProvider вокруг нашего <App /> дает нам возможность сохранять состояние нашего пользовательского хука во всем приложении.
Затем мы можем вернуться к нашему App.js и использовать созданный нами пользовательский хук.
Добавьте следующее в наше приложение:
const { connect, disconnect, isActive, account } = useMetaMask()
Также мы должны поместить следующее рядом с нашей Подключенной учетной записью:
{ isActive ? account : ‘’ }
Это сообщит нашему приложению, подключена ли учетная запись, а затем покажет информацию об учетной записи. Если нет, показать пустую строку.
Мы также должны подключить наши кнопки для подключения и отключения функций от нашего хука useMetaMask.
Конечный результат будет выглядеть следующим образом:
Вот как наше приложение будет выглядеть при запуске:
Право на! Что ж, спасибо за кодирование вместе со мной! Пожалуйста, ознакомьтесь с полным исходным кодом здесь: https://github.com/blakewood84/react-metamask-medium
Пожалуйста, не стесняйтесь обращаться ко мне в LinkedIn в любое время, если вас интересуют проекты или обсуждение кода! https://www.linkedin.com/in/blakewoodjr/
Большое спасибо! Благословить
Присоединяйтесь к Coinmonks Telegram Channel и Youtube Channel, узнайте о криптотрейдинге и инвестировании
