使用 React 和 ethers.js 构建DApp

Tiny熊

发布于 2022-11-07 10:11:23

5.2K0

发布于 2022-11-07 10:11:23

文章被收录于专栏：深入浅出区块链技术深入浅出区块链技术

本文作者：张小风[1]

scaffold-eth[2] 因为引入内容太多了，对于我来说太复杂了，不知道大家有没有同感，找到一篇使用 React 开发 DApp 的非常简单入门教程。翻译一下.

在本教程中，我们将使用 Hardhat、React 和 ethers.js 构建 DAPP，它可以与用户控制的钱包如 MetaMask 一起使用。

DAPP 通常由三部分组成:

部署在链上的智能合约
用 Node.js、React 和 Next.js 构建的 Webapp（用户界面)
钱包（用户在浏览器中控制的/移动钱包 App)

我们使用ethers.js来连接各个：

在 DApp（webapp）的用户界面中，MetaMask 等钱包给开发者提供了一个以太坊的提供者，我们可以在Ethers.js中使用，与区块链进行交互。(具体来说，钱包提供的是一个 "连接器"，ethers.js 创建 "提供者（provider）"和/或 "签名者（signer）"供我们使用）。

作为用户，我们可能已经知道了 MetaMask 的用法，作为开发者，我们将学习如何使用 MetaMask 和它注入浏览器的window.ethereum（MetaMask 开发者文档[3]。

本教程的代码库在： Hardhat 项目：https://github.com/fjun99/chain-tutorial-hardhat-starter Webapp 项目：https://github.com/fjun99/web3app-tutorial-using-ethers

特别感谢在准备 webapp 代码库时，Wesley 的Proof-of-Competence, POC[4]项目学到了很多。我们也像他的项目一样使用 Chakra UI。你可能也会发现网页与 POC 几乎一样。

前置知识和工具

在我们开始之前，你需要对一下内容有一些了解：

知识：

区块链
以太坊
钱包
Solidity[5]
ERC20 & ERC721
Ethers.js[6]

工具：

MetaMask (钱包浏览器插件)
Node.js, yarn, TypeScript
OpenZeppelin (Solidity 库)
Etherscan 区块浏览器

让我们开始建立一个 DApp

任务 1：设置开发环境

为了建立一个 DApp，我们要做两个工作：

使用 Hardhat 和 Solidity 构建智能合约
使用 Node.js、React 和 Next.js 构建 Web 应用。

我们将把目录组织成两个子目录chain和webapp：

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

任务 1.1 安装 Hardhat 并启动 Hardhat 项目

安装 Hardhat，这是一个以太坊开发环境。

要使用 Hardhat，你需要在电脑上有node.js和yarn：

第 1 步：建立一个目录并在其中安装 Hardhat

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

安装 Hardhat：

yarn add hardhat

第 2 步：创建一个 Hardhat 样本项目

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

用我们将在任务 3 中使用的样本智能合约Greeter.sol创建一个 hardhat 项目。

第 3 步：运行 Harhat 网络（本地 testnet）

yarn hardhat node

将运行一个本地测试网（chainId: 31337）。

开始了 HTTP 和 WebSocket JSON-RPC 服务器，地址是http://127.0.0.1:8545/

它提供了 20 个账户，每个账户有10000.0测试ETH。

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

请注意，Hardhat Network 本地 testnet 有两种模式：进程中模式和独立模式。我们用命令行yarn hardhat node运行一个独立的 testnet。当运行像yarn hardhat compile这样的命令行时，如果没有网络参数（--network localhost），我们就运行一个进程内测试网。

任务 1.2：在 Hardhat 的开发

我们将在 Hardhat 开发环境中体验智能合约的开发过程。

在 Hardhat 启动的项目中，默认包含有智能合约、测试脚本和部署脚本的样本。

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

我想改变测试和部署脚本的文件名：

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

第 1 步：运行命令，显示账户：

yarn hardhat accounts

这是在hardhat.config.ts中添加的 hardhat 样本任务。

第 2 步：编译智能合约

yarn hardhat compile

第 3 步：运行单元测试

yarn hardhat test

第 4 步：尝试部署到进程中的测试网

yarn hardhat run ./scripts/deploy_greeter.ts

在接下来的两个步骤中，将运行一个独立的 Hardhat 网络，并将智能合约部署上去。

第 5 步：运行一个独立的本地测试网

在另一个终端，运行：

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

第 6 步: 部署到独立的本地测试网

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

如果你多次运行部署，你会发现合约实例被部署到不同的地址。

任务 1.3：将 MetaMask 切换到本地测试网

确保 Hardhat Network 本地测试网仍在运行(你可以通过命令yarn hardhat node来运行它）。

第 1 步：在 MataMask 浏览器插件中，点击顶部栏的网络选择。将网络从mainnet切换到localhost 8545。
第 2 步：点击顶栏上的账户图标，进入 设置/网络/。选择 localhost 8445。

注意：确保链 ID 是31337。在 MetaMask 中，它可能默认为 1337。

任务 1.4: 用 Next.js 和 Chakra UI 创建 webapp

我们将使用Node.js、React、Next.js和Chakra UI框架创建一个 webapp。(你可以选择你喜欢的任何其他 UI 框架，如Material UI，Ant Design等。你也可能想选择前端框架Vue而不是Next.js)

第 1 步：创建 Next.js 项目webapp。

在hhproject/目录下，运行：

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

cd webapp

第 2 步：改变一些默认值并运行 webapp

我们将使用src作为应用程序目录，而不是pages（关于src和pages的更多信息在 Next.js docs[7]）。

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

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

运行 Next.js 应用程序并在浏览器中查看。

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

浏览http://localhost:3000。

第 3 步：安装 Chakra UI

通过运行 Chakra UI（文档[8]）来安装：

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

我们将在下一个子任务中编辑 next.js 应用程序，使其适合我们的项目。

任务 1.5：编辑 webapp

webapp 会包含头部、layout、_app.tsx、index.tsx 等

第 1 步：添加一个页眉组件

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

编辑header.tsx为：

//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>
  )
}

