DEV Community: fangjun

Web3 Tutorial: Build an NFT marketplace DApp like OpenSea

fangjun — Sat, 05 Mar 2022 01:49:00 +0000

Building an NFT marketplace DApp like Opensea with Solidity and Javascript/React may be an important step in your web3 development journey. Let's go.

In my previous tutorials, you may have learned:

how to write a smart contract and run it on local blockchain testnet using hardhat.
how to build a full-stack DApp which means deal with all three parts of a DApp: smart contract, web app and user's wallet.
how to unit test, deploy to public testnet, verify smart contract on block explorer Etherscan.

Now you can start writing a smart contract with complete functionalities: a marketplace for digital items. NFT items of an NFT collection are the digital items traded here.

Table of content

Task 1: What we build and project setup
Task 2: NFT collection smart contract
Task 3: A web page to display NFT item
Task 4: NFT marketplace smart contract
Task 5: Webapp for NFTMarketplace
Task 6: Deploy to Polygon and query using Alchemy NFT APIs

Nader Dabit wrote two versions of How to Build a Full Stack NFT Marketplace - V2 (2022). Inspired by his idea and based on his smart contract codebase, I write more code and write this tutorial for you.

You may already read my previous tutorials. If not, I suggest you read the following two as I will not explain some tactics which are already there.

Web3 Tutorial: build DApp with Hardhat, React and Ethers.js https://dev.to/yakult/a-tutorial-build-dapp-with-hardhat-react-and-ethersjs-1gmi
Web3 Tutorial: build DApp with Web3-React and SWR https://dev.to/yakult/tutorial-build-dapp-with-web3-react-and-swr-1fb0

Let's start building.

Task 1: What we build and project setup

Task 1.1: What we build - three parts

An NFT collection smart contract and a simple web page to display an NFT item. We will use on-chain SVG as the image of an NFT item. We need this sample NFT collection to work with in the marketplace contract as well as in the storefront.
An NFT marketplace smart contract in which user can list an NFT item and buy an NFT item. Seller can also delist his own NFT from the market. This marketplace contract also provides query functions for webapp to query market data. We will try to cover this smart contract with unit test as much as possible.
An NFT marketplace storefront using React/Web3-React/SWR. (To make it simple, we only build the necessary components of the storefront in a one-page webapp. For example, we will not provide UI components for sellers to list NFTs in the market in the webapp. )

The key part of this project is the marketplace smart contract (NFTMarketplace) with data storage, core functions and query functions.

Core functions:

function createMarketItem(address nftContract,uint256 tokenId,uint256 price) payable 
function deleteMarketItem(uint256 itemId) public
function createMarketSale(address nftContract,uint256 id) public payable

Query functions:

function fetchActiveItems() public view returns (MarketItem[] memory) 
function fetchMyPurchasedItems() public view returns (MarketItem[] memory)
function fetchMyCreatedItems() public view returns (MarketItem[] memory)

A seller can use the smart contract to:

approve an NFT to market contract
create a market item with listing fee
...(waiting for a buyer to buy the NFT)...
receive the price value the buyer paid

When a buyer buys in the market, the market contract facilitates the purchase process:

a buyer buys an NFT by paying the price value
market contract completes the purchase process:
- transfer the price value to the seller
- transfer the NFT from seller to buyer
- transfer the listing fee to the market owner
- change market item state from Created to Release

GitHub repos of this tutorial:

smart contracts (hardhat project): https://github.com/fjun99/nftmarketplace
web app using React: https://github.com/fjun99/web3app-tutrial-using-web3react (nftmarket branch)

Although I learned a lot from Dabit's NFT marketplace tutorial, there are 3 major differences between what we will build and his:

Dabit's NFT is a traditional one which stores images on IPFS while our NFT stores SVG images on-chain (just data, not image). We use this option to make our tutorial simple as we don't need to setup a server to provide NFT tokenURI (restful json api) and deal with image storage on server or IPFS.
In the first version of Dabit's tutorial, he separated the NFT ERC721 token smart contract and the marketplace smart contract. In the second version, he chooses to build an NFT ERC721 with marketplace functionality in one smart contract. We choose to separate them here as we would like to build a general purpose NFT marketplace.
In Dabit's tutorial, when a seller lists an NFT item to marketplace, he transfers the NFT item to market contract and waits for it to be sold. As a blockchain and web3.0 user, I don't like this pattern. I would like to approve only the NFT item to the marketplace contract. And before it is sold, the item is still in my wallet. (I also would like not to use setApprovalForAll() to approve all the NFT items in this collection in my address to the market contract. We choose to approve NFT in a one-by-one style.)

Task 1.2: Directory and project setup

STEP 1: Make directories

We will separate our project into two sub-directories, chain for hardhat project, and webapp for React/Next.js project.

--nftmarket
  --chain
  --webapp

STEP 2: Hardhat project

In chain sub-directory, instal hardhat development environment and @openzeppelin/contracts Solidity library. Then we init an empty hardhat project.

yarn init -y
yarn add hardhat
yarn add @openzeppelin/contracts
yarn hardhat

Alternatively, you can download the hardhat chain starter project from github repo. In your nftmarket directory, run:

git clone git@github.com:fjun99/chain-tutorial-hardhat-starter.git chain

STEP 3: React/Next.js webapp project

You can download an empty webapp scaffold:

git clone https://github.com/fjun99/webapp-tutorial-scaffold.git webapp

You can also download the webapp codebase of this tutorial:

git clone git@github.com:fjun99/web3app-tutrial-using-web3react.git webapp
cd webapp
git checkout nftmarket

Task 2: NFT collection smart contract

Task 2.1: write an NFT smart contract

We write an NFT ERC721 smart contract inheriting OpenZeppelin's ERC721 implementation. We add three functionalities here:

tokenId: auto increment tokenId starting from 1
function mintTo(address _to): everyone can call it to mint an NFT
function tokenURI() to implement token URI and on-chain SVG images

// contracts/BadgeToken.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/utils/Strings.sol";
import "@openzeppelin/contracts/utils/Base64.sol";

contract BadgeToken is ERC721 {
    uint256 private _currentTokenId = 0; //tokenId will start from 1

    constructor(
        string memory _name,
        string memory _symbol
    ) ERC721(_name, _symbol) {

    }

    /**
     * @dev Mints a token to an address with a tokenURI.
     * @param _to address of the future owner of the token
     */
    function mintTo(address _to) public {
        uint256 newTokenId = _getNextTokenId();
        _mint(_to, newTokenId);
        _incrementTokenId();
    }

    /**
     * @dev calculates the next token ID based on value of _currentTokenId
     * @return uint256 for the next token ID
     */
    function _getNextTokenId() private view returns (uint256) {
        return _currentTokenId+1;
    }

    /**
     * @dev increments the value of _currentTokenId
     */
    function _incrementTokenId() private {
        _currentTokenId++;
    }

    /**
     * @dev return tokenURI, image SVG data in it.
     */
    function tokenURI(uint256 tokenId) override public pure returns (string memory) {
        string[3] memory parts;

        parts[0] = "<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin meet' viewBox='0 0 350 350'><style>.base { fill: white; font-family: serif; font-size: 300px; }</style><rect width='100%' height='100%' fill='brown' /><text x='100' y='260' class='base'>";

        parts[1] = Strings.toString(tokenId);

        parts[2] = "</text></svg>";

        string memory json = Base64.encode(bytes(string(abi.encodePacked(
            "{\"name\":\"Badge #", 
            Strings.toString(tokenId), 
            "\",\"description\":\"Badge NFT with on-chain SVG image.\",",
            "\"image\": \"data:image/svg+xml;base64,", 
            // Base64.encode(bytes(output)), 
            Base64.encode(bytes(abi.encodePacked(parts[0], parts[1], parts[2]))),     
            "\"}"
            ))));

        return string(abi.encodePacked("data:application/json;base64,", json));
    }    
}

We also add a deploy script scripts/deploy_BadgeToken.ts which will deploy this NFT contract with name:BadgeToken and symbol:BADGE:

  const token = await BadgeToken.deploy('BadgeToken','BADGE')

Task 2.2: Understand tokenURI()

Let's explain the implementation of ERC721 function tokenURI() .

tokenURI() is a metadata function for ERC721 standard. OpenZeppelin docs :

tokenURI(uint256 tokenId) → string
Returns the Uniform Resource Identifier (URI) for tokenId token.

Usually tokenURI() returns a URI. You can get the resulting URI for each token by concatenating the baseURI and the tokenId.

In our tokenURI(), we return URI as an object with base64 encoded instead:

First we construct the object. The svg image in the object is also base64 encoded.

{
"name":"Badge #1",
"description":"Badge NFT with on-chain SVG image."
"image":"data:image/svg+xml;base64,[svg base64 encoded]"
}

Then we return the object base64 encoded.

data:application/json;base64,(object base64 encoded)

Webapp can get URI by calling tokenURI(tokenId), and decode it to get the name, description and SVG image.

The SVG image is adapted from the LOOT project. It is very simple. It displays the tokenId in the image.

<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin meet' viewBox='0 0 350 350'>
<style>.base { fill: white; font-family: serif; font-size: 300px; }</style>
<rect width='100%' height='100%' fill='brown' />
    <text x='100' y='260' class='base'>
    1
    </text>
</svg>

Task 2.3: Unit test for ERC721 contract

Let's write an unit test script for this contract:

// test/BadgeToken.test.ts
import { expect } from "chai"
import { Signer } from "ethers"
import { ethers } from "hardhat"
import { BadgeToken } from  "../typechain"

const base64 = require( "base-64")

const _name='BadgeToken'
const _symbol='BADGE'

describe("BadgeToken", function () {
  let badge:BadgeToken
  let account0:Signer,account1:Signer

  beforeEach(async function () {
    [account0, account1] = await ethers.getSigners()
    const BadgeToken = await ethers.getContractFactory("BadgeToken")
    badge = await BadgeToken.deploy(_name,_symbol)
  })

  it("Should have the correct name and symbol ", async function () {
    expect(await badge.name()).to.equal(_name)
    expect(await badge.symbol()).to.equal(_symbol)
  })

  it("Should tokenId start from 1 and auto increment", async function () {
    const address1=await account1.getAddress()
    await badge.mintTo(address1)
    expect(await badge.ownerOf(1)).to.equal(address1)

    await badge.mintTo(address1)
    expect(await badge.ownerOf(2)).to.equal(address1)
    expect(await badge.balanceOf(address1)).to.equal(2)
  })

  it("Should mint a token with event", async function () {
    const address1=await account1.getAddress()
    await expect(badge.mintTo(address1))
      .to.emit(badge, 'Transfer')
      .withArgs(ethers.constants.AddressZero,address1, 1)
  })

  it("Should mint a token with desired tokenURI (log result for inspection)", async function () {
    const address1=await account1.getAddress()
    await badge.mintTo(address1)

    const tokenUri = await badge.tokenURI(1)
    // console.log("tokenURI:")
    // console.log(tokenUri)

    const tokenId = 1
    const data = base64.decode(tokenUri.slice(29))
    const itemInfo = JSON.parse(data)
    expect(itemInfo.name).to.be.equal('Badge #'+String(tokenId))
    expect(itemInfo.description).to.be.equal('Badge NFT with on-chain SVG image.')

    const svg = base64.decode(itemInfo.image.slice(26))
    const idInSVG = svg.slice(256,-13)
    expect(idInSVG).to.be.equal(String(tokenId))
    // console.log("SVG image:")
    // console.log(svg)
  })  

  it("Should mint 10 token with desired tokenURI", async function () {
    const address1=await account1.getAddress()

    for(let i=1;i<=10;i++){
      await badge.mintTo(address1)
      const tokenUri = await badge.tokenURI(i)

      const data = base64.decode(tokenUri.slice(29))
      const itemInfo = JSON.parse(data)
      expect(itemInfo.name).to.be.equal('Badge #'+String(i))
      expect(itemInfo.description).to.be.equal('Badge NFT with on-chain SVG image.')

      const svg = base64.decode(itemInfo.image.slice(26))
      const idInSVG = svg.slice(256,-13)
      expect(idInSVG).to.be.equal(String(i))
    }

    expect(await badge.balanceOf(address1)).to.equal(10)
  })  
})

Run the unit test:

yarn hardhat test test/BadgeToken.test.ts

Results:

  BadgeToken
    ✓ Should have the correct name and symbol
    ✓ Should tokenId start from 1 and auto increment
    ✓ Should mint a token with event
    ✓ Should mint a token with desired tokenURI (log result for inspection) (62ms)
    ✓ Should mint 10 token with desired tokenURI (346ms)
  5 passing (1s)

We can also print the tokenURI we get in the unit test for inspection:

tokenURI:
data:application/json;base64,eyJuYW1lIjoiQmFkZ2UgIzEiLCJkZXNjcmlwdGlvbiI6IkJhZGdlIE5GVCB3aXRoIG9uLWNoYWluIFNWRyBpbWFnZS4iLCJpbWFnZSI6ICJkYXRhOmltYWdlL3N2Zyt4bWw7YmFzZTY0LFBITjJaeUI0Yld4dWN6MG5hSFIwY0RvdkwzZDNkeTUzTXk1dmNtY3ZNakF3TUM5emRtY25JSEJ5WlhObGNuWmxRWE53WldOMFVtRjBhVzg5SjNoTmFXNVpUV2x1SUcxbFpYUW5JSFpwWlhkQ2IzZzlKekFnTUNBek5UQWdNelV3Sno0OGMzUjViR1UrTG1KaGMyVWdleUJtYVd4c09pQjNhR2wwWlRzZ1ptOXVkQzFtWVcxcGJIazZJSE5sY21sbU95Qm1iMjUwTFhOcGVtVTZJRE13TUhCNE95QjlQQzl6ZEhsc1pUNDhjbVZqZENCM2FXUjBhRDBuTVRBd0pTY2dhR1ZwWjJoMFBTY3hNREFsSnlCbWFXeHNQU2RpY205M2JpY2dMejQ4ZEdWNGRDQjRQU2N4TURBbklIazlKekkyTUNjZ1kyeGhjM005SjJKaGMyVW5QakU4TDNSbGVIUStQQzl6ZG1jKyJ9
SVG image:
<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin meet' viewBox='0 0 350 350'><style>.base { fill: white; font-family: serif; font-size: 300px; }</style><rect width='100%' height='100%' fill='brown' /><text x='100' y='260' class='base'>1</text></svg>

Task 3: A web page to display NFT item

Task 3.1: Setup webapp project using `Web3-React` & `Chakra UI`

We will use web3 connecting framework Web3-React to get our job done. The web app stack is:

React
Next.js
Chakra UI
Web3-React
Ethers.js
SWR

The _app.tsx is:

// src/pages/_app.tsx
import { ChakraProvider } from '@chakra-ui/react'
import type { AppProps } from 'next/app'
import { Layout } from 'components/layout'
import { Web3ReactProvider } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'

function getLibrary(provider: any): Web3Provider {
  const library = new Web3Provider(provider)
  return library
}

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <ChakraProvider>
        <Layout>
        <Component {...pageProps} />
        </Layout>
      </ChakraProvider>
    </Web3ReactProvider>
  )
}

export default MyApp

We will use the ConnectMetamask component in our previous tutorial: Tutorial: build DApp with Web3-React and SWRTutorial: build DApp with Web3-React and SWR.

Task 3.2: Write a component to display NFT time

In this component, we also use SWR as we do in the previous tutorial. The SWR fetcher is in utils/fetcher.tsx.

// components/CardERC721.tsx
import React, { useEffect,useState } from 'react';
import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import { Box, Text} from '@chakra-ui/react'
import useSWR from 'swr'
import { ERC721ABI as abi} from "abi/ERC721ABI"
import { BigNumber } from 'ethers'
import { fetcher } from 'utils/fetcher'
const base64 = require( "base-64")

interface Props {
    addressContract: string,
    tokenId:BigNumber
}

interface ItemInfo{
  name:string,
  description:string,
  svg:string
}

export default function CardERC721(props:Props){
  const addressContract = props.addressContract
  const {  account, active, library } = useWeb3React<Web3Provider>()

  const [itemInfo, setItemInfo] = useState<ItemInfo>()

  const { data: nftURI } = useSWR([addressContract, 'tokenURI', props.tokenId], {
    fetcher: fetcher(library, abi),
  })

useEffect( () => {
  if(!nftURI) return

  const data = base64.decode(nftURI.slice(29))
  const itemInfo = JSON.parse(data)
  const svg = base64.decode(itemInfo.image.slice(26))
  setItemInfo({
    "name":itemInfo.name,
    "description":itemInfo.description,
    "svg":svg})

},[nftURI])

return (
  <Box my={2} bg='gray.100' borderRadius='md' width={220} height={260} px={3} py={4}>
  {itemInfo
  ?<Box>
    <img src={`data:image/svg+xml;utf8,${itemInfo.svg}`} alt={itemInfo.name} width= '200px' />
    <Text fontSize='xl' px={2} py={2}>{itemInfo.name}</Text>
  </Box>
  :<Box />
  }
  </Box>
)
}

Some explanations:

When connected to MetaMask wallet, this component queries tokenURI(tokenId) to get name, description and svg image of the NFT item.

Let's write a page to display NFT item.

// src/pages/samplenft.tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import { VStack, Heading } from "@chakra-ui/layout"
import ConnectMetamask from 'components/ConnectMetamask'
import CardERC721 from 'components/CardERC721'
import { BigNumber } from 'ethers'

const nftAddress = '0x5fbdb2315678afecb367f032d93f642f64180aa3'
const tokenId = BigNumber.from(1)
const SampleNFTPage: NextPage = () => {

  return (
    <>
      <Head>
        <title>My DAPP</title>
      </Head>

      <Heading as="h3"  my={4}>NFT Marketplace</Heading>

      <ConnectMetamask />

      <VStack>
          <CardERC721 addressContract={nftAddress} tokenId={tokenId} ></CardERC721>
      </VStack>
    </>
  )
}

export default SampleNFTPage

Task 3.3: Run the webapp project

STEP 1: Run a stand-alone local testnet

In another terminal, run in chain/ directory:

yarn hardhat node

STEP 2: Deploy BadgeToken (ERC721) to local testnet

yarn hardhat run scripts/deploy_BadgeToken.ts --network localhost

Result:

Deploying BadgeToken ERC721 token...
BadgeToken deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3

STEP 3: Mint a BadgeToken (tokenId = 1) in hardhat console

Run hardhat console connect to local testenet

yarn hardhat console --network localhost

In console:

nftaddress = '0x5FbDB2315678afecb367f032d93F642f64180aa3'
nft = await ethers.getContractAt("BadgeToken", nftaddress)

await nft.name()
//'BadgeToken'

await nft.mintTo('0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266')
// tx response ...

await nft.tokenURI(1)
//'data:application/json;base64,eyJuYW1lIjoiQmFkZ2UgIzEiLCJk...'

Now we have the NFT item. We will display it on the web page.

STEP 3: prepare your MetaMask

Make sure your MetaMask has the local testnet wich RPC URL http://localhost:8545 and chain id 31337.

STEP 4: run webapp

In webapp/, run:

yarn dev

In chrome browser, goto page: http://localhost:3000/samplenft.

Connect MetaMask, the NFT item will be displayed on the page. (Please note that the image is lazy loading. Wait for loading to be completed.

We can see that the NFT "Badge #1" with tokenId 1 is displayed correctly.

Task 4: NFT marketplace smart contract

Task 4.1: Contract data structure

We adapted the Market.sol smart contract from Nader Dabit's tutorial (V1) to write our marketplace. Thanks a lot. But you should note that we make a lot of changes in this contract.

We define a struct MarketItem:

  struct MarketItem {
    uint id;
    address nftContract;
    uint256 tokenId;
    address payable seller;
    address payable buyer;
    uint256 price;
    State state;
  }

Each market item can be in one of three states:

  enum State { Created, Release, Inactive }

Please note that we can't rely on Created State. If seller transfers the NFT item to others or seller removes approval of the NFT item, the state will still be Created indicating others can buy in the market. Actually others can't buy it.

All items are stored in a mapping:

  mapping(uint256 => MarketItem) private marketItems;

The market has an owner who is the contract deployer. Listing fee will be going to market owner when a listed NFT item is sold in the market.

In the future, we may add functionalities to transfer the ownership to other address or multi-sig wallet. To make the tutorial simple, we skip these functionalities.

This market has a static listing fee:

  uint256 public listingFee = 0.025 ether;
  function getListingFee() public view returns (uint256)

Task 4.2: market methods

The marketplace has two categories of methods:

Core functions:

  function createMarketItem(address nftContract,uint256 tokenId,uint256 price) payable 
  function deleteMarketItem(uint256 itemId) public
  function createMarketSale(address nftContract,uint256 id) public payable

Query functions:

  function fetchActiveItems() public view returns (MarketItem[] memory) 
  function fetchMyPurchasedItems() public view returns (MarketItem[] memory)
  function fetchMyCreatedItems() public view returns (MarketItem[] memory)

The full smart contract goes as follows:

// contracts/NFTMarketplace.sol
// SPDX-License-Identifier: MIT OR Apache-2.0
// 
// adapt and edit from (Nader Dabit): 
//    https://github.com/dabit3/polygon-ethereum-nextjs-marketplace/blob/main/contracts/Market.sol

pragma solidity ^0.8.3;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/security/ReentrancyGuard.sol";
import "@openzeppelin/contracts/utils/Address.sol";

import "hardhat/console.sol";

contract NFTMarketplace is ReentrancyGuard {
  using Counters for Counters.Counter;
  Counters.Counter private _itemCounter;//start from 1
  Counters.Counter private _itemSoldCounter;

  address payable public marketowner;
  uint256 public listingFee = 0.025 ether;

  enum State { Created, Release, Inactive }

  struct MarketItem {
    uint id;
    address nftContract;
    uint256 tokenId;
    address payable seller;
    address payable buyer;
    uint256 price;
    State state;
  }

  mapping(uint256 => MarketItem) private marketItems;

  event MarketItemCreated (
    uint indexed id,
    address indexed nftContract,
    uint256 indexed tokenId,
    address seller,
    address buyer,
    uint256 price,
    State state
  );

  event MarketItemSold (
    uint indexed id,
    address indexed nftContract,
    uint256 indexed tokenId,
    address seller,
    address buyer,
    uint256 price,
    State state
  );

  constructor() {
    marketowner = payable(msg.sender);
  }

  /**
   * @dev Returns the listing fee of the marketplace
   */
  function getListingFee() public view returns (uint256) {
    return listingFee;
  }

  /**
   * @dev create a MarketItem for NFT sale on the marketplace.
   * 
   * List an NFT.
   */
  function createMarketItem(
    address nftContract,
    uint256 tokenId,
    uint256 price
  ) public payable nonReentrant {

    require(price > 0, "Price must be at least 1 wei");
    require(msg.value == listingFee, "Fee must be equal to listing fee");

    require(IERC721(nftContract).getApproved(tokenId) == address(this), "NFT must be approved to market");

    // change to approve mechanism from the original direct transfer to market
    // IERC721(nftContract).transferFrom(msg.sender, address(this), tokenId);

    _itemCounter.increment();
    uint256 id = _itemCounter.current();

    marketItems[id] =  MarketItem(
      id,
      nftContract,
      tokenId,
      payable(msg.sender),
      payable(address(0)),
      price,
      State.Created
    );


    emit MarketItemCreated(
      id,
      nftContract,
      tokenId,
      msg.sender,
      address(0),
      price,
      State.Created
    );
  }

  /**
   * @dev delete a MarketItem from the marketplace.
   * 
   * de-List an NFT.
   * 
   * todo ERC721.approve can't work properly!! comment out
   */
  function deleteMarketItem(uint256 itemId) public nonReentrant {
    require(itemId <= _itemCounter.current(), "id must <= item count");
    require(marketItems[itemId].state == State.Created, "item must be on market");
    MarketItem storage item = marketItems[itemId];

    require(IERC721(item.nftContract).ownerOf(item.tokenId) == msg.sender, "must be the owner");
    require(IERC721(item.nftContract).getApproved(item.tokenId) == address(this), "NFT must be approved to market");

    item.state = State.Inactive;

    emit MarketItemSold(
      itemId,
      item.nftContract,
      item.tokenId,
      item.seller,
      address(0),
      0,
      State.Inactive
    );

  }

  /**
   * @dev (buyer) buy a MarketItem from the marketplace.
   * Transfers ownership of the item, as well as funds
   * NFT:         seller    -> buyer
   * value:       buyer     -> seller
   * listingFee:  contract  -> marketowner
   */
  function createMarketSale(
    address nftContract,
    uint256 id
  ) public payable nonReentrant {

    MarketItem storage item = marketItems[id]; //should use storge!!!!
    uint price = item.price;
    uint tokenId = item.tokenId;

    require(msg.value == price, "Please submit the asking price");
    require(IERC721(nftContract).getApproved(tokenId) == address(this), "NFT must be approved to market");

    IERC721(nftContract).transferFrom(item.seller, msg.sender, tokenId);

    payable(marketowner).transfer(listingFee);
    item.seller.transfer(msg.value);

    item.buyer = payable(msg.sender);
    item.state = State.Release;
    _itemSoldCounter.increment();    

    emit MarketItemSold(
      id,
      nftContract,
      tokenId,
      item.seller,
      msg.sender,
      price,
      State.Release
    );    
  }

  /**
   * @dev Returns all unsold market items
   * condition: 
   *  1) state == Created
   *  2) buyer = 0x0
   *  3) still have approve
   */
  function fetchActiveItems() public view returns (MarketItem[] memory) {
    return fetchHepler(FetchOperator.ActiveItems);
  }

  /**
   * @dev Returns only market items a user has purchased
   * todo pagination
   */
  function fetchMyPurchasedItems() public view returns (MarketItem[] memory) {
    return fetchHepler(FetchOperator.MyPurchasedItems);
  }

  /**
   * @dev Returns only market items a user has created
   * todo pagination
  */
  function fetchMyCreatedItems() public view returns (MarketItem[] memory) {
    return fetchHepler(FetchOperator.MyCreatedItems);
  }

  enum FetchOperator { ActiveItems, MyPurchasedItems, MyCreatedItems}

  /**
   * @dev fetch helper
   * todo pagination   
   */
   function fetchHepler(FetchOperator _op) private view returns (MarketItem[] memory) {     
    uint total = _itemCounter.current();

    uint itemCount = 0;
    for (uint i = 1; i <= total; i++) {
      if (isCondition(marketItems[i], _op)) {
        itemCount ++;
      }
    }

    uint index = 0;
    MarketItem[] memory items = new MarketItem[](itemCount);
    for (uint i = 1; i <= total; i++) {
      if (isCondition(marketItems[i], _op)) {
        items[index] = marketItems[i];
        index ++;
      }
    }
    return items;
  } 

  /**
   * @dev helper to build condition
   *
   * todo should reduce duplicate contract call here
   * (IERC721(item.nftContract).getApproved(item.tokenId) called in two loop
   */
  function isCondition(MarketItem memory item, FetchOperator _op) private view returns (bool){
    if(_op == FetchOperator.MyCreatedItems){ 
      return 
        (item.seller == msg.sender
          && item.state != State.Inactive
        )? true
         : false;
    }else if(_op == FetchOperator.MyPurchasedItems){
      return
        (item.buyer ==  msg.sender) ? true: false;
    }else if(_op == FetchOperator.ActiveItems){
      return 
        (item.buyer == address(0) 
          && item.state == State.Created
          && (IERC721(item.nftContract).getApproved(item.tokenId) == address(this))
        )? true
         : false;
    }else{
      return false;
    }
  }

}

This NFTMarket contract can work, but it is not good. There are at least two jobs to be done:

We should add pagination in the query functions. If there are thousands of items in the market, the query function can't work well.
When we try to verify whether a seller has already transferred the NFT item to others or has removed the approval to the market, we call nft.getApproved thousands of times. This is bad practice. We should try to figure out a solution.

We may also find that letting the webapp query data directly from a smart contract is not a good design. A data indexing layer is needed. The Graph Protocol and subgraph can do this job. You can find an explanation on how to use subgraph in Dabit's NFT market tutorial.

Thinking Note on `delegatecall`

When I built the NFTMarketplace smart contract, I explored the wrong path for about one day and learned a lot. Here is what I learned.

When a seller lists an NFT to the marketplace, he gives market contract approval approve(marketaddress) to transfer NFT from seller to buyer by calling transferFrom(). I would like to choose not to use setApprovalForAll(operator, approved) which will give market contract approval of all my NFTs in one collection.
Seller may want to delete(de-list) an NFT from the market, so we add a function deleteMarketItem(itemId).
The wrong path starts here. I am trying to remove approval for the seller in the market contract.
- Call nft.approve(address(0),tokenId) will revert. The market contract is not the owner of this NFT or approved for all as an operator.
- Maybe we can using delegatecall which will be called using the original msg.sender(the seller). The seller is the owner.
- I always get "Error: VM Exception while processing transaction: reverted with reason string 'ERC721: owner query for nonexistent token'". What's going wrong?
- When I try to delegate call other functions such as name(), the result is not correct.
- Dig, dig, and dig. Finally, I found that I misunderstood delegatecall. Delegatecall uses the storage of the caller(market contract), and it doesn't use the storage of the callee(nft contract). Solidity Docs writes: "Storage, current address and balance still refer to the calling contract, only the code is taken from the called address. "
- So we can't delegate call nft.approve() to remove approval in market contract. We can't access the original data in the NFT contract by delegatecall.

The delegatecall code snippet (which is wrong):

    bytes memory returndata = Address.functionDelegateCall(
      item.nftContract, 
      abi.encodeWithSignature("approve(address,uint256)",address(0),1)
    );
    Address.verifyCallResult(true, returndata, "approve revert");

But this is not the end. I finally found that I should not try to remove approval in the market contract. The logic is wrong.
- Seller calls market contract deleteMarketItem to remove market item.
- Seller doesn't ask market contract to call nft contract "approve()" to remove the approval. (There is a ERC20Permit, but there is no permit in ERC721 yet.)
- The design of blockchain don't allow contract to do this.
If the seller wants to do this, he should do it by himself by calling approve() directly. This is what we do in the unit test await nft.approve(ethers.constants.AddressZero,1)

Opensea suggests to use isApprovedForAll in its tutorial (sample code):

    /**
     * Override isApprovedForAll to whitelist user's OpenSea proxy accounts to enable gas-less listings.
     */
    function isApprovedForAll(address owner, address operator)
        override
        public
        view
        returns (bool)
    {
        // Whitelist OpenSea proxy contract for easy trading.
        ProxyRegistry proxyRegistry = ProxyRegistry(proxyRegistryAddress);
        if (address(proxyRegistry.proxies(owner)) == operator) {
            return true;
        }

        return super.isApprovedForAll(owner, operator);
    }

The "approve for all" mechanism is quite complicated and you can refer to the opensea proxy contract for more information.

Task 4.3: Unit test for NFTMarketplace (core function)

We will add two unit test scripts for NFTMarketplace:

one for core functions
one for query/fetch functions

Unit test script for core functions:

// NFTMarketplace.test.ts
import { expect } from "chai"
import { BigNumber, Signer } from "ethers"
import { ethers } from "hardhat"
import { BadgeToken, NFTMarketplace } from  "../typechain"
import { TransactionResponse, TransactionReceipt } from "@ethersproject/providers"

const _name='BadgeToken'
const _symbol='BADGE'

describe("NFTMarketplace", function () {
  let nft:BadgeToken
  let market:NFTMarketplace
  let account0:Signer,account1:Signer,account2:Signer
  let address0:string, address1:string, address2:string

  let listingFee:BigNumber
  const auctionPrice = ethers.utils.parseUnits('1', 'ether')

  beforeEach(async function () {
    [account0, account1, account2] = await ethers.getSigners()
    address0 = await account0.getAddress()
    address1 = await account1.getAddress()
    address2 = await account2.getAddress()

    const BadgeToken = await ethers.getContractFactory("BadgeToken")
    nft = await BadgeToken.deploy(_name,_symbol)

    const Market = await ethers.getContractFactory("NFTMarketplace")
    market = await Market.deploy()
    listingFee = await market.getListingFee()

  })

  it("Should create market item successfully", async function() {
    await nft.mintTo(address0)  //tokenId=1
    await nft.approve(market.address,1)
    await market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee })

    const items = await market.fetchMyCreatedItems()
    expect(items.length).to.be.equal(1)
  })

  it("Should create market item with EVENT", async function() {
    await nft.mintTo(address0)  //tokenId=1
    await nft.approve(market.address,1)
    await expect(market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee }))
      .to.emit(market, 'MarketItemCreated')
      .withArgs(
        1,
        nft.address,
        1,
        address0,
        ethers.constants.AddressZero,
        auctionPrice, 
        0)
  })

  it("Should revert to create market item if nft is not approved", async function() {
    await nft.mintTo(address0)  //tokenId=1
    // await nft.approve(market.address,1)
    await expect(market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee }))
      .to.be.revertedWith('NFT must be approved to market')
  })

  it("Should create market item and buy (by address#1) successfully", async function() {
    await nft.mintTo(address0)  //tokenId=1
    await nft.approve(market.address,1)
    await market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee })

    await expect(market.connect(account1).createMarketSale(nft.address, 1, { value: auctionPrice}))
      .to.emit(market, 'MarketItemSold')
      .withArgs(
        1,
        nft.address,
        1,
        address0,
        address1,
        auctionPrice, 
        1)

    expect(await nft.ownerOf(1)).to.be.equal(address1)

  })

  it("Should revert buy if seller remove approve", async function() {
    await nft.mintTo(address0)  //tokenId=1
    await nft.approve(market.address,1)
    await market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee })

    await nft.approve(ethers.constants.AddressZero,1)

    await expect(market.connect(account1).createMarketSale(nft.address, 1, { value: auctionPrice}))
      .to.be.reverted
  })

  it("Should revert buy if seller transfer the token out", async function() {
    await nft.mintTo(address0)  //tokenId=1
    await nft.approve(market.address,1)
    await market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee })

    await nft.transferFrom(address0,address2,1)

    await expect(market.connect(account1).createMarketSale(nft.address, 1, { value: auctionPrice}))
      .to.be.reverted
  })

  it("Should revert to delete(de-list) with wrong params", async function() {
    await nft.mintTo(address0)  //tokenId=1
    await nft.approve(market.address,1)
    await market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee })

    //not a correct id
    await expect(market.deleteMarketItem(2)).to.be.reverted

    //not owner
    await expect(market.connect(account1).deleteMarketItem(1)).to.be.reverted

    await nft.transferFrom(address0,address1,1)
    //not approved to market now
    await expect(market.deleteMarketItem(1)).to.be.reverted
  })

  it("Should create market item and delete(de-list) successfully", async function() {
    await nft.mintTo(address0)  //tokenId=1
    await nft.approve(market.address,1)

    await market.createMarketItem(nft.address, 1, auctionPrice, { value: listingFee })
    await market.deleteMarketItem(1)

    await nft.approve(ethers.constants.AddressZero,1)

    // should revert if trying to delete again
    await expect(market.deleteMarketItem(1))
      .to.be.reverted
  })

  it("Should seller, buyer and market owner correct ETH value after sale", async function() {
    let txresponse:TransactionResponse, txreceipt:TransactionReceipt
    let gas
    const marketownerBalance = await ethers.provider.getBalance(address0)

    await nft.connect(account1).mintTo(address1)  //tokenId=1
    await nft.connect(account1).approve(market.address,1)

    let sellerBalance = await ethers.provider.getBalance(address1)
    txresponse = await market.connect(account1).createMarketItem(nft.address, 1, auctionPrice, { value: listingFee })
    const sellerAfter = await ethers.provider.getBalance(address1)

    txreceipt = await txresponse.wait()
    gas = txreceipt.gasUsed.mul(txreceipt.effectiveGasPrice)

    // sellerAfter = sellerBalance - listingFee - gas
    expect(sellerAfter).to.equal(sellerBalance.sub( listingFee).sub(gas))

    const buyerBalance = await ethers.provider.getBalance(address2)
    txresponse =  await market.connect(account2).createMarketSale(nft.address, 1, { value: auctionPrice})
    const buyerAfter = await ethers.provider.getBalance(address2)

    txreceipt = await txresponse.wait()
    gas = txreceipt.gasUsed.mul(txreceipt.effectiveGasPrice)
    expect(buyerAfter).to.equal(buyerBalance.sub(auctionPrice).sub(gas))

    const marketownerAfter = await ethers.provider.getBalance(address0)
    expect(marketownerAfter).to.equal(marketownerBalance.add(listingFee))
  })
})

