Как создать приложение Web 3.0 с использованием React, Solidity, Ethers.js, Hardhat и Metamask

Лучший способ улучшить свои навыки Web 3.0 — использовать их для создания проектов кодирования. Но создание их с нуля и добавление различных библиотек может быть сложной задачей. Вот почему в этой статье мы создадим простое приложение с полным стеком, используя React, Hardhat, Solidity, Ethers.js и Metamask, которое можно использовать в качестве шаблона для наших будущих проектов.

Настройка Git

Git — это технология управления исходным кодом, используемая DevOps. Это бесплатная система контроля версий с открытым исходным кодом, которая используется для эффективного управления небольшими и очень большими проектами. В этом проекте мы будем использовать Git для отслеживания всех изменений в проекте.

Создание репозитория Git

Первым шагом будет создание репозитория git. В этой статье я буду использовать GitHub, но вы также можете использовать аналогичные сервисы, такие как GitLab или Bitbucket.

Перейдите на сайт GitHub и нажмите кнопку Создать новый репозиторий. Введите имя вашего проекта, выберите видимость (общедоступный или частный) и нажмите кнопку «Создать репозиторий».

Добавление Git в проект

Теперь, когда мы создали репозиторий git, мы можем добавить git в наш проект. Создайте новую папку на своем компьютере и откройте ее на терминале.

Теперь вернитесь в свой браузер и скопируйте код, который предоставляется по умолчанию в репозитории вашего проекта на GitHub.

Он должен выглядеть примерно так, как показано ниже.

``` ударить

echo "# dapp-шаблон" >> README.md

git инициировать

git добавить README.md

git commit -m "первая фиксация"

ветка git -M главная

git удаленное добавление источника https://github.com/suhailkakar/dapp-boilerplate.git

git push -u происхождение основной

Вставьте его в свой терминал, и все, вы успешно добавили git в свой проект.

Настройка интерфейса с помощью React

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

``` ударить

npx создать-реагировать-приложение ./

После завершения ваша структура папок должна выглядеть так.

├── README.md

├── README.old.md

├── package-lock.json

├── package.json

├── общедоступный

│ ├── favicon.ico

│ ├── index.html

│ ├── logo192.png

│ ├── logo512.png

│ ├── manifest.json

│ └── robots.txt

└── источник

├── App.css

├── App.js

├── App.test.js

├── index.css

├── index.js

├── logo.svg

├── отчетWebVitals.js

└── setupTests.js

Теперь, когда наше реагирующее приложение создано, мы можем установить некоторые пакеты, такие как ethers.js, chai и hardhat.

Запустите приведенную ниже команду, чтобы установить эти пакеты с помощью пряжи.

пряжа добавить эфиры каска @nomiclabs/hardhat-waffle ethereum-waffle chai @nomiclabs/hardhat-ethers

На этом пока все, вернемся к нашему приложению для настройки ethers.js.

Настройка среды разработки Ethereum в Hardhat

Далее нам нужно настроить среду разработки Ethereum, мы можем просто использовать для этого Hardhat.

Откройте терминал и выполните приведенную ниже команду.

``` ударить

npx каска

После завершения вы должны увидеть ниже новые файлы/папки, сгенерированные в каталоге вашего проекта.

• test: эта папка содержит тестовый скрипт, написанный на Chai, и используется для тестирования нашего смарт-контракта.

• hardhat.config.js: этот файл содержит конфигурацию Hardhat.

• scripts: эта папка содержит пример сценария для развертывания смарт-контракта.

• contracts: это папка, содержащая файлы, в которых мы пишем код нашего смарт-контракта.

Изменение конфигурации каски

Теперь нам нужно внести некоторые изменения в наш файл конфигурации Hardhat. Откройте hardhat.config.js в редакторе кода и обновите объект module.exports до приведенного ниже кода.

```javascript

