使用react 制作 web3 智能合约互动

所以在这里我们有一个网站或一个前端，在我们已经部署的智能合约上他并不重要他现在是什么这通常是界面 你会看到归结为一个非常简约的水平 通常你会看到类似连接功能元隐码或其他一些钱包连接器的东西会谈出来我们接下来会点击我们将在这里连接 甚至不说像connected这样的东西我们还可以执行功能和我们的智能合约进行交互我们可以确认等等。

1.创建react脚手架项目

 npx create-react-app react-demo
 

2.使用yarn 初始化项目

yarn

3.启动项目

yarn start

4.引入 react-bootstrap

npm install react-bootstrap bootstrap

5.修改app.js内容

import './App.css';
import {Button,Container,Row,Col} from 'react-bootstrap';
import "bootstrap/dist/css/bootstrap.min.css";

function App(){
    return(
    
    <Container>
        <Row className="mt-5">
            <Col>
                <h3>hello</h3>
            </Col>
        </Row>
         <Row className="mt-5">
            <Col>
                 <Button>Connect wallet<Button/>
            </Col>
        </Row>
    </Container>
    )
}
export default App;

6.获取账户的地址余额并且显示

1.安装web3modal

yarn add web3modal

2.安装ethers

yarn add ethers

3.安装remixd

npm install -g @remix-project/remixd

4.app.js

import logo from "./logo.svg";
import "./App.css";
import { Button, Container, Row, Col } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import { ethers } from "ethers";
import Web3Modal from "web3modal";
import React, { useState, useEffect } from "react";

// web3Modal初始化
const web3Modal = new Web3Modal({
  // 主网（以真钱去做互动的）、测试网（可以拿假钱去做互动）
  network: "https://testnets.opensea.io/", // 想要连的区块链是（主网 / 测试网） //https://testnets.io/
  providerOptions: {}, // 额外设置
});

const contractAddr = "0x925ec768b9064a19d0e66214f16f706cc0bcec7c";
const abi = [
  {
    inputs: [
      {
        internalType: "string",
        name: "_greeting",
        type: "string",
      },
    ],
    stateMutability: "nonpayable",
    type: "constructor",
  },
  {
    inputs: [],
    name: "greet",
    outputs: [
      {
        internalType: "string",
        name: "",
        type: "string",
      },
    ],
    stateMutability: "view",
    type: "function",
  },
  {
    inputs: [
      {
        internalType: "string",
        name: "_greeting",
        type: "string",
      },
    ],
    name: "setGreeting",
    outputs: [],
    stateMutability: "nonpayable",
    type: "function",
  },
];

function App() {
  // 连接钱包取得address和 balance
  const [address, setAddress] = useState("");
  const [balance, setBalance] = useState("");
  const [ens, setEns] = useState("");
  const [userInput, setUserInput] = useState("");
  const [msg, setMsg] = useState("");
  const [contract, setContract] = useState({});

  // 取前四个后四个（简化）
  const shortenAddr = (addr) => addr.slice(0, 4) + "..." + addr.slice(-4);

  async function init() {
    // 连接上钱包之后instance储存我们钱包相关的连接资讯
    const instance = await web3Modal.connect();
    const provider = new ethers.providers.Web3Provider(instance);
    // 签署协议
    const signer = provider.getSigner();
    console.log(signer);

    // 取到用户的区块域信息
    const addr = await signer.getAddress();
    console.log(addr);
    setAddress(addr); // 加到setAddress中

    // 取到用户的余额
    const bal = await provider.getBalance(addr);
    // 转换解析余额并且加到setBalance中
    setBalance(ethers.utils.formatEther(bal));
    console.log(ethers.utils.formatEther(bal));

    // 初始化合约
    const _contract = new ethers.Contract(contractAddr, abi, signer);
    setContract(_contract);
    window.contract = _contract;

    setEns(await provider.lookupAddress(addr));

  }
  async function getMessage() {
    console.log(contract);
    // 获取greet
    const _msg = await contract.greet();
    setMsg(_msg);
    console.log(_msg);
  }
  async function setMessage(msg) {
    //呼叫contract上面的setGreeting
    await contract.setGreeting(msg);
    //  await getMessage();
  }

  // useEffect(() => {
  //   init();
  // }, []);
  return (
    <div className="App">
      <Container className="mt-5">
        <Row>
          <Col>
            <h3>
              hello {shortenAddr(address)}, {ens}, you have {balance} Ethers.
            </h3>
          </Col>
        </Row>
        <Row>
          <Col>
            <h3>Greet：{msg}</h3>
          </Col>
        </Row>
        <Row className="mt-5">
          <Col>
            <h3>current user input：{userInput}</h3>
            <input
              type="text"
              value={userInput}
              onChange={(e) => setUserInput(e.target.value)}
            />
            <Button
              onClick={() => {
                setMessage(userInput);
              }}
            >
              {" "}
              SetMessage
            </Button>
          </Col>
        </Row>
        <Row>
          <Col>
            <Button
              onClick={() => {
                getMessage();
              }}
            >
              {" "}
              GetMessage
            </Button>
          </Col>
        </Row>
        <Row className="mt-5">
          <Col>
            <Button
              onClick={() => {
                init();
              }}
            >
              Connect wallet
            </Button>
          </Col>
        </Row>
      </Container>
    </div>
  );
}

export default App;