Как интегрировать кошелек Web3 в ReactJS
Итак, прежде чем начать, есть некоторые моменты, которые нам нужно понять.
ℹ️Web3 Wallet — это в основном децентрализованный кошелек, который поддерживает ваш баланс и закрытый ключ для подписи (аутентификации).
Мы можем использовать эти популярные кошельки Web3:
🔸Metamask
🔸Coinbase Wallet
🔸Binance Wallet
🔸Bitkeep Wallet
🔸любой кошелек, поддерживающий функцию Wallet Connect.
Что научимся интегрировать:
🔹коннект кошелька и просмотр баланса
🔹отображение в ETH/BNB/MATIC)
🔹взаимодействие со смарт-контрактом и чтения/записи.
🔹просмотр лога смарт-контракта
Мы создаем простой проект ReactJS с помощью этой команды
npx create-react-app sample-web3
Мы создаем смарт-контракт на Rinkeby с переменной и геттером, сеттером и событием для отправки после изменения переменной.
Нужно использовать ethers.js библиотеку для подключения сервисов блокчейна к ReactJS.
sudo npm install ethers
Подключение кошелька Web3 и просмотр баланса
Во-первых, мы должны проверить, включен ли внедренный Web3.
Для запроса на подключение кошелька
Перевод в нативные монеты (ETH/BNB/MATIC)
Нам нужен закрытый ключ отправителя для перевода актива, и мы получаем транзакционный хеш, который мы можем проверить в соответствующем эксплореле.
Взаимодействие со смарт-контрактом и вызовом методов чтения/записи
- Сначала мы должны создать экземпляр.
- Получить ABI из проводника (перейдите на вкладку контракта), как показано на изображении ниже.
Напишите открытый метод (для метода записи мы создадим экземпляр с закрытым ключом подписывающей стороны)
Просмотр событий смарт-контракта
