Учебник Web3: создайте свой первый DAPP с помощью Remix и Etherscan

В этом учебнике, состоящем из 7 подробных заданий, мы шаг за шагом создадим DApp.

Задача 1: Подготовка к созданию смарт-контракта
Задача 2: Remix IDE — онлайн среда разработки
Задача 3: Greeter.sol — первый полу-ДАП с помощью Remix
Задача 4: Токен ERC20 — второй полуDApp
Задача 5: Понимание принципов approve, allowance и transferFrom
Задача 6: Развертывание в публичной тестовой сети Ropsten
Необязательное задание 7: Развертывание и проверка на Polygon

DApp — это веб-приложение с логикой внутрицепочечных смарт-контрактов, доступ к которым пользователи могут получить через свой кошелек. Ethereum.org объясняет:

Децентрализованное приложение (dapp) — это приложение, созданное в децентрализованной сети, которое сочетает в себе смарт-контракт и внешний пользовательский интерфейс.

Таким образом, мы можем дать простое определение DAPP:

DApp =

Смарт-контракт (на блокчейне) +

Пользовательский интерфейс (веб-приложение, работающее на сервере) +

Кошелек (контролируется пользователем в браузере и мобильном приложении)

DAPP = смарт-контракт + веб-приложение + кошелек (контролируемый пользователем).

Я бы хотел назвать то, что мы создадим в этом 7-шаговом учебнике, «полу-DAPP», поскольку мы сосредоточимся на смарт-контрактах, а в качестве пользовательского интерфейса будем использовать Remix IDE или Etherscan. Мы создадим собственное веб-приложение, используя React/Next.js, которое впоследствии будет работать со смарт-контрактами и кошельком.


Необходимые условия: знания и инструменты

Чтобы создать DApp, вам предварительно потребуются некоторые базовые знания и инструменты.

Необходимые знания:

  • Основы блокчейна
  • Основы Ethereum
  • Использование кошелька
  • Язык Solidity
  • Стандарт токенов ERC20 & ERC721

Необходимые инструменты:

  • Remix IDE онлайн
  • MetaMask (расширение для браузера кошелька)
  • Node.js, yarn, TypeScript
  • OpenZeppelin (библиотека токенов Solidity)
  • Etherscan и другие блокчейн-исследователи

Но не волнуйтесь, мы постараемся объяснить, когда столкнемся с ними.

Давайте начнем наше путешествие.


Задача 1: Подготовка к созданию смарт-контракта

Нам потребуется кропотливая подготовка, чтобы иметь все необходимые инструменты:

  • Установите MetaMask и создайте учетную запись
  • Создайте локальный тестовый инет
  • Настройки Remix IDE

Задача 1.1 Установить MetaMask и создать учетную запись

В этом подзадании мы установим MetaMask, создадим кошелек и запишем мнемоники (фразы) с помощью ручки и бумаги.

  1. Скачайте и установите расширение MetaMask из магазина расширений Chrome.

  2. Создайте кошелек, следуя инструкциям MetaMask. Записывайте мнемоники (фразы) с помощью ручки и бумаги.

  3. Познакомьтесь с основными функциями MetaMask: 1) переключить сеть, 2) добавить или редактировать сеть, 3) добавить аккаунт, 4) изменить аккаунт.

Вы также можете использовать MetaMask в других браузерах, таких как Firefox, Brave и Edge.

Задание 1.2 Запуск локальной тестовой сети с помощью Hardhat

Мы будем использовать Hardhat, которая является средой разработки Ethereum, чтобы запустить локальный тестнет. Вы также можете использовать Ganache от truffle.

Чтобы использовать Hardhat, на вашем компьютере должны быть установлены node.js и yarn.

  • ШАГ 1: создайте каталог и установите в него hardhat
mkdir hhproject && cd hhproject
mkdir chain && cd chain
yarn add hardhat
Войдите в полноэкранный режим Выйти из полноэкранного режима
  • ШАГ 2: создайте пример проекта Hardhat
yarn hardhat
//choose: Create an advanced sample project that uses TypeScript
Войдите в полноэкранный режим Выход из полноэкранного режима

Создается проект hardhat с образцом смарт-контракта «Greeter.sol», который мы будем использовать в задании 3.

  • ШАГ 3: запустите сеть Hardhat Network (локальный testnet) в автономном режиме
yarn hardhat node
Войдите в полноэкранный режим Выйти из полноэкранного режима