модуль.экспорт = {

плотность: "0.8.4",

сети:{

каска: {

идентификатор цепочки: 1337,

пути: {

артефакты: "./src/artifacts"

В приведенном выше коде мы добавили chainId как 1337. Это из-за проблемы с конфигурацией метамаски. Мы также добавили путь к нашим артефактам, которые являются скомпилированной версией наших контрактов.

Смарт-контракты в Solidity

Далее у нас есть смарт-контракты. Смарт-контракт — это децентрализованная программа, которая реагирует на события, выполняя бизнес-логику. Они часто пишутся в Solidity.

Взгляните на файл Greeter.sol, который находится в папке с контрактами.

```соль

//SPDX-идентификатор лицензии: нелицензия

прочность прагмы ^0,8,0;

импортировать "каска/console.sol";

контракт

строковое приватное приветствие;

конструктор (строковая память _greeting) {

console.log("Развертывание приветствия с приветствием:", _greeting);

приветствие = _приветствие;

Функция приветствия () возвращает публичное представление (строковая память) {

ответное приветствие;

функция setGreeting (строковая память _greeting) public {

console.log("Изменение приветствия с '%s' на '%s'", приветствие, _greeting);

приветствие = _приветствие;

Разобьем файл на строки и пройдемся по каждой из них.

```соль

//SPDX-идентификатор лицензии: нелицензия

прочность прагмы ^0,8,0;

В двух строках выше у нас есть лицензия и версия Solidity, которую мы используем для этого смарт-контракта.

Далее у нас есть контракт Greeter, содержащий код нашего смарт-контракта.

```соль

контракт

В строке ниже мы объявляем приватную строку, которая хранится в блокчейне.

```соль

строковое приватное приветствие;

И, наконец, функции внутри нашего контракта используются для установки значения приветствия в блокчейне и его извлечения.

На данный момент нам не нужно вносить какие-либо изменения в наш смарт-контракт, и мы можем скомпилировать то же самое.

Компиляция наших смарт-контрактов с помощью Hardhat

Теперь, когда у вас есть хорошие знания о примерах смарт-контрактов, давайте приступим к их компиляции.

Вы можете скомпилировать его с помощью команды ниже:

``` ударить

Компиляция в каске npx

Как только вы запустите команду, вы должны увидеть новый файл в папке src под названием artifacts.

Артефакты содержат скомпилированную версию нашего смарт-контракта в формате JSON. Этот файл JSON содержит массив с именем abi. ABI или Application Binary Interface — это то, что нам нужно для подключения нашего клиента (приложения React) к нашему скомпилированному смарт-контракту.

Развертывание смарт-контракта на локальном блокчейне

Теперь мы можем развернуть наш смарт-контракт на локальном блокчейне с помощью Hardhat. Для этого нам нужна локальная сеть. Чтобы запустить локальную сеть, запустите приведенный ниже код в своем терминале.

``` ударить

узел каски npx

Эта команда также создает 20 тестовых учетных записей и адресов, которые можно использовать для развертывания и тестирования наших смарт-контрактов.

Не закрывайте этот терминал, так как он нужен нам для развертывания нашего смарт-контракта

Теперь просто переименуйте sample-script.js в deploy.js в папке scripts. Затем запустите приведенный ниже код, чтобы развернуть смарт-контракт в локальной сети.

``` ударить

Запуск скриптов npx hardhat/deploy.js --network localhost

Если это было успешно, вы должны увидеть вывод, аналогичный приведенному ниже коду.

❯ npx hardhat run scripts/deploy.js --network localhost

Приветствие развернуто по адресу: 0x5FbDB2315678afecb367f032d93F642f64180aa3.

Вы также можете проверить журналы с терминала, который вы открыли ранее.

``` ударить

Развертывание контракта: встречающий

Адрес контракта: 0x5fbdb2315678afecb367f032d93f642f64180aa3

Транзакция: 0x6d6833f7bd9ee1523fa8763120271f11b344d7d1df6ec301275277a33bc697ba

От: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266

Стоимость: 0 ЭТН

Используемый газ: 497026 из 497026

Блок №1: 0x42c4d55bf844eba09393c9e3c0f26ca1a7c8de685d21219926c45389d044c316

консоль.лог:

Развертывание Greeter с приветствием: Привет, Hardhat!

В приведенных выше журналах у нас есть адрес контракта, используемый газ и адрес того, кто развернул смарт-контракт.

Следующим шагом будет подключение Metamask к нашему локальному узлу блокчейна Hardhat.

Подключение Metamask к узлу блокчейна Hardhat

Загрузите и установите расширение Metamask в свой браузер и завершите процесс регистрации. После завершения нажмите на сети и выберите Localhost 8545.

После этого нажмите на изображение аватара в Metmask и выберите «Импортировать учетную запись».

Скопируйте любой закрытый ключ из учетной записи, которая была зарегистрирована в вашем терминале, и импортируйте его в Metamask.

![Скопируйте любой закрытый ключ из учетной записи, которая была зарегистрирована в вашем терминале, и импортируйте его в Metamask]

Вот и все, мы подключили наш локальный блокчейн к Metamask.

Подключение внешнего интерфейса к смарт-контракту с помощью Metamask

Теперь мы можем приступить к подключению интерфейса нашего приложения со смарт-контрактом.

В вашем основном каталоге выполните приведенную ниже команду, чтобы запустить приложение реакции.

``` ударить

запуск нпм

Теперь мы можем начать с разрешения пользователям подключаться к Metamask в вашем приложении для реагирования.

Подключиться к метамаске

Замените код в вашем app.js на приведенный ниже код.

```jsx

импортировать React, {useEffect} из «реагировать»;

функция экспорта по умолчанию App() {

const connectWallet = асинхронный () => {

пытаться {

const {эфириум} = окно;

если (! Эфириум) {

alert("Пожалуйста, установите MetaMask!");

возврат;

const account = await ethereum.request({

метод: "eth_requestAccounts",

console.log("Подключено", аккаунты[0]);

} поймать (ошибка) {

console.log(ошибка);

использоватьЭффект(() => {

подключить кошелек();

вернуть

В приведенном выше коде у нас есть useEffect, который вызывает функцию connectWallet каждый раз, когда загружается приложение. И используя Ethereum из объекта окна, мы подключаемся к нашему приложению с помощью Metamask.

Сохраните файл и перезагрузите приложение. Вы должны увидеть всплывающее окно MetaMask с просьбой подключить Wallet.

Получение приветствия от смарт-контракта

Теперь, когда мы подключили Metamask, мы можем работать над получением приветствий из контракта.

Но перед этим нам нужно импортировать ABI и ether.js в наш файл app.js.

После получения учетной записи вы можете вызвать новую функцию, и вот код для нее.

```jsx

const fetchGreetings = async () => {

let contractAddress = "ВАШ_КОНТРАКТ_АДРЕС";

const {эфириум} = окно;

если (! Эфириум) {

alert("Пожалуйста, установите MetaMask!");

вернуть;

const provider = new ethers.providers.Web3Provider(ethereum);

const signer = provider.getSigner();

const контракт = новые эфиры.Контракт(

адрес договора,

Greeter.abi,

провайдер

константное приветствие = ожидание contract.greet();

console.log(приветствие);

В приведенном выше коде мы проверяем, установлен ли Metamask, а затем получаем его провайдера, а с помощью ether.js мы читаем контракт и получаем приветствия.

Наконец, вот как должен выглядеть ваш app.js.

```jsx

импортировать React, {useEffect} из «реагировать»;

импортировать Greeter из "./artifacts/contracts/Greeter.sol/Greeter.json";

импортировать {эфиры} из "эфиров";

функция экспорта по умолчанию App() {

const connectWallet = асинхронный () => {

пытаться {

const {эфириум} = окно;

если (! Эфириум) {

alert("Пожалуйста, установите MetaMask!");

возврат;

const account = await ethereum.request({

метод: "eth_requestAccounts",

console.log("Подключено", аккаунты[0]);

получитьПриветствия();

} поймать (ошибка) {

console.log(ошибка);

const fetchGreetings = async () => {

let contractAddress = "ВАШ_КОНТРАКТ_АДРЕС";

const {эфириум} = окно;

если (! Эфириум) {

alert("Пожалуйста, установите MetaMask!");

возврат;

const provider = new ethers.providers.Web3Provider(ethereum);

const signer = provider.getSigner();

const контракт = новые эфиры.Контракт(

адрес договора,

Greeter.abi,

провайдер

константное приветствие = ожидание contract.greet();

console.log(приветствие);

использоватьЭффект(() => {

подключить кошелек();

вернуть

Процесс отправки приветствия также аналогичен, вам просто нужно вызвать эту функцию с помощью ether.js.

И это все. Вы также можете отправить свой окончательный код на GitHub, и у вас будет базовое приложение с полным стеком, которое можно использовать в качестве шаблона для других ваших проектов.

Заключение: настройте и создайте свое первое приложение Web 3.0

Это все для этой статьи. Я надеюсь, что вы нашли эту статью полезной, если вам нужна помощь, пожалуйста, дайте мне знать в разделе комментариев.

Давайте подключимся в [Twitter] (https://twitter.com/suhailkakar) и [LinkedIn] (https://linkedin.com/in/suhailkakar/).

👋 Спасибо за прочтение, увидимся в следующий раз.