В этой статье вы узнаете, как настроить приложение Web3 с помощью Solidity, Hardhat, React и Web3.js библиотека. Хотя наше приложение будет выглядеть простым, оно будет иметь большую ценность. Вы узнаете, как соединить точки приложения Web3. В будущем вы можете использовать его как отправную точку для более сложных проектов.

Примечание. Если вы здесь только ради кода, вы можете взять его с моего GitHub. Кроме того, вы найдете файлы CSS, отсутствующие в статье.

Примечание 2. Чтобы следовать этой статье, должно быть достаточно базовых знаний JavaScript. Также вам понадобятся node.js и npm на вашем компьютере. В противном случае вы не сможете вызывать приведенные выше команды.

Самый удобный способ тестирования приложений Web 3 — запустить локальную цепочку блоков. Это быстрее, чем настоящие сети, и предоставляет трассировку стека Solidity и сообщения об ошибках. Для запуска локальной цепочки блоков мы будем использовать сеть Hardhat.

Давайте погрузимся в наш проект!

Подготовка смарт-контракта.

Воспользуемся образцом контракта от Hardhat.

Чтобы использовать каску для своих проектов, вы должны установить ее с помощью npm

$ npm install hardhat

После этого вы сможете использовать команды каски. Разработчики Hardhat рекомендуют использовать npx hardhat [options] в своих проектах. Однако сначала мы должны инициализировать проект. Откройте терминал и введите:

$ npx hardhat

Вы должны увидеть что-то вроде этого:

Для простоты мы будем использовать базовый пример проекта. Выберите эту опцию и нажмите Enter. Вам нужно будет выбрать еще несколько параметров:

✔ What do you want to do? · Create a basic sample project
✔ Hardhat project root: -  <you can just press enter>
✔ Do you want to add a .gitignore? (Y/n)- <I usually press ‘y’ because it’s going to my github>
✔ Do you want to install this sample project’s dependencies with npm (hardhat @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers ethers)? (Y/n)-  <press ‘y’ because we’ll need them>

На данный момент у нас есть базовый проект каски с образцом смарт-контракта. Проверьте contracts/Greeter.sol, чтобы найти его. В scripts/sample-script.js, есть скрипт для развертывания контракта. Нам понадобятся следующие шаги:

  • Скомпилируйте контракт. Для взаимодействия с нашим контрактом из Frontend нам нужны две вещи: ABI контракта и Адрес контракта. Подробнее об этом я писал в этой статье. Чтобы скомпилировать тип контракта в вашем терминале:
$ npx hardhat compile

Это создаст два файла в папке artifacts/contracts/Greeter.sol/. ABI контракта находится в файле Greeter.sol. Позже мы будем использовать его в нашем интерфейсе.

  • Запустите узел Hardhat. Как я уже объяснял, запускать локальный блокчейн целесообразно. К счастью, Hardhat позволяет нам сделать это с помощью простой команды:
$ npx hardhat node

Вы должны увидеть что-то вроде этого:

По умолчанию он создает локальную цепочку блоков с 20 учетными записями. Если вы прочитаете сообщение, выделенное зеленым цветом, вы найдете местоположение. По умолчанию это порт 8545. Перейдем к следующему шагу.

  • Развернуть контракт. Для этого мы будем использовать ранее упомянутый скрипт.

Важно! Откройте новый терминал. Важно, чтобы узел из предыдущего шага оставался работающим.

$ npx hardhat run scripts/sample-script.js — network localhost

Если он работает правильно, вы должны увидеть сообщение в своем терминале:

Greeter deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3

Обратите внимание, что адрес контракта может отличаться. Если вы сохранили наш локальный узел каски работающим, вы должны найти там следующий вывод:

Во второй строке мы видим тот же адрес контракта, что и раньше. У нас есть договор ABI и адрес. Итак, мы готовы перейти к Frontend части!

Построение фронтенда.

Запуск простого приложения React.

Как всегда, мы должны начать с установки. Давайте создадим проект React.

$ npx create-react-app my-project
$ cd my-project

Это распространенный способ запуска проектов React. Он устанавливает множество необходимых зависимостей и позволяет нам запускать сценарии React. Кроме того, в src/App.js это отправная точка нашего приложения. Чтобы запустить приложение, введите в терминале:

$ npm start

Затем откройте http://localhost:3000 в своем браузере, и вы увидите.

Добавление Web3.js в проект.

Чтобы добавить часть Web 3, мы установим библиотеку web3.js.

$ npm install web3

Затем мы должны импортировать его в App.js вот так.

Исправление импорта Web3.

К сожалению, по состоянию на апрель 2022 года этот импорт не работает. В этом ответе на StackOverflow я нашел два обходных пути. Давайте воспользуемся первым, который требует понижения реагирующих скриптов до 4-й версии. Нам нужно три шага:

  1. Удалите папку node_modules.
  2. В package.json обновите строку с реактивными скриптами до "react-scripts”: “4.0.3”
  3. Снова установите модули узла, набрав $ npm install в своем терминале.