Локальная тестовая сеть запущена (chainId: 31337):

Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/.

Это дает нам 20 аккаунтов, каждый из которых заполнен 10000.0 тестовыми ETH. Эти аккаунты генерируются с мнемоникой test test test test test test test test test test test test test test test test test test test test test test test test test test test test junk. Не отправляйте на эти счета ETH, токены или NFT из сети.

Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
Account #1: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 (10000 ETH)
...
Вход в полноэкранный режим Выход из полноэкранного режима

Мы организуем каталог нашего проекта следующим образом (в этом руководстве мы не используем подкаталог webapp):

- hhproject
  - chain  (working dir for hardhat)
  - webapp (working dir for Next.js app later)
Войти в полноэкранный режим Выйти из полноэкранного режима

Задача 1.3 переключить сеть MetaMask на локальную тестовую сеть

Убедитесь, что локальная тестовая сеть Hardhat Network все еще работает, и измените настройки сети:

  • ШАГ 1: В расширении браузера MetaMask нажмите на селектор сети на верхней панели. Переключите сеть с mainnet на localhost 8545.

  • ШАГ 2: Нажмите на значок учетной записи на верхней панели и перейдите в раздел «Настройки/Сеть/». Выберите «localhost 8445».

Два полезных примечания по использованию MetaMask:

  • убедитесь, что Chain ID равен 31337. По умолчанию он может быть «1337». Вы можете редактировать параметры сети в MetaMask > Settings > Networks.

  • Если вы не видите публичную и локальную тестовую сеть в MetaMask, вы можете открыть ее в MetaMask > Settings > Advanced > Show test networks.

Задание 1.4 Добавление/импорт учетной записи в MetaMask

  • ШАГ 1: Нажмите на иконку Account в верхней панели и выберите «Import Account». Импортируйте учетную запись с закрытым ключом локальной тестовой сети Account #0.

Закрытый ключ аккаунта #0:

Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266
Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80
Войти в полноэкранный режим Выйти из полноэкранного режима
  • ШАГ 2: Переключитесь на добавленный аккаунт с адресом: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266.

На этом счету находится 10000.0 тестовых ETH, которые могут быть использованы в локальном тестнете ethereum.


Задача 2: Remix IDE — онлайн среда разработки смарт-контрактов

Remix IDE: https://remix.ethereum.org/

Remix Ethereum IDE (Remix IDE) — это онлайн-среда разработки для Ethereum. Введение из документации Remix IDE:

  • Remix используется на протяжении всего пути разработки контрактов, а также выступает в качестве игровой площадки для изучения и преподавания Ethereum.

  • Remix IDE — это мощный инструмент с открытым исходным кодом, который помогает вам писать контракты Solidity прямо из браузера.

  • В Remix IDE есть модули для тестирования, отладки и развертывания смарт-контрактов и многое другое.

Задание 2.1 Ознакомьтесь с Remix IDE

Ознакомьтесь с компонентами Remix IDE, которые мы будем использовать:

1) Редактор: Откройте File Explorer в Remix IDE и щелкните файл примера смарт-контракта «1_Storage.sol».

2) Solidity Compiler: здесь мы компилируем смарт-контракты.

3) Deploy and Run Transactions: где мы развертываем смарт-контракты и взаимодействуем с ними.

4) Unit Test: плагин для модульного тестирования с использованием Solidity. Если он не установлен, добавьте его из кнопки плагина в левом нижнем углу.

Структура файлов в рабочей области Remix IDE:

contracts/
scripts/
tests/
Вход в полноэкранный режим Выход из полноэкранного режима

В рабочем пространстве Remix IDE по умолчанию есть несколько примеров смарт-контрактов, а также скрипты развертывания на JavaScript и скрипты модульного тестирования на Solidity.

Задача 2.1 Изменение среды на инжектированную Web3 в Remix

В этой подзадаче мы изменим «Environment» на вкладке Remix «Deploy & Run».

  • ШАГ 1: убедитесь, что сеть MetaMask переключена на «localhost 8545» и переключите учетную запись на 0xf39f...2266.

  • ШАГ 2: измените окружение со стандартного Javascript VM(London) на Injected Web3. Мы сказали Remix IDE использовать инжектированный провайдер ethereum, предоставленный MetaMask.

  • SETP 3: проверьте счет на этой вкладке. Он должен быть изменен на 0xf39f...2266 такой же, как у MetaMask.

Задание 2.2 Составление образца смарт-контракта

