wagmiでコントラクトの書き込みを行ってみよう！
本日は、「wagmi」を使って、コントラクトの書き込みを実行したいと思います。
０ 事前準備
今回は、テストトークンとして、Sepoliaを使います。
取得方法がご不明の場合は、こちらをご確認ください。
１ コントラクトを作る
まずは、Remixで簡易的なNFTのコントラクトを作ってみましょう。
１ コードの作成
「Create」を選択
「ERC721」、「Mintable」を選択して、「OK」
「MyToken.sol」を確認すると、このように、NFTのミントを行う関数ができています。
こちらを簡易的に実行するために、今回は下のように変更します。
注意
今回は、簡易的に行うためにこのように変更しています。
通常はこの変更は望ましくありません。
function safeMint(uint256 tokenId) public onlyOwner {
_safeMint(msg.sender, tokenId);
}
２ コンパイルの実行
では、機械が読み取れるように、下のようにコンパイルを行います。
緑のチェックがつけば完了です。
３ デプロイの実行
では、デプロイを行います。
下のように、「Injected Provider」にして、「Sepolia(11155111)」と表示されていることを確認してください。
注意
Main(1)のまま実行すると、実際のETHが使われてしまうので、十分ご注意ください。
下の部分に、自分のアドレスをコピーして入れます。
詳細は省きますが、コード上の「constructor」でアドレスが要求されているためです。
できましたら、「Deploy」
しばらくすると、下のようにデプロイが完了しました。
下のように、コントラクトアドレスをコピーします。
４ エクスプローラで確認
では、本当にできたかをエクスプローラで確認しましょう。
できたコントラクトアドレスで検索を行えば、次のようになっていると思います。
２ Wagmiプロジェクトの作成・実行
では、ここから、wagmiのプロジェクトを作ってみましょう。
１ Git Cloneを行う
下のGithubを使います。
こちらで実行します。
git clone https://github.com/ytakahashi2020/wagmi_write.git
２ 依存関係のインストール
次に依存関係のインストールを行いましょう。
「yarn」や「npm」でも大丈夫です。
cd wagmi_write
pnpm i
３ コントラクトアドレスの書き換え
次に、「WriteContract.tsx」の下の部分に第１章で作ったコントラクトのアドレスを入れましょう。
４ 実行しよう
では、実行しましょう。
「yarn」や「npm」でも大丈夫です。
pnpm run dev 
下のように、立ち上がりました！
５ 触ってみよう
では、メタマスクを押して、接続してみましょう。
なお、ブラウザにメタマスクが入っていない場合は表示されません。
このようになりました。
では先ほど作ったコントラクトのNFTをミントします。
ミントしたいトークンID（0や1、100などなんでも）を入れて「Mint」を押します。
するとメタマスクが立ち上がり、進めると、このようになりました。
少し待ちます。
このように、トランザクションが完了したようです。
エクスプローラを確認すると、このように「Safe Mint」が実行されていました。
（若干の時間差あると思います。）
３ 仕組みを見てみよう
では、仕組みを見ていきましょう。
ただ、ほとんど、前回の記事の「sendTransaction」とやっていることは同じです。
１ useWriteContractについて
今回使用するのは、こちらの「useWriteContract」です。
「useWriteContract」の中で今回使用しているのは下の４つです。
この辺りは関数名が違うだけで「sendTransaction」と全く同じなので、詳細は上の記事をご確認ください。
下のように使っています。
２ writeContract関数について
writeContract関数では、コントラクトの情報として、下の４つが必要です。
こちらです。
３ ABIについて
「ABI」のイメージがつきにくい方は、こちらもご参照ください。
コードとしては、こちらになります。
ちなみに、「ABI」の部分は下のようになっています。
これで、その関数が、どんな名前でどんな引数を取るのかがわかります。
ちなみに関数は下のようになっていました。
コード自体はもっとありますが、今回のコントラクトの書き込みの部分については以上になります。
今回は以上です。
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