第 2 步：添加 Next.js 布局

添加布局(Next.js 文档[9])

touch src/components/layout.tsx

编辑layout.tsx为:

// 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>
  )
}

第 3 步：在_app.tsx和布局中添加 Chakra UI Provider

编辑_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

第 4 步：编辑 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

你可能还想添加_documents.tsx(docs[10])来定制你的 Next.js 应用程序中的页面。

你可能想删除这个项目中不需要的文件，如src/styles。

第 5 步：运行 webapp

yarn dev

在http://localhost:3000/ 的页面将看起来像：

你可以从 github scaffold repo[11]下载代码：

在你的'hhproject/'目录下。

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

任务 2：通过 MetaMask 将 DApp 连接到区块链上

在这个任务中，我们将创建一个 DAPP，它可以通过 MetaMask 连接到区块链（本地测试网）。

我们将使用 Javascript API 库Ethers.js与区块链交互。

任务 2.1：安装`Ethers.js`

在webapp/目录下，添加Ethers.js：

yarn add ethers

任务 2.2：连接到 MetaMask 钱包

我们将在index.tsx上添加一个按钮：

当未连接时，按钮文本为 Connect Wallet（连接钱包）。点击即可通过 MetaMask 链接区块链。
当连接时，按钮文本是连接的账户地址。用户可以点击断开连接。

我们将获得当前账户的 ETH 余额并显示在页面上，以及区块链网络信息。

有关于连接 MetaMask 的以太坊文档（文档链接[12]）。

我写了一张 PPT 来解释connector、provider、signer和ethers.js中的 wallet 之间的关系!

我们将使用react hook[13]功能useState和useEffect。

相关代码片段在 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

解释一下：

我们添加了两个 UI 组件：一个用于连接钱包，一个用于显示账户和链的信息。
当 连接MetaMask按钮被点击时，执行：
- 通过连接器(即window.ethereum，他是 MetaMask 注入到页面的)获得Web3Provider，。
- 调用eth_requestAccounts，这将要求 MetaMask 确认分享账户信息。用户在 MetaMask 的弹出窗口确认或拒绝该请求。
- 将返回的账户设置为currentAccount。
当断开连接被调用时，我们重置 currentAccount 和余额。
每次改变 currentAccount 时，都会调用副作用函数（useEffect），在这里执行查询：
- 通过调用getBalance查询当前账户的 ETH 余额。
- 通过调用getNetwork()来查询网络信息。

请注意：

在页面中断开连接，不会改变 MetaMask 的连接和该页面的权限。打开 MetaMask 扩展，你会发现你的钱包仍然连接到这个页面。下次你再点击 连接MetaMask按钮时，MetaMask 不会弹出确认窗口（因为你的确认仍然有效）。你智能通过 MetaMask 来断开钱包和页面的连接。
当用户在 MetaMask 中切换网络时，我们没有编写代码来显示变化。
我们没有存储这个页面的状态。因此，当页面被刷新时，连接被重置。

