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

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

hardhat-react-boilerplate の構築

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

node の起動

hardhat-react-boilerplate

frontend の起動

ネットワーク設定

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

アカウント秘密鍵

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

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

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

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

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

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