Как создать приложение Web 3.0 с использованием React, Solidity, Ethers.js, Hardhat и Metamask
9 апреля 2022 г.Лучший способ улучшить свои навыки 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/).
👋 Спасибо за прочтение, увидимся в следующий раз.
Оригинал