Solidity и ReactJS: Web3 сайт для криптовалюты

Этот урок описывает разработку пользовательского интерфейса для взаимодействия с собственной криптовалютой, используя ReactJS и Web3.0. Мы создадим одностраничный сайт, позволяющий просматривать баланс кошелька и переводить средства с одного кошелька на другой с помощью MetaMask.

Подготовка проекта

Перед началом работы рекомендуется ознакомиться с кодом и домашними заданиями на сайте itproger.com (ссылка на соответствующий урок будет предоставлена).

Для упрощения проекта оставим один контракт, соответствующий токену стандарта ERC20. Удалим следующие файлы и папки:

artifacts (кроме необходимых для ERC20 токена)
cache
contracts/YourOldContract.sol (замените YourOldContract.sol на имя вашего старого контракта)
migrations
deployment
log.js

После удаления лишних файлов выполним компиляцию:

npx hardhat compile

Для повышения безопасности добавим в hardhat.config.js настройку адреса сети.

Далее, запустим локальную сеть Hardhat и развернём токен:

npx hardhat node
npx hardhat run scripts/deploy.js

Важно: не закрывайте терминал с запущенной сетью Hardhat, иначе работа с тестовыми аккаунтами станет невозможна.

Создание пользовательского интерфейса

Создадим папку public для файлов дизайна сайта. Затем, используя следующие команды, создадим ReactJS проект и установим библиотеку Web3:

cd public
npx create-react-app .
npm install web3

Создадим файлы proger.json и proger.js в папке src.

proger.json: Этот файл будет содержать настройки токена, скопированные из файла artifacts/contracts/<имя_контракта>.sol/Proger.json. Замените <имя_контракта> на фактическое имя вашего контракта.
proger.js: Этот файл описывает подключение к смарт-контракту и аккаунту. Он импортирует proger.json, создаёт объект proger с ключами abi (из proger.json) и networks (содержащий chainId для локальной сети Hardhat (31337) и адрес развернутого токена). Адрес токена можно найти в выводе команды npx hardhat run scripts/deploy.js.

Разработка файла app.js

В файле app.js удалим весь код и напишем новый. Импортируем необходимые модули: React, Web3, proger.js, и app.css.

Создадим функцию App со следующими состояниями:

web3: Экземпляр Web3.
accounts: Адрес аккаунта.
balance: Баланс аккаунта.
recipient: Адрес получателя.
amount: Сумма перевода.

В HTML коде отобразим информацию об аккаунте, балансе и форму для перевода токенов с полями ввода для адреса получателя (recipient) и суммы (amount). К форме добавим кнопку отправки.

Реализуем useEffect для загрузки Web3 и данных из блокчейна. Функция loadWeb3 проверяет наличие Ethereum-провайдера (например, MetaMask) и создаёт экземпляр Web3. Функция загрузки данных из блокчейна получает список аккаунтов, ID сети и баланс токенов. Если контракт не развёрнут в текущей сети, выводится соответствующее сообщение.

useEffect(() => {
  if (web3) {
    loadDataFromBlockchain();
  } else {
    initiateWeb3();
  }
}, [web3]);

Создадим функцию transferTokens, которая вызывается при отправке формы. Она получает ID сети, проверяет наличие данных о сети для контракта, создаёт экземпляр контракта и выполняет перевод токенов. После успешного перевода, обновляем баланс.

Тестирование приложения

Запустим приложение командой npm start из папки public. Для работы приложения необходима установленная и авторизованная программа MetaMask. После авторизации, на сайте отобразятся адрес и баланс аккаунта.

Для тестирования перевода токенов используем адреса аккаунтов, предоставленные Hardhat командой npx hardhat node. Адреса можно получить, выполнив в консоли Hardhat команду ethers.provider.getSigner().getAddress(). Введите адрес получателя, сумму и подтвердите перевод в MetaMask.

В этом уроке мы создали функциональный Web3.0 веб-сайт для взаимодействия с нашей криптовалютой. Сайт позволяет проверять баланс и переводить токены с использованием MetaMask. В следующем уроке мы обсудим выгрузку монеты в общий доступ.