Добавление ABI контракта и адреса.

Помните, я говорил вам, что нам нужен ABI контракта и адрес для взаимодействия с ним? Пришло время добавить их в наш проект. Мой любимый способ сделать это — создать utils в папке src. Затем я добавляю в него следующие файлы:

-utils/
 |- constants.js
 |- Greeter.json

Greeter.json — это файл, который мы создали с помощью Hardhat. Итак, из проекта Hardhat мы копируем файл artifacts/contracts/Greeter.sol/Greeter.json и вставляем его в папку src/utils/. Затем в constants.js добавляем:

Круто, у нас есть контрактный ABI и адрес в нашем приложении React. Они нужны нам для создания экземпляра контракта из web3.js. Опять же, адрес контракта исходит из части развертывания.

Создание контракта web3.

На данный момент у нас есть все для создания нового контракта. Давайте обновим верхнюю часть файла App.js.

Мы разделим процесс на следующие этапы:

  • создание экземпляра web3. Написав new Web("ws://localhost:8545") мы передаем провайдера. В нашем случае это локальный узел, который мы запустили ранее. Мы хотим подключиться через WebSocket, поэтому пишем ws://… вместо http://...
  • создание нового экземпляра контракта. Вот тогда мы, наконец, сдаем договор ABI и обращаемся.

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

Важно! Не забудьте запустить узел Hardhat в консоли. Без него WebSocket не сможет подключиться.

Вызов общедоступных функций просмотра.

Давайте посмотрим на контракт Greeter.

Он имеет две функции:

  • function greet() public view … {} Ключевое слово представление имеет решающее значение. Это указывает на то, что greet() является функцией только для чтения. Это означает, что мы не будем ничего менять в блокчейне.
  • function setGreeting(string memory _greeting) public {} В отличие от предыдущего примера, setGreeting() направлен на изменение значений в блокчейне.

Начнем с первой функции. Мы готовим кнопку для вызова функции greet() нашего смарт-контракта. Для этого мы создаем функцию greetMe() в JavaScript. Он вызывает функцию greet() из Solidity и возвращает ее значение. Базовый пример будет выглядеть так:

const greetMe = async () => {
  const greetMsg = await greeterContract.methods.greet().call();
  return greetMsg;
}

Как видите, мы используем экземпляр контракта, созданный на предыдущем шаге. Как это выглядит в браузере?

Наше «Приветствуйте меня!» Кнопка вызывает функцию greetMe() в JavaScript. Затем мы отображаем возвращенное значение. Хотя функция короткая, следует упомянуть две важные вещи:

  • это асинхронно. Обратите внимание на обозначения async и await. Мы должны дождаться ответа от нашего контракта перед выполнением следующей строки кода,
  • чтобы вызвать функцию контрактов, мы должны использовать имя контракта, ключевое слово methods, имя функции и ключевое слово call().

Изменение значений в блокчейне.

Вы уже знаете, как читать данные из блокчейна. Но что, если вы хотите обновить данные, т. е. изменить состояние блокчейна? Наша функция setGreeting() в Solidity позволяет нам это сделать. Позвольте мне показать вам, как выполнение этой функции выглядит в JavaScript.

await greeterContract.methods.setGreeting(newGreetings).send(
{ from: ‘0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266’ })

Давайте посмотрим поближе:

  • нам нужно ключевое слово await, потому что мы должны дождаться ответа от нашего блокчейна, прежде чем двигаться дальше,
  • меняем переменную greetings на значение newGreetings,
  • мы используем ключевое слово send() вместо call() из предыдущего примера,
  • мы передаем адрес вызывающего абонента после ключа from. Я захватил первого пользователя с нашего узла Hardhat.

Каждый раз, когда мы меняем состояние блокчейна, мы совершаем транзакцию. Мы должны сообщить другим узлам блокчейна: «Привет, я [адрес] пытаюсь изменить это значение. Надеюсь, вы не возражаете…» Каждая транзакция в блокчейне требует платы за газ.

Хорошо, давайте посмотрим, как работает обновление значений Blockchain в нашем проекте. После внесения необходимых изменений в часть JavaScript файл App.js выглядит следующим образом.

Позвольте мне разбить новые части:

  • мы добавили функцию updateGreets() для вызова setGreetings() в наш смарт-контракт,
  • мы используем два общих хука React: useState и useEffect. Последний устанавливает начальное приветствие после загрузки страницы. Первый позволяет нам обновлять состояние нашего приложения React. Я призываю вас узнать больше о хуках React.

Хорошо, мы закончили проект. Как это выглядит в браузере?

Последние мысли

Потрясающий! Если вы все еще читаете, вы многому научились! Хотя наш проект не выглядит впечатляющим, он учит, как соединить точки приложения Web 3.

Есть вопросы? Оставьте их в разделе комментариев.

Рекомендации

[1] Документация в каске

[2] Документация по React Hooks

Присоединяйтесь к Coinmonks, Каналу Telegram и Каналу Youtube, узнайте о криптотрейдинге и инвестировании

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