Компиляция смарт-контракта в Remix IDE интуитивно понятна. Компиляция выполняется в 3 шага:

  • ШАГ 1: На вкладке Editor выберите смарт-контракт, например «1_Storage.sol».

  • ШАГ 2: На вкладке Solidity Compiler скомпилируйте выбранный смарт-контракт. Оставьте параметры по умолчанию.

    • Компилятор: 0.8.7+commit.e28d00a7
    • Язык: Solidity
    • Версия EVM: Компилятор по умолчанию
  • ШАГ 3: Нажмите кнопку Компилировать. Выбранный смарт-контракт будет скомпилирован.

Результаты компиляции (артефакты) сохраняются в каталоге артефактов.

Задание 2.3 Запуск модульного теста

Remix IDE поддерживает модульные тесты, написанные на solidity, с помощью плагина.

  • ШАГ 1: В менеджере плагинов установите плагин «Solidity unit testing», если он еще не установлен и не активирован.

  • ШАГ 2: На вкладке Unit Test выберите test/4_Ballot_test.sol и нажмите кнопку «Run».

Примечание: В популярных средах разработки Ethereum, таких как Truffle и Hardhat, мы обычно запускаем модульные тесты на Javascript. В этом руководстве мы пропустим юнит-тест в следующих задачах.

Мы называем цикл разработки смарт-контракта «компиляция — тестирование — развертывание» и выполним развертывание в следующей подзадаче.

Задача 2.4 Развертывание в тестовой сети, предоставляемой Remix IDE

Remix IDE также предоставляет тестовую сеть с EVM (виртуальной машиной ethereum) на основе реализации EVM @ethereumjs/vm (ссылка на github repo).

Сначала мы попробуем развернуть смарт-контракт на JavaScript VM(London), поставляемой с Remix IDE.

  • ШАГ 1: измените среду на JavaScript VM(London).

  • ШАГ 2: На узле предоставляется несколько тестовых учетных записей. Мы будем использовать учетную запись «0x5B3…eddC4» в качестве развертывающего устройства.

  • ШАГ 3: нажмите кнопку «развернуть».

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

После завершения развертывания на консоли Remix IDE в правой нижней части экрана будет зарегистрирована квитанция о транзакции.

Развернутый контракт будет отображен в левой нижней части экрана. Мы можем взаимодействовать с ним.

  • «сохранить» число, например 100
  • «извлечь», получить 100

Задача 2.5 Развертывание в инжектированной тестовой сети, предоставленной MetaMask

В этом подзадании мы развернем образец смарт-контракта в инжектированной тестовой сети, предоставленной MetaMask. Это локальная тестовая сеть, на которой мы работаем:

HTTP и WebSocket JSON-RPC сервер на http://127.0.0.1:8545/.

Давайте попробуем развернуть смарт-контракт в локальном тестнете с помощью MetaMask. В этом сценарии у скрипта нет приватного ключа. Приватный ключ контролируется MetaMask. Пользователю необходимо будет подтвердить транзакцию в своем кошельке MetaMask.

  • ШАГ 1: на вкладке «Deploy & Run» измените окружение на «Injected Web3».

  • ШАГ 2: проверьте, совпадает ли учетная запись «0xf39…92266» с MetaMask.

  • ШАГ 3: нажмите кнопку «развернуть».

  • ШАГ 4: подтвердите во всплывающем окне кошелька MetaMask.

Квитанция о транзакции будет возвращена:

status  true Transaction mined and execution succeed
transaction hash    0xb4f72c274fdd6bd600e05f5eb0c6c9edc45c61743c732aab867cc50d4719c754
from    0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
to  Storage.(constructor)
...
Вход в полноэкранный режим Выход из полноэкранного режима

Вы можете видеть, что транзакция была отправлена с адреса: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266.

Задача 2.6 Взаимодействие со смарт-контрактом

Мы можем вызывать функции/методы смарт-контракта в Remix IDE. Существует два вида методов смарт-контракта: только для чтения и для изменения состояния.

  • Синяя кнопка предназначена для методов только для чтения.

  • Оранжевая кнопка — для методов изменения состояния. Чтобы отправить методы изменения состояния в сеть блокчейн, пользователь должен подтвердить это действие в своем кошельке и заплатить комиссию за газ.

Давайте взаимодействовать со смарт-контрактом.

  • ШАГ 1: установите число «100» и нажмите кнопку «сохранить».

