ether.js と React を使用して DApps を開発します。

> npx create-react-app react-etherjs
Need to install the following packages:
  create-react-app
Ok to proceed? (y) y
npm WARN deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
 
Creating a new React app in C:\Users\miyazato\work\ethereum\react-etherjs.
 
Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...
 
 
added 1377 packages in 2m
 
179 packages are looking for funding
  run `npm fund` for details
 
Initialized a git repository.
 
Installing template dependencies using npm...
npm WARN deprecated source-map-resolve@0.6.0: See https://github.com/lydell/source-map-resolve#deprecated
 
added 39 packages in 17s
 
179 packages are looking for funding
  run `npm fund` for details
Removing template package using npm...
 
 
removed 1 package, and audited 1416 packages in 6s
 
179 packages are looking for funding
  run `npm fund` for details
 
6 moderate severity vulnerabilities
 
To address all issues (including breaking changes), run:
  npm audit fix --force
 
Run `npm audit` for details.
 
Created git commit.
 
Success! Created react-etherjs at C:\Users\miyazato\work\ethereum\react-etherjs
Inside that directory, you can run several commands:
 
  npm start
    Starts the development server.
 
  npm run build
    Bundles the app into static files for production.
 
  npm test
    Starts the test runner.
 
  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!
 
We suggest that you begin by typing:
 
  cd react-etherjs
  npm start
 
Happy hacking!
> cd react-etherjs

ether.js の npm パッケージ名は ethers なので、それをインストールします。

react-etherjs> npm install --save ethers

Truffleを使ったスマートコントラクト開発 で Counter スマートコントラクトを build すると Counter スマートコントラクトの情報(ABIやaddressなど)が truffle_project\build\contracts\Counter.json に保存されています。今回はその Counter.json を react-etherjs\src\contracts\Counter.json にコピーして使用します。

本来は truffle-config.js の設定を変更して、Counter.json を react-etherjs\src\contracts に保存するようにするのが一般的です。

react-etherjs> mkdir .\src\contracts
 
 
    ディレクトリ: C:\Users\miyazato\work\ethereum\react-etherjs\src
 
 
Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----        2022/05/08     20:50                contracts
 
 
react-etherjs> cp ..\contracts\Counter.sol .\src\contracts\.

react-etherjs> code .\src\App.js

import logo from './logo.svg';
import './App.css';
 
import React, { useEffect, useState } from "react";
import { ethers } from "ethers";
//import Counter from "./contracts/Counter.json");
 
function App() {
  const [account, setAccount] = useState();
  const [count, setCount] = useState();
  const [transactionHash, setTransactionHash] = useState();
  const [transactionInfo, setTransactionInfo] = useState();
  //const provider = new ethers.providers.Web3Provider(window.ethereum);
 
  //const provider = new ethers.providers.JsonRpcProvider("http://localhost:7545");
  const counterAddress = "0x791C2E0e40B2b96f3aE2F5D3F3661478f73fB49D";
  const counterAbi = [
        {
        "constant": true,
        "inputs": [],
        "name": "count",
        "outputs": [
            {
            "internalType": "uint256",
            "name": "",
            "type": "uint256"
            }
        ],
        "payable": false,
        "stateMutability": "view",
        "type": "function"
        },
        {
        "constant": true,
        "inputs": [],
        "name": "get",
        "outputs": [
            {
            "internalType": "uint256",
            "name": "",
            "type": "uint256"
            }
        ],
        "payable": false,
        "stateMutability": "view",
        "type": "function"
        },
        {
        "constant": false,
        "inputs": [],
        "name": "inc",
        "outputs": [],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
        },
        {
        "constant": false,
        "inputs": [],
        "name": "dec",
        "outputs": [],
        "payable": false,
        "stateMutability": "nonpayable",
        "type": "function"
        }
    ];
    //const Counter = new ethers.Contract(counterAddress, counterAbi, provider);
 
        //メタマスクの接続
    const connectMetaMask= () => {
        if (window.ethereum && window.ethereum.isMetaMask) {
            window.ethereum
                .request({ method: "eth_requestAccounts" })
                .then((result) => {
                    setAccount(result[0]);
                })
                .catch((error) => {
                    console.log("MetaMask error")
                });
        } else {
            console.log("Need to install MetaMask");
        }
    };
 
  const  getCoinbase =  async () => {
    //const accounts = await provider.listAccounts();
    // 先頭のアカウントを coinbase とみなす
    //let coinbase = accounts[0];
    //return coinbase;
  };
 
  const  getCount =  async () => {
    //const a = await Counter.get();
    //console.log("getCount");
  };
 
  const  incCount =  () => {
  };
 
  const  decCount =  () => {
  };
 
  const getTransactionInfo =  () => {
  };
 
  return (
    <div className="App">
      <header className="App-header">
      <div>
        Account: { account }
        <div>
            Count: { count }
        </div>
        <div>
            Transaction: { transactionHash }
        </div>
        <input type="button" value="connect" onClick={ connectMetaMask }/>
        <input type="button" value="get" onClick={ getCount }/>
        <input type="button" value="inc" onClick={ incCount }/>
        <input type="button" value="dec" onClick={ decCount }/>
        <input type="button" value="getTransactionInfo" onClick={ getTransactionInfo } />
      </div>
      <div>
        { transactionInfo }
      </div>
      </header>
    </div>
  );
}
 
export default App;