⛓
Webページからスマートコントラクトを読み書きする方法
この記事について
この記事ではethers.jsを使ってWebページからGoerli上のスマートコントラクトを読み書きする方法について紹介します。この記事の関連リソースを下記に示します。
対象とするコントラクト
この記事では下記のシンプルなコントラクトを読み書き対象とします。
MyHelloWorld.sol
// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;
contract MyHelloWorld {
string public message;
constructor() {
message = "Hello World!";
}
function setMessage(string memory _message) public {
message = _message;
}
}
スマートコントラクトをデプロイする方法については下記の関連記事をご参照ください。なお、下記の記事ではGoerliではなくMumbaiを対象にしていますが手順は同様です。
コーディングの準備
ターミナルで下記のコマンドを実行してコーディングの準備をします。
npx create-next-app --typescript my-hello-world-ui
npm install --save ethers
mkdir components lib
touch components/connect.tsx
touch components/install.tsx
touch components/read.tsx
touch components/write.tsx
touch lib/abi.tsx
touch lib/create-contract.tsx
コーディング
エディタで下記のファイルを開いて内容を入力します。
pages/index.tsx
components/install.tsx
components/connect.tsx
components/read.tsx
components/write.tsx
lib/create-contract.ts
lib/abi.json
動作確認
ターミナルで下記のコマンドを実行してサーバーを起動します。
npm run dev
ブラウザで http://localhost:3000/ にアクセスします。
Connectボタンをクリックします。
Readボタンをクリックしてメッセージが表示されることを確認します。
新しいメッセージを入力してからWriteボタンをクリックしてトランザクションが表示されることを確認します。
トランザクションが取り込まれた後、再度Readボタンをクリックして新しいメッセージが表示されることを確認します。
参考画像
おわりに
この記事はAlchemyドキュメントのNFT Minter Tutorial: How to Create a Full Stack DAppのチュートリアルをベースにしています。下記2点を検証したかったのでチュートリアルの内容を参考にして改変しました。
- MetaMaskを使うならAlchemyを使わなくても読み書きができること
- web3.jsではなくethers.jsを使っても読み書きができること
結果的に上記2点を検証することができました。素晴らしい情報を提供してくれるAlchemyのドキュメントには感謝しかありません。
Discussion