Это отправит транзакцию в блокчейн, которая требует подтверждения в MetaMask.

  • ШАГ 2: подтвердите транзакцию.

  • ШАГ 3: нажмите кнопку «извлечь».

«retrieve» — это вызов только для чтения, который не требует подтверждения в MetaMask. Пользователям не нужно платить за газ для вызова функций, доступных только для чтения.

Результат будет отображен на экране.

Детали записи (отправки) и чтения (вызова) регистрируются в консоли Remix IDE.

После выполнения Задания 1 и Задания 2 вы будете полностью готовы к путешествию по разработке DApp.


Задача 3: Greeter — первый полуДАП с Remix

В задании 3 мы начнем создавать ваш первый DAPP с использованием:

  • Remix IDE
  • локальный тестовый сеть Hardhat
  • смарт-контракт «Greeter.sol»

В этом уроке мы не будем создавать webapp front-end самостоятельно. Вместо этого мы используем Remix IDE в качестве пользовательского веб-интерфейса для взаимодействия со смарт-контрактами.

Задача 3.1 Образец контракта «Greeter.sol»

В примере проекта hardhat есть смарт-контракт «Greeter.sol». Создадим файл «contracts/Greeter.sol» в Remix IDE и скопируем в него Greeter.sol из каталога проекта hardhat.

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

import "hardhat/console.sol";

contract Greeter {
    string private greeting;

    constructor(string memory _greeting) {
        console.log("Deploying a Greeter with greeting:", _greeting);
        greeting = _greeting;
    }

    function greet() public view returns (string memory) {
        return greeting;
    }

    function setGreeting(string memory _greeting) public {
        console.log("Changing greeting from '%s' to '%s'", greeting, _greeting);
        greeting = _greeting;
    }
}

Вход в полноэкранный режим Выход из полноэкранного режима

console.log() в solidity — это функция только для Hardhat, которую можно использовать только в локальной тестовой сети Hardhat Network.

В проекте hardhat также есть скрипты развертывания и скрипты модульного тестирования. Нам не понадобятся эти скрипты в Remix IDE.

Задача 3.2 Компиляция Greeter.sol

Перейдите на вкладку «Solidity Compiler» в Remix IDE.

Скомпилируйте файл «Greeter.sol»

После успешной компиляции вы увидите «Compilation Details» в Remix IDE.

Мы также можем скопировать «ABI» и «Bytecode» для просмотра, если они вас интересуют.

Эти файлы хранятся в директории contract/artifacts.

Задача 3.3 Тестирование

Здесь мы снова пропускаем модульное тестирование.

Задача 3.4 Развертывание

В Remix IDE есть скрипты развертывания, которые мы можем использовать по умолчанию. Нам не нужно вносить никаких изменений.

Перейдите на вкладку Deploy and Run в Remix IDE. Разверните «Greeter.sol» за 9 шагов:

  • ШАГ 1: убедитесь, что файл «Greeter.sol» уже успешно скомпилирован.

  • ШАГ 2: убедитесь, что MetaMask переключена на сеть localhost, а учетная запись переключена на соответствующую учетную запись hardhat.

  • ШАГ 3: убедитесь, что Environment изменено на «Injected Web3». А учетная запись — на соответствующую учетную запись hardhat testnet.

  • ШАГ 4: оставьте значения Gas Limit и Value по умолчанию.

  • ШАГ 5: выберите контракт: «Greeter — contract/Greeter.sol».

  • ШАГ 6: оставьте переменную развертывания string_greeting пустой или введите любую строку.

  • ШАГ 7: нажмите кнопку Развернуть.

  • ШАГ 8: подтвердите транзакцию во всплывающем окне MetaMask.

  • ШАГ 9: проверьте получение транзакции развертывания в консоли Remix IDE.

status  true Transaction mined and execution succeed
from    0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
to  Greeter.(constructor)
gas 505392 gas
transaction cost    505392 gas 
input   0x608...00000
decoded input   {
    "string _greeting": "My first DAPP"
}
Вход в полноэкранный режим Выход из полноэкранного режима

Задача 3.5 Взаимодействие с развернутым смарт-контрактом

  • ШАГ 1: получите начальное приветствие, которое задается в процессе развертывания, нажав на кнопку greet Deep Blue.

  • ШАГ 2: установите приветствие на «My first Dapp» и подтвердите его во всплывающем окне MetaMask.

  • ШАГ 3: получите приветствие снова. Это должно быть: «Мой первый Dapp».