任务 3：使用 OpenZeppelin 构建 ERC20 智能合约

在任务 3 中，我们将使用 OpenZeppelin 库构建 ERC20 智能合约（ERC20 docs[14]）。

任务 3.1: 编写一个 ERC20 智能合约 - ClassToken

添加OpenZeppelin/contract：

yarn add @openzeppelin/contracts

到chain/目录下，添加ccontracts/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);
        }
}

任务 3.2 编译智能合约

yarn hardhat compile
//Solidity compilation should succeed

任务 3.3 添加单元测试脚本

添加单元测试脚本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);
  });
});

运行单元测试。

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

任务 3.4 添加部署脚本

添加部署脚本 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;
});

我们部署 ClassToken，并将 initialSupply 10000.0 CLT发送到部署者（msg.sender）。

尝试运行合约部署到进程中的 Hardhat Network 本地测试网（进程中模式）。

yarn hardhat run  scripts/deploy_classtoken.ts

任务 3.5 运行独立的测试网，向其部署智能合约

在另一个终端，在chain/目录下运行：

yarn hardhat node

在当前终端，运行连接到 localhost --network localhost的 hardhat 任务。

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

任务 3.6 在 hardhat 控制台与 ClassToken 交互

运行连接到独立的本地测试网的 hardhat 控制台。

yarn hardhat console  --network localhost

在控制台中与 ClassToken交互：

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

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

ethers.getContractAt()是 Hardhat 插件hardhat-ethers提供的一个辅助函数，文档链接[15]。

任务 3.7：将代币添加到 MetaMask 中

添加 Token 到 MetaMask，地址为：0x5FbDB2315678afecb367f032d93F642f64180aa3。(请使用你得到的部署合约地址。)

我们可以看到 0 号账户（0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266）有10000.0 CLT。

你也可以从github repo[16]下载 hardhat 示例项目。

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

任务 4：读取合约数据--在 webapp 中与智能合约交互

在任务 4 和任务 5 中，我们将继续构建我们的 webapp。

我们将允许用户与新部署的 ERC20 代币智能合约--ClassToken(CLT)进行交互。

任务 4.1: 添加空的`ReadERC20`组件来读取 ClassToken

在 webapp 目录中，添加一个空组件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>
  )
}

导入并添加这个组件到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>

在下面的子任务中，我们将逐步添加ReadERC20组件的功能。

任务 4.2：准备智能合约 ABI

要在 Javascript 中与智能合约交互，我们需要它的ABI[17]。

合约应用二进制接口（ABI）是与以太坊生态系统中的合约交互的标准方式。数据是根据其类型进行编码的。

ERC20 智能合约是一个标准，我们将使用一个文件而不是 Hardhat 项目中输出的编译工件。我们添加的是人类可读的 ABI[18]。

添加一个目录src/abi并添加文件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)"
];

任务 4.3: 当组件加载时查询智能合约信息

我们使用 React 钩子useEffect来查询组件加载时的智能合约信息。

编辑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>
  )
}

解释一下：

钩子useEffect(()=>{},[])将只被调用一次。
用window.ethereum（通过 MetaMask 注入到页面）创建一个Web3Provider[19]。
在ethers.js中用addressContract、abi、provider创建一个合约实例。
调用只读函数symbol(), totalSupply()，并将结果设置为反应状态的变量，可以在页面上显示。

任务 4.3: 当账户变化时，查询当前账户的 CLT 余额

编辑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>
  )

解释一下：

当currentAccount改变时，副作用钩子函数useEffect(()=>{},[currentAccount]被调用，调用balanceOf(address)来获得余额。
当我们刷新页面时，没有当前账户，也没有显示余额。在我们连接钱包后，余额被查询到并显示在页面上。

还有更多的工作要做：

当 MetaMask 切换账户时，我们的 Web 应用不知道，也不会改变页面的显示，因此需要监听 MetaMask 的账户变化事件。
当当前账户的余额发生变化时，由于当前账户没有被改变，我们的 Web 应用程序将不会更新。

你可以使用 MetaMask 将 CLT 发送给其他人，你会发现我们需要在页面上更新 CLT 的账户余额。我们将在任务 6 中完成这一工作。在任务 5 中，我们将首先为用户创建转账组件。

任务 5：执行写操作（转账）

继续在 Web App 中与智能合约交互，现在执行一个写操作

任务 5.1：添加空的`TransferERC20`组件

// 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>
  )
}

导入并添加这个组件到 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>

任务 5.2: 实现 transfer()函数

在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>
  )
}

解释一下：