Run:

yarn hardhat test test/NFTMarketplace.test.ts

Results:

  NFTMarketplace
    ✓ Should create market item successfully (49ms)
    ✓ Should create market item with EVENT
    ✓ Should revert to create market item if nft is not approved
    ✓ Should create market item and buy (by address#1) successfully (48ms)
    ✓ Should revert buy if seller remove approve (49ms)
    ✓ Should revert buy if seller transfer the token out (40ms)
    ✓ Should revert to delete(de-list) with wrong params (49ms)
    ✓ Should create market item and delete(de-list) successfully (44ms)
    ✓ Should seller, buyer and market owner correct ETH value after sale (43ms)
  9 passing (1s)

Task 4.4: Unit test for NFTMarketplace (query function)

Unit test script for query functions:

// NFTMarketplaceFetch.test.ts
import { expect } from "chai"
import { BigNumber, Signer } from "ethers"
import { ethers } from "hardhat"
import { BadgeToken, NFTMarketplace } from  "../typechain"

const _name='BadgeToken'
const _symbol='BADGE'

describe("NFTMarketplace Fetch functions", function () {
  let nft:BadgeToken
  let market:NFTMarketplace
  let account0:Signer,account1:Signer,account2:Signer
  let address0:string, address1:string, address2:string

  let listingFee:BigNumber
  const auctionPrice = ethers.utils.parseUnits('1', 'ether')

  beforeEach(async function () {
    [account0, account1, account2] = await ethers.getSigners()
    address0 = await account0.getAddress()
    address1 = await account1.getAddress()
    address2 = await account2.getAddress()

    const BadgeToken = await ethers.getContractFactory("BadgeToken")
    nft = await BadgeToken.deploy(_name,_symbol)
    // tokenAddress = nft.address

    const Market = await ethers.getContractFactory("NFTMarketplace")
    market = await Market.deploy()
    listingFee = await market.getListingFee()

    // console.log("1. == mint 1-6 to account#0")
    for(let i=1;i<=6;i++){
      await nft.mintTo(address0)
    }

    // console.log("3. == mint 7-9 to account#1")
    for(let i=7;i<=9;i++){
      await nft.connect(account1).mintTo(address1)
    }

    // console.log("2. == list 1-6 to market")
    for(let i=1;i<=6;i++){
      await nft.approve(market.address,i)
      await market.createMarketItem(nft.address, i, auctionPrice, { value: listingFee })
    }    
  })

  it("Should fetchActiveItems correctly", async function() {
    const items = await market.fetchActiveItems()
    expect(items.length).to.be.equal(6)
  })  

  it("Should fetchMyCreatedItems correctly", async function() {
    const items = await market.fetchMyCreatedItems()
    expect(items.length).to.be.equal(6)

    //should delete correctly
    await market.deleteMarketItem(1)
    const newitems = await market.fetchMyCreatedItems()
    expect(newitems.length).to.be.equal(5)
  })

  it("Should fetchMyPurchasedItems correctly", async function() {
    const items = await market.fetchMyPurchasedItems()
    expect(items.length).to.be.equal(0)
  })

  it("Should fetchActiveItems with correct return values", async function() {
    const items = await market.fetchActiveItems()

    expect(items[0].id).to.be.equal(BigNumber.from(1))
    expect(items[0].nftContract).to.be.equal(nft.address)
    expect(items[0].tokenId).to.be.equal(BigNumber.from(1))
    expect(items[0].seller).to.be.equal(address0)
    expect(items[0].buyer).to.be.equal(ethers.constants.AddressZero)
    expect(items[0].state).to.be.equal(0)//enum State.Created
  }) 

  it("Should fetchMyPurchasedItems with correct return values", async function() {
    await market.connect(account1).createMarketSale(nft.address, 1, { value: auctionPrice})
    const items = await market.connect(account1).fetchMyPurchasedItems()

    expect(items[0].id).to.be.equal(BigNumber.from(1))
    expect(items[0].nftContract).to.be.equal(nft.address)
    expect(items[0].tokenId).to.be.equal(BigNumber.from(1))
    expect(items[0].seller).to.be.equal(address0)
    expect(items[0].buyer).to.be.equal(address1)//address#1
    expect(items[0].state).to.be.equal(1)//enum State.Release

  })    

})

Run:

yarn hardhat test test/NFTMarketplaceFetch.test.ts

Results:

  NFTMarketplace Fetch functions
    ✓ Should fetchActiveItems correctly (48ms)
    ✓ Should fetchMyCreatedItems correctly (54ms)
    ✓ Should fetchMyPurchasedItems correctly
    ✓ Should fetchActiveItems with correct return values
    ✓ Should fetchMyPurchasedItems with correct return values
  5 passing (2s)

Task 4.5: `playMarket.ts` helper script for developing smart contract

We write a script src/playMarket.ts. During the development and debug process, I run this script again and again. It helps me to see whether the market contract can work as it is designed to.

// src/playMarket.ts
import { Signer } from "ethers"
import { ethers } from "hardhat"
import { BadgeToken, NFTMarketplace } from  "../typechain"

const base64 = require( "base-64")

const _name='BadgeToken'
const _symbol='BADGE'

async function main() {

  let account0:Signer,account1:Signer
  [account0, account1] = await ethers.getSigners()
  const address0=await account0.getAddress()
  const address1=await account1.getAddress()


  /* deploy the marketplace */
  const Market = await ethers.getContractFactory("NFTMarketplace")
  const market:NFTMarketplace = await Market.deploy()
  await market.deployed()
  const marketAddress = market.address

  /* deploy the NFT contract */
  const NFT = await ethers.getContractFactory("BadgeToken")
  const nft:BadgeToken = await NFT.deploy(_name,_symbol)
  await nft.deployed()
  const tokenAddress = nft.address

  console.log("marketAddress",marketAddress)
  console.log("nftContractAddress",tokenAddress)

  /* create two tokens */
  await nft.mintTo(address0) //'1'
  await nft.mintTo(address0) //'2' 
  await nft.mintTo(address0) //'3'

  const listingFee = await market.getListingFee()
  const auctionPrice = ethers.utils.parseUnits('1', 'ether')

  await nft.approve(marketAddress,1)
  await nft.approve(marketAddress,2)
  await nft.approve(marketAddress,3)
  console.log("Approve marketAddress",marketAddress)

  // /* put both tokens for sale */
  await market.createMarketItem(tokenAddress, 1, auctionPrice, { value: listingFee })
  await market.createMarketItem(tokenAddress, 2, auctionPrice, { value: listingFee })
  await market.createMarketItem(tokenAddress, 3, auctionPrice, { value: listingFee })

  // test transfer
  await nft.transferFrom(address0,address1,2)

  /* execute sale of token to another user */
  await market.connect(account1).createMarketSale(tokenAddress, 1, { value: auctionPrice})

  /* query for and return the unsold items */
  console.log("==after purchase & Transfer==")

  let items = await market.fetchActiveItems()
  let printitems
  printitems = await parseItems(items,nft)
  printitems.map((item)=>{printHelper(item,true,false)})
  // console.log( await parseItems(items,nft))

  console.log("==after delete==")
  await market.deleteMarketItem(3)

  items = await market.fetchActiveItems()
  printitems = await parseItems(items,nft)
  printitems.map((item)=>{printHelper(item,true,false)})
  // console.log( await parseItems(items,nft))

  console.log("==my list items==")
  items = await market.fetchMyCreatedItems()
  printitems = await parseItems(items,nft)
  printitems.map((item)=>{printHelper(item,true,false)})

  console.log("")
  console.log("==address1 purchased item (only one, tokenId =1)==")
  items = await market.connect(account1).fetchMyPurchasedItems()
  printitems = await parseItems(items,nft)
  printitems.map((item)=>{printHelper(item,true,true)})

}

async function parseItems(items:any,nft:BadgeToken) {
  let parsed=  await Promise.all(items.map(async (item:any) => {
    const tokenUri = await nft.tokenURI(item.tokenId)
    return {
      price: item.price.toString(),
      tokenId: item.tokenId.toString(),
      seller: item.seller,
      buyer: item.buyer,
      tokenUri
    }
  }))

  return parsed
}

function printHelper(item:any,flagUri=false,flagSVG=false){
  if(flagUri){
    const {name,description,svg}= parseNFT(item)
    console.log("id & name:",item.tokenId,name)
    if(flagSVG) console.log(svg)
  }else{
    console.log("id       :",item.tokenId)
  }
}

function parseNFT(item:any){
  const data = base64.decode(item.tokenUri.slice(29))
  const itemInfo = JSON.parse(data)
  const svg = base64.decode(itemInfo.image.slice(26))
  return(
    {"name":itemInfo.name,
     "description":itemInfo.description,
     "svg":svg})  
}

main().catch((error) => {
  console.error(error)
  process.exitCode = 1
})

What we do in this script:

deploy BadgeToken NFT and NFTMarketplace
mint 3 NFT items to address0
approve 3 NFT items to the market contract
list 3 NFT items to NFTMarketplace
transfer Badge #3 to other
the listed items should be #1,#2
address1(account1) buy Badge #1
address1 purchased item should be #1
print tokenId, name, svg for inspection

Run:

yarn hardhat run src/playMarket.ts

Result:

marketAddress 0x5FbDB2315678afecb367f032d93F642f64180aa3
nftContractAddress 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512
Approve marketAddress 0x5FbDB2315678afecb367f032d93F642f64180aa3
==after purchase & Transfer==
id & name: 3 Badge #3
==after delete==
==my list items==
id & name: 1 Badge #1
id & name: 2 Badge #2

==address1 purchased item svg (only one, tokenId =1)==
id & name: 1 Badge #1
<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='xMinYMin meet' viewBox='0 0 350 350'><style>.base { fill: white; font-family: serif; font-size: 300px; }</style><rect width='100%' height='100%' fill='brown' /><text x='100' y='260' class='base'>1</text></svg>
✨  Done in 4.42s.

Task 4.6: Scripts to prepare for webapp

We need to prepare data for the webapp:

1-6 by Account#0, 1- Account1, 2- Account#2
7-9 by Account#1, 7,8 - Account#0
In market: 3,4,5,9 (6 delist by Account#0)
Account#0:Buy 7,8, List:1-5( 6 delisted)
Account#1:Buy 1, List:7-9
Account#2:Buy 2, List:n/a

// src/prepare.ts
import { Signer } from "ethers"
import { ethers } from "hardhat"
import { BadgeToken, NFTMarketplace } from  "../typechain"
import { tokenAddress, marketAddress } from "./projectsetting"

const _name='BadgeToken'
const _symbol='BADGE'

async function main() {

  console.log("========   deploy to a **new** localhost ======")

  /* deploy the NFT contract */
  const NFT = await ethers.getContractFactory("BadgeToken")
  const nftContract:BadgeToken = await NFT.deploy(_name,_symbol)
  await nftContract.deployed()

  /* deploy the marketplace */
  const Market = await ethers.getContractFactory("NFTMarketplace")
  const marketContract:NFTMarketplace = await Market.deploy()

  console.log("nftContractAddress:",nftContract.address)
  console.log("marketAddress     :",marketContract.address)

  console.log("========   Prepare for webapp dev ======")
  console.log("nftContractAddress:",tokenAddress)
  console.log("marketAddress     :",marketAddress)
  console.log("**should be the same**")

  let owner:Signer,account1:Signer,account2:Signer

  [owner, account1,account2] = await ethers.getSigners()
  const address0 = await owner.getAddress()
  const address1 = await account1.getAddress()
  const address2 = await account2.getAddress()

  const market:NFTMarketplace = await ethers.getContractAt("NFTMarketplace", marketAddress)
  const nft:BadgeToken = await ethers.getContractAt("BadgeToken", tokenAddress)

  const listingFee = await market.getListingFee()
  const auctionPrice = ethers.utils.parseUnits('1', 'ether')

  console.log("1. == mint 1-6 to account#0")
  for(let i=1;i<=6;i++){
    await nft.mintTo(address0)
  }

  console.log("2. == list 1-6 to market")
  for(let i=1;i<=6;i++){
    await nft.approve(marketAddress,i)
    await market.createMarketItem(tokenAddress, i, auctionPrice, { value: listingFee })
  }

  console.log("3. == mint 7-9 to account#1")
  for(let i=7;i<=9;i++){
    await nft.connect(account1).mintTo(address1)
  }

  console.log("4. == list 1-6 to market")
  for(let i=7;i<=9;i++){
    await nft.connect(account1).approve(marketAddress,i)
    await market.connect(account1).createMarketItem(tokenAddress, i, auctionPrice, { value: listingFee })
  }

  console.log("5. == account#0 buy 7 & 8")
  await market.createMarketSale(tokenAddress, 7, { value: auctionPrice})
  await market.createMarketSale(tokenAddress, 8, { value: auctionPrice})

  console.log("6. == account#1 buy 1")
  await market.connect(account1).createMarketSale(tokenAddress, 1, { value: auctionPrice})

  console.log("7. == account#2 buy 2")
  await market.connect(account2).createMarketSale(tokenAddress, 2, { value: auctionPrice})

  console.log("8. == account#0 delete 6")
  await market.deleteMarketItem(6)

}

main().catch((error) => {
  console.error(error)
  process.exitCode = 1
})

Run a stand-alone local testnet in another terminal:

yarn hardhat node

Run:

yarn hardhat run src/prepare.ts --network localhost

Results:

========   deploy to a **new** localhost ======
nftContractAddress: 0x5FbDB2315678afecb367f032d93F642f64180aa3
marketAddress     : 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512
========   Prepare for webapp dev ======
nftContractAddress: 0x5FbDB2315678afecb367f032d93F642f64180aa3
marketAddress     : 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512
**should be the same**
1. == mint 1-6 to account#0
2. == list 1-6 to market
3. == mint 7-9 to account#1
4. == list 1-6 to market
5. == account#0 buy 7 & 8
6. == account#1 buy 1
7. == account#2 buy 2
8. == account#0 delete 6
✨  Done in 5.81s.

Task 5: Webapp for NFTMarketplace

Task 5.1: add component `ReadNFTMarket`

Currently, we query market contract directly instead of using SWR in this code snippet.

// components/ReadNFTMarket.tsx
import React from 'react'
import { useEffect,useState } from 'react';
import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import { Contract } from "@ethersproject/contracts";
import { Grid, GridItem, Box, Text, Button } from "@chakra-ui/react"
import { BigNumber, ethers } from 'ethers';
import useSWR from 'swr'
import { addressNFTContract, addressMarketContract }  from '../projectsetting'
import  CardERC721  from "./CardERC721"

interface Props {
    option: number
}

export default function ReadNFTMarket(props:Props){
  const abiJSON = require("abi/NFTMarketplace.json")
  const abi = abiJSON.abi
  const [items,setItems] = useState<[]>()

  const {  account, active, library} = useWeb3React<Web3Provider>()

  // const { data: items} = useSWR([addressContract, 'fetchActiveItems'], {
  //   fetcher: fetcher(library, abi),
  // })

useEffect( () => {
    if(! active)
      setItems(undefined)

    if(!(active && account && library)) return

    // console.log(addressContract,abi,library)
    const market:Contract = new Contract(addressMarketContract, abi, library);
    console.log(market.provider)
    console.log(account)

    library.getCode(addressMarketContract).then((result:string)=>{
      //check whether it is a contract
      if(result === '0x') return

      switch(props.option){
        case 0:
          market.fetchActiveItems({from:account}).then((items:any)=>{
            setItems(items)
          })    
          break;
        case 1:
          market.fetchMyPurchasedItems({from:account}).then((items:any)=>{
            setItems(items)
          })    
          break;
        case 2:
          market.fetchMyCreatedItems({from:account}).then((items:any)=>{
            setItems(items)
            console.log(items)
          })    
          break;
        default:
      }

    })

    //called only when changed to active
},[active,account])


async function buyInNFTMarket(event:React.FormEvent,itemId:BigNumber) {
  event.preventDefault()

  if(!(active && account && library)) return

  //TODO check whether item is available beforehand

  const market:Contract = new Contract(addressMarketContract, abi, library.getSigner());
  const auctionPrice = ethers.utils.parseUnits('1', 'ether')
  market.createMarketSale(
      addressNFTContract, 
      itemId, 
      { value: auctionPrice}
    ).catch('error', console.error)
}

const state = ["On Sale","Sold","Inactive"]

return (
  <Grid templateColumns='repeat(3, 1fr)' gap={0} w='100%'>

    {items
    ? 
    (items.length ==0)
      ?<Box>no item</Box>
      :items.map((item:any)=>{
        return(
          <GridItem key={item.id} >
            <CardERC721 addressContract={item.nftContract} tokenId={item.tokenId} ></CardERC721>
            <Text fontSize='sm' px={5} pb={1}> {state[item.state]} </Text> 
            {((item.seller == account && item.buyer == ethers.constants.AddressZero) || (item.buyer == account))
            ?<Text fontSize='sm' px={5} pb={1}> owned by you </Text> 
            :<Text></Text>
            }
            <Box>{
            (item.seller != account && item.state == 0)
            ? <Button width={220} type="submit" onClick={(e)=>buyInNFTMarket(e,item.id)}>Buy this!</Button>
            : <Text></Text>
            }
            </Box>
          </GridItem>)
      })
    :<Box></Box>}
  </Grid>

  )
}

Task 5.2: add `ReadNFTMarket` to index

We add three ReadNFTMarket to index.tsx:

one for all market items
one for my purchased items
one for my created items

Task 5.3: Run the DApp

STEP 1: run a new local testnet

In another terminal, run in chain/

yarn hardhat node

STEP 2: prepare data for webapp
Run in chain/

yarn hardhat run src/prepare.ts --network localhost

STEP 3: run webapp

Run in webapp/

yarn dev

STEP 4: browser http://localhost:3000/ and connect MetaMask

Set your MetaMask's mnemonics the Hardhat pre-defined ref link and add the accounts in it:

test test test test test test 
test test test test test junk

STEP 5: buy Badge #9 as Account#0

STEP 6: switch to Account#1 in MetaMask, buy Badge #3

Now you have an NFT marketplace. Congratulations.

You can continue to deploy it to public testnet(ropsten), ethereum mainnet, sidechain(BSC/Polygon), Layer2(Arbitrum/Optimism).

Optional Task 6: Deploy to Polygon and query using Alchemy NFT API

Task 6.1 Deploy to Polygon

In this optional task, I will deploy the NFT contract and the NFTMarketplace contract to Polygon mainnet as the gas fee is ok. You can also choose to deploy to Ethereum testnet(Goerli), Polygon testnet(Mumbai) or Layer 2 testnet(such as Arbitrum Goerli).

STEP 1. Edit .env with Alchemy URL with key, your private key for testing, Polygonscan API key. You may need to add polygon in your hardhat.config.ts

POLYGONSCAN_API_KEY=ABC123ABC123ABC123ABC123ABC123ABC1
POLYGON_URL=https://polygon-mainnet.g.alchemy.com/v2/<YOUR ALCHEMY KEY>
POLYGON_PRIVATE_KEY=0xabc123abc123abc123abc123abc123abc123abc123abc123abc123abc123abc1

STEP 2. Deploy the NFT contract and verify on polygonscan.com. Run:

yarn hardhat run scripts/deploy_BadgeToken.ts --network polygon
// BadgeToken deployed to: 0x1FC8b9DC757FD50Bfec8bbE103256F176435faEE

yarn hardhat verify --network polygon 0x1FC8b9DC757FD50Bfec8bbE103256F176435faEE 'BadgeToken' 'BADGE'
// Successfully verified contract BadgeToken on Etherscan.
// https://polygonscan.com/address/0x1FC8b9DC757FD50Bfec8bbE103256F176435faEE#code

STEP 3. Deploy the NFTMarketplace and verify

yarn hardhat run scripts/deploy_Marketplace.ts --network polygon
// NFTMarketplace deployed to: 0x2B7302B1ABCD30Cd475d78688312529027d57bEf

yarn hardhat verify --network polygon 0x2B7302B1ABCD30Cd475d78688312529027d57bEf
// Successfully verified contract NFTMarketplace on Etherscan.
// https://polygonscan.com/address/0x2B7302B1ABCD30Cd475d78688312529027d57bEf#code

Task 6.2 Mint NFT and list on marketplace

STEP 4. Mint one NFT (tokenId=1) to your testing account on https://polygonscan.com/

You can view the NFT "Badge #1" on opensea: https://opensea.io/assets/matic/0x1fc8b9dc757fd50bfec8bbe103256f176435faee/1

STEP 5. List your NFT item "Badge #1" to NFTMarketpalce contract on https://polygonscan.com/

First you need to approve the NFT item "Badge #1" to the NFTMarketpalce.

Then you call CreateMarketItem().

STEP 6. Run the webapp. After connecting the wallet, you can see the item in the market.

Note: remember to edit the NFT contract and NFTMarketpalce contract address in webapp/src/projectsetting.ts.

Task 6.3 Query NFT using Alchemy NFT APIs

Now, we can switch to using Alchemy NFT APIs(docs link) to query NFT data and display it in our webapp.

Let's try it. We will use Alchemy SDK here for demonstration.

yarn add alchemy-sdk

The code snippet is adapted from Alchemy NFT APIs docs(link). You will need an Alchemy API Key to run it.

// This script demonstrates access to the NFT API via the Alchemy SDK.
import { Network, Alchemy } from "alchemy-sdk";
import  base64  from  "base-64"

const settings = {
    apiKey: "Your Alchemy API Key",
    network: Network.MATIC_MAINNET,
};

const alchemy = new Alchemy(settings);

const addressNFTContract = "0x1FC8b9DC757FD50Bfec8bbE103256F176435faEE"
const owner = await alchemy.nft.getOwnersForNft(addressNFTContract, "1")

console.log("Badge #1 owner:", owner )

// Print NFT metadata returned in the response:
const metadata = await alchemy.nft.getNftMetadata(
    addressNFTContract,
    "1"
  )

console.log("tokenURI:", metadata.tokenUri)
const media = metadata.media[0].raw
console.log("media:", media)

const svg = base64.decode(media.slice(26))
console.log(svg)

Results:

Badge #1 owner: { owners: [ '0x08e2af90ff53a3d3952eaa881bf9b3c05e893462' ] }
tokenURI: {
  raw: 'data:application/json;base64,eyJuYW...',
  gateway: ''
}
media: data:image/svg+xml;base64,PHN2...

<svg xmlns='http://www.w3.org/2000/svg' 
preserveAspectRatio='xMinYMin meet' 
viewBox='0 0 350 350'>
<style>.base { fill: white; font-family: serif; font-size: 300px; }</style>
<rect width='100%' height='100%' fill='brown' />
<text x='100' y='260' class='base'>1</text>
</svg>

That is it. We have developed a super simplified version of Opensea including contract and webapp. There is a lot of work to be done. Take one for example:

Your first version of NFTMarketpalce works well. Several weeks later, you find that you need to add new functionality to NFTMarketplace.
A smart contract is immutable. Deploying a new version of NFTMarketplace and asking users to list their NFT to the new contract is not a good idea.
Now you need upgradeable smart contract (proxy contract pattern). You can learn how to develop proxy contract in my another tutorial: Tutorial: write upgradeable smart contract (proxy) using OpenZeppelin.

Tutorial List:

6. Tutorial: write upgradeable smart contract (proxy) using OpenZeppelin(7 Tasks)

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

7. Tutorial: Build an NFT marketplace DApp like Opensea(5 Tasks)

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

If you find this tutorial helpful, follow me at Twitter @fjun99

Web3 Tutorial: build DApp with Web3-React and SWR

fangjun — Thu, 24 Feb 2022 14:18:00 +0000

In "Tutorial: Build DAPP with hardhat, React and Ethers.js", we connect to and interact with the blockchain using Ethers.js directly. It is ok, but there are tedious processes needed to be done by ourselves.

We would rather use handy frameworks to help us in three aspects:

maintain context and connect with blockchain.
connect to different kinds of blockchain providers.
query blockchain more efficiently.

Web3-React, a connecting framework for React and Ethereum, can help us with job 1 & 2. (We will focus on job 1.) Web3-React is an open source framework developed by Uniswap engineering Lead Noah Zinsmeister. You can also try WAGMI: React Hooks for Ethereum.

SWR can help us to query blockchains efficiently. SWR (stale-while-revalidate) is a library of react hooks for data fetching. I learned how to use SWR with blockchain from Lorenzo Sicilia's tutorial How to Fetch and Update Data From Ethereum with React and SWR.

I am still trying to find an efficient way to deal with Event. The Graph (sub-graph) is one of the good choices. The Graph Protocol and sub-graph are widely used by DeFi applications. In Nader Dabit's tutorial "The Complete Guide to Full Stack Web3 Development", he gives us a clear guide on how to use sub-graph.

Special thanks to Lorenzo Sicilia and his tutorial. I adapted the SWR flow and some code snippets from him.

You can find the code repos for this tutorial:
Hardhat project: https://github.com/fjun99/chain-tutorial-hardhat-starter
Webapp project: https://github.com/fjun99/web3app-tutrial-using-web3react

Let's start building our DApp using Web3-React.

Task 1: Prepare webapp project and smart contract

The first half of Task 1 is the same as the ones in "Tutorial: build DApp with Hardhat, React and Ethers.js". Please refer to that tutorial.

Tutorial: build DApp with Hardhat, React and Ethers.js

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

Task 1: setup development environment

Task 1.1 Install Hardhat and init a Hardhat project

Task 1.2 Development Circle in Hardhat

Task 1.3 MetaMask Switch Local testnet

Task 1.4 Create webapp with Next.js and Chakra UI

Task 1.5 Edit webapp - header, layout, _app.tsx, index.tsx

We choose to download the webapp scaffold code from our github repo.

First, we make a hhproject/ directory for our project (hhproject/chain/ for hardhat project, hhproject/webapp/ for React/Node.js webapp):

mkdir hhproject && cd hhproject

Project directory structure:

- hhproject
  - chain (working dir for hardhat)
    - contracts
    - test
    - scripts
  - webapp (working dir for NextJS app)
    - src
      - pages
      - components

Download an empty webapp scaffold:

git clone https://github.com/fjun99/webapp-tutorial-scaffold.git webapp
cd webapp
yarn install
yarn dev

We also need to prepare an ERC20 token ClassToken for our webapp to interact with. This is the second half of Task 1.

This job can be done same as Task 3 of "Tutorial: build DApp with Hardhat, React and Ethers.js"

Task 3: Build ERC20 smart contract using OpenZeppelin

Task 3.1 Write ERC20 smart contract

Task 3.2 Compile smart contract

Task 3.3 Add unit test script

Task 3.4 Add deploy script

Task 3.5 Run stand-alone testnet again and deploy to it

Task 3.6 Interact with ClassToken in hardhat console

Task 3.7 Add token to MetaMask

Again, we choose to download the hardhat chain starter project from github repo.In your hhproject/ directory:

git clone git@github.com:fjun99/chain-tutorial-hardhat-starter.git chain
cd chain
yarn install

Let's run "compile, test, deploy" circle of smart contract development.

In another terminal, run command line in hhproject/chain/ directory to start a stand-alone Hardhat Network (local testnet) :

yarn hardhat node

Then compile, test and deploy smart contract:

yarn hardhat compile
yarn hardhat test test/ClassToken.test.ts
yarn hardhat run scripts/deploy_classtoken.ts --network localhost
// ClassToken deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3
// ✨  Done in 4.04s.

Now we have ClassToken deployed to local testnet: 0x5FbDB2315678afecb367f032d93F642f64180aa3

Task 2: Add Web3-React to our webapp - Connect button

Task 2.1: Understanding Web3-React

From my point of view, Web3-React is a web3 blockchain connecting framework which provides three features we need:

Web3ReactProvder, a react context we can access throughout our web app.
useWeb3React, handy react hook to interact with blockchain.
Connectors of several kinds of blockchain providers, such as MetaMask (browser extension), RPC connector(Alchemy and Infura), QR code connector(WalletConnect), Hardware connector (Ledger/Trezor).

Currently Web3-React has stable V6 and beta V8. We will use V6 in our tutorial.

Task 2.2: Install `Web3-React`, `Ethers.js` and add `Web3ReactProvder`

STEP 1: install dependencies

In the webapp directory, run:

yarn add @web3-react/core
yarn add @web3-react/injected-connector
yarn add ethers
yarn add swr

We will use swr later.

STEP 2: edit pages/_app.tsx:

// src/pages/_app.tsx
import { ChakraProvider } from '@chakra-ui/react'
import type { AppProps } from 'next/app'
import { Layout } from 'components/layout'
import { Web3ReactProvider } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'

function getLibrary(provider: any): Web3Provider {
  const library = new Web3Provider(provider)
  return library
}


function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <ChakraProvider>
        <Layout>
        <Component {...pageProps} />
        </Layout>
      </ChakraProvider>
    </Web3ReactProvider>
  )
}