Мы закончили работу над нашим первым DAPP — смарт-контракт + веб-интерфейс + кошелек MetaMask.

В следующем задании мы напишем смарт-контракт с токенами ERC20, используя популярную библиотеку Solidity OpenZeppelin.


Задача 4: Второй полу-DAP — токен ERC20

Наиболее распространенный вариант использования DApp основан на токенах (ERC20, ERC721, ERC1155) на ethereum в качестве активов.

Мы не будем писать смарт-контракт для токенов с нуля. Вместо этого мы унаследуем его от популярной библиотеки Solidity OpenZeppelin. Лучшей практикой разработки смарт-контрактов для токенов является использование проверенных, а не изобретение колеса.

Задание 4.1 ERC20 с использованием OpenZeppelin

Запишите токен ERC20 «ClassToken» (символ:CLT) в файл «contracts/ClassToken.sol».

//SPDX-License-Identifier: Unlicense
pragma solidity ^0.8.0;

import "https://github.com/OpenZeppelin/openzeppelin-contracts/blob/master/contracts/token/ERC20/ERC20.sol";

contract ClassToken is ERC20 {
        constructor() ERC20("ClassToken", "CLT") {
        _mint(msg.sender, 10000*1e18);
        }
}
Войдите в полноэкранный режим Выйти из полноэкранного режима

Обратите внимание, что мы импортируем OpenZeppelin из файла GitHub. В локальных средах разработки, таких как Hardhat или Truffle, мы устанавливаем @openZeppelin/contracts и импортируем следующим образом:

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";
Войти в полноэкранный режим Выйти из полноэкранного режима

Информация об этом токене ERC20:

  • Имя и символ: ClassToken, CLT
  • Десятичные числа: 18
  • InitialSupply: 10000.0 CLT, mint to deployer(msg.sender)

Задание 4.2 Компиляция

Скомпилируйте «ClassToken.sol» в Remix Compile Tab.

Задача 4.3 Тестирование

Здесь мы снова пропускаем модульное тестирование.

Задача 4.4 Развернуть

На вкладке Deploy and Run разверните на локальную тестовую сеть.

Нажмите кнопку Deploy.

Развернутый смарт-контракт отображается на левой панели. Щелкните, чтобы показать функции, которые мы можем «вызвать» или «отправить».

ERC20 — это стандарт смарт-контракта для токенов. Он имеет стандартизированный интерфейс (документация OpenZeppelin):

ФУНКЦИИ

name()

Задача 4.5 Чтение информации о токене

В смарт-контракте ERC20 Standard token есть несколько функций только для чтения.

Мы можем запросить баланс токенов по адресу, вызвав balanceOf:

  • вход: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
  • выход: 100000000000000000000, что означает 10000.0 токенов CLT.

Задание 4.6 Отправка токена вызовом transfer

