npm と git が使えるようにつしておいてください。

1. symfoni/hardhat-react-boilerplate - GitHub
2. (参考) Ethereum のスマートコントラクトで対戦ゲームを作るとどうなるか

hardhat-react-boilerplate の構築

> git clone https://github.com/symfoni/hardhat-react-boilerplate.git
> cd hardhat-react-boilerplate
hardhat-react-boilerplate> npm install

新たにもう一つターミナルを開いて、Hardhat の node (ethereum ブロックチェーン) を起動する。

node の起動

hardhat-react-boilerplate

 npx hardhat node --watch

frontend の起動

hardhat-react-boilerplate> cd frontend
hardhat-react-boilerplate\frontend> npm install
hardhat-react-boilerplate\frontend> npm start

ネットワーク設定

• ネットワーク名: Hardhat
• 新しいRPC URL: http://127.0.0.1:8545
• チェーンID: 1337
• 通貨記号: ETH

アカウント秘密鍵

• 秘密鍵: 0xac0974bec39a17e36ba4a6b4d238ff944bacb478cbed5efcae784d7bf4f2ff80
• 上記の秘密鍵でアカウントインポートするとアドレス「0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266」のアカウントが使用できるようになります

以下の手順でスマートコントラクトを実装することで、Counter.sol を変更して保存したタイミングでホットデプロイ機能により、自動的に Counter スマートコントラクトがデプロイされます。また、Counter スマートコントラクトを frontend で使用するためのソースコードが frontend/src/hardhat ディレクトリ以下に自動生成されます。それを利用すればすぐに frontend に Counter スマートコントラクトを使用した機能を追加できます。

hardhat-react-boilerplate> code .\contracts\Counter.sol

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;
 
contract Counter {
  uint public count;
 
  // Function to get the current count
  function get() public view returns (uint) {
    return count;
  }
 
  // Function to increment count by 1
  function inc() public {
    count += 1;
  }
 
  // Function to decrement count by 1
  function dec() public {
    count -= 1;
  }
 
  // Function to increment count by 2
  function double_inc() public {
    count += 2;
  }
}

「deploy」ディレクトリ以下にデプロイ用のプログラムを作成しておくことで、Counter スマートコントラクトのソースコードに変更があった場合、ホットデプロイが実行されます。

hardhat-react-boilerplate> code .\deploy\Counter.ts

module.exports = async ({
  getNamedAccounts,
  deployments,
  getChainId,
  getUnnamedAccounts,
}) => {
  const { deploy } = deployments;
  const { deployer } = await getNamedAccounts();
 
  await deploy("Counter", {
    from: deployer,
    // gas: 4000000,
    args: [],
  });
};

まずは Counter スマートコントラクトを使用する機能を React の Component として実装します。

hardhat-react-boilerplate> code .\frontend\src\components\Counter.tsx

import React, { useContext, useEffect, useState } from "react";
import { CounterContext } from "./../hardhat/SymfoniContext";
import { BigNumber } from "ethers";
 
interface Props {}
 
export const Counter: React.FC<Props> = () => {
  const counter = useContext(CounterContext);
  const [count, setCount] = useState<BigNumber>(BigNumber.from(0));
  useEffect(() => {
    const doAsync = async () => {
      if (!counter.instance) return;
      console.log("Counter is deployed at ", counter.instance.address);
      const _count = await counter.instance.get();
      setCount(_count);
    };
    doAsync();
  }, [counter]);
 
  const handleInc = async (
    e: React.MouseEvent<HTMLButtonElement, MouseEvent>
  ) => {
    e.preventDefault();
    if (!counter.instance) throw Error("Greeter instance not ready");
    if (counter.instance) {
      const tx = await counter.instance.inc();
      console.log("inc tx", tx);
      await tx.wait();
      const _count = await counter.instance.get();
      console.log("New count, result: ", _count);
      setCount(_count);
    }
  };
  return (
    <div>
      <p>Count: {count.toNumber()}</p>
      <button onClick={(e) => handleInc(e)}>inc</button>
    </div>
  );
};

App.tsx に Counter コンポーネントを追加します。

hardhat-react-boilerplate> code .\frontend\src\App.tsx

1. 「import { Counter } from './components/Counter';」を追記します。
2. 「<Greeter></Greeter>」 の下の行に 「<Counter></Counter>」 を追記します。

import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Symfoni } from "./hardhat/SymfoniContext";
import { Greeter } from './components/Greeter';
import { Counter } from './components/Counter';
 
function App() {
 
  return (
    <div className="App">
      <header className="App-header">
        <Symfoni autoInit={true} >
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit src/App.tsx and save to reload.
        </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
        </a>
          <Greeter></Greeter>
          <Counter></Counter>
        </Symfoni>
      </header>
    </div>
  );
}
 
export default App;