我们调用transfer(address recipient, uint256 amount) → bool，这是 ERC20 智能合约的状态变化函数。

正如你所看到的，转移后 ClassToken 的余额没有改变。我们将在任务 6 中解决这个问题：

任务 6：监听事件：在 Web 应用中与智能合约交互

我们可以通过智能合约事件的设计来更新 CLT 余额。对于 ERC20 代币智能合约，当转账在链上被确认时，会发出一个事件Transfer(address from, address to, uint256 value)（文档[20]）。

我们可以在 Node.js webapp 中监听这个事件并更新页面显示。

任务 6.1: 了解智能合约事件

简单解释事件：当我们调用会智能合约的状态变化函数时，有三个步骤：

第 1 步：链外调用。我们使用 JavaScript API（ethers.js）在链外调用智能合约的状态变化函数。
第 2 步：链上确认。状态改变交易需要由矿工使用共识算法在链上的几个区块进行确认。所以我们不能立即得到结果。
第 3 步：触发事件。一旦交易被确认，就会发出一个事件。你可以通过监听事件来获得链外的结果。

任务 6.2：当当前账户变化时，添加事件监听器

编辑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])

这个代码片段改编自How to Fetch and Update Data From 以太坊 with React and SWR[21]。

解释一下:

当currentAccount改变时（useEffect），我们添加两个监听器：一个用于从 currentAccount 转移的事件，另一个用于转移到 currentAccount。
当监听到一个事件时，查询 currentAccount 的 token 余额并更新页面。

你可以在页面上或在 MetaMask 中从当前账户转账，你会看到页面在事件发生时正在更新。

当完成任务 6 时，你已经建立了一个简单而实用的 DAPP，它有智能合约和 Web 页面。

综上所述，DAPP 有三个部分：

智能合约和区块链
Web 应用（用户界面），通过智能合约获取和设置数据
用户控制的钱包（这里是 MetaMask），作为资产管理工具和用户的签名者，以及区块链的连接器。

通过这些任务，我们还了解到 3 种与智能合约交互的方式：

读取：从智能合约中获取数据
写：在智能合约中更新数据
监听，监听智能合约发出的事件

在本教程中，我们直接使用ethers.js来连接到区块链。作者还有一篇使用 Web3-react 库进行连接的文章，有机会在翻译。

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

参考资料

[1]

张小风: https://learnblockchain.cn/people/74

[2]

scaffold-eth: https://github.com/scaffold-eth/scaffold-eth

[3]

MetaMask开发者文档: https://docs.metamask.io/guide/ethereum-provider.html#using-the-provider

[4]

Proof-of-Competence, POC: https://github.com/wslyvh/proof-of-competence

[5]

Solidity: https://learnblockchain.cn/docs/solidity/

[6]

Ethers.js: https://learnblockchain.cn/docs/ethers.js/

[7]

在Next.js docs: https://nextjs.org/docs/advanced-features/src-directory

[8]

文档: https://chakra-ui.com/docs/getting-started

[9]

Next.js文档: https://nextjs.org/docs/basic-features/layouts

[10]

docs: https://nextjs.org/docs/advanced-features/custom-document

[11]

scaffold repo: https://github.com/fjun99/web3app-tutorial-starter-scaffold

[12]

文档链接: https://docs.ethers.io/v5/getting-started/#getting-started--connecting

[13]

react hook: https://reactjs.org/docs/hooks-intro.html

[14]

ERC20 docs: https://docs.openzeppelin.com/contracts/4.x/api/token/erc20

[15]

文档链接: https://hardhat.org/plugins/nomiclabs-hardhat-ethers.html#helpers

[16]

github repo: https://github.com/fjun99/chain-tutorial-hardhat-starter

[17]

ABI: https://docs.soliditylang.org/en/v0.8.11/abi-spec.html

[18]

人类可读的ABI: https://docs.ethers.io/v5/api/utils/abi/formats/#abi-formats--human-readable-abi

[19]

Web3Provider: https://docs.ethers.io/v5/api/providers/other/#Web3Provider

[20]

文档: https://docs.openzeppelin.com/contracts/4.x/api/token/erc20#IERC20-Transfer-address-address-uint256-

[21]

How to Fetch and Update Data From 以太坊 with React and SWR: https://consensys.net/blog/developers/how-to-fetch-and-update-data-from-ethereum-with-react-and-swr/

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2022-07-06，如有侵权请联系 cloudcommunity@tencent.com 删除

node.js

javascript

https

网络安全

本文分享自深入浅出区块链技术微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！