export default MyApp

Explanations:

We add a react context provider Web3ReactProvider in _app.tsx.
Blockchain provider (library) is an Ethers.js Web3Provider which we can add connector and activate later using hooks.

Task 2.3: Add an empty ConnectMetamask component

The relationship between connector, provider and signer in Ethers.js is illustrated in the graph.

In this sub-task we will add an empty ConnectMetamask component.

STEP 1: Add src/components/ConnectMetamask.tsx:

import { useEffect } from 'react'

import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import { Box, Button, Text} from '@chakra-ui/react'
import { injected } from 'utils/connectors'
import { UserRejectedRequestError } from '@web3-react/injected-connector'
import { formatAddress } from 'utils/helpers'

const ConnectMetamask = () => {

    const { chainId, account, activate,deactivate, setError, active,library ,connector} = useWeb3React<Web3Provider>()

    const onClickConnect = () => {
      activate(injected,(error) => {
        if (error instanceof UserRejectedRequestError) {
          // ignore user rejected error
          console.log("user refused")
        } else {
          setError(error)
        }
      }, false)
    }

    const onClickDisconnect = () => {
        deactivate()
      }

    useEffect(() => {
      console.log(chainId, account, active,library,connector)
    })

    return (
        <div>
        {active && typeof account === 'string' ? (
          <Box>  
            <Button type="button" w='100%' onClick={onClickDisconnect}>
                Account: {formatAddress(account,4)}
            </Button>
            <Text fontSize="sm" w='100%' my='2' align='center'>ChainID: {chainId} connected</Text>
          </Box>
        ) : (
          <Box>
            <Button type="button" w='100%' onClick={onClickConnect}>
                Connect MetaMask
            </Button>
            <Text fontSize="sm" w='100%' my='2' align='center'> not connected </Text>
        </Box>  

        )}
        </div>
    )
  }

export default ConnectMetamask

STEP 2: define a injected connector in uitls/connectors.tsx:

import { InjectedConnector } from "@web3-react/injected-connector";

export const injected = new InjectedConnector({
    supportedChainIds: [
        1, 
        3, 
        4, 
        5, 
        10, 
        42, 
        31337, 
        42161
    ]
})

STEP 3: add a helper in utils/helpers.tsx

export function formatAddress(value: string, length: number = 4) {
    return `${value.substring(0, length + 2)}...${value.substring(value.length - length)}`
}

STEP 4: add ConnectMetamask component to index.tsx

import ConnectMetamask from 'components/ConnectMetamask'
...
      <ConnectMetamask />

STEP 5: run web app by running yarn dev

Explanation of what do we do here:

We get hooks from useWeb3React: chainId, account, activate,deactivate, setError, active,library ,connector
When a user clicks connect, we call activate(injected). inject is InjectedConnector (mostly it means window.ethereum injected by MetaMask) that we can configure.
When user click disconnect, we call decativate().
The library is the Ethers.js Web3Provider we can use.

Specifically, the library is an Ethers.js provider which can be used to connect and read blockchain. If we want to send transaction to blockchain (write), we will need to get Ethers.js signer by call provider.getSigner().

Task 3: Read from blockchain - ETHBalance

We will use Web3-React to read from smart contract.

Task 3.1: Add `ETHbalance.tsx` (first attempt)

Add a component to get the ETH balance of your current account. Add components/ETHBalance.tsx

import { useState, useEffect } from 'react'
import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import { Text} from '@chakra-ui/react'
import { formatEther } from "@ethersproject/units"

const ETHBalance = () => {
    const [ethBalance, setEthBalance] = useState<number | undefined>(undefined)
    const {account, active, library,chainId} = useWeb3React<Web3Provider>()
    const provider = library

    useEffect(() => {
      if(active && account){
        provider?.getBalance(account).then((result)=>{
            setEthBalance(Number(formatEther(result)))
        })
      }
    })

    return (
        <div>
        {active ? (
            <Text fontSize="md" w='100%' my='2' align='left'>
                ETH in account: {ethBalance?.toFixed(3)} {chainId===31337? 'Test':' '} ETH
            </Text>
        ) : (
            <Text fontSize="md" w='100%' my='2' align='left'>ETH in account:</Text>
        )}
        </div>
    )
  }

export default ETHBalance

Edit pages/index.tsx to display ETHBalance:

        <Box  mb={0} p={4} w='100%' borderWidth="1px" borderRadius="lg">
          <Heading my={4}  fontSize='xl'>ETH Balance</Heading>
          <ETHBalance />
        </Box>

The problem with this is how to constantly sync the results (ETH balance) with blockchain. Lorenzo Sicilia suggests to use SWR with events listening to get data more efficiently. The SWR project homepage says:

SWR is a strategy to first return the data from cache (stale), then send the fetch request (revalidate), and finally come with the up-to-date data.

With SWR, components will get a stream of data updates constantly and automatically. The UI will always be fast and reactive.

Task 3.2: Add `ETHBalanceSWR.tsx` (second attempt)

Add components/ETHBalanceSWR.tsx

import { useState, useEffect } from 'react'
import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import { Text} from '@chakra-ui/react'
import { formatEther } from "@ethersproject/units"
import useSWR from 'swr'

const fetcher = (library:any) => (...args:any) => {
  const [method, ...params] = args
  return library[method](...params)
}

const ETHBalanceSWR = () => {
    const { account, active, library,chainId} = useWeb3React<Web3Provider>()

    const { data: balance,mutate } = useSWR(['getBalance', account, 'latest'], {
      fetcher: fetcher(library),
    })
    console.log("ETHBalanceSWR",balance)

    useEffect(() => {
      if(!library) return

      // listen for changes on an Ethereum address
      console.log(`listening for blocks...`)
      library.on('block', () => {
        console.log('update balance...')
        mutate(undefined, true)
      })
      // remove listener when the component is unmounted
      return () => {
        library.removeAllListeners('block')
      }

      // trigger the effect only on component mount
      // ** changed to library prepared
    }, [library])

    return (
        <div>
        {active && balance ? (
            <Text fontSize="md" w='100%' my='2' align='left'>
              ETH in account: {parseFloat(formatEther(balance)).toFixed(3)} {chainId===31337? 'Test':' '} ETH
            </Text>
        ) : (
            <Text fontSize="md" w='100%' my='2' align='left'>ETH in account:</Text>
        )}
        </div>
    )
  }

export default ETHBalanceSWR

Add ETHBalanceSWR component to index.tsx

        <Box  mb={0} p={4} w='100%' borderWidth="1px" borderRadius="lg">
          <Heading my={4}  fontSize='xl'>ETH Balance <b>using SWR</b></Heading>
          <ETHBalanceSWR />
        </Box>

Explanations:

We use SWR to fetch data, which calls provider.getBalance( address [ , blockTag = latest ] ) (Ethers docs link). The library is a web3 provider.

    const { data: balance,mutate } = useSWR(['getBalance', account, 'latest'], {
      fetcher: fetcher(library),
    })

The fetcher is constructed as:

const fetcher = (library:any) => (...args:any) => {
  const [method, ...params] = args
  return library[method](...params)
}

We get mutate of SWR to change its internal cache in the client. We mutate balance to undefined in every block, so SWR will query and update for us.

      library.on('block', () => {
        console.log('update balance...')
        mutate(undefined, true)
      })

When library(provider) changes and we have a provider, the side effect (useEffect()) will add a listener to blockchain new block event. Block events are emitted on every block change.

Let's play with the webapp:

Send test ETH from Hardhat local testnet Account#0(0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266) to Account#1(0x70997970C51812dc3A010C7d01b50e0d17dc79C8).
Check that the ETH balance of the current account (Account#0) changes accordingly.

More explanations about SWR can be found at:

Lorenzo Sicilia's blockchain tutorial: link
SWR documents: link

Task 4: Read / Listen - Interact with smart contract

In this task, we will read data using SWR from smart contract. We use smart contract event listening to get updates.

Task 4.1: Add `ERC20ABI.tsx`

Add abi/ERC20ABI.tsx for standard ERC20.

export const ERC20ABI = [
    // Read-Only Functions
    "function balanceOf(address owner) view returns (uint256)",
    "function totalSupply() view returns (uint256)",
    "function decimals() view returns (uint8)",
    "function symbol() view returns (string)",
    // Authenticated Functions
    "function transfer(address to, uint amount) returns (bool)",
    // Events
    "event Transfer(address indexed from, address indexed to, uint amount)"
];

Add components/ReadERC20.tsx

import React, { useEffect,useState } from 'react';
import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import {Contract} from "@ethersproject/contracts";
import { formatEther}from "@ethersproject/units"
import { Text} from '@chakra-ui/react'
import useSWR from 'swr'
import {ERC20ABI as abi} from "abi/ERC20ABI"

interface Props {
    addressContract: string
}

const fetcher = (library: Web3Provider | undefined, abi: any) => (...args:any) => {
    if (!library) return

    const [arg1, arg2, ...params] = args
    const address = arg1
    const method = arg2
    const contract = new Contract(address, abi, library)
    return contract[method](...params)
  }

export default function ReadERC20(props:Props){
  const addressContract = props.addressContract
  const [symbol,setSymbol]= useState<string>("")
  const [totalSupply,setTotalSupply]=useState<string>()

  const {  account, active, library} = useWeb3React<Web3Provider>()

  const { data: balance, mutate } = useSWR([addressContract, 'balanceOf', account], {
    fetcher: fetcher(library, abi),
  })

useEffect( () => {
    if(!(active && account && library)) return

    const erc20:Contract = new Contract(addressContract, abi, library);
    library.getCode(addressContract).then((result:string)=>{
      //check whether it is a contract
      if(result === '0x') return

      erc20.symbol().then((result:string)=>{
          setSymbol(result)
      }).catch('error', console.error)

      erc20.totalSupply().then((result:string)=>{
          setTotalSupply(formatEther(result))
      }).catch('error', console.error);
    })
//called only when changed to active
},[active])

useEffect(() => {
    if(!(active && account && library)) return

    const erc20:Contract = new Contract(addressContract, abi, library)

    // listen for changes on an Ethereum address
    console.log(`listening for Transfer...`)

    const fromMe = erc20.filters.Transfer(account, null)
    erc20.on(fromMe, (from, to, amount, event) => {
        console.log('Transfer|sent', { from, to, amount, event })
        mutate(undefined, true)
    })

    const toMe = erc20.filters.Transfer(null, account)
    erc20.on(toMe, (from, to, amount, event) => {
        console.log('Transfer|received', { from, to, amount, event })
        mutate(undefined, true)
    })

    // remove listener when the component is unmounted
    return () => {
        erc20.removeAllListeners(toMe)
        erc20.removeAllListeners(fromMe)
    }

    // trigger the effect only on component mount
  }, [active,account])


return (
    <div>
        <Text >ERC20 Contract: {addressContract}</Text>
        <Text>token totalSupply:{totalSupply} {symbol}</Text>
        <Text my={4}>ClassToken in current account:{balance
        ? parseFloat(formatEther(balance)).toFixed(1)
        : " "
        } {symbol}</Text>
    </div>
  )
}

Add ReadERC20 to index.tsx:

  const addressContract='0x5fbdb2315678afecb367f032d93f642f64180aa3'
...
        <Box  my={4} p={4} w='100%' borderWidth="1px" borderRadius="lg">
          <Heading my={4}  fontSize='xl'>ClassToken: ERC20 Smart Contract</Heading>
          <ReadERC20 addressContract={addressContract} />
        </Box>

Some explanations:

We query data from blockchain and smart contract by calling contract.balanceOf().

  const { data: balance, mutate } = useSWR([addressContract, 'balanceOf', account], {
    fetcher: fetcher(library, ERC20ABI),
  })

The fetcher is constructed as:

const fetcher = (library: Web3Provider | undefined, abi: any) => (...args:any) => {
    if (!library) return

    const [arg1, arg2, ...params] = args
    const address = arg1
    const method = arg2
    const contract = new Contract(address, abi, library)
    return contract[method](...params)
  }

When ethereum network connection is changed to active, query symbol() and totalSupply. Since these two are non-changable constants, we only query them once.
Add listener when change to active or account change. Two listeners are added: events transfer ERC20 token to account and from account.

    // listen for changes on an Ethereum address
    console.log(`listening for Transfer...`)

    const fromMe = erc20.filters.Transfer(account, null)
    erc20.on(fromMe, (from, to, amount, event) => {
        console.log('Transfer|sent', { from, to, amount, event })
        mutate(undefined, true)
    })

    const toMe = erc20.filters.Transfer(null, account)
    erc20.on(toMe, (from, to, amount, event) => {
        console.log('Transfer|received', { from, to, amount, event })
        mutate(undefined, true)
    })

Result:

Task 5: Write - Interact with smart contract

Task 5.1: Add a component for Transfer

In this task, we will add TransferERC20.tsx.

Edit components/TransferERC20.tsx

import React, { useState } from 'react';
import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import { Contract } from "@ethersproject/contracts";
import { parseEther }from "@ethersproject/units"
import { Button, Input , NumberInput,  NumberInputField,  FormControl,  FormLabel } from '@chakra-ui/react'
import { ERC20ABI } from "abi/ERC20ABI"

interface Props {
    addressContract: string
}

export default function TransferERC20(props:Props){
  const addressContract = props.addressContract
  const [toAddress, setToAddress]=useState<string>("")
  const [amount,setAmount]=useState<string>('100')

  const { account, active, library} = useWeb3React<Web3Provider>()

  async function transfer(event:React.FormEvent) {
    event.preventDefault()
    if(!(active && account && library)) return

    // new contract instance with **signer**
    const erc20 = new Contract(addressContract, ERC20ABI, library.getSigner());
    erc20.transfer(toAddress,parseEther(amount)).catch('error', console.error)
  }

  const handleChange = (value:string) => setAmount(value)

  return (
    <div>
        <form onSubmit={transfer}>
          <FormControl>
          <FormLabel htmlFor='amount'>Amount: </FormLabel>
            <NumberInput defaultValue={amount} min={10} max={1000} onChange={handleChange}>
              <NumberInputField />
            </NumberInput>
            <FormLabel htmlFor='toaddress'>To address: </FormLabel>
            <Input id="toaddress" type="text" required  onChange={(e) => setToAddress(e.target.value)} my={3}/>
            <Button type="submit" isDisabled={!account}>Transfer</Button>
          </FormControl>
        </form>
    </div>
  )
}

Task 5.2 Add transfer component to `index.tsx`

Add TransferERC20 in index.tsx:

        <Box  my={4} p={4} w='100%' borderWidth="1px" borderRadius="lg">
          <Heading my={4}  fontSize='xl'>Transfer ClassToken ERC20 token</Heading>
          <TransferERC20 addressContract={addressContract} />
        </Box>

Let's go to http://localhost:3000/ in browse and play with our DApp:

You can find that the webapp is structured well and simply by using Web3-React. Web3-React gives us context provider and hooks we can use easily.

From now on, you can begin to write your own DAPPs.

Tutorial List:

1. A Concise Hardhat Tutorial(3 parts)

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

2. Understanding Blockchain with `Ethers.js`(5 parts)

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

3. Tutorial : build your first DAPP with Remix and Etherscan (7 Tasks)

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

4. Tutorial: build DApp with Hardhat, React and Ethers.js (6 Tasks)

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

5. Tutorial: build DAPP with Web3-React and SWR

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

6. Tutorial: write upgradeable smart contract (proxy) using OpenZeppelin(7 Tasks)

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

7. Tutorial: Build an NFT marketplace DApp like Opensea(5 Tasks)

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

If you find this tutorial helpful, follow me at Twitter @fjun99

Web3 Tutorial: build DApp with Hardhat, React and Ethers.js

fangjun — Thu, 24 Feb 2022 10:23:25 +0000

In this tutorial, we will build DAPP using Hardhat, React and Ethers.js which works with user-controlled wallets like MetaMask.

DAPP is usually composed of three parts:

Smart contract deployed on chain
Webapp (user interface) built with Node.js, React and Next.js
Wallet (user-controlled in browser / mobile wallet App)

We use Ethers.js to connect these parts.

In the user interface of a DApp (webapp), wallets such as MetaMask gives developers a provider of Ethereum which we can use in Ethers.js to interact with blockchain. (To be specific, what wallet provide is a "connector", Ethers.js create "provider" and/or "signer" for us to use.)

We may have known the usage of MetaMask as a user, and we will learn how to use MetaMask and the window.ethereum it injects into the browser as a developer (MetaMask developer docs).

You can find the code repos for this tutorial:
Hardhat project: https://github.com/fjun99/chain-tutorial-hardhat-starter
Webapp project: https://github.com/fjun99/web3app-tutorial-using-ethers

You may find the very first how-to guide for DApp developers is useful for your web3 journey: Tutorial : build your first DAPP with Remix and Etherscan(by Fangjun).

Special thanks: When preparing the webapp codebase, I learned a lot for Wesley's Proof-of-Competence, POC project. We also use Chakra UI just as his project. You may also find the the web page is almost the same as POC.

Prerequisite Knowledge and tools

You need basic knowledge and tools before we start.

Knowledge:

Blockchain
Ethereum
Wallet
Solidity
ERC20 & ERC721
Ethers.js

Tools:

MetaMask (Wallet browser extension)
Node.js, yarn, TypeScript
OpenZeppelin (Solidity library)
Etherscan block explorer

Let's start to build a DApp.

Task 1: setup development environment

To build a DApp, we are doing two kinds of jobs:

build smart contract using Hardhat and Solidity
build web app using Node.js, React and Next.js

We will organize our directory in two sub-directory chain and webapp.

- hhproject
  - chain (working dir for hardhat)
    - contracts
    - test
    - scripts
  - webapp (working dir for NextJS app)
    - src
      - pages
      - components

Task 1.1 Install Hardhat and init a Hardhat project

Install Hardhat which is an Ethereum development environment.

To use hardhat, you need to have node.js and yarn in your computer.

STEP 1: make a directory and install Hardhat in it

mkdir hhproject && cd hhproject
mkdir chain && cd chain
yarn init -y

Install Hardhat:

yarn add hardhat

STEP 2: create a sample Hardhat project

yarn hardhat
//choose: Create an advanced sample project that uses TypeScript

A hardhat project is created with a sample smart contract Greeter.sol we will use in Task 3.

STEP 3: run Hardhat Network (local testnet)

yarn hardhat node

A local testnet will is running (chainId: 31337):

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

It provides 20 accounts each has 10000.0 test ETH:

Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
Account #1: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8
...

Please note that there are two modes of Hardhat Network local testnet: in-process and stand-alone. We run a stand-alone testnet with command line yarn hardhat node. When running command line like yarn hardhat compile without network parameters(--network localhost), we run an in-process testnet.

Task 1.2: Development Circle in Hardhat

We will go through the development circle of smart contract in Hardhat development environment.

There are sample smart contract, test scripts and deploy scripts in the project initiated by Hardhat.

├── contracts
│   └── Greeter.sol
├── scripts
│   └── deploy.ts
├── test
│   └── index.ts
├── hardhat.config.ts

I would like to change the file names of test and deployment script.

- contracts
  - Greeter.sol
- test
  - Greeter.test.ts (<-index.ts)
- scripts
  - deploy_greeter.ts (<-deploy.ts)

STEP 1: Run command to show accounts:

yarn hardhat accounts

This is the sample hardhat task added in the hardhat.config.ts.

STEP 2: Compile smart contract

yarn hardhat compile

STEP 3: Run unit test

yarn hardhat test

STEP 4: Try to deploy to in-process testnet

yarn hardhat run ./scripts/deploy_greeter.ts

In the next two steps, we will run a stand-alone Hardhat Network and deploy smart contracts to it.

STEP 5: Run a stand-alone local testnet

In another terminal, run:

yarn hardhat node
//Started HTTP and WebSocket JSON-RPC server at http://127.0.0.1:8545/

STEP 6: Deploy to stand-alone local testnet

yarn hardhat run ./scripts/deploy.ts --network localhost
//Greeter deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3

If you run the deployment several times, you will find that the contract instances are deployed to different addresses.

Task 1.3: Switch MetaMask to Local testnet

Please make sure Hardhat Network local testnet is still running. (You can run it by command yarn hardhat node.)

STEP 1: In MataMask browser extension, click the network selector on the top bar. Switch the network from mainnet to localhost 8545.
STEP 2: Click the Account icon on the topbar and go to "Settings / Network / ". Choose "localhost 8445".

Note: make sure Chain ID is 31337. It may be "1337" by default in MetaMask.

Task 1.4: Create webapp with Next.js and Chakra UI

We will create a webapp using Node.js, React, Next.js and Chakra UI frameworks. (You may choose any other UI frameworks you like such as Material UI, Ant Design, etc. You may would like to choose front-end framework Vue instead of Next.js)

STEP 1: create Next.js project webapp

In hhproject/ directory, run:

yarn create next-app webapp --typescript
//will make a sub-dir webapp and create an empty Next.js project in it

cd webapp

STEP 2: change some defaults and run webapp

We will use src as our app directory instead of pages (more about src and pages in Next.js docs):

mkdir src
mv pages src/pages
mv styles src/styles

vim tsconfig.json
//in "compilerOptions" add:
//        "baseUrl": "./src"

Run Next.js app and view it in your browser:

yarn dev
//ready - started server on 0.0.0.0:3000, url: http://localhost:3000

Browse http://localhost:3000

STEP 3: install Chakra UI

Install Chakra UI (docs) by running:

yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion

We will edit the next.js app in the next sub-task to make it suitable for our project.

Task 1.5: Edit webapp - header, layout, _app.tsx, index.tsx

STEP 1: add a header component

mkdir src/components
touch src/components/header.tsx

Edit header.tsx to be:

//src/components/header.tsx
import NextLink from "next/link"
import { Flex, Button, useColorModeValue, Spacer, Heading, LinkBox, LinkOverlay } from '@chakra-ui/react'

const siteTitle="FirstDAPP"
export default function Header() {

  return (
    <Flex as='header' bg={useColorModeValue('gray.100', 'gray.900')} p={4} alignItems='center'>
      <LinkBox>
        <NextLink href={'/'} passHref>
          <LinkOverlay>
            <Heading size="md">{siteTitle}</Heading>
          </LinkOverlay>
        </NextLink>
      </LinkBox>      
      <Spacer />
      <Button >Button for Account </Button>
    </Flex>
  )
}

STEP 2: add Next.js layout

Add layout (docs)

touch src/components/layout.tsx

Edit layout.tsx to be:

// src/components/layout.tsx
import React, { ReactNode } from 'react'
import { Text, Center, Container, useColorModeValue } from '@chakra-ui/react'
import Header from './header'

type Props = {
  children: ReactNode
}

export function Layout(props: Props) {
  return (
    <div>
      <Header />
      <Container maxW="container.md" py='8'>
        {props.children}
      </Container>
      <Center as="footer" bg={useColorModeValue('gray.100', 'gray.700')} p={6}>
          <Text fontSize="md">first dapp by W3BCD - 2022</Text>
      </Center>
    </div>
  )
}

STEP 3: Add Chakra UI Provider to "_app.tsx" as well as layout

Edit _app.tsx

// src/pages/_app.tsx
import { ChakraProvider } from '@chakra-ui/react'
import type { AppProps } from 'next/app'
import { Layout } from 'components/layout'

function MyApp({ Component, pageProps }: AppProps) {
  return (
      <ChakraProvider>
        <Layout>
        <Component {...pageProps} />
        </Layout>
      </ChakraProvider>
  )
}

export default MyApp

STEP 4: Edit "index.tsx"

// src/pages/index.tsx
import type { NextPage } from 'next'
import Head from 'next/head'
import NextLink from "next/link"
import { VStack, Heading, Box, LinkOverlay, LinkBox} from "@chakra-ui/layout"
import { Text, Button } from '@chakra-ui/react'

const Home: NextPage = () => {
  return (
    <>
      <Head>
        <title>My DAPP</title>
      </Head>

      <Heading as="h3"  my={4}>Explore Web3</Heading>          
      <VStack>
        <Box  my={4} p={4} w='100%' borderWidth="1px" borderRadius="lg">
          <Heading my={4}  fontSize='xl'>Task 1</Heading>
          <Text>local chain with hardhat</Text>
        </Box>

        <Box  my={4} p={4} w='100%' borderWidth="1px" borderRadius="lg">
          <Heading my={4}  fontSize='xl'>Task 2</Heading>
          <Text>DAPP with React/NextJS/Chakra</Text>
        </Box>

        <LinkBox  my={4} p={4} w='100%' borderWidth="1px" borderRadius="lg">
          <NextLink href="https://github.com/NoahZinsmeister/web3-react/tree/v6" passHref>
          <LinkOverlay>
            <Heading my={4} fontSize='xl'>Task 3 with link</Heading>
            <Text>Read docs of Web3-React V6</Text>
          </LinkOverlay>
          </NextLink>
        </LinkBox>
      </VStack>
    </>
  )
}

export default Home

You may also want to add "_documents.tsx" (docs) to customize pages in your Next.js app.

You may want to delete unneeded files in this project such as src/styles.

STEP 5: Run webapp

yarn dev

The page at http://localhost:3000/ will look like:

You can download the code from github scaffold repo.

In your 'hhproject/' directory:

git clone git@github.com:fjun99/web3app-tutorial-using-ethers.git webapp
cd webapp
yarn install
yarn dev

Task 2: Connect DApp to blockchain through MetaMask

In this task, we will create a DAPP which can connect to blockchain(local testnet) through MetaMask.

We will interact with the blockchain using Javascript API library Ethers.js.

Task 2.1: install `Ethers.js`

In webapp/ directory, add Ethers.js

yarn add ethers

Task 2.2: connect to MetaMask wallet

We will add a button on index.tsx:

when not connected, the button text is "Connect Wallet". Click to link blockchain through MetaMask.
when connected, button text is connected account address. User can click to disconnect.

We will get ETH balance of the current account and display on the page as well as blockchain network info.

There are Ethers.js docs about connect MetaMask (link).

I wrote a slide to explain the relationship between connector, provider, signer and wallet in Ethers.js!

We will use react hook feature useState and useEffect

Related code snippet in src/pages/index.tsx

// src/pages/index.tsx
...
import { useState, useEffect} from 'react'
import {ethers} from "ethers"

declare let window:any

const Home: NextPage = () => {
  const [balance, setBalance] = useState<string | undefined>()
  const [currentAccount, setCurrentAccount] = useState<string | undefined>()
  const [chainId, setChainId] = useState<number | undefined>()
  const [chainname, setChainName] = useState<string | undefined>()

  useEffect(() => {
    if(!currentAccount || !ethers.utils.isAddress(currentAccount)) return
    //client side code
    if(!window.ethereum) return
    const provider = new ethers.providers.Web3Provider(window.ethereum)
    provider.getBalance(currentAccount).then((result)=>{
      setBalance(ethers.utils.formatEther(result))
    })
    provider.getNetwork().then((result)=>{
      setChainId(result.chainId)
      setChainName(result.name)
    })

  },[currentAccount])

  const onClickConnect = () => {
    //client side code
    if(!window.ethereum) {
      console.log("please install MetaMask")
      return
    }
    /*
    //change from window.ethereum.enable() which is deprecated
    //see docs: https://docs.metamask.io/guide/ethereum-provider.html#legacy-methods
    window.ethereum.request({ method: 'eth_requestAccounts' })
    .then((accounts:any)=>{
      if(accounts.length>0) setCurrentAccount(accounts[0])
    })
    .catch('error',console.error)
    */

    //we can do it using ethers.js
    const provider = new ethers.providers.Web3Provider(window.ethereum)

    // MetaMask requires requesting permission to connect users accounts
    provider.send("eth_requestAccounts", [])
    .then((accounts)=>{
      if(accounts.length>0) setCurrentAccount(accounts[0])
    })
    .catch((e)=>console.log(e))
  }

  const onClickDisconnect = () => {
    console.log("onClickDisConnect")
    setBalance(undefined)
    setCurrentAccount(undefined)
  }

  return (
    <>
      <Head>
        <title>My DAPP</title>
      </Head>

      <Heading as="h3"  my={4}>Explore Web3</Heading>          
      <VStack>
        <Box w='100%' my={4}>
        {currentAccount  
          ? <Button type="button" w='100%' onClick={onClickDisconnect}>
                Account:{currentAccount}
            </Button>
          : <Button type="button" w='100%' onClick={onClickConnect}>
                  Connect MetaMask
              </Button>
        }
        </Box>
        {currentAccount  
          ?<Box  mb={0} p={4} w='100%' borderWidth="1px" borderRadius="lg">
          <Heading my={4}  fontSize='xl'>Account info</Heading>
          <Text>ETH Balance of current account: {balance}</Text>
          <Text>Chain Info: ChainId {chainId} name {chainname}</Text>
        </Box>
        :<></>
        }
...
      </VStack>
    </>
  )
}

export default Home

Some explanations:

We add two UI components: one for the connect button, one for displaying account and chain information.
When "Connect MetaMask" button is clicked, we do:
- get Web3Provider through connector(window.ethereum) which MetaMask injected to the page.
- call eth_requestAccounts, which will ask MetaMask to confirm sharing account information. Users can confirm or reject the request in MetaMask popup.
- set the returned account to currentAccount.
When disconnect is called, we reset currentAccount and balance.
Every time the currentAccount is changed, the side effect (useEffect) is called. We will query:
- ETH balance of the current account by calling getBalance.
- network information by calling getNetwork().

Please note that:

Disconnect in page will not change MetaMask connection and permissions to this page. Open MetaMask extension, you will see that your wallet is still connected to this page. Next time you click Connect MetaMask button again, the MetaMask will not popup for confirmation (as your confirmation is still active). You need to disconnect wallet and page from MetaMask.
We do not write codes to display changes when the user switches network in MetaMask.
We do not store the state of this page. So when the page is refreshed, the connection is reset.

Task 3: Build ERC20 smart contract using OpenZeppelin

In Task 3, we will build ERC20 smart contract using OpenZeppelin library (ERC20 docs).

Task 3.1: Write an ERC20 smart contract - ClassToken

Add OpenZeppelin/contract:

yarn add @openzeppelin/contracts

Go to chain/ directory and add contracts/ClassToken.sol:

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

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

contract ClassToken is ERC20 {
        constructor(uint256 initialSupply) 
          ERC20("ClassToken", "CLT") 
        {
                _mint(msg.sender, initialSupply);
        }
}

Task 3.2 Compile smart contract

yarn hardhat compile
//Solidity compilation should succeed

Task 3.3 Add unit test script

Add unit test script test/ClassToken.test.ts

import { expect } from "chai";
import { ethers } from "hardhat";

describe("ClassToken", function () {
  it("Should have the correct initial supply", async function () {
    const initialSupply = ethers.utils.parseEther('10000.0')
    const ClassToken = await ethers.getContractFactory("ClassToken");
    const token = await ClassToken.deploy(initialSupply);
    await token.deployed();

    expect(await token.totalSupply()).to.equal(initialSupply);
  });
});

Run unit test:

yarn hardhat test
//  ClassToken
//    ✓ Should have the correct initial supply (392ms)
//  1 passing (401ms)

Task 3.4 Add deploy script

Add deploy script scripts/deploy_classtoken.ts

import { ethers } from "hardhat";

async function main() {

  const initialSupply = ethers.utils.parseEther('10000.0')
  const ClassToken = await ethers.getContractFactory("ClassToken");
  const token = await ClassToken.deploy(initialSupply);
  await token.deployed();

  console.log("ClassToken deployed to:", token.address);
}

main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

We deploy ClassToken with initialSupply 10000.0 CLT sent to deployer(msg.sender).

Try to run contract deployment to in-process Hardhat Network local testnet (in-process mode):

yarn hardhat run  scripts/deploy_classtoken.ts

Task 3.5 Run stand-alone testnet to deploy smart contract to it

In another terminal, run in chain/ directory:

yarn hardhat node

In the current terminal, run hardhat tasks connecting to localhost --network localhost:

yarn hardhat run scripts/deploy_classtoken.ts --network localhost
//ClassToken deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3

Task 3.6 Interact with ClassToken in hardhat console

Run hardhat console connecting to stand-alone local testnet:

yarn hardhat console  --network localhost

Interact with ClassToken in console:

formatEther = ethers.utils.formatEther;
address = '0x5FbDB2315678afecb367f032d93F642f64180aa3';
token = await ethers.getContractAt("ClassToken", address);

totalSupply = await token.totalSupply();
formatEther(totalSupply)
//'10000.0'

ethers.getContractAt() is a helper function provided by Hardhat plugin hardhat-ethers, docs link.

Task 3.7: Add token to MetaMask

Add token to MetaMask with Address:0x5FbDB2315678afecb367f032d93F642f64180aa3. (Please use the deployed contract address you get.)

We can see that Account#0(0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266) has 10000.0 CLT.

You can also download the hardhat sample project from github repo.

git clone git@github.com:fjun99/chain-tutorial-hardhat-starter.git chain
yarn install
// then, you can run stand-alone testnet and 
// go through the compile-test-deploy circle

Task 4: Read contract data - interact with smart contract in webapp

In task 4 and task 5, we will continue to build our webapp.

We will allow users to interact with the newly deployed ERC20 Token smart contract - ClassToken(CLT).

Task 4.1: Add empty `ReadERC20` component to read ClassToken

In webapp directory, add an empty component components/ReadERC20.tsx

import React, { useEffect,useState } from 'react'
import { Text} from '@chakra-ui/react'
interface Props {
    addressContract: string,
    currentAccount: string | undefined
}

export default function ReadERC20(props:Props){
  const addressContract = props.addressContract
  const currentAccount = props.currentAccount


return (
    <div>
        <Text >ERC20 Contract: {addressContract}</Text>
        <Text>token totalSupply:</Text>
        <Text my={4}>ClassToken in current account:</Text>
    </div>
  )
}

Import and add this component to index.tsx:

        <Box  mb={0} p={4} w='100%' borderWidth="1px" borderRadius="lg">
          <Heading my={4}  fontSize='xl'>Read ClassToken Info</Heading>
          <ReadERC20 
            addressContract='0x5FbDB2315678afecb367f032d93F642f64180aa3'
            currentAccount={currentAccount}
          />
        </Box>

In the following sub-tasks, we will add functionality of ReadERC20 Component step by step.

Task 4.2: Prepare smart contract ABI

To interact with a smart contract in Javascript, we need its ABI:

Contract Application Binary Interface (ABI) is the standard way to interact with contracts in the Ethereum ecosystem. Data is encoded according to its type.

ERC20 smart contract is a standard and we will use a file with human-readable ABI instead of the compiled artifacts output in our Hardhat project. What we add is human-readable ABI.

Add a directory src/abi and create a file src/abi/ERC20ABI.tsx

export const ERC20ABI = [
    // Read-Only Functions
    "function balanceOf(address owner) view returns (uint256)",
    "function totalSupply() view returns (uint256)",
    "function decimals() view returns (uint8)",
    "function symbol() view returns (string)",
    // Authenticated Functions
    "function transfer(address to, uint amount) returns (bool)",
    // Events
    "event Transfer(address indexed from, address indexed to, uint amount)"
];

Task 4.3: Query smart contract info when component loaded

We use React hook useEffect to query smart contract info when the component is loaded (mounted).

Edit ReadERC20.tsx

// src/components/ReadERC20.tsx
import React, {useEffect, useState } from 'react';
import {Text} from '@chakra-ui/react'
import {ERC20ABI as abi} from 'abi/ERC20ABI'
import {ethers} from 'ethers'

interface Props {
    addressContract: string,
    currentAccount: string | undefined
}

declare let window: any;

export default function ReadERC20(props:Props){
  const addressContract = props.addressContract
  const currentAccount = props.currentAccount
  const [totalSupply,setTotalSupply]=useState<string>()
  const [symbol,setSymbol]= useState<string>("")

  useEffect( () => {
    if(!window.ethereum) return

    const provider = new ethers.providers.Web3Provider(window.ethereum)
    const erc20 = new ethers.Contract(addressContract, abi, provider);
    erc20.symbol().then((result:string)=>{
        setSymbol(result)
    }).catch('error', console.error)

    erc20.totalSupply().then((result:string)=>{
        setTotalSupply(ethers.utils.formatEther(result))
    }).catch('error', console.error);
    //called only once
  },[])  

  return (
    <div>
        <Text><b>ERC20 Contract</b>: {addressContract}</Text>
        <Text><b>ClassToken totalSupply</b>:{totalSupply} {symbol}</Text>
        <Text my={4}><b>ClassToken in current account</b>:</Text>
    </div>
  )
}

Explanations:

Hook useEffect(()=>{},[]) will only be called once.
Create a Web3Provider with window.ethereum, ethereum connector injected into page by MetaMask.
Create a contract instance with addressContract, abi, provider in Ethers.js.
Call read-only functions symbol(), totalSupply() and set results to react state variable which can be displayed on page.

Task 4.3: Query CLT balance of current account when account changes

Edit ReadERC20.tsx

// src/components/ReadERC20.tsx
  const [balance, SetBalance] =useState<number|undefined>(undefined)
...
  //call when currentAccount change
  useEffect(()=>{
    if(!window.ethereum) return
    if(!currentAccount) return

    queryTokenBalance(window)
  },[currentAccount])

  async function queryTokenBalance(window:any){
    const provider = new ethers.providers.Web3Provider(window.ethereum)
    const erc20 = new ethers.Contract(addressContract, abi, provider);

    erc20.balanceOf(currentAccount)
    .then((result:string)=>{
        SetBalance(Number(ethers.utils.formatEther(result)))
    })
    .catch('error', console.error)
  }  
...
  return (
    <div>
        <Text><b>ERC20 Contract</b>: {addressContract}</Text>
        <Text><b>ClassToken totalSupply</b>:{totalSupply} {symbol}</Text>
        <Text my={4}><b>ClassToken in current account</b>: {balance} {symbol}</Text>
    </div>
  )

Explanation:

When currentAccount changes, the side effect hook useEffect(()=>{},[currentAccount] is called. We call balanceOf(address) to get the balance.
When we refresh the page, there is no current account and no balance is displayed. After we connect wallet, the balance is queried and displayed on the page.

There are still more jobs to be done:

When MetaMask switch account, our web app doesn't know and will not change the display in the page. We need to listen event of MetaMask account change.
When the balance of the current account changes, our web app will not update since your current account has not been changed.

You can send CLT to others using MetaMask and you will find that we need to update the account balance of CLT on the page. We will do it in task 6. In task 5, we will build transfer components for users first.

Task 5: Write/Transfer: Interact with smart contract in web App

Task 5.1: Add empty `TransferERC20` component

// src/component/TransferERC20.tsx
import React, { useEffect,useState } from 'react';
import { Text, Button, Input , NumberInput,  NumberInputField,  FormControl,  FormLabel } from '@chakra-ui/react'

interface Props {
    addressContract: string,
    currentAccount: string | undefined
}

export default function ReadERC20(props:Props){
  const addressContract = props.addressContract
  const currentAccount = props.currentAccount
  const [amount,setAmount]=useState<string>('100')
  const [toAddress, setToAddress]=useState<string>("")

  async function transfer(event:React.FormEvent) {
    event.preventDefault()
    console.log("transfer clicked")
 }

  const handleChange = (value:string) => setAmount(value)

  return (
    <form onSubmit={transfer}>
    <FormControl>
    <FormLabel htmlFor='amount'>Amount: </FormLabel>
      <NumberInput defaultValue={amount} min={10} max={1000} onChange={handleChange}>
        <NumberInputField />
      </NumberInput>
      <FormLabel htmlFor='toaddress'>To address: </FormLabel>
      <Input id="toaddress" type="text" required  onChange={(e) => setToAddress(e.target.value)} my={3}/>
      <Button type="submit" isDisabled={!currentAccount}>Transfer</Button>
    </FormControl>
    </form>
  )
}

Import and add this component to index.tsx:

        <Box  mb={0} p={4} w='100%' borderWidth="1px" borderRadius="lg">
          <Heading my={4}  fontSize='xl'>Transfer Classtoken</Heading>
          <TransferERC20 
            addressContract='0x5FbDB2315678afecb367f032d93F642f64180aa3'
            currentAccount={currentAccount}
          />
        </Box>

Task 5.2: Implement transfer() function

Implement the transfer function in TransferERC20.tsx:

// src/component/TransferERC20.tsx
import React, { useState } from 'react'
import {Button, Input , NumberInput,  NumberInputField,  FormControl,  FormLabel } from '@chakra-ui/react'
import {ethers} from 'ethers'
import {parseEther } from 'ethers/lib/utils'
import {ERC20ABI as abi} from 'abi/ERC20ABI'
import { Contract } from "ethers"
import { TransactionResponse,TransactionReceipt } from "@ethersproject/abstract-provider"

interface Props {
    addressContract: string,
    currentAccount: string | undefined
}

declare let window: any;

export default function TransferERC20(props:Props){
  const addressContract = props.addressContract
  const currentAccount = props.currentAccount
  const [amount,setAmount]=useState<string>('100')
  const [toAddress, setToAddress]=useState<string>("")

  async function transfer(event:React.FormEvent) {
    event.preventDefault()
    if(!window.ethereum) return    
    const provider = new ethers.providers.Web3Provider(window.ethereum)
    const signer = provider.getSigner()
    const erc20:Contract = new ethers.Contract(addressContract, abi, signer)

    erc20.transfer(toAddress,parseEther(amount))
      .then((tr: TransactionResponse) => {
        console.log(`TransactionResponse TX hash: ${tr.hash}`)
        tr.wait().then((receipt:TransactionReceipt)=>{console.log("transfer receipt",receipt)})
      })
      .catch((e:Error)=>console.log(e))

  }

  const handleChange = (value:string) => setAmount(value)

  return (
    <form onSubmit={transfer}>
    <FormControl>
    <FormLabel htmlFor='amount'>Amount: </FormLabel>
      <NumberInput defaultValue={amount} min={10} max={1000} onChange={handleChange}>
        <NumberInputField />
      </NumberInput>
      <FormLabel htmlFor='toaddress'>To address: </FormLabel>
      <Input id="toaddress" type="text" required  onChange={(e) => setToAddress(e.target.value)} my={3}/>
      <Button type="submit" isDisabled={!currentAccount}>Transfer</Button>
    </FormControl>
    </form>
  )
}

Explanation:

We call transfer(address recipient, uint256 amount) → bool, which is state-change function of ERC20 smart contract.

As you can see, the balance of ClassToken is not changed after transferring. We will fix this in Task 6.

Task 6: Listen to Event: Interact with smart contract in web App

We can update CLT balance with the design of smart contract events. For ERC20 token smart contract, when a transfer is confirmed on-chain, an Event Transfer(address from, address to, uint256 value) (docs) is emitted.

We can listen to this event in Node.js webapp and update the page display.

Task 6.1: Understanding Smart contract events

Events explained in plain English. When we call a state-change function of a smart contract, there are three steps:

STEP 1: Off-chain call. We call a state-change function of a smart contract using JavaScript API (ethers.js) off-chain.
STEP 2: On-chain confirmation. State-change transactions need to be confirmed by miners using consensus algorithms in several blocks on-chain. So we can't get the result immediately.
STEP 3: Emit events. Once the transaction is confirmed, an event is emitted. You can listen to events to get the results off-chain.

Task 6.2: Add event listener when current account change

Edit ReadERC20.tsx:

  //call when currentAccount change
  useEffect(()=>{
    if(!window.ethereum) return
    if(!currentAccount) return

    queryTokenBalance(window)

    const provider = new ethers.providers.Web3Provider(window.ethereum)
    const erc20 = new ethers.Contract(addressContract, abi, provider)

    // listen for changes on an Ethereum address
    console.log(`listening for Transfer...`)

    const fromMe = erc20.filters.Transfer(currentAccount, null)
    provider.on(fromMe, (from, to, amount, event) => {
        console.log('Transfer|sent', { from, to, amount, event })
        queryTokenBalance(window)
    })

    const toMe = erc20.filters.Transfer(null, currentAccount)
    provider.on(toMe, (from, to, amount, event) => {
        console.log('Transfer|received', { from, to, amount, event })
        queryTokenBalance(window)
    })

    // remove listener when the component is unmounted
    return () => {
        provider.removeAllListeners(toMe)
        provider.removeAllListeners(fromMe)
    }    
  }, [currentAccount])

This code snippet is adapted from How to Fetch and Update Data From Ethereum with React and SWR.

Explanation:

When currentAccount change (useEffect), we add two listeners: one for events transfer from currentAccount, another for transfer to currentAccount.
When listening to an event, query the token balance of currentAccount and update the page.

You can transfer token from the current account on the page or in MetaMask, and you will see that the page is updating upon events.

When completing Task 6, you have built a simple but functional DAPP which has smart contract and webapp.

In summary, there are three parts of a DAPP:

smart contract and blockchain
web app (user interface) to get and set data with smart contract
user-controlled wallet (MetaMask here) which works as an asset management tool and signer for users, as well as connector to blockchain.

In these tasks, you may also notice that we interact with smart contracts in 3 ways:

Read, get data from smart contract
Write, set data in smart contract
Listen, listen to events emitted by smart contract.

We use Ethers.js directly to connect to blockchain in this tutorial. But Web3-react and other libraries can handle connections to Ethereum node in React while the Ethers.js is running in the underling. That's the topic of our next tutorial - build DApp with Web3-React.

A note: You may find the very first how-to guide for DApp developers is useful for your web3 journey: Tutorial : build your first DAPP with Remix and Etherscan(by Fangjun).

If you find this tutorial helpful, follow me at Twitter @fjun99

Web3 Tutorial: write upgradeable smart contract (proxy) using OpenZeppelin

fangjun — Mon, 21 Feb 2022 10:04:00 +0000

There are several good articles about upgradeable smart contracts or proxy pattern. But I can't find a step-by-step how-to guide to build, deploy a proxy contract and interact with it. So I wrote one and here it is.

In this tutorial, I list 7 details tasks which you can follow to deploy proxy contract to local testnet as well as public testnet Ropsten. Each task has several sub-tasks.

We will use OpenZeppelin proxy contracts and OpenZeppelin Upgrades plugin for Hardhat (or Truffle) .

Special thanks for two related guides in OpenZeppelin ecosystem: OpenZeppelin Upgrades: Step by Step Tutorial for Hardhat and Gnosis Safe by abcoathup, OpenZeppelin Defender guide Upgrading a contract via a multi-sig and Defender.

How upgradeable smart contract works?

This illustration explains how upgradeable smart contracts work. To be specific, this is transparent proxy pattern. Another one is UUPS proxy pattern (Universal Upgradeable Proxy Standard).

Upgradeable smart contracts are composed of 3 contracts:

Proxy contract. The smart contract which user interacts with. It will keep data/state which means data is stored in the context of this proxy contract account. This is an EIP1967 standard proxy contract.
Implementation contract. The smart contract provides functionality and logic. Please note that the data is also defined in this contract. This is the smart contract you are building.
ProxyAdmin contract. The contract links Proxy and Implementation.

ProxyAmdin explained in OpenZeppelin docs:

What is a proxy admin?

A ProxyAdmin is a contract that acts as the owner of all your proxies. Only one per network gets deployed. When you start your project, the ProxyAdmin is owned by the deployer address, but you can transfer ownership of it by calling transferOwnership.

If you transfer ProxyAmin ownership to a multi-sig account, the authority to upgrade the Proxy contract (link proxy to new implementation) is transferred to it.

How to deploy proxy? How to upgrade proxy?

When we first deploy upgradeable contract using OpenZeppelin Upgrades plugin for Hardhat, we deploy three contracts:

deploy "Implementation contract"
deploy "ProxyAdmin contract"
deploy "Proxy contract"

In the ProxyAdmin contract, Implementation and Proxy is linked.

When a user calls the proxy contract, the call is delegated to the implementation contract (delegate call).

When upgrading the contract, what we do is:

deploy a new "Implementation contract"
upgrade in "ProxyAdmin contract" by redirecting all calls to proxy to the new Implementation contract.

OpenZeppelin Upgrades plugins for Hardhat/Truffle can help us getting these jobs done.

If you want to know about how to modify a contract to be upgradeable, you can refer to OpenZeppelin docs: link.

Let's begin to write and deploy an upgradeable smart contract. You can find the repo at Github: https://github.com/fjun99/proxy-contract-example

Task 1: Write upgradable smart contract

Task 1.1: init hardhat project

We will use Hardhat, Hardhat Network local testnet and OpenZeppelin Upgrades plugin.

STEP 1: install hardhat and init a project



mkdir solproxy && cd solproxy
yarn init -y
yarn add harthat

yarn hardhat
// choose option: sample typescript

STEP 2: add plugin @openzeppelin/hardhat-upgrades



yarn add @openzeppelin/hardhat-upgrades

Edit hardhat.config.ts to use Upgrades plugins.



// hardhat.config.ts
import '@openzeppelin/hardhat-upgrades';

We will use three functions of hardhat upgrade plugin(API reference link):


 js
deployProxy()
upgradeProxy()
prepareUpgrade()

1.2: Write an upgradable smart contract

We use the Box.sol contract from OpenZeppelin learn guide. We will build several versions of this contract:

Box.sol
BoxV2.sol
BoxV3.sol
BoxV4.sol

The big difference between a normal contract and an upgradeable contract is that an upgradeable contract does not have a constructor(), docs link.


 js
// contracts/Box.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract Box {
    uint256 private value;

    // Emitted when the stored value changes
    event ValueChanged(uint256 newValue);

    // Stores a new value in the contract
    function store(uint256 newValue) public {
        value = newValue;
        emit ValueChanged(newValue);
    }

    // Reads the last stored value
    function retrieve() public view returns (uint256) {
        return value;
    }
}

User can store() a value to this contract and retrieve() it later.

Task 1.3: unit test script for `Box.sol`

Let's write unit test scripts for Box.sol. The following hardhat unit test script is adapted from (
OpenZeppelin Upgrades: Step by Step Tutorial for Hardhat). We made some changes in it.

Edit test/1.Box.test.ts:


 js
// test/1.Box.test.ts
import { expect } from "chai";
import { ethers } from "hardhat"
import { Contract, BigNumber } from "ethers"

describe("Box", function () {
  let box:Contract;

  beforeEach(async function () {
    const Box = await ethers.getContractFactory("Box")
    box = await Box.deploy()
    await box.deployed()
  })

  it("should retrieve value previously stored", async function () {
    await box.store(42)
    expect(await box.retrieve()).to.equal(BigNumber.from('42'))

    await box.store(100)
    expect(await box.retrieve()).to.equal(BigNumber.from('100'))
  })
})

// NOTE: should also add test for event: event ValueChanged(uint256 newValue)

Run test:



yarn hardhat test test/1.Box.test.ts

Results:



  Box
    ✓ should retrieve value previously stored
  1 passing (505ms)
✨  Done in 3.34s.

Task 2: Deploy upgradeable smart contract

Task 2.1: write deploy script with "OpenZeppelin Upgrades plugin for Hardhat"

When we write a script to deploy a smart contract, we write:


 js
  const Greeter = await ethers.getContractFactory("Greeter");
  const greeter = await Greeter.deploy("Hello, Hardhat!");

To deploy an upgradeable contract, will call deployProxy() instead. Docs can be found at link.


 js
  const Box = await ethers.getContractFactory("Box")
  const box = await upgrades.deployProxy(Box,[42], { initializer: 'store' })

In the second line, we use OpenZeppelin Upgrades plugin to deploy Box with an initial value 42 by calling store() as initializer.

Edit scripts/1.deploy_box.ts


 js
// scripts/1.deploy_box.ts
import { ethers } from "hardhat"
import { upgrades } from "hardhat"

async function main() {

  const Box = await ethers.getContractFactory("Box")
  console.log("Deploying Box...")
  const box = await upgrades.deployProxy(Box,[42], { initializer: 'store' })

  console.log(box.address," box(proxy) address")
  console.log(await upgrades.erc1967.getImplementationAddress(box.address)," getImplementationAddress")
  console.log(await upgrades.erc1967.getAdminAddress(box.address)," getAdminAddress")    
}

main().catch((error) => {
  console.error(error)
  process.exitCode = 1
})

Explanation:

We deploy an upgradeable contract Box.sol using upgrades.deployProxy().
Three contracts will be deployed: Implementation, ProxyAdmin, Proxy. We log their addresses for inspection.

Task 2.2: deploy the contract to local testnet

Let's run the deploy script in local testnet.

STEP 1: run a stand-alone hardhat testnet in another terminal:



yarn hardhat node

STEP 2: run the deploy script



yarn hardhat run scripts/1.deploy_box.ts --network localhost

Results:



Deploying Box...
0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0  box(proxy) address
0x5FbDB2315678afecb367f032d93F642f64180aa3  getImplementationAddress
0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512  getAdminAddress
✨  Done in 3.83s.

Users can interact with the box contract through box(proxy) address: 0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0.

Note: if you run this deployment for several times, you can find that ProxyAdmin is always the same: 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512

Task 2.3: test whether `Box.sol` using proxy pattern works correctly

Users interact with the implementation contract through the box(proxy) contract.

To make sure that they work correctly, let's add unit test for this scenario. In the unit test, we deploy our contract using upgrades.deployProxy() and interact through the box(proxy) contract.

Edit test/2.BoxProxy.test.ts


 js
// test/2.BoxProxy.test.ts
import { expect } from "chai"
import { ethers, upgrades } from "hardhat"
import { Contract, BigNumber } from "ethers"

describe("Box (proxy)", function () {
  let box:Contract

  beforeEach(async function () {
    const Box = await ethers.getContractFactory("Box")
    //initialize with 42
    box = await upgrades.deployProxy(Box, [42], {initializer: 'store'})
    })

  it("should retrieve value previously stored", async function () {    
    // console.log(box.address," box(proxy)")
    // console.log(await upgrades.erc1967.getImplementationAddress(box.address)," getImplementationAddress")
    // console.log(await upgrades.erc1967.getAdminAddress(box.address), " getAdminAddress")   

    expect(await box.retrieve()).to.equal(BigNumber.from('42'))

    await box.store(100)
    expect(await box.retrieve()).to.equal(BigNumber.from('100'))
  })

})

Run test:



yarn hardhat test test/2.BoxProxy.test.ts

Results:



  Box (proxy)
    ✓ should retrieve value previously stored
  1 passing (579ms)
✨  Done in 3.12s.{% raw %}`
```

Our box.sol is working correctly now. 

Later, we find that we need an `increment()` function. Instead of re-deploying this contract, migrate data to the new contract and ask all users to access the new contract address. We can upgrade the contract easily thanks to the proxy pattern.

---

![Task #3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z0t4f442e8clgay7tukp.png)


## Task 3: Upgrade smart contract to BoxV2

### Task 3.1: write new implementation

We write a new version of Box `BoxV2.sol` by inherit `Box.sol`.

Edit `contracts/BoxV2.sol`
``` solidity
// contracts/BoxV2.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "./Box.sol";

contract BoxV2 is Box{
    // Increments the stored value by 1
    function increment() public {
        store(retrieve()+1);
    }
}
```

### Task 3.2: test script for normal deployment

We write a unit test script to test BoxV2 when deployed locally. 

Edit `test/3.BoxV2.test.ts`

``` js
// test/3.BoxV2.test.ts
import { expect } from "chai"
import { ethers } from "hardhat"
import { Contract, BigNumber } from "ethers"

describe("Box V2", function () {
  let boxV2:Contract

  beforeEach(async function () {
    const BoxV2 = await ethers.getContractFactory("BoxV2")
    boxV2 = await BoxV2.deploy()
    await boxV2.deployed()
  });

  it("should retrieve value previously stored", async function () {
    await boxV2.store(42)
    expect(await boxV2.retrieve()).to.equal(BigNumber.from('42'))

    await boxV2.store(100)
    expect(await boxV2.retrieve()).to.equal(BigNumber.from('100'))
  });

  it('should increment value correctly', async function () {
    await boxV2.store(42)
    await boxV2.increment()
    expect(await boxV2.retrieve()).to.equal(BigNumber.from('43'))
  })

})

```

Run test:
```
yarn hardhat test test/3.BoxV2.test.ts
```

results:
```
  Box V2
    ✓ should retrieve value previously stored
    ✓ should increment value correctly
  2 passing (579ms)
✨  Done in 3.38s.
```

### Task 3.3: test script for upgradeable deployment

We write a unit test script for BoxV2 deployed in proxy pattern:

- first, we deploy the Box.sol
- then we upgrade it to BoxV2.sol
- test whether BoxV2 works correctly.

Edit `test/4.BoxProxyV2.test.ts`:

``` js
// test/4.BoxProxyV2.test.ts
import { expect } from "chai"
import { ethers, upgrades } from "hardhat"
import { Contract, BigNumber } from "ethers"

describe("Box (proxy) V2", function () {
  let box:Contract
  let boxV2:Contract

  beforeEach(async function () {
    const Box = await ethers.getContractFactory("Box")
    const BoxV2 = await ethers.getContractFactory("BoxV2")

    //initilize with 42
    box = await upgrades.deployProxy(Box, [42], {initializer: 'store'})
    // console.log(box.address," box/proxy")
    // console.log(await upgrades.erc1967.getImplementationAddress(box.address)," getImplementationAddress")
    // console.log(await upgrades.erc1967.getAdminAddress(box.address), " getAdminAddress")   

    boxV2 = await upgrades.upgradeProxy(box.address, BoxV2)
    // console.log(boxV2.address," box/proxy after upgrade")
    // console.log(await upgrades.erc1967.getImplementationAddress(boxV2.address)," getImplementationAddress after upgrade")
    // console.log(await upgrades.erc1967.getAdminAddress(boxV2.address)," getAdminAddress after upgrade")   
  })

  it("should retrieve value previously stored and increment correctly", async function () {
    expect(await boxV2.retrieve()).to.equal(BigNumber.from('42'))

    await boxV2.increment()
    //result = 42 + 1 = 43
    expect(await boxV2.retrieve()).to.equal(BigNumber.from('43'))

    await boxV2.store(100)
    expect(await boxV2.retrieve()).to.equal(BigNumber.from('100'))
  })

})
```

Run test:
```
yarn hardhat test test/4.BoxProxyV2.test.ts
```

Results:
```
  Box (proxy) V2
    ✓ should retrieve value previously stored and increment correctly


  1 passing (617ms)

✨  Done in 3.44s.
```

### Task 3.4: write upgrade script

In sub-task 2.2, we deploy Box(proxy) to `0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0`. 

In this sub-task, we will upgrade it to BoxV2 (deploy a new contract , and link proxy to a new implementation contract in ProxyAdmin):

Edit 
``` js
// scripts/2.upgradeV2.ts
import { ethers } from "hardhat";
import { upgrades } from "hardhat";

const proxyAddress = '0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0'

async function main() {
  console.log(proxyAddress," original Box(proxy) address")
  const BoxV2 = await ethers.getContractFactory("BoxV2")
  console.log("upgrade to BoxV2...")
  const boxV2 = await upgrades.upgradeProxy(proxyAddress, BoxV2)
  console.log(boxV2.address," BoxV2 address(should be the same)")

  console.log(await upgrades.erc1967.getImplementationAddress(boxV2.address)," getImplementationAddress")
  console.log(await upgrades.erc1967.getAdminAddress(boxV2.address), " getAdminAddress")    
}

main().catch((error) => {
  console.error(error)
  process.exitCode = 1
})

```

### Task 3.5: run the upgrade script

We will start over from the beginning.

STEP 1: run a new local testnet in another terminal:
```
yarn hardhat node
```

STEP 2: deploy Box V1
```
yarn hardhat run scripts/1.deploy_box.ts --network localhost
```

The box(proxy) will be deployed to: `0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0`.

STEP 3: upgrade to Box V2
```
yarn hardhat run scripts/2.upgradeV2.ts --network localhost
```

results:
```
0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0  original Box(proxy) address
upgrade to BoxV2...
0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0  BoxV2 address(should be the same)
0x5FC8d32690cc91D4c39d9d3abcBD16989F875707  getImplementationAddress
0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512  getAdminAddress
✨  Done in 3.64s.
```

---

![Task #4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tdtn1692l6olxckfb74.png)


## Task 4: Play with contract in hardhat console

Let's play with Box(proxy) contract in hardhat console.

### Task 4.1: play with the proxy contract 

Run hardhat console connecting to local testnet. 

```
yarn hardhat console --network localhost
```

In hardhat console: 

``` js
address = '0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0'
boxv2 = await ethers.getContractAt("BoxV2", address)
await boxv2.retrieve()
//BigNumber { value: "42" }

await boxv2.increment()
// tx response
// {
//  hash: '0x3e8c9dd8842d3315cadad2a80b592ac369e644edc5cec16f7a22c76d49e4b921',
//  blockNumber: 6,

await boxv2.retrieve()
//BigNumber { value: "43" }

await boxv2.store(100)
// tx response ...
await boxv2.retrieve()
//BigNumber { value: "100" }
```

### Task 4.2: try to interact with the implementation contact

Let's try to interact with the implementation contact to see what's happening.

``` js
addressimp = '0x5fc8d32690cc91d4c39d9d3abcbd16989f875707'
boximp = await ethers.getContractAt("BoxV2", addressimp)

await boximp.retrieve()
//BigNumber { value: "0" }
await boximp.increment()
// tx response ...
await boximp.retrieve()
BigNumber { value: "1" }
```

We will find that the original value in the implementation is `0`. This is because the data is stored in the context of Proxy contract (`0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0`) under the hood, not in the context of Implementation contract(`0x5fc8d32690cc91d4c39d9d3abcbd16989f875707`).

---

![Task #5](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88lla754tzk9jtaajrfo.png)


## Task 5: Build BoxV3 to add new state variable

We can add new state variables as long as you don't change the the layout of the state variables. 

To put it simply, you can add a new one. We will add a state variable `string public name`.

### Task 5.1: write `BoxV3.sol`

We write `BoxV3.sol` by inheriting `BoxV2`:

``` js
// contracts/BoxV3.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "./BoxV2.sol";

contract BoxV3 is BoxV2{
    string public name;

    event NameChanged(string name);
    function setName(string memory _name) public {
        name = _name;
        emit NameChanged(name);
    }
}
```

### Task 5.2: write test for proxy deployment

We skip local unit test here. We will test the proxy deployment only.

``` js
// test/5.BoxProxyV3.test.ts
import { expect } from "chai"
import { ethers, upgrades } from "hardhat"
import { Contract, BigNumber } from "ethers"

describe("Box (proxy) V3 with name", function () {
  let box:Contract
  let boxV2:Contract
  let boxV3:Contract

  beforeEach(async function () {
    const Box = await ethers.getContractFactory("Box")
    const BoxV2 = await ethers.getContractFactory("BoxV2")
    const BoxV3 =  await ethers.getContractFactory("BoxV3")

    //initialize with 42
    box = await upgrades.deployProxy(Box, [42], {initializer: 'store'})
    boxV2 = await upgrades.upgradeProxy(box.address, BoxV2)
    boxV3 = await upgrades.upgradeProxy(box.address, BoxV3)
  })

  it("should retrieve value previously stored and increment correctly", async function () {
    expect(await boxV2.retrieve()).to.equal(BigNumber.from('42'))
    await boxV3.increment()
    expect(await boxV2.retrieve()).to.equal(BigNumber.from('43'))

    await boxV2.store(100)
    expect(await boxV2.retrieve()).to.equal(BigNumber.from('100'))
  })

  it("should set name correctly in V3", async function () {
    expect(await boxV3.name()).to.equal("")

    const boxname="my Box V3"
    await boxV3.setName(boxname)
    expect(await boxV3.name()).to.equal(boxname)
  })

})

// NOTE: should also add test for event: event NameChanged(string name)
```

Run Test:
```
yarn hardhat test test/5.BoxProxyV3.test.ts
```

Results: 
```
  Box (proxy) V3 with name
    ✓ should retrieve value previously stored and increment correctly
    ✓ should set name correctly in V3
  2 passing (748ms)
✨  Done in 3.12s.
```

### Task 5.3: write upgrade script

Edit `scripts/3.upgradeV3.ts`:

``` js
// scripts/3.upgradeV3.ts
import { ethers } from "hardhat";
import { upgrades } from "hardhat";

const proxyAddress = '0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0'
// const proxyAddress = '0x1CD0c84b7C7C1350d203677Bb22037A92Cc7e268'
async function main() {
  console.log(proxyAddress," original Box(proxy) address")
  const BoxV3 = await ethers.getContractFactory("BoxV3")
  console.log("upgrade to BoxV3...")
  const boxV3 = await upgrades.upgradeProxy(proxyAddress, BoxV3)
  console.log(boxV3.address," BoxV3 address(should be the same)")

  console.log(await upgrades.erc1967.getImplementationAddress(boxV3.address)," getImplementationAddress")
  console.log(await upgrades.erc1967.getAdminAddress(boxV3.address), " getAdminAddress")    
}

main().catch((error) => {
  console.error(error)
  process.exitCode = 1
})

```

### Task 5.4: deploy and interact with BoxV3

STEP 1: upgrade to BoxV3
```
yarn hardhat run scripts/3.upgradeV3.ts --network localhost
```

results:
```
0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0  original Box(proxy) address
upgrade to BoxV3...
0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0  BoxV3 address(should be the same)
0xa513E6E4b8f2a923D98304ec87F64353C4D5C853  getImplementationAddress
0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512  getAdminAddress
✨  Done in 3.52s.
```

STEP 2: play with V3 in hardhat console

```
yarn hardhat console --network localhost
```

``` js
address = '0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0'
boxv3 = await ethers.getContractAt("BoxV3", address)
await boxv3.retrieve()
//BigNumber { value: "42" }

await boxv3.setName("mybox")
// tx response
await boxv3.name()
//'mybox'
```

STEP 3: try to play with the implementation contract directly again

``` js
addressimp = '0xa513E6E4b8f2a923D98304ec87F64353C4D5C853'
boximp = await ethers.getContractAt("BoxV3", addressimp)
await boximp.retrieve()
//BigNumber { value: "0" }
await boximp.name()
//''
```


You can find explanations about data change in openzeppelin docs[openzeppelin docs](https://docs.openzeppelin.com/learn/upgrading-smart-contracts#upgrading):

> Due to technical limitations, when you upgrade a contract to a new version you cannot change the storage layout of that contract.

> This means that, if you have already declared a state variable in your contract, you cannot remove it, change its type, or declare another variable before it. In our Box example, it means that we can only add new state variables after value.

---

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xkt0ni0lqkldju4cmq6.png)


## Task 6: Write BoxV4 with prepareUpgrade script

We write BoxV4 and prepare upgrade script for Task 7 in which we will deploy and upgrade these versions of Box to public testnet Ropsten manually call `ProxyAdmin.upgrade()`.

Let's write `BoxV4.sol`, unit test and upgrade script.

### Task 6.1: write BoxV4.sol

We write a BoxV4 which change how we interact with `name` state variable:

- We change the state variable `name` from `public` to `private`.
- When user `getName()`, a prefix is added.

``` js
// contracts/BoxV4.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

import "./BoxV2.sol";

contract BoxV4 is BoxV2{
    string private name;

    event NameChanged(string name);
    function setName(string memory _name) public {
        name = _name;
        emit NameChanged(name);
    }

   function getName() public view returns(string memory){
      return string(abi.encodePacked("Name: ",name));
    }
}
```

### Task 6.2 write test for proxy deployment

Edit `test/6.BoxProxyV4.test.ts`:

``` js
// test/6.BoxProxyV4.test.ts
import { expect } from "chai"
import { ethers, upgrades } from "hardhat"
import { Contract, BigNumber } from "ethers"

describe("Box (proxy) V4 with getName", function () {
  let box:Contract
  let boxV2:Contract
  let boxV3:Contract
  let boxV4:Contract

  beforeEach(async function () {
    const Box = await ethers.getContractFactory("Box")
    const BoxV2 = await ethers.getContractFactory("BoxV2")
    const BoxV3 =  await ethers.getContractFactory("BoxV3")
    const BoxV4 =  await ethers.getContractFactory("BoxV4")

    //initialize with 42
    box = await upgrades.deployProxy(Box, [42], {initializer: 'store'})
    boxV2 = await upgrades.upgradeProxy(box.address, BoxV2)
    boxV3 = await upgrades.upgradeProxy(box.address, BoxV3)
    boxV4 = await upgrades.upgradeProxy(box.address, BoxV4)
  })

  it("should retrieve value previously stored and increment correctly", async function () {
    expect(await boxV4.retrieve()).to.equal(BigNumber.from('42'))
    await boxV4.increment()
    expect(await boxV4.retrieve()).to.equal(BigNumber.from('43'))

    await boxV2.store(100)
    expect(await boxV2.retrieve()).to.equal(BigNumber.from('100'))
  })

  it("should setName and getName correctly in V4", async function () {
    //name() removed, getName() now
    // expect(boxV4).to.not.have.own.property("name")
    expect(boxV4.name).to.be.undefined
    expect(await boxV4.getName()).to.equal("Name: ")

    const boxname="my Box V4"
    await boxV4.setName(boxname)
    expect(await boxV4.getName()).to.equal("Name: "+boxname)
  })

})

```

Run Test:
```
yarn hardhat test test/6.BoxProxyV4.test.ts
```

Results:
```
  Box (proxy) V4 with getName
    ✓ should retrieve value previously stored and increment correctly
    ✓ should setName and getName correctly in V4
  2 passing (771ms)
✨  Done in 2.46s.
```

### Task 6.3: write script to prepare upgrade

We will write this script using `upgrades.prepareUpgrade`. 

When calling `upgrades.upgradeProxy()`, two jobs are done:

- an implementation contract is deployed
- ProxyAdmin `upgrade()` is called to link Proxy and implementation contract.

When calling `upgrades.prepareUpgrade()`, only the first job is done, and the second is left for developers to do manually.

Edit `scripts/4.prepareV4.ts`
``` js
// scripts/4.prepareV4.ts
import { ethers } from "hardhat";
import { upgrades } from "hardhat";

const proxyAddress = '0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0'
// const proxyAddress = '0x1CD0c84b7C7C1350d203677Bb22037A92Cc7e268'
async function main() {
  console.log(proxyAddress," original Box(proxy) address")
  const BoxV4 = await ethers.getContractFactory("BoxV4")
  console.log("Preparing upgrade to BoxV4...");
  const boxV4Address = await upgrades.prepareUpgrade(proxyAddress, BoxV4);
  console.log(boxV4Address, " BoxV4 implementation contract address")
}

main().catch((error) => {
  console.error(error)
  process.exitCode = 1
})
```

Run deployment:
```
yarn hardhat run scripts/4.prepareV4.ts --network localhost
```

Results:
```
0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0  original Box(proxy) address
Preparing upgrade to BoxV4...
0x610178dA211FEF7D417bC0e6FeD39F05609AD788  BoxV4 implementation contract address
✨  Done in 3.90s.
```

You can interact with proxy contract (`0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0`) in hardhat console by running `yarn hardhat console --network localhost`

``` js
address = '0x9fe46736679d2d9a65f0992f2272de9f3c7fa6e0'
boxv4 = await ethers.getContractAt("BoxV4", address)

await boxv4.getName()
//We will get error:
//ProviderError: Error: Transaction reverted: function selector was not recognized
```
---

![Task #7](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ijc3ij7qtsq1xhomzww6.png)


## Task 7: Deploy Box to public testnet Ropsten

### Task 7.1: preparations to deploy to Ropsten

We can deploy smart contract to Ropsten directly using Hardhat. 

STEP 1: Edit Alchemy/Infura endpoint in `.env`

```
ROPSTEN_URL=https://eth-ropsten.alchemyapi.io/v2/{YOURS}
PRIVATE_KEY={YOURS HERE}
```

STEP 2: Make sure you have Ropsten set in `hardhat.config.ts`:

``` json
  networks: {
    ropsten: {
      url: process.env.ROPSTEN_URL || "",
      accounts:
        process.env.PRIVATE_KEY !== undefined ? [process.env.PRIVATE_KEY] : [],
    },
  },
```

### Task 7.2: deploy Box V1 

Run deploy script:
```
yarn hardhat run scripts/1.deploy_box.ts --network ropsten
```

![deploy box v1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yz5yp9d7yfyrw9dyd0dv.png)


Three contracts are deployed:

- `0x7fcb5f0898ee1394c6cb44e3a62b9e9fc19d0e1c`, implementation contract
- `0x9ce0fdc88df321c804ed0ad9cefe87d97a30479e`, ProxyAmin contract
- `0x1CD0c84b7C7C1350d203677Bb22037A92Cc7e268`, proxy contract

We can interact with the proxy contract from hardhat console by running `yarn hardhat console --network ropsten`

In console:
``` js
address = '0x1CD0c84b7C7C1350d203677Bb22037A92Cc7e268'
box = await ethers.getContractAt("Box", address)
await box.retrieve()
//BigNumber { value: "43" }
```

### Task 7.3: upgrade to Box V2

Run our upgrade script:
```
yarn hardhat run scripts/2.upgradeV2.ts --network ropsten
```

The script does two jobs:

- deploy new implementation contract
- call ProxyAmdin.upgrade()

![upgrade to BoxV2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r7wqohz4tbkfpry9h05j.png)


Let's interact with the Box(proxy) in console:
``` js
address = '0x1CD0c84b7C7C1350d203677Bb22037A92Cc7e268'
box = await ethers.getContractAt("BoxV2", address)

await box.increment()
//wait for tx to be mined in a new block...

await box.retrieve()
//BigNumber { value: "44" }
```

### Task 7.4: upgrade to Box V3 

Run our upgrade script:
```
yarn hardhat run scripts/3.upgradeV3.ts --network ropsten
```

Let's interact with the Box(proxy) with BoxV3 in console:

``` js
address = '0x1CD0c84b7C7C1350d203677Bb22037A92Cc7e268'
box = await ethers.getContractAt("BoxV3", address)

box = await ethers.getContractAt("BoxV3", address)
await box.setName("mybox")
//wait for tx to be mined in a new block...
```


![upgrade to V3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tf2syipy44sjq0jixuge.png)


### Task 7.5: prepare upgrade to Box V4

Run the prepare upgrade script:
```
yarn hardhat run scripts/4.prepareV4.ts --network ropsten
```

This script will deploy a BoxV4 contract at `0xA0726E6e045f84dEe8D7cA4CdD427A68dd336458`.

We will upgrade in block explorer `https://ropsten.etherscan.io` manually. 

ProxyAdmin is already verified on Etherscan block explorer. In ProxyAmdin contract write page, connect to wallet and run `upgrade()` like in the screenshot.


![prepare BoxV4 and manually upgrade](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zans8cz2y6wt3zgn63s9.png)


``` js
address = '0x1CD0c84b7C7C1350d203677Bb22037A92Cc7e268'
box = await ethers.getContractAt("BoxV4", address)

box = await ethers.getContractAt("BoxV4", address)
await box.getName()
//'Name: mynewbox'
```

### Task 7.6: read ProxyAdmin contract 

You can also read ProxyAdmin contract to get more information about the Box(proxy) contract:

- getProxyAdmin
- getProxyImplementation
- owner

![read ProxyAdmin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0bsn4dnef869qxoriv94.png)


If you would like to verify Box, BoxV2, BoxV3, BoxV4 contract in Etherscan, you can use hardhat plugin `hardhat-etherscan`.

Install plugin:
```
yarn add @nomiclabs/hardhat-etherscan
```

Verify BoxV4: 
```
yarn hardhat verify 0xA0726E6e045f84dEe8D7cA4CdD427A68dd336458 --network ropsten
```

--- 

You have built and deploy proxy contract in local testnet and public testnet Ropsten in 7 tasks. You can continue to do more:

- Use OpenZeppelin Defender to manage upgrading.

- Transfer ProxyAdmin owner to a multi-sig address such as Gnosis Safe multi-sig wallet.

---

References you may be interested in:

- https://docs.openzeppelin.com/learn/upgrading-smart-contracts#upgrading
- https://docs.openzeppelin.com/defender/guide-upgrades
- https://docs.openzeppelin.com/upgrades-plugins/1.x/proxies
- https://www.preethikasireddy.com/post/the-hardest-concept-for-developers-to-grasp-about-web-3-0
- https://forum.openzeppelin.com/t/openzeppelin-upgrades-step-by-step-tutorial-for-hardhat/3580
- https://blog.openzeppelin.com/proxy-patterns/
- https://blog.trailofbits.com/2018/09/05/contract-upgrade-anti-patterns/
- https://blog.openzeppelin.com/the-state-of-smart-contract-upgrades/

---


### Tutorial List:

#### 1. A Concise Hardhat Tutorial(3 parts) 
https://dev.to/yakult/a-concise-hardhat-tutorial-part-1-7eo

#### 2. Understanding Blockchain with `Ethers.js`(5 parts)
https://dev.to/yakult/01-understanding-blockchain-with-ethersjs-4-tasks-of-basics-and-transfer-5d17

#### 3. Tutorial : build your first DAPP with Remix and Etherscan (7 Tasks)
https://dev.to/yakult/tutorial-build-your-first-dapp-with-remix-and-etherscan-52kf

#### 4. Tutorial: build DApp with Hardhat, React and Ethers.js (6 Tasks)
https://dev.to/yakult/a-tutorial-build-dapp-with-hardhat-react-and-ethersjs-1gmi

#### 5. Tutorial: build DAPP with Web3-React and SWR
https://dev.to/yakult/tutorial-build-dapp-with-web3-react-and-swr-1fb0

#### 6. Tutorial: write upgradeable smart contract (proxy) using OpenZeppelin(7 Tasks)
https://dev.to/yakult/tutorial-write-upgradeable-smart-contract-proxy-contract-with-openzeppelin-1916

#### 7. Tutorial: Build a NFT marketplace DApp like Opensea(5 Tasks)
https://dev.to/yakult/tutorial-build-a-nft-marketplace-dapp-like-opensea-3ng9

---

If you find this tutorial helpful, follow me at Twitter [@fjun99](https://twitter.com/fjun99)

Web3 Tutorial : build your first DAPP with Remix and Etherscan

fangjun — Sun, 13 Feb 2022 15:20:27 +0000

In this tutorial with 7 detailed tasks, we will build a DApp step by step.

Task 1: Preparation for building smart contract
Task 2: Remix IDE - online development environment
Task 3: Greeter.sol - First semi-DApp with Remix
Task 4: ERC20 Token - Second semi-DApp
Task 5: Understanding approve, allowance and transferFrom
Task 6: Deploy to public testnet Ropsten
Optional Task 7: Deploy and verify on Polygon

DApp is a web-app with logic in on-chain smart contracts which users can access through their wallet. Ethereum.org explains:

A decentralized application (dapp) is an application built on a decentralized network that combines a smart contract and a frontend user interface.

So we may have a simple definition of DAPP:

DApp =

Smart Contract (on blockchain) +

User Interface (web-app running on server) +

Wallet (controlled by a user in browser and mobile app)

DAPP = Smart Contract + Web APP + Wallet(user-controlled).

I would like to call what we build in this 7-step tutorial "semi-DApp", as we will focus on smart contracts while relying on Remix IDE or Etherscan as the user interface. We will build our own web-app using React/Next.js that works with smart contracts and wallet later.

Prerequisites: knowledge and tools

To build DApp, you need some basic knowledge and tools beforehand.

Knowledge needed:

Blockchain basics
Ethereum basics
Wallet usage
Solidity language
ERC20 & ERC721 token standard

Tools needed:

Remix IDE online
MetaMask (Wallet browser extension)
Node.js, yarn, TypeScript
OpenZeppelin (Solidity token library)
Etherscan and other block explorers

But take it easy, we will try to explain when we encounter them.

Let's start our journey.

Task 1: Preparation for building smart contract

We need tedious preparation to have all the needed tools set:

Install MetaMask and create an account
Hardhat local testnet
Remix IDE settings

Task 1.1 Install MetaMask and create account

In this sub-task, we will install MetaMask, create a wallet and write down mnemonics (phrase) with pen and paper.

Download and install MetaMask extension from Chrome extension store.
Create a wallet by following the instructions of MetaMask. Do write down mnemonics (seed phrases) with pen and paper.
Get to know basic usages of MetaMask: 1) switch Network, 2)add or edit Network, 3) add account 4)change account.

You can also use MetaMask in other browsers such as Firefox, Brave and Edge.

Task 1.2 Run a local testnet by Hardhat

We will use Hardhat which is an Ethereum development environment to run a local testnet. You can also use Ganache by truffle.

To use Hardhat, you need to have node.js and yarn in your computer.

STEP 1: make a directory and install hardhat in it

mkdir hhproject && cd hhproject
mkdir chain && cd chain
yarn add hardhat

STEP 2: create a sample Hardhat project

yarn hardhat
//choose: Create an advanced sample project that uses TypeScript

A hardhat project is created with a sample smart contract "Greeter.sol" that we will use in Task 3.

STEP 3: run Hardhat Network (local testnet) in stand-alone mode

yarn hardhat node

A local testnet will is running (chainId: 31337):

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

It gives us 20 accounts each filled with 10000.0 test ETH. These accounts are generated with mnemonics test test test test test test test test test test test junk. Do not send mainnet ETH, token or NFT to these accounts.

Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266 (10000 ETH)
Account #1: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 (10000 ETH)
...

We will organize our project directory as follows (we don't use the webapp sub directory in this tutorial):

- hhproject
  - chain  (working dir for hardhat)
  - webapp (working dir for Next.js app later)

Task 1.3 switch MetaMask network to local testnet

Make sure Hardhat Network local testnet is still running and change network settings:

STEP 1: In MetaMask browser extension, click the network selector on the top bar. Switch the network from mainnet to localhost 8545.
STEP 2: Click the Account icon on the topbar and go to "Settings/Network/". Choose "localhost 8445".

Two useful Notes on MetaMask usage:

make sure Chain ID is 31337. It may be "1337" by default. You can edit the network parameters in MetaMask > Settings > Networks.
if you can't see public and local testnet in MetaMask, you can open it in MetaMask > Settings > Advanced > Show test networks.

Task 1.4 Add/Import account to MetaMask

STEP 1: Click Account icon in the top bar and choose "Import Account". Import Account with Private Key of local testnet Account #0.

Private Key of Account #0 is:

Account #0: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266
Private Key: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80

STEP 2: Switch to the added Account with address: 0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266.

There is 10000.0 test ETH in this account which can be used in this ethereum local testnet.

Task 2: Remix IDE - online smart contract development environment

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

Remix Ethereum IDE (Remix IDE) is the online development environment for Ethereum. Introduction from Remix IDE docs:

Remix is used for the entire journey of contract development as well as act as a playground for learning and teaching Ethereum.

Remix IDE is a powerful open source tool that helps you write Solidity contracts straight from the browser.

Remix IDE has modules for testing, debugging and deploying of smart contracts and much more.

Task 2.1 Have a look at Remix IDE

Take a look at Remix IDE components we will use:

1) Editor: Open File Explorer of Remix IDE, and click a sample smart contract file "1_Storage.sol"

2) Solidity Compiler: where we compile smart contracts

3) Deploy and Run Transactions: where we deploy smart contracts and interact with smart contracts.

4) Unit Test: the plugin for unit test using Solidity. If not installed, add from plugin button in the bottom-left.

File structure in Remix IDE workspace:

contracts/
scripts/
tests/

There are several sample smart contracts as well as deploy scripts in JavaScript and Unit Test scripts in Solidity in the default workspace of Remix IDE.

Task 2.1 Change Environment to Injected Web3 in Remix

In this sub-task, we will change the "Environment" in Remix "Deploy & Run" tab.

STEP 1: make sure MetaMask network is switched to "localhost 8545" and switch account to 0xf39f...2266
STEP 2: change Environment from default Javascript VM(London) to Injected Web3. We told Remix IDE to use injected ethereum provider provided by MetaMask.
SETP 3: check the account in this tab. It should be changed to 0xf39f...2266 same as MetaMask.

Task 2.2 Compile a sample smart contract

It is intuitive to compile a smart contract in Remix IDE. Compile in 3 steps:

STEP 1: In the Editor tab select a smart contract such as "1_Storage.sol".
STEP 2: In Solidity Compiler tab, compile the selected smart contract. Leave the options as default.
- Compiler: 0.8.7+commit.e28d00a7
- Language: Solidity
- EVM Version: Compiler default
STEP 3: Click Compile button. The selected smart contract will be compiled.

Compiled results (artifacts) are stored in the artifacts directory.

Task 2.3 Run unit test

Remix IDE support unit test written in solidity with a plugin.

STEP 1: In Plugin Manager, install "Solidity unit testing" plugin if it is not installed and activated yet.
STEP 2: In Unit Test tab, select test/4_Ballot_test.sol and click "Run" button.

Note: We usually run unit test in Javascript in popular Ethereum development environments like Truffle and Hardhat. We will skip unit test in this tutorial in the following tasks.

We call the smart contract development circle "Compile - Test - Deploy" and will do deployment in the next sub-task.

Task 2.4 Deploy to testnet provided by Remix IDE

Remix IDE also provides a testnet with EVM (ethereum virtual machine) based on @ethereumjs/vm EVM implementation (github repo link).

First, we will try to deploy a smart contract to JavaScript VM(London) provided with Remix IDE.

STEP 1: change environment to JavaScript VM(London).
STEP 2: It provides several test accounts on the node. We will use account "0x5B3...eddC4" as the deployer.
STEP 3: click "deploy" button.

As the account is controlled by the script (it has the private key), we don't need to confirm the transaction in wallet.

Once deployment is completed, a transaction receipt will be logged on the Remix IDE console at the bottom right of the screen.

The deployed contract will be displayed in the left bottom of the screen. We can interact with it.

"store" a number, such as 100
"retrieve", get 100

Task 2.5 Deploy to injected testnet provide by MetaMask

In this sub-task, we will deploy the sample smart contract to the injected testnet provided by MetaMask. It is the local testnet we are running on:

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

Let us try to deploy a smart contract to local testnet with MetaMask. In this scenario, the script doesn't have the private key. The private key is controlled by MetaMask. The user will need to confirm the transaction in his MetaMask wallet.

STEP 1: In "Deploy & Run" tab, change the environment to "Injected Web3".
STEP 2: check if the account is "0xf39...92266" same as the MetaMask.
STEP 3: click "deploy" button.
STEP 4: confirm in the popup of MetaMask wallet.

The returned receipt of the transaction is:

status  true Transaction mined and execution succeed
transaction hash    0xb4f72c274fdd6bd600e05f5eb0c6c9edc45c61743c732aab867cc50d4719c754
from    0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
to  Storage.(constructor)
...

You can see that the transaction was sent from address: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266.

Task 2.6 Interact with the smart contract

We can call functions/methods of a smart contract in Remix IDE. There are two kinds of methods of smart contract: read-only and state-change.

Deep blue button is for read-only methods.
Orange button is for state-change methods. To send state-change methods to blockchain network, users are required to confirm this kind of action in their wallet and pay gas fee.

Let's interact with the smart contract.

STEP 1: set number as "100" and click "store" button.

This will send a transaction to the blockchain which needs confirmation in MetaMask.

STEP 2: confirm the transaction.
STEP 3: click "retrieve" button.

"retrieve" is a read-only call which don't need confirmation in MetaMask. Users don't need to pay gas fee to call read-only functions.

The result will be displayed on the screen.

Details of Write (send) and Read (call) are logged in the Remix IDE console.

After you finish Task 1 and Task 2, you are fully prepared for the DApp development journey.

Task 3: Greeter - First semi-DApp with Remix

In Task 3, we will begin to build your first DAPP using:

Remix IDE
Hardhat local testnet
"Greeter.sol" smart contract

We will not build webapp front-end by ourselves in this tutorial. Instead, we use Remix IDE as a web user interface to interact with smart contracts.

Task 3.1 Sample contract "Greeter.sol"

There is a smart contract "Greeter.sol" in hardhat sample project. Let's create a file "contracts/Greeter.sol" in Remix IDE and copy the Greeter.sol in the hardhat project directory to it.

//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() in solidity is a Hardhat only feature which can only be used in Hardhat Network local testnet.

There are also deployment scripts and unit test scripts in hardhat project. We will not need those scripts in Remix IDE.

Task 3.2 Compile Greeter.sol

Switch to "Solidity Compiler" tab in Remix IDE.

Compile "Greeter.sol"

Once it is compiled successfully, you will see "Compilation Details" in Remix IDE.

We can also copy "ABI" and "Bytecode" to view if you are interested in them.

These files are stored in the contract/artifacts directory.

Task 3.3 Test

We skip unit test here again.

Task 3.4 Deploy

There are deployment scripts in Remix IDE which we can use by default. We don't need to make any changes.

Go to Deploy and Run Tab in Remix IDE. Deploy "Greeter.sol" in 9 steps:

STEP 1: make sure "Greeter.sol" has already been compiled successfully.
STEP 2: make sure MetaMask switched to localhost network and account switched to the related hardhat account.
STEP 3: make sure Environment changed to "Injected Web3". And the Account is the related hardhat testnet account.
STEP 4: leave Gas Limit and Value as default.
STEP 5: choose Contract: "Greeter - contract/Greeter.sol"
STEP 6: leave deploy variable string_greeting to be blank or input any string you like.
STEP 7: click Deploy button.
STEP 8: confirm the transaction in MetaMask popup.
STEP 9: check deploy transaction receipt in Remix IDE console.

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"
}

Task 3.5 Interact with the deployed smart contract

STEP 1: get the initial greet which is set in the deployment process by clicking the greet Deep Blue button.
STEP 2: setGreeting to "My first Dapp", and confirm in MetaMask popup.
STEP 3: get greet again. It should be: "My first Dapp".

We finished our first DAPP - Smart contract + web interface + MetaMask wallet.

In the next task, we will write an ERC20 token smart contract using popular solidity library OpenZeppelin.

Task 4: Second semi-DApp - ERC20 Token

The most common use case of DApp is based on tokens (ERC20, ERC721, ERC1155) on ethereum as assets.

We will not write a token smart contract from scratch. Instead, we will inherit from popular solidity library OpenZeppelin. The best practice of token smart contract development is using verified ones instead of reinventing the wheel.

Task 4.1 ERC20 using OpenZeppelin

Write an ERC20 token "ClassToken" (symbol:CLT) in "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);
        }
}

Please note that we import OpenZeppelin from a GitHub file. In local development environments like Hardhat or Truffle, we install @openZeppelin/contracts and import like this:

import "@openzeppelin/contracts/token/ERC20/ERC20.sol";

Information about this ERC20 token:

Name and symbol: ClassToken, CLT
Decimals: 18
InitialSupply: 10000.0 CLT, mint to deployer(msg.sender)

Task 4.2 Compile

Compile "ClassToken.sol" in Remix Compile Tab.

Task 4.3 Test

We skip unit test here again.

Task 4.4 Deploy

In Deploy and Run Tab, deploy to local testnet.

Click Deploy button.

The deployed smart contract is shown on the left panel. Click to show the functions we can "call" or "send".

ERC20 is a smart contract standard for token. It has standardized interface (OpenZeppelin docs):

FUNCTIONS

name()
symbol()
decimals()
totalSupply()
balanceOf(account)
transfer(recipient, amount)
allowance(owner, spender)
approve(spender, amount)
...

Task 4.5 Read token information

There are several read-only functions of ERC20 Standard token smart contract.

decimals(), 18
name, ClassToken
symbol, CLT
initialSupply, 10000000000000000000000, which means 10000.0 CLT token.

We can query token balance of an address by calling balanceOf:

input: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
output: 10000000000000000000000, which means 10000.0 CLT token.

Task 4.6 Send token by calling `transfer`

Click the arrow of transfer button, enter inputs:

input: recipient 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 (Account #1)
input: amount 100000000000000000000 (100.0 CLT)

Confirm the transaction in MetaMask popup. Once successful, the receipt of the transaction will be displayed on Remix IDE console.

Get the balance of CLT of addresses:

0x70997970c51812dc3a010c7d01b50e0d17dc79c8
100000000000000000000 (100.0 CLT)
0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
9900000000000000000000 (9900.0 CLT)

The PrivateKey of 0x70997970c51812dc3a010c7d01b50e0d17dc79c8(Account #1) is 0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d

You can add this account (Account #1) and token to MetaMask to interact with ERC20 smart contract from this account.

Task 4.7 Add token to MetaMask

MetaMask may not display ClassToken(CLT) on assets list automatically. We need to add it to assets list with contract address(token address).

You can click "import tokens" to add. We will input the token smart contract address: 0xCf7Ed3AccA5a467e9e704C703E8D87F634fB0Fc9. Please input the address of your deployed ClassToken.

CLT is in asset list in MetaMask now. You can see the balance of CLT and you can send CLT to others using MetaMask.

Useful Tips: reset MetaMask account nonce

When we play with localhost and MataMask several times, we can mess with the nonce (transaction count). Sometimes we can't send transactions with a messed nonce. When encountering this problem, you can reset MetaMask account nonce as follows:

Go to MetaMask > Setting > Advanced
Reset Account

Explanation by MetaMask:

Resetting your account will clear your transaction history. This will not change the balances in your accounts or require you to re-enter your Secret Recovery Phrase.

Task 5: Understanding approve, allowance and transferFrom

Task 5.1 Understanding transferFrom

There is an ingenious design in ERC20 token standard:

approve
transferFrom
allowance

What can we do with it:

you can grant another person an amount of token he can use by sending approve()
he can use the allowance by sending transferFrom()
everyone can check the allowance by calling allowance()

There are also two helpers decreaceAllowance() and increaseAllowance() in OpenZeppelin ERC20 implementation.

The definition of TransferFrom is:

transferFrom(address sender, address recipient, uint256 amount)

Let's play with the "approve-transferFrom" design.

5.2 try approve and transferFrom

We will use 3 accounts: Account #0, #1, #2. The private key of Account #1 #2 is:

Account #1: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8
Private Key: 0x59c6995e998f97a5a0044966f0945389dc9e86dae88c7a8412f4603b6b78690d

Account #2: 0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC
Private Key: 0x5de4111afa1a4b94908f83103eb1f1706367c2e68ca870fc3fb9a804cdab365a

STEP 1: import Account #1 and #2 to MetaMask

STEP 2: MetaMask in Account #0, approve Account #1 with 1000.0 CLT. Send approve():

spender: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#0
amount: 1000000000000000000000 (1000.0 CLT)

amount is uint256 with 18 decimals.

STEP 3: check allowance. Call allowance():

owner:0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 Account#0
spender: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#1

result is: 1000000000000000000000 (1000.0 CLT)

STEP 4: switch to Account#1

STEP 5: MetaMask in Account #1. Account #1 send TransferFrom() to sends token from Account #0 to Account #2:

sender: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 Account#0
recipient: 0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC Account#2
amount: 500000000000000000000 (500.0 CLT)

STEP 6: check allowance again. The result is:

500000000000000000000 (500.0 CLT)

STEP 7: switch to Account#0 in MetaMask

STEP 8: set allowance to 0 approve() (called by Account#0):

spender: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#0
amount: 0

STEP 9: check allowance. Call allowance():

owner:0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266 Account#0
spender: 0x70997970c51812dc3a010c7d01b50e0d17dc79c8 Account#1

The result will be 0.

A security note from OpenZeppelin docs you should know:

Beware that changing an allowance with this method brings the risk that someone may use both the old and the new allowance by unfortunate transaction ordering. One possible solution to mitigate this race condition is to first reduce the spender’s allowance to 0 and set the desired value afterwards: https://github.com/ethereum/EIPs/issues/20#issuecomment-263524729

In the next task, we will deploy "ClassToken" to public testnet such as Ropsten and Rinkeby. You can also try to deploy it to polygon, BSC(BNB Chain) and other EVM-compatible chains, as well as L2s (Layer-2) like Optimism and Arbitrum.

Task 6: Deploy to public testnet Ropsten

To deploy a smart contract to Ropsten test network, you need "Ropsten test ETH" in wallet. You can get from faucet: https://faucet.metamask.io/

Etherscan provide a block explorer for Ropsten: https://ropsten.etherscan.io/

Task 6.1 Compile / Test / Deploy

Deploy smart contract to Ropsten testnet in 5 steps:

STEP 1: switch MetaMask to Ropsten network and switch to your own account.

Note: don't use account provide by Hardhat testnet. Account #0, #1 are default accounts generated by Hardhat and many people know their private key.

STEP 2: Get test ETH (Ropsten testnet) at faucet for your account. You will need "test ETH" to pay gas fee.
STEP 3: In Remix IDE Deploy & Run Tab, make sure that the environment is "Injected Web3" connecting to network Ropsten (3) network.
STEP 4: Click Deploy Button and confirm in MetaMask popup. The deployment to public testnet Ropsten may take one or two minutes.
STEP 5: Once the smart contract is deployed successfully, you can view the transaction details at block explorer: https://ropsten.etherscan.io/

Task 6.2 Interact with contract in Remix

We can interact from Remix IDE just like Task 4.5-7.

Read token information
transfer token
add token to MetaMask and transfer between accounts.

You can view these transactions on https://ropsten.etherscan.io/ .

Task 6.3 Verify contract on Etherscan (API key needed)

We can interact with a smart contract directly when it is verified on Etherscan.

In sub-task 6.3 and 6.4, we will verify our smart contract on https://ropsten.etherscan.io/ and interact with it.

STEP 1: create an account at Etherscan.io
STEP 2: get API key at: https://etherscan.io/myapikey
STEP 3: In Remix IDE Plugin Manager, search and add "Etherscan - Contract Verification"
STEP 4: In "Etherscan - Contract Verification" plugin, input etherscan API key.
STEP 5: Verify the contract. Waiting for the verification to be completed.

Please note that "Verify" means two things:

We will publish the source code on etherscan.
The code is verified the same as the compiled and deployed code.

Task 6.4 Interact with contract on Etherscan

Once verified successfully, you can interact with smart at https://ropsten.etherscan.io/

STEP 1: click "Code" button. You can read the open source code.
STEP 2: click "Read Contract" button. We can call read-only functions of this ERC20 smart contract.
STEP 3: click "Write Contract" button.
STEP 4: connect to Web3. Before we can call state-change functions of the contract, we need to "connect to Web3" with MetaMask wallet first. Connect to MetaMask in the popup.
STEP 5: click "transfer", input variable, and confirm in the MetaMask popup.

To deploy smart contract and verify it on Ethereum mainnet is almost the same.

In the next optional task, we will deploy and verify contract on Polygon. The process is a little different.

Optional Task 7: Deploy and verify on Polygon

We will try to deploy to Polygon mainnet in Task 7.1-7.3. You need MATIC token on Polygon network to pay for gas fee.

You can add Polygon mainnet to your MetaMask using Chainlist.org.

Optional Task 7.1 Deploy contract to Polygon mainnet (MATIC needed)

To deploy contract to Polygon mainnet is almost the same as to Ropsten testnet.

Switch MetaMask network to Polygon mainnet
Deploy in Environment "Injected Web3" (Connect to Custom(137) network). It may take a few minutes.
View contract at polygon's block explorer : https://polygonscan.com/

polygonscan.com is also built by the Etherscan team.

Optional Task 7.2 Verify contract on Polygonscan （website）

There is no handy plugin to verify contract on Polygonscan.com in Remix IDE. You can do it manually in 8 steps:

STEP 1: Create an account at polygonscan.com
STEP 2: Search by the deployed contract address and go to contract page.
STEP 3: Click "Contract" tab on that page. There is only ByteCode in it. Click the "Verify and Publish" link to verify.
STEP 4: Fill the form to verify contract.

Compile Type choose: Solidity(Single File)
Compiler Version: choose the same one as that in Remix IDE compiler Tab

We need some help to make our smart contract into a single file as we inherited ClassToken from OpenZeppelin ERC20 contract and they are in several files now. There is Remix IDE plugin Flattener we can use here.

STEP 5: Backup ClassToken.sol first as Flattener will change it.
STEP 6: In Flattener Plugin, click button "Flatten contracts/ClassToken.sol". It will make the smart contract which inherits from OpenZeppelin ERC20 to one file. This process is called "Flatten".
STEP 7: paste the flattened contract code to polygonscan explorer verify page.
STEP 8: wait the verify process to be completed. It will take about a minute depending on the polygon network status.

Optional Task 7.3 Interact with contract on Polygonscan block explorer

Once the contract is verified on Polygonscan, you can interact with it just like Task 6.4

After completing these tasks in this tutorial, you already know how to compile, deploy and interact smart contract with the help of Remix IDE and Etherscan on local testnet, public testnet Ropsten and Polygon mainet.

The smart contract, Remix IDE / Etherscan and MetaMask wallet together are DApp(or Semi-DApp in this tutorial): smart contract on chain, web app based on Remix IDE / Etherscan, MetaMask wallet controlled by the user.

I will publish another two tutorials to build DApp with smart contract and real web front-end user interface using Node.js, Ethers.js and Web3-React. Then we will have a real DApp instead of a semi-DAPP here.

Useful Notes: The magic behind DApps

The most magical part behind DApps is the immutable data layer which can be computed with smart contracts which can only be triggered by user wallet. Quote from ethereum.org:

DApps have their backend code (smart contracts) running on a decentralized network and not a centralized server. They use the Ethereum blockchain for data storage and smart contracts for their app logic.

A smart contract is like a set of rules that live on-chain for all to see and run exactly according to those rules. Imagine a vending machine: if you supply it with enough funds and the right selection, you'll get the item you want. And like vending machines, smart contracts can hold funds much like your Ethereum account. This allows code to mediate agreements and transactions.

Once DApps are deployed on the Ethereum network you can't change them. DApps can be decentralized because they are controlled by the logic written into the contract, not an individual or a company.

Tutorial List:

1. A Concise Hardhat Tutorial(3 parts)

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

2. Understanding Blockchain with `Ethers.js`(5 parts)

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

3. Tutorial : build your first DAPP with Remix and Etherscan (7 Tasks)

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

4. Tutorial: build DApp with Hardhat, React and Ethers.js (6 Tasks)

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

5. Tutorial: build DAPP with Web3-React and SWR

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

6. Tutorial: write upgradeable smart contract (proxy) using OpenZeppelin(7 Tasks)

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

7. Tutorial: Build an NFT marketplace DApp like Opensea(5 Tasks)

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

If you find this tutorial helpful, follow me at Twitter @fjun99

04 Understanding Blockchain with `Ethers.js`: 4 Tasks of Smart Contract Events

fangjun — Fri, 04 Feb 2022 16:14:00 +0000

Events are very, very important for smart contracts and blockchain. Ethers.js also provide some features to deal with events as well as logs. There are three types of interactions we can do with a smart contract:

read-only: call non-state-change functions
write: call state-change functions (sometimes we call it "send transaction")
listen to events: listen to events emitted by smart contract.

Understanding Smart contract events

Events explained in plain English. When we call a state-change function of a smart contract, there are three steps:

STEP 1: Off-chain call. We call a state-change function of a smart contract using JavaScript off-chain.
STEP 2: On-chain confirmation. State-change transactions need to be confirmed by consensus algorithms in several blocks on-chain. So we can't get the result immediately.
STEP 3: Emit events. Once the transaction is confirmed, an event is emitted. You can listen to events to get the results off-chain.

Usually we listen to events in our DAPP. But we can also try to play with events with Ethers.js. Here are 4 tasks for you.

Prerequisites

You will interact with an ERC20 smart contract deployed to Hardhat Network (local testnet). Before you start the 4 tasks in this article, you need to to meet some prerequisites which you can found in the third tutorial in this series:

ERC20 smart contract "ClassToken" with deploy and test scripts.
Run Hardhat Network (local testnet) in another terminal by running yarn hardhat node
Compile, test and deploy ClassToken:

yarn hardhat compile
yarn hardhat test
yarn hardhat run scripts/deploy_classtoken.ts --network localhost
//ClassToken deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3

Enter Hardhat console:

yarn hardhat console --network localhost

In the following tasks, we will run in interactive console.

Task 1. Analyze response of state-change transaction

Task 1.1 Get contract instance

Get a contract instance and add some constants and helpers:

const address = '0x5FbDB2315678afecb367f032d93F642f64180aa3';
const token = await ethers.getContractAt("ClassToken", address);

account0='0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266'
account1='0x70997970c51812dc3a010c7d01b50e0d17dc79c8'

parseEther=ethers.utils.parseEther
formatEther=ethers.utils.formatEther

Test whether the smart contract is working well:

await token.symbol()
//'CLT'
await token.balanceOf(account0).then(r=>formatEther(r))
//'10000.0'
token.signer.address
//'0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266'

It seems everything is OK. Let's go through the tasks.

Task 1.2 Transfer CLT and analyze response

You can refer to Ethers.js docs on this.

response = await token.transfer(account1,parseEther('100.0'))

The response is:

{
  hash: '0x1c7eab681e9e4b23485110d0d563eea9e4ae79e8f3114f4aaa86b56c7f423dd0',
...
  blockNumber: 2,
  transactionIndex: 0,
  confirmations: 1,
  from: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
...
  to: '0x5FbDB2315678afecb367f032d93F642f64180aa3',
  value: BigNumber { value: "0" },
  nonce: 1,
...
  chainId: 31337,
  wait: [Function (anonymous)]
}

There is a wait() function in the response object. By calling this function, we can get transaction receipt as in the web3.js.

Task 1.3 Get transaction receipt

receipt = await response.wait()

//check the events
receipt.events

There is only one event in it now, we can call functions of event to learn more about it.

e= receipt.events[0]
await e.getBlock()
await e.getTransaction() 
await e.getTransactionReceipt()

1.4 smart contract method analysis

Ethers provide functions of analysis for smart contract methods, which means "analyze properties and results of a write method without actually executing it."

Take "call static" for example: "ask a node to pretend that a call is not state-changing and return the result."

Smart contract object is "Meta-Class" in ethers:

A Meta-Class is a Class which has any of its properties determined at run-time. (via Ethers.js Meta-Class)

//estimate gas 
await token.estimateGas.transfer(account1,parseEther('100.0'))
//BigNumber { value: "35292" }

//call Static
await token.callStatic.transfer(account1,parseEther('100.0'))
//true

Task 2 Understanding Smart contract events

2.1 ERC20 Events - Transfer

There are two events in ERC20 smart contract:

Transfer(from, to, value)
Approval(owner, spender, value)

'Transfer' event is "Emitted when value tokens are moved from one account (from) to another (to)." (via link)

2.2 Do more transfer and retrieve all the events

Now, let's do 4 more transfer and get all 5 "Transfer" events in console

await token.transfer(account1,parseEther('100.0'))
await token.transfer(account1,parseEther('100.0'))
await token.transfer(account1,parseEther('100.0'))
await token.transfer(account1,parseEther('100.0'))

//check balance
await token.balanceOf(account0).then(r=>formatEther(r))
//'9500.0'
await token.balanceOf(account1).then(r=>formatEther(r))
//'500.0'

There are Events of ERC20 smart contract examples in Ethers.js docs.

//create event filter: transfer from account0
filterFrom = token.filters.Transfer(account0);

//query transfer from events in the last 10 blocks
events = await token.queryFilter(filterFrom, -10, "latest");

events.length
//5

2.3 Get Transfer event args

Let's try to get all the Transfer to account0.

//create event transfer: transfer to account0
filterTo = token.filters.Transfer(null,account0);
events.length
//1

There is only one Transfer event which transfer CLT token to account0. When ClassToken was deployed to the chain, 1000.0 CLT was minted and transferred from 0x0 to account0.

We can get the details:

txargs = events[0].args
//[
//  '0x0000000000000000000000000000000000000000',
//  '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
//  BigNumber { value: "10000000000000000000000" },
//  from: '0x0000000000000000000000000000000000000000',
//  to: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
//  value: BigNumber { value: "10000000000000000000000" }
//]

Task 3: Listen to events

Task 3.1 Set up a listener

In the current terminal where the Hardhat console is running, set up a listener to events.

token.on(filterFrom, (from, to, amount, event) => {  console.log(event)});

The latest event is logged on the screen.

Task 3.2 Run transfer in another Hardhat console

response = await token.transfer(account1,parseEther('100.0'))

Task 3.3 Check the result in the first terminal

When you go back to the first terminal, you will see that the new event is logged on the screen.

Task 4: Play more with Event listening

Task 4.1 Check listeners and remove them all

token.listenerCount()
//1
token.removeAllListeners(filterFrom)
token.listenerCount()
//0

Task 4.2 Set up once listener

token.once(filterFrom,(from, to, amount, event) => {console.log(from,to,amount,event.blockNumber)})

token.listenerCount()
//1

Task 4.3 Run transfer in another terminal and see events

Run transfer in another terminal

response = await token.transfer(account1,parseEther('100.0'))

In the listener terminal, we will get:

0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
0x70997970C51812dc3A010C7d01b50e0d17dc79C8 
BigNumber { value: "100000000000000000000" } 
16

Now the listenerCount is back to 0:

token.listenerCount()
//0

Web3.js can also deal with events but it is quite different. You can also refer to web3.js contract events related documents.

03 Understanding Blockchain with `ethers.js`: 4 Tasks of interacting with smart contract

fangjun — Mon, 31 Jan 2022 16:28:04 +0000

In third part of this ethers.js tutorial, we will use ethers.js to interact with smart contract.

What we do here is a little beyond the scope of learning ethers.js:

Write a ERC20 token smart contract with OpenZeppelin
Deploy the smart contract to Hardhat local testnet
Interact with smart contract using Ethers.js

Task 1: Write ERC20 token smart contract

We will write an ERC20 token smart contract using the verified and popular solidity token library OpenZeppelin.

Task 1.1 Install OpenZeppelin

In the hardhat project directory, install OpenZeppelin:

yarn add @openzeppelin/contracts

Task 1.2 Write smart contract in Solidity

There is a "Greeter.sol" and related test script "test/index.ts" and deploy script "scripts/deploy.ts" in the project. We will leave them there.

Add "contracts/classtoken.sol"

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

import "@openzeppelin/contracts/token/ERC20/presets/ERC20PresetMinterPauser.sol";

contract ClassToken is ERC20PresetMinterPauser {
        constructor(uint256 initialSupply) ERC20PresetMinterPauser("ClassToken", "CLT") {
        _mint(msg.sender, initialSupply);
        }
}

We create an ERC20 token smart contract which inherits ERC20PresetMinterPauser of OpenZeppelin. The token name is "ClassToken", symbol is "CLT".

Initial supply of this token will be set in deployment script. Initial supply of CLT will be sent to (mint to) deployer's address.

Compile smart contract by running:

yarn hardhat compile

Task 1.3 Write Unit Test for smart contract

Unit test of smart contract is a must. We should cover smart contract with unit test as much as possible. The following script is included here to illustrate that we can't skip this step.

Add "test/ClassToken.ts":

import { expect } from "chai";
import { ethers } from "hardhat";

describe("ClassToken", function () {
  it("Should have the correct initial supply", async function () {
    const initialSupply = ethers.utils.parseEther('10000')
    const ClassToken = await ethers.getContractFactory("ClassToken");
    const token = await ClassToken.deploy(initialSupply);
    await token.deployed();

    expect(await token.totalSupply()).to.equal(initialSupply);
  });
});

Run test:

yarn hardhat test

Unit test passed. We will try to deploy it to a local testnet.

Task 2: Deploy smart contract to local testnet

We will deploy smart contract both to in-process and stand-alone local testnet to display usage and difference between these two.

Task 2.1: Write deployment script

Add "scripts/deploy_classtoken.ts":

import { ethers } from "hardhat";

async function main() {

  const initialSupply = ethers.utils.parseEther('10000')
  const ClassToken = await ethers.getContractFactory("ClassToken");
  const token = await ClassToken.deploy(initialSupply);
  await token.deployed();

  console.log("ClassToken deployed to:", token.address);
}

main().catch((error) => {
  console.error(error);
  process.exitCode = 1;
});

The intialSupply is set to be 10000.0 CLS.

2.2 deploy on in-process local testnet.

yarn hardhat run scripts/deploy_classtoken.ts
//ClassToken deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3

If you run the script again, you will find the smart contract is always deployed to the same address as in-process is new every time.

2.3 Run a stand-alone local testnet

Run a stand-alone local testnet at another terminal:

yarn hardhat node

2.4 Deploy ClassToken to stand-alone local testnet

Deploy smart contract:

yarn hardhat run scripts/deploy_classtoken.ts --network localhost
//ClassToken deployed to: 0x5FbDB2315678afecb367f032d93F642f64180aa3

If you run the script again, you will find the smart contract is deployed to a new address:

yarn hardhat run scripts/deploy_classtoken.ts --network localhost
//ClassToken deployed to: 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512

We will use the smart contract instance at: 0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512

Task 3: Interact with smart contract from console

Task 3.1 Get smart contract instance

Run console connecting to stand-alone local testnet:

yarn hardhat console --network localhost

Get Smart contract:

const address = '0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512';
const token = await ethers.getContractAt("ClassToken", address);

Task 3.2 Read properties of the smart contract

Docs can be found at: https://docs.ethers.io/v5/api/contract/contract/#Contract--properties

token.interaface
token.provider
token.signer

token.signer.address
//'0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266'

Task 3.3 Get data from smart contract

parseEther =ethers.utils.parseEther
formatEther = ethers.utils.formatEther
await token.totalSupply().then((r)=>console.log(formatEther(r)))
//10000.0

await token.symbol()
//CLT
await token.name()
//ClassToken

Task 3.4 Token balance of deployer

deployer='0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266'
await token.balanceOf(deployer).then((r)=>console.log(formatEther(r)))
//10000.0

Task 3.5 Transfer Token from deployer to other

We will transfer CLS token by calling transfer() of ERC20 standard. You can also send ERC20 token using MeteMask in two steps: 1) add token using token address(contract address), 2) send some amount of it to other's address.

to_address='0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1'
await token.transfer(to_address,parseEther('1000'))

await token.balanceOf(to_address).then((r)=>console.log(formatEther(r)))
//1000.0

Now, only user with the correct private key of the address can use this token in address 0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1.

Task 4: Connect wallet and transfer token

Note: you can refer to the second part of this tutorial "Understanding Blockchain with ethers.js: 4 Tasks of wallet" to know more about wallet usage.

Task 4.1 Create wallet

//account not in hardhat default
privateKey='0x4f3edf983ac636a65a842ce7c78d9aa706d3b113bce9c46f30d7d21715b23b1d'
wallet = new ethers.Wallet(privateKey)

wallet.address
//'0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1'

Task 4.2 Send ethers from account 0 for gas fee usage

If adress 0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1 has no test ETH, it will not have the ability to send transactions.

Do remember to send some ETH to this address for gas usage. If it has test ETH, you can skip this step Task 4.2.

signer = await ethers.provider.getSigner()
send_address = await signer.getAddress()

to_address = wallet.address
nonce = await signer.getTransactionCount()
gas_price = await signer.getGasPrice()
gas_limit = ethers.utils.hexlify(21000)
value = ethers.utils.parseUnits('1.0')

tx = {
  from: send_address,
  to: to_address,
  value: value,
  nonce: nonce,
  gasLimit: gas_limit,
  gasPrice: gas_price,
}

await signer.sendTransaction(tx)
await ethers.provider.getBalance(wallet.address).then(result=>ethers.utils.formatEther(result))
//'1.0'

Task 4.4 Connect wallet to provider

Connect wallet to provider

walletsigner = wallet.connect(ethers.provider)
walletsigner.address
//still be the one

Task 4.5 Set walletsigner as signer of ClassToken

newtokeninstance = await token.connect(walletsigner)
newtokeninstance.signer.address
//'0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1'

Task 4.6 send ClassToken from this address

deployer='0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266'
await newtokeninstance.transfer(deployer,parseEther('66'))

Do read the returned receipt of this contract method call.

Let's check whether we get the correct result:

await token.balanceOf(deployer).then((r)=>console.log(formatEther(r)))
//9066.0
await token.balanceOf(to_address).then((r)=>console.log(formatEther(r)))
//934.0

After going through 12 tasks in this tutorial, you can begin to use Ethers.js in Web3 development. Ethers.js, as well as web3.js, is very important as it stands at the overlapped space between blockchain and web App.

If you find this note useful, please follow my twitter @fjun99.

02 Understanding Blockchain with `Ethers.js`: 4 Tasks of wallet

fangjun — Mon, 31 Jan 2022 16:27:00 +0000

Ethers.js provides functions to deal with Ethereum blockchain wallet. You can find Ethers.js documents about Wallet here.

Get a better understanding with the following tasks:

Task 1: Create wallet from mnemonic and privateKey

Task 1.1 Create wallet from mnemonic

mnemonic='myth like bonus scare over problem client lizard pioneer submit female collect'

//check whether it is valid mnemonic
ethers.utils.isValidMnemonic(mnemonic)

wallet = ethers.Wallet.fromMnemonic(mnemonic)

Note: You should never write your mnemonic and privateKey in your script like this, it's dangerous.

The mnemonic and privateKey used here are the default ones used in Ganache-cli and are public.

Task 1.2 Address, Public key and Private key

wallet.address
//'0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1'

wallet.privateKey
'0x4f3edf983ac636a65a842ce7c78d9aa706d3b113bce9c46f30d7d21715b23b1d'

wallet.publicKey
'0x04e68acfc0253a10620dff706b0a1b1f1f5833ea3beb3bde2250d5f271f3563606672ebc45e0b7ea2e816ecb70ca03137b1c9476eec63d4632e990020b7b6fba39'

This is the address with path "m/44'/60'/0'/0/0".

We can also get mnemonic of wallet if it is created from mnemonic.

wallet.mnemonic
{
  phrase: 'myth like bonus scare over problem client lizard pioneer submit female collect',
  path: "m/44'/60'/0'/0/0",
  locale: 'en'
}

Task 1.3 Create wallet from privateKey

We can also create wallet from privateKey. Wallet created in this way has no mnemonic property.

privateKey='0x4f3edf983ac636a65a842ce7c78d9aa706d3b113bce9c46f30d7d21715b23b1d'
wallet = new ethers.Wallet(privateKey)

wallet.address
//'0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1'
wallet.mnemonic
//null

Task 2: create 20 addresses with mnemonic

We will use Ethers.js utility for HD Wallet (HDNode) to do this.

Task 2.1 Create HDNode instance from mnemonic

mnemonic='myth like bonus scare over problem client lizard pioneer submit female collect'

hdnode = ethers.utils.HDNode.fromMnemonic(mnemonic)

Task 2.2 Get 20 addresses

basepathstr = "m/44'/60'/0'/0/"
for(i=0;i<20;i++){console.log(hdnode.derivePath(basepathstr+i.toString()).address)}

result:

0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1
0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0
0x22d491Bde2303f2f43325b2108D26f1eAbA1e32b
......

The first is with path: "m/44'/60'/0'/0/0"
The second is with path: "m/44'/60'/0'/0/1"
The third is with path: "m/44'/60'/0'/0/2"

Task 2.3 Get address with path

We can also get wallet address with path.

mnemonic='myth like bonus scare over problem client lizard pioneer submit female collect'

wallet = ethers.Wallet.fromMnemonic(mnemonic,"m/44'/60'/0'/0/1")
wallet.address
//'0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0'

Task 3: Sign message with wallet

Task 3.1: Prepare wallet as a signer

mnemonic='myth like bonus scare over problem client lizard pioneer submit female collect'
wallet = ethers.Wallet.fromMnemonic(mnemonic,"m/44'/60'/0'/0/1")

Task 3.2: sign message

message = "solidity-class"
sig = await wallet.signMessage(message)
//'0x8637dce5aeb0b9bd9ee8ce909252806ede88eebc3789436f8f569dd1e45f3f2b47e6633d4119c26917e4b2e08c422028df2209a8ca401f77d4aab9f24b6a40831b'

The signature is result to signing: "\x19Ethereum Signed Message:\n" + message.length + message. Ethers.js docs explains:

A signed message is prefixed with "\x19Ethereum Signed Message:\n" and the length of the message, using the hashMessage method, so that it is EIP-191 compliant. If recovering the address in Solidity, this prefix will be required to create a matching hash.

Task 3.3: verify message

ethers.utils.verifyMessage(message,sig)
//'0xFFcf8FDEE72ac11b5c542428B35EEF5769C409f0'

Task 3.4: sign message hash

We can hash the message by ourselves and sign messagehash instead. We got the same signature.

messageHash=  ethers.utils.hashMessage(message)
sig = await wallet.signMessage(messageHash)
//'0xfc40fcec036bd4501ce3bfaf991d561553db6d3601702f8abed9f733eab31a5246163711f71ad48b002ddf83c7cd93656047759ab8e2ff4420c59d5845680ca11b'

Task 3.5 Understanding signature

Get the r,s,v of the signature which is r+s+v.

const r = sig.slice(0, 66);
const s = '0x' + sig.slice(66, 130);
const v = '0x' + sig.slice(130, 132);

Task 4: Send transaction from wallet

Task 4.1 Create wallet

// get wallet account not in hardhat default
privateKey='0x4f3edf983ac636a65a842ce7c78d9aa706d3b113bce9c46f30d7d21715b23b1d'
wallet = new ethers.Wallet(privateKey)

wallet.address
//'0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1'

wallet.provider
//null

Task 4.2 send ethers from account 0 to test account

You can send Test Ethers to test wallet address for gas fee usage using MetaMask.

Or you can do it in the console as we do in previous part of this tutorial:

signer = await ethers.provider.getSigner()
send_address = await signer.getAddress()

to_address = wallet.address
nonce = await signer.getTransactionCount()
gas_price = await signer.getGasPrice()
gas_limit = ethers.utils.hexlify(21000)
value = ethers.utils.parseUnits('100.0')

tx = {
  from: send_address,
  to: to_address,
  value: value,
  nonce: nonce,
  gasLimit: gas_limit,
  gasPrice: gas_price,
}

await signer.sendTransaction(tx)

await ethers.provider.getBalance(wallet.address).then(result=>ethers.utils.formatEther(result))
//'100.0'

Task 4.3 Try to send from wallet wrongly

Let us try to call sendTransaction from signer which is different with the send_address.

send_address = wallet.address

to_address = await signer.getAddress()
nonce = await signer.getTransactionCount()
gas_price = await signer.getGasPrice()
gas_limit = ethers.utils.hexlify(21000)
value = ethers.utils.parseUnits('1.0')

tx = {
  from: send_address,
  to: to_address,
  value: value,
  nonce: nonce,
  gasLimit: gas_limit,
  gasPrice: gas_price,
}

await signer.sendTransaction(tx)

We got an Error: "Error: from address mismatch".

Task 4.4 Send from wallet - connect wallet to get signer

First, connect wallet to provider. The return of connect() is the wallet instance which can be a signer.

walletsigner = await wallet.connect(ethers.provider)
walletsigner.address
//'0x90F8bf6A479f320ead074411a4B0e7944Ea8c9C1'

Task 4.4 Send ETH using wallet as a signer

Second, sendTransaction with walletsigner:

to_address = await signer.getAddress()
nonce = await walletsigner.getTransactionCount()
gas_price = await signer.getGasPrice()
gas_limit = ethers.utils.hexlify(21000)
value = ethers.utils.parseUnits('1.0')

tx = {
  from: send_address,
  to: to_address,
  value: value,
  nonce: nonce,
  gasLimit: gas_limit,
  gasPrice: gas_price,
}

await walletsigner.sendTransaction(tx)

await ethers.provider.getBalance(wallet.address).then(result=>ethers.utils.formatEther(result))
//'98.999968220292873'

If you find this note useful, please follow my twitter @fjun99.

01 Understanding Blockchain with `Ethers.js`: 4 Tasks of Basics and Transfer

fangjun — Mon, 31 Jan 2022 16:23:45 +0000

As a web3 developer, you can play with Ethereum blockchain using Ethers.js to get a deeper understanding. This 3-parts tutorial lists 12 tasks for you.

Ethers.js is a Javascript API for Ethereum blockchain which can work with Mainnet, testnet such as Ropsten, Rinkeby, local testnet, Layer 2 and sidechains.

We will use Hardhat Ethereum development environment to set up a playground as it can provide all the components we need:

local testnet: Hardhat Network based on @ethereumjs/vm
interactive console: Hardhat console
solidity development tools: Hardhat
Ethers.js: Ethereum Javascript API

Hardhat brings in Ethers.js with plugin hardhat-ethers.

Ethers.js documents: https://docs.ethers.io/v5/

Task 1: Setup Ethers.js playground with Hardhat

You need to have node.js and yarn installed in your computer.

Task 1.1 Install Hardhat

Run in command line:

mkdir playeth && cd playeth
yarn add hardhat

Task 1.2 Init Hardhat project

You can init a Hardhat project by running:

yarn hardhat

Choose Option "Create an advanced sample project that uses TypeScript". A sample hardhat project will be created.

Task 1.3 Run a stand-alone local testnet

In another terminal, run a stand-alone local testnet "Hardhat Network" by running:

yarn hardhat node

More about in-process and stand-alone mode of Hardhat Network can be found here.

Task 1.4 Enter Hardhat console

Run Hardhat console connecting to blockchain testnet localhost:

yarn hardhat console --network localhost

Check Ethers.js version and get the current blocknumber in console:

ethers.version
//'ethers/5.5.3'

await ethers.provider.getBlockNumber()
//0

Now, you have an Ethers.js playground with an interactive console and a local testnet.

Task 2: Have a look at blockchain

Currently Hardhat console is connected to a local blockchain testnet at http://localhost:8545. Let's have a look at the blockchain with Ethers.js.

Ethers.js provide "Provider" and "Signer" for interaction with blockchain. Its document explains:

A Provider in ethers is a read-only abstraction to access the blockchain data.
A Signer in ethers is an abstraction of an Ethereum Account, which can be used to sign messages and transactions and send signed transactions to the Ethereum Network to execute state changing operations.

Task 2.1 check connection

We can access provider ether.provider,an Ethers.js wrapped Ethereum RPC provider.

const provider = ethers.provider
ethers.provider.connection
// { url: 'http://localhost:8545' }

Task 2.2 check network of provider

await provider.getNetwork()
//{ chainId: 31337, name: 'unknown' }

Ethereum network with chainId 31337 is local testnet at 127.0.0.1:8545.

Task 2.3 get signer

The big difference between ethers.js and web3.js is that it separate signer from provider. Provider can only read data from blockchain while signer can send transactions to change data on blockchain. Ethers.js docs explain signer:

const signer = await provider.getSigner()
//this is a JsonRpcSigner

await signer.getAddress()
//'0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266'

Task 2.4 get all the accounts with Hardhat console

Hardhat console is running with 20 test accounts.

accounts = await ethers.getSigners();
accounts.length
//20

for (const account of accounts) console.log(account.address)

Result: 
0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
0x70997970C51812dc3A010C7d01b50e0d17dc79C8
0x3C44CdDdB6a900fa2b585dd299e03d12FA4293BC
0x90F79bf6EB2c4f870365E785982E1f101E93b906
...

There is a sample hardhat plugin accounts, you can run it in command line:

yarn hardhat accounts

Task 3: Get ETH balance of an address

We can use getBalance() to get ETH balance of an address (reference link). Since we only need to read data from blockchain, we will use provider instead of signer.

Task 3.1 getBalance

firstaddress = accounts[0].address
balance = await provider.getBalance(firstaddress)
//BigNumber { value: "10000000000000000000000" }

The return result is BigNumber, which means 10000.0 ethers. Every account has 10000.0 test ethers in Hardhat local testnet.

Task 3.2 formatEther

We can use ethers.js utilities for Display Logic and Input to display it in a friendly manner.

ethers.utils.formatEther(balance)
//'10000.0'

Task 3.3 parseEther

We can also transfer from string to Bignumber easily.

ethers.utils.parseEther("0.5");
//BigNumber { value: "500000000000000000" }

Task 4: Send ETH from one address to another

Task 4.1 Send ETH using MetaMask

You can use MetaMask to transfer test ethers between accounts:

Switch network to Localhost8545 in MetaMask
Import account #0 with privateKey
Transfer 100 test ETH from Account #0 to Account #1

Accounts #0: 0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266
privateKey: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80 
Accounts #1: 0x70997970C51812dc3A010C7d01b50e0d17dc79C8

Address #00 and privateKey to add account to MetaMask. Address #1 is the receiver.

Note: Remember to change chainId from "1337" to "31337" in MetaMask network setting.

You can check the results in console:

provider = ethers.provider
acccount_1='0x70997970C51812dc3A010C7d01b50e0d17dc79C8'
await provider.getBalance(acccount_1).then((r)=>console.log(ethers.utils.formatEther(r)))
//'10100.0'

Send ETH from one address to another can be done by call sendTransaction using Ethers.js. Related Ether.js docs is here.

Detailed explanation of Transaction can be found in Andreas M. Antonopoulos's book Mastering Ethereum Chapter 6 Transactions.

Task 4.2 Prepare for sendTransaction

signer = await ethers.provider.getSigner()
send_address = await signer.getAddress()

accounts = await ethers.getSigners();
to_address = accounts[1].address

nonce = await signer.getTransactionCount()
gas_price = await signer.getGasPrice()
gas_limit = ethers.utils.hexlify(21000)

value = ethers.utils.parseUnits('100.0')

Task 4.3 Format transaction

tx = {
  from: send_address,
  to: to_address,
  value: value,
  nonce: nonce,
  gasLimit: gas_limit,
  gasPrice: gas_price,
}

Task 4.4 Call `sendTransaction`

Send transaction:

await signer.sendTransaction(tx)

Task 4.5 Check results

provider = ethers.provider
await provider.getBalance(to_address).then((r)=>console.log(ethers.utils.formatEther(r)))
//'10200.0'
await provider.getBalance(send_address).then((r)=>console.log(ethers.utils.formatEther(r)))
//'9799.999923543659375'

The balance of send_address is a little less than 9800.0 because it paid some ether as gas fee for the transactions.

When sendTransaction called, it returns receipt of the transaction executed on the blockchain.

{
  hash: '0x8915f9df88e4f2af2eefe05922e026c66723678b7df3de11e525a03c11b391a2',
  type: 0,
  accessList: null,
  blockHash: '0xfae5411b597d02b1c36a6842f14db5aad7ac2b974474f06355bd1b4eb5d438ed',
  blockNumber: 1,
  transactionIndex: 0,
  confirmations: 1,
  from: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
  gasPrice: BigNumber { value: "1875000000" },
  gasLimit: BigNumber { value: "135168" },
  to: '0x70997970C51812dc3A010C7d01b50e0d17dc79C8',
  value: BigNumber { value: "100000000000000000000" },
  nonce: 0,
  data: '0x',
  r: '0x116a4e2acba174b04a6f44248fef0170012d956d20e03d93b1b3368fce09c8e8',
  s: '0x14f1104a1fa98fed53a06a4a7a6464503d1f8a822191c022a2180e45c258809b',
  v: 62710,
  creates: null,
  chainId: 31337,
  wait: [Function (anonymous)]
}

You can also have a look at the terminal running yarn hardhat node. Transaction details are logged on the screen:

  Transaction: 0x8915f9df88e4f2af2eefe05922e026c66723678b7df3de11e525a03c11b391a2
  From:        0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266
  To:          0x70997970c51812dc3a010c7d01b50e0d17dc79c8
  Value:       100 ETH
  Gas used:    21000 of 135168
  Block #1:    0xfae5411b597d02b1c36a6842f14db5aad7ac2b974474f06355bd1b4eb5d438ed

Tutorial List:

1. A Concise Hardhat Tutorial(3 parts)

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

2. Understanding Blockchain with `ethers.js`(5 parts)

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

3. Tutorial : build your first DAPP with Remix and Etherscan (7 Tasks)

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

4. Tutorial: build DApp with Hardhat, React and ethers.js (6 Tasks)

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

5. Tutorial: build DAPP with Web3-React and SWR

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

6. Tutorial: write upgradeable smart contract (proxy) using OpenZeppelin(7 Tasks)

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

7. Tutorial: Build a NFT marketplace DApp like Opensea(5 Tasks)

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

If you find this tutorial helpful, follow me at Twitter @fjun99

How to use Web3-react to develop DApp

fangjun — Sun, 30 Jan 2022 01:32:12 +0000

Web3-react is a popular library used in blockchain, DApp and web3 development. It has more than 2800 stars and has been used by more than 10000 repo's on Github.

Note: If you have known web3-react, you can go directly to section 1 for how-to guide.

Last Updated: 2022/01/30

0. What is `web3-react`?

Before starting the journey, I will give an overview of the stack and technology we use here:

Front-end: React, Next.js, TypeScript
Blockchain API: Ethers.js
Development Environment: Hardat, MetaMask, Ethereum testnet

web3-react is a React/Ethers.js framework for building modern Ethereum DApp developed by Uniswap Engineering Lead Noah Zinsmeister. It works between Front-end and blockchain API.

At a high level, web3-react is a state machine which ensures that certain key pieces of data (the user's current account, for example) relevant to your dApp are kept up-to-date.

To this end, web3-react uses Context to efficiently store this data, and inject it wherever you need it in your application. (via web3-react v6 docs)

It is a react library and the underlying blockchain API is Ethers.js. The stable version is v6, and currently v8 is in beta. You can find web3-react repo at: https://github.com/NoahZinsmeister/web3-react

As it is widely used, I am surprised to find that there are very few documents. So far, I can only refer to 4 documents:

source code of web3-react (v6 and v8 beta)
example in the package (v6 and v8 beta)
documents for web3-react v6
a tutorial on Consensys blog by Lorenzo Sicilia

There are some main changes from v6 to v8 beta. Widely used hooks useWeb3React is tagged with a comment "for backwards compatibility only".(Gerhard Steenkamp and William Schwab in community wrote a good docs for web3-react)

I can foresee that v8 of web3-react will be widely used as it can meet the increasing demand of web3. I wrote down this tutorial to help developers to use it, both for v6 and v8(beta).

Useful links: Source code and documents for web3-react v6:

source code https://github.com/NoahZinsmeister/web3-react/tree/v6
documents https://github.com/NoahZinsmeister/web3-react/tree/v6/docs

Lorenzo's Web3-React Tutorial is a great help for this how-to guide, and I copied the sample code from it. Great thanks. The tutorial is great as it illustrates the strategy to sync data between blockchain and DApp:

"SWR and Ether.js are two nice libraries to work with if you want to streamline your data fetching strategy with Ethereum dapp."

There are several libraries, and comparisons of some of them can be found at WAGMI docs.

Web3-react
WAGMI
useDApp
web3modal
Web3-UI
Web3UI
Scaffold-eth / eth-components / eth-hooks

1. Set up playground: create a Next.js project

First, we start a Next.js project to write DAPP using web3-react. Then, we add dependencies. Follow these 6 steps:

1.1 Create a project:



yarn create next-app playeth --typescript
cd playeth

1.2 Use `src` as our source code directory:



mkdir src
mv pages src/pages
mv styles src/styles

Edit tsconfig.json, add:



    "baseUrl": "./src",

1.3 Clear `index.tsx`:

Make index.tsx simple.



import type { NextPage } from 'next'
import styles from '../styles/Home.module.css'

const Home: NextPage = () => {
  return (
    <div>
      <main className={styles.main}>
        <h2>
          Welcome to playground
        </h2>
      </main>
    </div>
  )
}
export default Home

1.4 Run project and view it at: http://localhost:3000/



yarn dev

1.5 Add dependencies

We will use Ethers.js, web3-react and etc here.



yarn add ethers
yarn add  @web3-react/core  @web3-react/injected-connector

web3-react installed is stable version 6.x.x.

If you would like to add only Ethers.js component used, you can replace the first command to: yarn add @ethersproject/providers

2. Connect to blockchain using Web3-react, ethers and MetaMask

The main difference between DApp (web3 app) and traditional web app is that DApp connects to blockchain instead of a centralized server for 1) user login and authorization, 2) data about data and 3) functionality such as DeFi, NFT, Game, DAO governance.

When DApps are used in desktop browsers, they are made possible with three things:

MaskMask wallet on the user side
Ethers.js between browser/server and blockchain endpoint
React and Web3-react on the server/browser

Let's start to make a DApp with web3-react. We will use its two parts:

Web3ReactProvider, context
useWeb3React, hooks

Please note that there is a big upgrade from v6 to v8. useWeb3React is tagged with comment "for backwards compatibility only".

2.1 Add Provider in `_app.tsx`

Add context provider <Web3ReactProvider> in _app.tsx:



import '../styles/globals.css'
import type { AppProps } from 'next/app'

import { Web3ReactProvider } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'

function getLibrary(provider: any): Web3Provider {
  const library = new Web3Provider(provider)
  library.pollingInterval = 12000
  return library
}

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Web3ReactProvider getLibrary={getLibrary}>
      <Component {...pageProps} />
    </Web3ReactProvider>
  )
}

export default MyApp

2.2 Edit `index.tsx`

Use useWeb3React to connect to blockchain using an injected provider by MetaMask. You can call it directly through windows.ethereum. MetaMask Ethereum Provider API docs is here.

You need to have MetaMask extension installed in your Chrome browser.

Edit index.tsx to provide a button to connect blockchain using MetaMask wallet and its blockchain provider injected to browser.



import type { NextPage } from 'next'
import styles from '../styles/Home.module.css'
import { useEffect } from 'react'

import { useWeb3React } from '@web3-react/core'
import { Web3Provider } from '@ethersproject/providers'
import { InjectedConnector } from '@web3-react/injected-connector'

const ConnectWallet = () => {
  const injectedConnector = new InjectedConnector({supportedChainIds: [1,3, 4, 5, 42, ],})
  const { chainId, account, activate, active,library } = useWeb3React<Web3Provider>()
  const onClick = () => {
    activate(injectedConnector)
  }

  useEffect(() => {
    console.log(chainId, account, active)
    },);

  return (
    <div>
      <div>ChainId: {chainId}</div>
      <div>Account: {account}</div>
      {active ? (
        <div>✅ </div>
      ) : (
        <button type="button" onClick={onClick}>
          Connect Connect
        </button>
      )}
    </div>
  )
}

const Home: NextPage = () => {
  return (
    <div >
      <main className={styles.main}>
        <h2 >Welcome to playground</h2>
        <ConnectWallet />
      </main>
    </div>
  )
}

export default Home

What do we do? We add a ConnectWallet Component for display account and connect to wallet.

Click connect Wallet button, activate(injectedConnector) of useWeb3React hook is called.
When connected, display chainId and account.

Run yarn dev, we can play with this simple DApp at: http://localhost:3000/

Note: If you want to truly disconnect your wallet from this page, disconnect from MetaMask.

3. Get data from Ethereum Mainnet: Read Blockchain

In Section 2, we have established an environment to interact with blockchain. In this section, we will try to get data from Ethereum Mainnet.

3.1 Query data and display using useState and useEffect

Make some changes in index.tsx, please note this is a quick and dirty code snippet just for illustration.



  const [balance,setBalance]= useState("")
...
  useEffect(() => {
    library?.getBalance(account).then((result)=>{
      setBalance(result/1e18)
    })
    },);
...
      <div>Balance: {balance}</div>

3.2 Query data using SWR

SWR (https://swr.now.sh/) means Stale-While-Revalidate. Lorenzo's Web3-React Tutorial suggests using this strategy. A quote about SWR:

SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

After install swr, edit index.tsx



import useSWR from 'swr'
...
    const fetcher = (library) => (...args) => {
      const [method, ...params] = args
      console.log("fetcher",method, params)
      const result = library[method](...params)
     return library[method](...params)
    }

    const BalanceSWR  = () => {
      const { account, library } = useWeb3React<Web3Provider>()
      const { data: balance } = useSWR(['getBalance', account, 'latest'], {
        fetcher: fetcher(library),
      })
      console.log(balance)
      if(!balance) {
        return <div>...</div>
      }
      return <div>Balance: Ξ {balance/1e18}</div>
    }  
...
      {active && <BalanceSWR />}

Lorenzo's Web3-React Tutorial explains:

As you can see, it is a partially applied function. In that way, I can inject the library (my Web3Provider) when I configure the fetcher. Later, every time a key changes, the function can be resolved by returning the required promise.

3.3 Update data in real-time

The pro of using SWR is that it can update data in real-time.

We will follow Lorenzo's Web3-React tutorial to do this.

The feature used is SWR's mutate function.

Listen to Ethereum block number change: ethers.provider.on()
Use SWR mutate to trigger refresh

Edit BalanceSWR component in index.tsx:



      const { account, library } = useWeb3React<Web3Provider>()
      const { data: balance,mutate } = useSWR(['getBalance', account, 'latest'], {
        fetcher: fetcher(library),
      })

      useEffect(() => {
        // listen for changes on an Ethereum address
        console.log(`listening for blocks...`)
        library.on('block', () => {
          console.log('update balance...')
          mutate(undefined, true)
        })
        // remove listener when the component is unmounted
        return () => {
          library.removeAllListeners('block')
        }
        // trigger the effect only on component mount
      }, [])

Lorenzo's tutorial has more on interacting with smart contract and listening to smart contract events. You can continue to read it and do experiments: https://consensys.net/blog/developers/how-to-fetch-and-update-data-from-ethereum-with-react-and-swr/

We will go to Web3-react version 8 to see what has been changed.

4. Dive into Web3-react Version 8

There is an example to demostrate how to use it. We will take some code snippets from it directly. You can find the example at packages/example/

STEP 1 Create an example project

Create a next.js project just like we did in section 1.

Edit package.json to add dependencies:



    "@ethersproject/bignumber": "^5.4.2",
    "@ethersproject/experimental": "^5.5.0",
    "@ethersproject/providers": "^5.5.1",
    "@ethersproject/units": "^5.4.0",
    "@walletconnect/ethereum-provider": "^1.7.1",
    "@web3-react/core": "8.0.6-beta.0",
    "@web3-react/eip1193": "8.0.2-beta.0",
    "@web3-react/empty": "8.0.2-beta.0",
    "@web3-react/metamask": "8.0.3-beta.0",
    "@web3-react/network": "8.0.2-beta.0",
    "@web3-react/types": "8.0.2-beta.0",
    "@web3-react/url": "8.0.2-beta.0",
    "@web3-react/walletconnect": "8.0.4-beta.0",
    "@web3-react/walletlink": "8.0.4-beta.0",

Run command to install dependencies:



yarn install

STEP 2: AccountsComponent

Create components/AccountsComponent.tsx based on: https://github.com/NoahZinsmeister/web3-react/blob/main/packages/example/components/Accounts.tsx



import type { BigNumber } from '@ethersproject/bignumber'
import { formatEther } from '@ethersproject/units'
import type { Web3ReactHooks } from '@web3-react/core'
import { useEffect, useState } from 'react'

function useBalances(
  provider?: ReturnType<Web3ReactHooks['useProvider']>,
  accounts?: string[]
): BigNumber[] | undefined {
  const [balances, setBalances] = useState<BigNumber[] | undefined>()

  useEffect(() => {
    if (provider && accounts?.length) {
      let stale = false

      void Promise.all(accounts.map((account) => provider.getBalance(account))).then((balances) => {
        if (!stale) {
          setBalances(balances)
        }
      })

      return () => {
        stale = true
        setBalances(undefined)
      }
    }
  }, [provider, accounts])

  return balances
}

export function AccountsComponent({
  accounts,
  provider,
  ENSNames,
}: {
  accounts: ReturnType<Web3ReactHooks['useAccounts']>
  provider: ReturnType<Web3ReactHooks['useProvider']>
  ENSNames: ReturnType<Web3ReactHooks['useENSNames']>
}) {
  const balances = useBalances(provider, accounts)

  if (accounts === undefined) return null

  return (
    <div>
      Accounts:{' '}
      <b>
        {accounts.length === 0
          ? 'None'
          : accounts?.map((account, i) => (
              <ul key={account} style={{ margin: 0, overflow: 'hidden', textOverflow: 'ellipsis' }}>
                <li>{ENSNames?.[i] ?? account}</li>
                <li>{balances?.[i] ? ` (Ξ${formatEther(balances[i])})` : null}</li>
              </ul>
            ))}
      </b>
    </div>
  )
}

Some explanations:

A component to display ENS/Address and ether balance of the account
Using getBalance function of web3 provider to query ether balance

STEP 3: MetaMaskCard

Create components/MetaMaskCard.tsx. MetaMaskCard is based on: MetaMaskCard, Connect, Status component in https://github.com/NoahZinsmeister/web3-react/tree/main/packages/example/components



import type { Web3ReactHooks } from '@web3-react/core'
import { AccountsComponent } from './AccountsComponent'
import { initializeConnector } from '@web3-react/core'
import { MetaMask } from '@web3-react/metamask'

const [metaMask, hooks] = initializeConnector<MetaMask>((actions) => new MetaMask(actions))
const {  useChainId, useAccounts, useError, useIsActivating, useIsActive, useProvider, useENSNames } = hooks

function Connect({
  isActivating,
  error,
  isActive,
}: {
  chainId: ReturnType<Web3ReactHooks['useChainId']>
  isActivating: ReturnType<Web3ReactHooks['useIsActivating']>
  error: ReturnType<Web3ReactHooks['useError']>
  isActive: ReturnType<Web3ReactHooks['useIsActive']>
}) {

  if (error) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <button
          onClick={() => metaMask.activate()}
        >
          Try Again?
        </button>
      </div>
    )
  } else if (isActive) {
    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <button onClick={() => metaMask.deactivate()}>Disconnect</button>
      </div>
    )
  } else {
    return (
      <div style={{ display: 'flex', flexDirection: 'column' }}>
        <button
          onClick={
            isActivating
              ? undefined
              : () => metaMask.activate()
          }
          disabled={isActivating}
        >
          Connect
        </button>
      </div>
    )
  }
}

function Status({
  isActivating,
  error,
  isActive,
}: {
  isActivating: ReturnType<Web3ReactHooks['useIsActivating']>
  error: ReturnType<Web3ReactHooks['useError']>
  isActive: ReturnType<Web3ReactHooks['useIsActive']>
}) {
  return (
    <div>
      {error ? (
        <>
          🔴 {error.name ?? 'Error'}
          {error.message ? `: ${error.message}` : null}
        </>
      ) : isActivating ? (
        <>🟡 Connecting</>
      ) : isActive ? (
        <>🟢 Connected</>
      ) : (
        <>⚪️ Disconnected</>
      )}
    </div>
  )
}

export default function MetaMaskCard() {
  const chainId = useChainId()
  const accounts = useAccounts()
  const error = useError()
  const isActivating = useIsActivating()

  const isActive = useIsActive()

  const provider = useProvider()
  const ENSNames = useENSNames(provider)

  return (
      <div style={{border: '1px solid'}}>
        <b>MetaMask</b>
        <Status isActivating={isActivating} error={error} isActive={isActive} />
        <AccountsComponent accounts={accounts} provider={provider} ENSNames={ENSNames} />
        <Connect chainId={chainId} isActivating={isActivating} error={error} isActive={isActive} />
      </div>

  )
}

Some explanations:

Three components: MetaMaskCard, Connect, Status
Connect component provide a button user can click to connect MetaMask wallet by calling metaMask.activate()
Status Component display status according to isActivating and isActive

We get all the needed hooks here:



const [metaMask, hooks] = initializeConnector<MetaMask>((actions) => new MetaMask(actions))
const {  useChainId, useAccounts, useError, useIsActivating, useIsActive, useProvider, useENSNames } = hooks

STEP 4: `index.tsx`

Using Next.js dynamic import to import MetaMaskCard.



import type { NextPage } from 'next'
import styles from 'styles/Home.module.css'

import dynamic from 'next/dynamic'

const MetaMaskCard = dynamic(() => import('../components/MetaMaskCard'), { ssr: false })

const Home: NextPage = () => {
  return (
    <div>
      <main  className={styles.main}>
        <h2>
          Welcome to playground
        </h2>
        <MetaMaskCard />
      </main>
    </div>
  )
}
export default Home

Run command yarn dev and visit the sample app at: localhost:3000

In sum, web3-react provides a handy tool with context and hooks between react and ethers. Enjoy it.

A beginner’s guide: 4 ways to play with `Ethers.js`

fangjun — Thu, 27 Jan 2022 17:22:37 +0000

Four quick notes on how to set up a playround for Ethers.js. These are how-to guides that even first time web3 developers with front-end experience can go through in less than an hour.web3.js is almost the same.

Ethers.js / web3.js is "Ethereum JavaScript API":

a collection of libraries that allow you to interact with a local or remote ethereum node using HTTP, IPC or WebSocket.(via web3.js docs)

To play with Ethers.js, there are tools needed:

Console: Node console, Truffle console, Hardhat console
Front-end framework: React / Next.js / Web3-React
Blockchain Providers: Infura, Alchemy, Metamask Provider
Wallet: MetaMask(browser extension wallet)

The relationship between Ethers.js and blockchain is:

Ethers.js Javascript API
(Provider + RPC Endpoint)
Blockchain network

"Provider" explained in Ethers.js docs:

A Provider is an abstraction of a connection to the Ethereum network, providing a concise, consistent interface to standard Ethereum node functionality.

To play with ethereum blockchain with the help of Ethers.js, we need to do it this way:

get Ethers.js instance
connect to provider
play with it

You can find Ethers.js API docs at: https://docs.ethers.io/v5/api/

1. Interactive console - Node console

If you would like to use Node console, run:

mkdir playeth && cd playeth
yarn add ethers

Open Node console by running node.

We will use Alchemy Provider: https://docs.ethers.io/v5/api/providers/api-providers/#AlchemyProvider

//node console
var ethers = require('ethers')
//using AlchemyProvider with shared project ID
const provider =new ethers.providers.AlchemyProvider()

//get current block number
await provider.getBlockNumber()

provider.network
//{
//  name: 'homestead',
//  chainId: 1,
//...
//}

// Get the balance of an account
balance = await provider.getBalance("ethers.eth")
ethers.utils.formatUnits(balance)

2. Interactive console - Hardhat console

As web3 developers write smart contracts and DAPPs, we interact with blockchain using Hardhat or Truffle console. Hardhat and Truffle Suite both provide a development environment.

In hardhat console environment, there is an ether.js instance.

Install hardhat and create a project:

mkdir hheth && cd hheth
yarn hardhat

Select option "Create an advanced sample project that uses TypeScript".

Add mainnet in hardhat.config.ts :

    mainnet: {
      url: process.env.ALCHEMY_URL || "",
    },

Enter hardhat console by running:

yarn hardhat console --network mainnet

In hardhat console, interact with ethereum mainnet with Ethers.js:

ethers.version
//'ethers/5.5.3'

const provider = new ethers.providers.AlchemyProvider()
await provider.getBlockNumber()

3. Write script using `Ethers.js`

Add file playeth.ts and run from command line.

touch playeth.ts

playeth.ts:

async function main(){

const ethers =require("ethers")
const provider = new ethers.providers.AlchemyProvider()

const blocknumber  =await provider.getBlockNumber()
console.log("blocknumber", blocknumber)

const balance = await provider.getBalance("ethers.eth")
console.log("balance of ethers.eth",ethers.utils.formatEther(balance))
}

main()

Run playeth.ts script:

node playeth.ts
//blocknumber 14088543
//balance of ethers.eth 0.082826475815887608

4. Simple DAPP: Using Ethers.js with Metamask

Ethers.js docs provides a good explanation of MetaMask:

MetaMask, which is a browser extension that provides:

A connection to the Ethereum network (a Provider)

Holds your private key and can sign things (a Signer)

STEP 1: Init Next.js project

We will using Next.js framework to start a sample project.

yarn create next-app playeth --typescript
cd playeth
yarn dev

You can visit this project at: http://localhost:3000/

STEP 2: Install ethers

yarn add ethers

STEP 3: Write a page

Change index.tsx to:

import type { NextPage } from 'next'
import styles from '../styles/Home.module.css'
import { ethers } from "ethers";
import { useEffect,useState } from 'react';

declare let window: any;
const Home: NextPage = () => {
  const [balance, setBalance] = useState<String | undefined>()
  const [address, setAddress] = useState<String | undefined>()

  useEffect(() => {
    //client side code
    if(!window.ethereum) return

    const provider = new ethers.providers.Web3Provider(window.ethereum)
    provider.getBalance("ethers.eth").then((result)=>{
      setBalance(ethers.utils.formatEther(result))
    })
  })

  function connect(){
    //client side code
    if(!window.ethereum) return

    const provider = new ethers.providers.Web3Provider(window.ethereum)
    window.ethereum.enable().then(()=>{
      const signer = provider.getSigner()
      signer.getAddress().then((result)=>{setAddress(result)})
    })
  }

  return (
    <div>
      <main className={styles.main}>
        <h1>Sample DAPP</h1>
        <h3>Eth balance: {balance}</h3>
        <p><button onClick={connect} >Connect</button></p>
        <h3>Address: {address}</h3>
      </main>

    </div>
  )
}

export default Home

Run yarn dev and in your browser go to: http://localhost:3000/

What does this page do?

This page gets Ethereum provider instance injected by MetaMask by const provider = new ethers.providers.Web3Provider(window.ethereum)
This page will get balance of ethers.eth(address: https://etherscan.io/address/0x643aa0a61eadcc9cc202d1915d942d35d005400c) and show it on the page.
When Connect button is clicked, the page call window.ethereum.enable() to ask MetaMask to enable connect. User needs to authorize connecting in Metamask popup dialog.
When connected, the page gets MetaMask address and displays it.

If this page has been connected to MetaMask, connecting will be done automatically without a popup. You can disconnect it from MetaMask and try clicking Connect button again.

Please note that the above code snippet is just to illustrate the basic flow of using Ethers.js and MetaMask together.

If you would like to know more about MetaMask and its injected ethereum provider, you can refer to MetaMask docs:

MetaMask injects a global API into websites visited by its users at window.ethereum. This API allows websites to request users' Ethereum accounts, read data from blockchains the user is connected to, and suggest that the user sign messages and transactions.

Tutorial List:

1. A Concise Hardhat Tutorial(3 parts)

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

2. Understanding Blockchain with `Ethers.js`(5 parts)

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

3. Tutorial : build your first DAPP with Remix and Etherscan (7 Tasks)

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

4. Tutorial: build DApp with Hardhat, React and Ethers.js (6 Tasks)

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

5. Tutorial: build DAPP with Web3-React and SWR

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

6. Tutorial: write upgradeable smart contract (proxy) using OpenZeppelin(7 Tasks)

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

7. Tutorial: Build a NFT marketplace DApp like Opensea(5 Tasks)

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

If you find this tutorial helpful, follow me at Twitter @fjun99

How to use Proof-of-Competence Web3 on-boarding framework

fangjun — Sat, 22 Jan 2022 15:16:41 +0000

Web3 is open, and one's footprints can be verified on-chain. Proof-of-Competence web3 front-end framework (https://github.com/wslyvh/proof-of-competence) provides a good start for building DAPPs to help users measure their own web3 activities.

It is developed by Wesley(@wslyvh). He explains it as follows:

Proof of Competence (PoC) is an open, modular framework to create on-chain quests and on-boarding journeys into Web3. It uses a pluggable task system which can verify that on-chain actions have occurred. This allows to build up reputation or social (DAO) scores that proof an address is familiar with the specified technologies or protocols.

You can find Proof of Competence front-end framework at: https://www.poc.quest

This is an 8-part how-to guide for developers to use PoC framework:

Installation and explanation
Add your own PoC journey
Write your verifier using Ethers.js

1. How it works

Users can connect wallet via MetaMask or WalletConnect to Proof-of-Competence(PoC) DAPP to track their own web3 footprint. You get a score for a specific web3 journey.

PoC is designed with three concepts:

Journey, a list of tasks for web3 users, stored in JSON format. It will give user a score according to the activities of his address.
Task, a unique task such as having Token/NFT, deployed contract and etc.
Verifier, verify a task using public information(e.g. on-chain, Subgraphs, or public blockchain explorers). To use PoC framework, we need to write verifier for our own task in the /src/verifiers.

PoC framework also provides restful API using Next.js API routers so that we can use the scores via API.

PoC API, restful API using Next.js.

PoC framework uses on-chain data through:

Infura API,
Alchemy API,
Etherscan API, etc.

It is developed with these Node.js and web3 components:

Next.js, the React framework by Vercel.
Chakra UI, modular React UI Components.
Ethers.js, library to interact with Ethereum.
Web3-react, React UI for connecting wallet.

2. How to install it locally

Download the project source code:

git clone git@github.com:wslyvh/proof-of-competence.git

There are sample journeys, tasks, and verifiers in src/. Let's install dependences:

cd proof-of-competence
npm install

Run this Next.js project locally:

npx next dev

You can view the DAPP at http://localhost:3000 in your browser. Try the journeys in it.

3. Add your own web3 journey with tasks

Let's copy src/journeys/useWeb3.json to src/journeys/basicWeb3.json and edit our journey based on it. Basic Web3 User journey has two tasks: have address, have ENS.

{
    "name": "Basic Web3 User",
    "version": 1,
    "description": "Onboarding new developers into the Web3 space",
    "website": "https://www.ethereum.org/",
    "twitter": "fjun99",
    "tasks": [{
        "name": "Have a wallet address",
        "description": "You need a wallet address to enter Web3 universe.",
        "points": 100,
        "verifier": "active-address"
    },
    {
        "name": "ENS: Ethereum Name Service",
        "description": "Register your ENS name at https://ens.domains/ with a reverse lookup.",
        "points": 100,
        "verifier": "ens-reverse-lookup"
    }]
}

You can view our journey at: http://localhost:3000/basicWeb3

There are several verifiers in this project and we use active-address, ens-reverse-lookup:

active-address
first-transaction
ens-reverse-lookup
has-poap
has-nft
deployed-contract
vote-on-snapshot

There are also several dummy verifiers to start with:

test-always-false
test-always-true
test-random-number

We can get the journey and score from restful API at:

http://localhost:3000/api/journey?name=basicWeb3

http://localhost:3000/api/journey/score?journey=basicweb3&address=0x00

Note : You can also deploy this project online using GitHub & Vercel. Vercel's tutorial: https://nextjs.org/learn/basics/deploying-nextjs-app.

We will continue to develop our own task and verifier locally.

4. Some preparations for development

4.1 Add `.env.local`

We will use Next.js environment variables to store Infura, Alechemy and Etherscan API ID/keys. Variables with prefix NEXT_PUBLIC_ can be accessed from the browser. More details about Next.js environment variables at: https://nextjs.org/docs/basic-features/environment-variables

Add file .env.local. This file should be added to .gitignore if you opensource your project.

//.env.local
NEXT_PUBLIC_ALCHEMY_API_URL=https://eth-mainnet.g.alchemy.com/v2/
NEXT_PUBLIC_ALCHEMY_API_KEY=7C...
NEXT_PUBLIC_INFURA_API_ID=d7...
NEXT_PUBLIC_ETHERSCAN_API_KEY=ab...

Please remember to stop and run again after you change the environmental variables.

4.2 Notes on Alchemy API

We will use Alchemy API to interact with Ethereum mainnet. Documents can be found at: https://docs.alchemy.com/alchemy/

Token API

We will call alchemy_getTokenBalances to get ERC20 token balance.

Reference: https://docs.alchemy.com/alchemy/enhanced-apis/token-api#alchemy_gettokenbalances

Chain API / Ethereum API

We will call eth_getBalance to get Ether balance of an address.

Reference: https://docs.alchemy.com/alchemy/apis/ethereum/eth_getbalance

Using Ethereum API, we can interact with the Ethereum RPC directly.

Another Option is to interact with Ethereum RPC using Ethers.js through Alchemy endpoint. We will use this option to check if a user owns a specific NFT later.

NFT API

In the sample NFT verifier in the project, it calls Alchemy NFT API getNFTs to get information about the NFTs of an address.

Two notes you may need to know:

First, NFT API is in the V1 of Alchemy API. We need to change the endpoint from V2 to V1: https://eth-mainnet.g.alchemy.com/your-api-key/v2 should be https://eth-mainnet.g.alchemy.com/your-api-key/v1.

Second, NFT API need to apply manually, otherwise your call will return:

"Eth NFT API v1 not enabled on this account - please visit https://alchemyapi.typeform.com/nft-api-access to request access!"

I applied using this form. But I haven't received permission yet. So we will interact directly with an ERC721 contract using Ethers.js in section 7.

5. Add a verifier to measure ETH of your address

Step 1: add verifier

Add a verifier called has-ETH-mainnet. Let's begin with copy test-always true directory and change the directory name to has-ETH. The index.ts in this directory looks like:

import { Task } from "types"

export async function verify(task: Task, address: string): Promise<boolean | number>
{
    return true
}

Step 2: add task to the journey

In src/journeys/basicWeb3.json, add a task:

    {
        "name": "has ETH",
        "description": "Own 0.1+ ETH.",
        "points": 400,
        "verifier": "has-ETH-mainnet",
        "params": {
          "amount":0.1
        }
    },

Explanation of this task:

Points: 400 points
Verifier: has-ETH
params: 0.1. If the user's address has more than 0.1 ETH, the user gets 400 points.

Let's go to the web page http://localhost:3000/basicWeb3, you can see that you get 400 points as the verifier always returns true now.

Step 3: program has-ETH verifier

Let's program the has-ETH verifier:

// verifiers/has-ETH/index.ts
// Reminder:add in `.env.local`: NEXT_PUBLIC_ALCHEMY_API_URL, NEXT_PUBLIC_ALCHEMY_API_KEY

import { Task } from "types"

export async function verify(task: Task, address: string): Promise<boolean | number>
{
    if (!address) return false

    try { 
        const amount = task.params['amount']
        const url=`${process.env.NEXT_PUBLIC_ALCHEMY_API_URL}${process.env.NEXT_PUBLIC_ALCHEMY_API_KEY}`  
        const body={
            "jsonrpc":"2.0",
            "method":"eth_getBalance",
            "params":[address,"latest"],
            "id":0
        }

        const response = await fetch(url,{
            method: 'POST', 
            body: JSON.stringify(body) 
          })
        const data = await response.json()
        if(data.error) return false
        if(data.result/1e18 > amount) return true

        return false
    }
    catch(e) {
        return false
    }
}

We call eth_getBalance using Alchemy Ethereum API. If result > amount, the verifier returns true.

In my test address, there is about 0.15 ETH in it. The task is passed and I get 400 points.

Let's change the amount in the journey to 0.2 ETH. The task is failed and I don't get 400 points.

TODO NOTE: We program this example quickly and we should consider modifying this verifier so that it can be used in testnet (Ropsten), sidechain (Polygon), L2 (Arbitrum/Optimism) and other EVM.

6. Add a verifier to measure ERC20 token

In this section, you will add a verifier has-token-ERC20 to measure ERC20 token in your address.

Add directory has-token-ERC20 and then edit index.ts:

// verifiers/has-token-ERC20/index.ts
// Reminder:add in `.env.local`: NEXT_PUBLIC_ALCHEMY_API_URL, NEXT_PUBLIC_ALCHEMY_API_KEY

import { Task } from "types"

export async function verify(task: Task, address: string): Promise<boolean | number>
{
    if (!address) return false

    try { 
        const contractAddress = task.params['addressERC20']
        const amount = task.params['amount']
        const url=`${process.env.NEXT_PUBLIC_ALCHEMY_API_URL}${process.env.NEXT_PUBLIC_ALCHEMY_API_KEY}`  
        const body={
            "jsonrpc":"2.0",
            "method":"alchemy_getTokenBalances",
            "params":[address,[contractAddress]],
            "id":42
        }

        const response = await fetch(url,{
            method: 'POST', 
            body: JSON.stringify(body) 
          })

        const data = await response.json()
        if(!Array.isArray(data.result.tokenBalances) ) return false

        const balance = data.result.tokenBalances[0];
        if(balance.error) return false
        if(balance.tokenBalance/1e18 > amount) return true;

        return false
    }
    catch(e) {
        return false
    }
}

Let's add a task to measure whether the user's address has ERC20 ENS Token and the amount should be 10+:

ENS ERC20 Token contract address: 0xC18360217D8F7Ab5e7c516566761Ea12Ce7F9D72

Add a task in basicWeb3.json:

    {
        "name": "has 10+ ENS Token",
        "description": "Own 10+ ENS ERC20 Token.",
        "points": 400,
        "verifier": "has-token-ERC20",
        "params": {
          "addressERC20": "0xC18360217D8F7Ab5e7c516566761Ea12Ce7F9D72",
          "amount":10
        }
    },

As I have ENS ERC20 token in my test address, I can pass this task and get 400 points.

7. Add a verifier to measure ERC721 NFT

In this section, you will add a verifier has-nft-ERC721 to check where you have at least one specific ERC721 token in your address.

We will use Ethers.js to call an ERC721 contract function balanceOf(address) to check. Add has-nft-ERC721/index.ts:

// has-nft-ERC721/index.ts
// Reminder:add in `.env.local`: NEXT_PUBLIC_ALCHEMY_API_KEY

import { Task } from "types"
import { ethers } from "ethers"
import { AlchemyProvider } from '@ethersproject/providers'

export async function verify(task: Task, address: string): Promise<boolean | number>
{
    if (!address || !task.params) return false

    if(!task.params['tokenAddress']) return false
    const contractAddress =task.params['tokenAddress'].toString()
    if(!ethers.utils.isAddress(contractAddress)) return false

    try { 
        const provider = new AlchemyProvider(task.chainId || 1, process.env.NEXT_PUBLIC_ALCHEMY_API_KEY)
        const contract = await new ethers.Contract( contractAddress, abi, provider)
        const balanceOfNFT= await contract.balanceOf(address)
        if (balanceOfNFT > 0)  
            return true

        return false
    }
    catch(e) {
        return false
    }
}

const abi =
    [{"constant":true,
    "inputs":[{"internalType":"address","name":"owner","type":"address"}],
    "name":"balanceOf",
    "outputs":[{"internalType":"uint256","name":"","type":"uint256"}],
    "payable":false,"stateMutability":"view","type":"function"}]

Explanation of what we do in this verifier:

connect to an ERC721 contract with ethers.Contract(contractAddress, abi, provider).
call contract.balanceOf(address) to get NFT amount of user's address.
we provide ABI segment of the need contract function (balanceOf()) in const abi.

Add a task in basicWeb3.json:

    {
        "name": "Own an ERC721 NFT",
        "description": "Own an ENS NFT(ERC721).",
        "points": 400,
        "verifier": "has-nft-ERC721",
        "params": {
          "tokenAddress": "0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea85"
        }
    },

0x57f1887a8bf19b14fc0df6fd9b2acc9af147ea85 is the contract address of ENS ERC721 NFT.

8. Extend task/verifier for other chains using `chainId`

We can extend task/verifier for other chains using chainId. Let's add another task in basicWeb3.json to check whether there is a specific NFT on polygon in the user's address.

    {
        "name": "Own an ERC721 NFT on polygon",
        "description": "Own an NFT on Polygon network.",
        "points": 400,
        "verifier": "has-nft-ERC721",
        "params": {
          "tokenAddress": "0x7eb476Cd0fE5578106A01DC2f2E392895C6BC0A5"
        },
        "chainId":137
    },

Explanations of what we do:

We add 'chainId' for this task and 137 is for Polygon mainnet.
Verifier get web3 provider according to chainId in line:

const provider = new AlchemyProvider(task.chainId || 1, process.env.NEXT_PUBLIC_ALCHEMY_API_KEY)

We can also refactor the has-token-ERC20 verifier to support other chains.

We may rename it to has-token-ERC20-using-Alchemy. Then, we add a new verifier has-token-ERC20 which use Ethers.js to interact with blockchain directly.

// has-token-ERC20/index.ts
// Reminder:add in `.env.local`: NEXT_PUBLIC_ALCHEMY_API_KEY

import { Task } from "types"
import { ethers } from "ethers"
import { AlchemyProvider } from '@ethersproject/providers'

export async function verify(task: Task, address: string): Promise<boolean | number>
{
    if (!address || !task.params) return false

    if(!task.params['tokenAddress']) return false
    const contractAddress =task.params['tokenAddress'].toString()
    if(!ethers.utils.isAddress(contractAddress)) return false

    let amount:number = 0
    if('amount' in task.params) 
        amount = Number(task.params['amount'])

    try { 
        const provider = new AlchemyProvider(task.chainId || 1, process.env.NEXT_PUBLIC_ALCHEMY_API_KEY)
        const contract = await new ethers.Contract( contractAddress , abi , provider )
        const balanceOf= await contract.balanceOf(address)
        if (balanceOf/1e18 > amount)  
            return true

        return false
    }
    catch(e) {
        return false
    }
}

const abi =
    [{"constant":true,
    "inputs":[{"name":"who","type":"address"}],
    "name":"balanceOf",
    "outputs":[{"name":"","type":"uint256"}],
    "payable":false,"stateMutability":"view","type":"function"}]

We add a task in the basicWeb3 journey using this verifier:

    {
        "name": "has some WETH on Polygon",
        "description": "has some WETH (ERC20 Token) on Polygon",
        "points": 400,
        "verifier": "has-token-ERC20",
        "params": {
          "tokenAddress": "0x7ceB23fD6bC0adD59E62ac25578270cFf1b9f619",
          "amount":0
        },
        "chainId":137
    }

The End of the beginning

Now, you can begin to add tasks and verifiers to your protocol for on-boarding web3 users.

My suggestion for this framework is:

It may be restructured to be two parts:

1: an aggregating site for all journeys, verifiers, and API which developers can use to integrate PoC to other things such as Discord.

2: a light/handy framework (perhaps a SDK / npm package) developers can easily use on their own site for on-boarding users to their protocols or applications.

DEV Community: fangjun

Web3 Tutorial: Build an NFT marketplace DApp like OpenSea

Table of content

Task 1: What we build and project setup

Task 1.1: What we build - three parts

Task 1.2: Directory and project setup

Task 2: NFT collection smart contract

Task 2.1: write an NFT smart contract

Task 2.2: Understand tokenURI()

Task 2.3: Unit test for ERC721 contract

Task 3: A web page to display NFT item

Task 3.1: Setup webapp project using Web3-React & Chakra UI

Task 3.2: Write a component to display NFT time

Task 3.3: Run the webapp project

Task 4: NFT marketplace smart contract

Task 4.1: Contract data structure

Task 4.2: market methods

Thinking Note on delegatecall

Task 4.3: Unit test for NFTMarketplace (core function)

Task 4.4: Unit test for NFTMarketplace (query function)

Task 4.5: playMarket.ts helper script for developing smart contract

Task 4.6: Scripts to prepare for webapp

Task 5: Webapp for NFTMarketplace

Task 5.1: add component ReadNFTMarket

Task 5.2: add ReadNFTMarket to index

Task 5.3: Run the DApp

Optional Task 6: Deploy to Polygon and query using Alchemy NFT API

Task 6.1 Deploy to Polygon

Task 6.2 Mint NFT and list on marketplace

Task 6.3 Query NFT using Alchemy NFT APIs

Tutorial List:

1. A Concise Hardhat Tutorial(3 parts)

2. Understanding Blockchain with Ethers.js(5 parts)

3. Tutorial : build your first DAPP with Remix and Etherscan (7 Tasks)

4. Tutorial: build DApp with Hardhat, React and Ethers.js (6 Tasks)

5. Tutorial: build DAPP with Web3-React and SWR(5 Tasks)

6. Tutorial: write upgradeable smart contract (proxy) using OpenZeppelin(7 Tasks)

7. Tutorial: Build an NFT marketplace DApp like Opensea(5 Tasks)

Web3 Tutorial: build DApp with Web3-React and SWR

Task 1: Prepare webapp project and smart contract

Tutorial: build DApp with Hardhat, React and Ethers.js

Task 1: setup development environment

Task 1.1 Install Hardhat and init a Hardhat project

Task 1.2 Development Circle in Hardhat

Task 1.3 MetaMask Switch Local testnet

Task 1.4 Create webapp with Next.js and Chakra UI

Task 1.5 Edit webapp - header, layout, _app.tsx, index.tsx

Task 3: Build ERC20 smart contract using OpenZeppelin

Task 3.1 Write ERC20 smart contract

Task 3.2 Compile smart contract

Task 3.3 Add unit test script

Task 3.4 Add deploy script

Task 3.5 Run stand-alone testnet again and deploy to it

Task 3.6 Interact with ClassToken in hardhat console

Task 3.7 Add token to MetaMask

Task 2: Add Web3-React to our webapp - Connect button

Task 2.1: Understanding Web3-React

Task 2.2: Install Web3-React, Ethers.js and add Web3ReactProvder

Task 2.3: Add an empty ConnectMetamask component

Task 3: Read from blockchain - ETHBalance

Task 3.1: Add ETHbalance.tsx (first attempt)

Task 3.2: Add ETHBalanceSWR.tsx (second attempt)

Task 4: Read / Listen - Interact with smart contract

Task 4.1: Add ERC20ABI.tsx

Task 5: Write - Interact with smart contract

Task 5.1: Add a component for Transfer

Task 5.2 Add transfer component to index.tsx

Tutorial List:

1. A Concise Hardhat Tutorial(3 parts)

2. Understanding Blockchain with Ethers.js(5 parts)

3. Tutorial : build your first DAPP with Remix and Etherscan (7 Tasks)

4. Tutorial: build DApp with Hardhat, React and Ethers.js (6 Tasks)

5. Tutorial: build DAPP with Web3-React and SWR

6. Tutorial: write upgradeable smart contract (proxy) using OpenZeppelin(7 Tasks)

7. Tutorial: Build an NFT marketplace DApp like Opensea(5 Tasks)

Web3 Tutorial: build DApp with Hardhat, React and Ethers.js

Prerequisite Knowledge and tools

Task 1: setup development environment

Task 1.1 Install Hardhat and init a Hardhat project

Task 1.2: Development Circle in Hardhat

Task 3.1: Setup webapp project using `Web3-React` & `Chakra UI`

Thinking Note on `delegatecall`

Task 4.5: `playMarket.ts` helper script for developing smart contract

Task 5.1: add component `ReadNFTMarket`

Task 5.2: add `ReadNFTMarket` to index

2. Understanding Blockchain with `Ethers.js`(5 parts)

Task 2.2: Install `Web3-React`, `Ethers.js` and add `Web3ReactProvder`

Task 3.1: Add `ETHbalance.tsx` (first attempt)

Task 3.2: Add `ETHBalanceSWR.tsx` (second attempt)

Task 4.1: Add `ERC20ABI.tsx`

Task 5.2 Add transfer component to `index.tsx`

2. Understanding Blockchain with `Ethers.js`(5 parts)

Task 2.1: install `Ethers.js`

Task 4.1: Add empty `ReadERC20` component to read ClassToken

Task 5.1: Add empty `TransferERC20` component

Task 1.3: unit test script for `Box.sol`

Task 2.3: test whether `Box.sol` using proxy pattern works correctly

Task 4.6 Send token by calling `transfer`