Нажмите на стрелку кнопки transfer, введите входные данные:

  • ввод: получатель 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 (Счет #1)
  • ввод: сумма 100000000000000000000 (100.0 CLT)

Подтвердите транзакцию во всплывающем окне MetaMask. После успешного завершения транзакции на консоли Remix IDE будет отображен чек транзакции.

Получите баланс CLT адресов:

  • 0x70997970c51812dc3a010c7d01b50e0d17dc79c8
  • 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266

PrivateKey адреса 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 (Account #1) — 0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d.

Вы можете добавить этот счет (счет #1) и токен в MetaMask, чтобы взаимодействовать со смарт-контрактом ERC20 с этого счета.

Задача 4.7 Добавить токен в MetaMask

MetaMask может не отображать ClassToken(CLT) в списке активов автоматически. Необходимо добавить его в список активов, указав адрес контракта (адрес токена).

Для добавления вы можете нажать «import tokens». Мы введем адрес смарт-контракта токена: 0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9. Пожалуйста, введите адрес вашего развернутого ClassToken.

Теперь CLT находится в списке активов в MetaMask. Вы можете видеть баланс CLT и отправлять CLT другим пользователям MetaMask.

Полезный совет: сброс nonce учетной записи MetaMask

Когда мы несколько раз играем с localhost и MataMask, мы можем испортить nonce (счетчик транзакций). Иногда мы не можем отправить транзакции с испорченным nonce. При возникновении этой проблемы вы можете сбросить nonce аккаунта MetaMask следующим образом:

  • Перейдите в раздел MetaMask > Настройки > Дополнительно

  • Сбросить учетную запись

Объяснение от MetaMask:

Сброс аккаунта очистит историю транзакций. Это не изменит остатки на ваших счетах и не потребует повторного ввода секретной фразы восстановления.


Задание 5: Понимание утверждения, резерва и transferFrom

Задание 5.1 Понимание TransferFrom

В стандарте токенов ERC20 есть оригинальная конструкция:

  • approve
  • transferFrom
  • allowance

Что мы можем с ней делать:

  • вы можете предоставить другому человеку количество токенов, которое он может использовать, отправив approve()

  • он может использовать пособие, отправив transferFrom()

  • каждый может проверить размер пособия, вызвав allowance().

В реализации OpenZeppelin ERC20 также есть два помощника decreaceAllowance() и increaseAllowance().

Определение TransferFrom:

transferFrom(address sender, address recipient, uint256 amount)

Давайте поиграем с конструкцией «approve-transferFrom».

5.2 попробуем утвердить и transferFrom

Мы будем использовать 3 счета: Аккаунт #0, #1, #2. Закрытый ключ учетной записи #1 #2 является:

Account #1: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8
Private Key: 0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d

Account #2: 0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC
Private Key: 0x5de4111afa1a4b94908f83103eb1f1706367c2e68ca870fc3fb9a804cdab365a
Войти в полноэкранный режим Выйти из полноэкранного режима

ШАГ 1: импортируйте счета #1 и #2 в MetaMask

ШАГ 2: MetaMask в аккаунте #0, одобрить аккаунт #1 с 1000.0 CLT. Отправьте approve():

  • spender: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#0
  • сумма: 1000000000000000000000 (1000.0 CLT)

сумма равна uint256 с 18 десятичными знаками.

ШАГ 3: проверка пособия. Вызовите allowance():

  • owner:0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 Account#0
  • транжира: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#1

результат: 1000000000000000000000 (1000.0 CLT)

ШАГ 4: переключитесь на счет#1

ШАГ 5: Метамаска в Счете #1. Счет #1 отправляет TransferFrom() для отправки токена со счета #0 на счет #2:

  • отправитель: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 Account#0
  • получатель: 0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC Account#2
  • сумма: 500000000000000000000 (500.0 CLT)

ШАГ 6: снова проверьте резерв. Результат:

ШАГ 7: переключиться на Счет#0 в МетаМаске

ШАГ 8: установить пособие в 0 approve() (вызывается счетом#0):

  • расход: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#0
  • сумма: 0

ШАГ 9: проверка пособия. Вызовите allowance():

  • owner:0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 Account#0
  • транжира: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#1

Результатом будет 0.

Замечание по безопасности из документации OpenZeppelin, которое вы должны знать:

Остерегайтесь, что изменение пособия с помощью этого метода несет риск того, что кто-то может использовать как старое, так и новое пособие путем неудачного упорядочивания транзакций. Одно из возможных решений для смягчения этого состояния гонки — сначала уменьшить до 0 размер пособия тратящего, а затем установить желаемое значение: https://github.com/ethereum/EIPs/issues/20#issuecomment-263524729.


В следующем задании мы развернем «ClassToken» в публичных тестовых сетях, таких как Ropsten и Rinkeby. Вы также можете попробовать развернуть его на полигоне, BSC (BNB Chain) и других EVM-совместимых сетях, а также на L2 (Layer-2), таких как Optimism и Arbitrum.


Задача 6: Развертывание в публичной тестовой сети Ropsten

Чтобы развернуть смарт-контракт в тестовой сети Ropsten, вам необходимо иметь в кошельке «Ropsten test ETH». Вы можете получить его из крана: https://faucet.metamask.io/.

Etherscan предоставляет блокчейн-проводник для Ropsten: https://ropsten.etherscan.io/.

Задача 6.1 Компиляция / тестирование / развертывание

Разверните смарт-контракт в тестовой сети Ropsten в 5 шагов:

  • ШАГ 1: переключите MetaMask на сеть Ropsten и перейдите на свой собственный аккаунт.

Примечание: не используйте аккаунт, предоставленный тестовой сетью Hardhat. Аккаунты #0, #1 — это аккаунты по умолчанию, созданные Hardhat, и многие знают их приватный ключ.

  • ШАГ 2: Получите тестовые ETH (Ropsten testnet) на кране для вашего счета. Вам понадобятся «тестовые ETH» для оплаты за газ.

  • ШАГ 3: В Remix IDE Deploy & Run Tab, убедитесь, что среда «Injected Web3» подключается к сети Ropsten (3) network.

  • ШАГ 4: Нажмите кнопку Deploy и подтвердите во всплывающем окне MetaMask. Развертывание в публичной тестовой сети Ropsten может занять одну-две минуты.

  • ШАГ 5: После успешного развертывания смарт-контракта вы можете просмотреть детали транзакции в блокчейн-проводнике: https://ropsten.etherscan.io/.

Задание 6.2 Взаимодействие с контрактом в Remix

Мы можем взаимодействовать с контрактом из Remix IDE так же, как и в задаче 4.5-7.

  • Считать информацию о токене

  • передать токен

  • добавить токен в MetaMask и перевести между счетами.

Вы можете просмотреть эти транзакции на сайте https://ropsten.etherscan.io/ .

Задача 6.3 Проверка контракта на Etherscan (необходим ключ API)

Мы можем взаимодействовать со смарт-контрактом напрямую, когда он верифицирован на Etherscan.

В подзадачах 6.3 и 6.4 мы верифицируем наш смарт-контракт на сайте https://ropsten.etherscan.io/ и будем взаимодействовать с ним.

  • ШАГ 1: создайте учетную запись на Etherscan.io

  • ШАГ 2: получить API-ключ по адресу: https://etherscan.io/myapikey.

  • ШАГ 3: в Remix IDE Plugin Manager найдите и добавьте «Etherscan — верификация контракта».

  • ШАГ 4: В плагине «Etherscan — Contract Verification» введите API-ключ etherscan.

  • ШАГ 5: Верифицируйте контракт. Ожидание завершения верификации.

Обратите внимание, что «Verify» означает две вещи:

  • Мы опубликуем исходный код на etherscan.

  • Код верифицируется так же, как скомпилированный и развернутый код.

Задача 6.4 Взаимодействие с контрактом на Etherscan

После успешной верификации вы можете взаимодействовать со смарт-контрактом на сайте https://ropsten.etherscan.io/.

  • ШАГ 1: нажмите кнопку «Код». Вы можете прочитать открытый исходный код.

  • ШАГ 2: нажмите кнопку «Прочитать контракт». Мы можем вызывать функции только для чтения этого смарт-контракта ERC20.

  • ШАГ 3: нажмите кнопку «Записать контракт».

  • ШАГ 4: подключитесь к Web3. Прежде чем мы сможем вызывать функции изменения состояния контракта, нам необходимо «подключиться к Web3» с помощью кошелька MetaMask. Подключитесь к MetaMask во всплывающем окне.

  • ШАГ 5: нажмите «передать», введите переменную и подтвердите во всплывающем окне MetaMask.

Развертывание смарт-контракта и его верификация в Ethereum mainnet практически ничем не отличаются.

В следующем дополнительном задании мы развернем и верифицируем контракт на Polygon. Процесс немного отличается.


Факультативное задание 7: Развертывание и верификация на Polygon

В заданиях 7.1-7.3 мы попробуем развернуть контракт в сети Polygon. Вам нужен токен MATIC в сети Polygon для оплаты за газ.

Вы можете добавить сеть Polygon mainnet в свою MetaMask с помощью Chainlist.org.

Необязательное задание 7.1 Развертывание контракта в основной сети Polygon (требуется MATIC)

Развертывание контракта в основной сети Polygon почти такое же, как и в тестовой сети Ropsten.

  • Переключите сеть MetaMask на сеть Polygon mainnet

  • Разверните в окружении «Injected Web3» (Connect to Custom(137) network). Это может занять несколько минут.

  • Просмотреть контракт на сайте polygon’s block explorer: https://polygonscan.com/.

polygonscan.com также создан командой Etherscan.

Дополнительное задание 7.2 Проверка контракта на сайте Polygonscan (website).

В Remix IDE нет удобного плагина для проверки контракта на Polygonscan.com. Вы можете сделать это вручную за 8 шагов:

  • ШАГ 1: Создайте учетную запись на сайте polygonscan.com.

  • ШАГ 2: Выполните поиск по адресу развернутого контракта и перейдите на страницу контракта.

  • ШАГ 3: Перейдите на вкладку «Контракт» на этой странице. В ней находится только ByteCode. Нажмите на ссылку «Проверить и опубликовать» для проверки.

  • ШАГ 4: Заполните форму для верификации контракта.

  • Выберите тип компиляции: Solidity(Single File)
  • Версия компилятора: выберите ту же, что и во вкладке компилятора Remix IDE.

Нам нужна помощь, чтобы сделать наш смарт-контракт в одном файле, так как мы унаследовали ClassToken от контракта OpenZeppelin ERC20 и они находятся в нескольких файлах. Здесь нам поможет плагин Remix IDE Flattener.

  • ШАГ 5: Сначала создайте резервную копию ClassToken.sol, так как Flattener изменит его.

  • ШАГ 6: В плагине Flattener нажмите кнопку «Flatten contracts/ClassToken.sol». Это приведет к тому, что смарт-контракт, который наследуется от OpenZeppelin ERC20, превратится в один файл. Этот процесс называется «Flatten».

  • ШАГ 7: вставьте сплющенный код контракта на страницу верификации polygonscan explorer.

  • ШАГ 8: дождитесь завершения процесса верификации. Это займет около минуты в зависимости от состояния сети полигонов.

Дополнительное задание 7.3 Взаимодействие с контрактом в проводнике блока Polygonscan

После проверки контракта на Polygonscan вы можете взаимодействовать с ним так же, как и в задании 6.4.


После выполнения заданий данного руководства вы уже знаете, как скомпилировать, развернуть и взаимодействовать со смарт-контрактом с помощью Remix IDE и Etherscan в локальной тестовой сети, публичной тестовой сети Ropsten и сети Polygon mainet.

Смарт-контракт, Remix IDE / Etherscan и кошелек MetaMask вместе являются DApp (или Semi-DApp в этом руководстве): смарт-контракт на цепочке, веб-приложение на основе Remix IDE / Etherscan, кошелек MetaMask, управляемый пользователем.

Я опубликую еще два руководства по созданию DApp со смарт-контрактом и реальным веб-интерфейсом с использованием Node.js, Ethers.js и Web3-React. Тогда у нас будет настоящий DApp, а не полу-DAPP.


Полезные заметки: Магия, стоящая за DApps

Самая волшебная часть DApps — это неизменяемый слой данных, который может быть вычислен с помощью смарт-контрактов, которые могут быть запущены только кошельком пользователя. Цитата с сайта ethereum.org:

Код бэкенда DApps (смарт-контрактов) работает в децентрализованной сети, а не на централизованном сервере. Они используют блокчейн Ethereum для хранения данных и смарт-контракты для логики работы приложения.

Смарт-контракт — это набор правил, которые хранятся на цепочке для всеобщего обозрения и выполняются в точном соответствии с этими правилами. Представьте себе торговый автомат: если вы предоставите ему достаточно средств и правильный выбор, вы получите желаемый товар. Подобно торговым автоматам, смарт-контракты могут хранить средства, как и ваш счет в Ethereum. Это позволяет коду выступать посредником при заключении соглашений и транзакций.

После развертывания DApps в сети Ethereum вы не сможете их изменить. DApps могут быть децентрализованными, поскольку они контролируются логикой, записанной в контракте, а не отдельным человеком или компанией.


Список уроков:

1. Краткий учебник по Hardhat (3 части)

https://dev.to/yakult/a-concise-hardhat-tutorial-part-1-7eo

2. Понимание блокчейна с помощью Ethers.js(5 частей)

https://dev.to/yakult/01-understanding-blockchain-with-ethersjs-4-tasks-of-basics-and-transfer-5d17

3. Учебник: создайте свой первый DAPP с Remix и Etherscan (7 заданий)

https://dev.to/yakult/tutorial-build-your-first-dapp-with-remix-and-etherscan-52kf

4. Учебник: создание DApp с помощью Hardhat, React и Ethers.js (6 заданий)

https://dev.to/yakult/a-tutorial-build-dapp-with-hardhat-react-and-ethersjs-1gmi

5. Учебник: создание DAPP с помощью Web3-React и SWR

https://dev.to/yakult/tutorial-build-dapp-with-web3-react-and-swr-1fb0

6. Учебник: написать обновляемый смарт-контракт (прокси) с помощью OpenZeppelin(7 задач)

https://dev.to/yakult/tutorial-write-upgradeable-smart-contract-proxy-contract-with-openzeppelin-1916

7. Учебник: Построение NFT маркетплейса DApp как Opensea(5 задач)

https://dev.to/yakult/tutorial-build-a-nft-marketplace-dapp-like-opensea-3ng9


Если вы нашли этот учебник полезным, следуйте за мной в Twitter @fjun99

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *