![見出し画像](https://assets.st-note.com/production/uploads/images/130803783/rectangle_large_type_2_2232de4335b817c51176440b7a599cbd.png?width=1200)
wagmiでコントラクトの書き込みを行ってみよう!
本日は、「wagmi」を使って、コントラクトの書き込みを実行したいと思います。
0 事前準備
今回は、テストトークンとして、Sepoliaを使います。
取得方法がご不明の場合は、こちらをご確認ください。
1 コントラクトを作る
まずは、Remixで簡易的なNFTのコントラクトを作ってみましょう。
1 コードの作成
「Create」を選択
![](https://assets.st-note.com/img/1707795315631-yp3tHIFgW6.png?width=1200)
「ERC721」、「Mintable」を選択して、「OK」
![](https://assets.st-note.com/img/1707795352426-YTJWxjFnsy.png?width=1200)
「MyToken.sol」を確認すると、このように、NFTのミントを行う関数ができています。
![](https://assets.st-note.com/img/1707795386501-AwkX3UEgpA.png?width=1200)
こちらを簡易的に実行するために、今回は下のように変更します。
注意
今回は、簡易的に行うためにこのように変更しています。
通常はこの変更は望ましくありません。
function safeMint(uint256 tokenId) public onlyOwner {
_safeMint(msg.sender, tokenId);
}
![](https://assets.st-note.com/img/1707795427282-QGTJ0GD7fF.png?width=1200)
2 コンパイルの実行
では、機械が読み取れるように、下のようにコンパイルを行います。
緑のチェックがつけば完了です。
![](https://assets.st-note.com/img/1707795571834-VXEWezqip6.png?width=1200)
3 デプロイの実行
では、デプロイを行います。
下のように、「Injected Provider」にして、「Sepolia(11155111)」と表示されていることを確認してください。
注意
Main(1)のまま実行すると、実際のETHが使われてしまうので、十分ご注意ください。
![](https://assets.st-note.com/img/1707795614161-vDyPJwvt0B.png?width=1200)
下の部分に、自分のアドレスをコピーして入れます。
詳細は省きますが、コード上の「constructor」でアドレスが要求されているためです。
できましたら、「Deploy」
![](https://assets.st-note.com/img/1707795661674-S3mmqUfG1J.png?width=1200)
しばらくすると、下のようにデプロイが完了しました。
下のように、コントラクトアドレスをコピーします。
![](https://assets.st-note.com/img/1707795726633-moCz3UVWkw.png?width=1200)
4 エクスプローラで確認
では、本当にできたかをエクスプローラで確認しましょう。
できたコントラクトアドレスで検索を行えば、次のようになっていると思います。
![](https://assets.st-note.com/img/1707795749615-0qr7EIXAx8.png?width=1200)
2 Wagmiプロジェクトの作成・実行
では、ここから、wagmiのプロジェクトを作ってみましょう。
1 Git Cloneを行う
下のGithubを使います。
こちらで実行します。
git clone https://github.com/ytakahashi2020/wagmi_write.git
![](https://assets.st-note.com/img/1707796194303-vu5S47DR9c.png?width=1200)
2 依存関係のインストール
次に依存関係のインストールを行いましょう。
「yarn」や「npm」でも大丈夫です。
cd wagmi_write
pnpm i
![](https://assets.st-note.com/img/1707796261658-8ksyXs2gTd.png?width=1200)
3 コントラクトアドレスの書き換え
次に、「WriteContract.tsx」の下の部分に第1章で作ったコントラクトのアドレスを入れましょう。
![](https://assets.st-note.com/img/1707796237566-If0bWFI8xw.png?width=1200)
4 実行しよう
では、実行しましょう。
「yarn」や「npm」でも大丈夫です。
pnpm run dev
![](https://assets.st-note.com/img/1707796286390-o7CgHW3Tu1.png?width=1200)
下のように、立ち上がりました!
![](https://assets.st-note.com/img/1707796307225-3qyOGER0FR.png?width=1200)
5 触ってみよう
では、メタマスクを押して、接続してみましょう。
なお、ブラウザにメタマスクが入っていない場合は表示されません。
![](https://assets.st-note.com/img/1707796360630-315JIfTJIZ.png?width=1200)
このようになりました。
では先ほど作ったコントラクトのNFTをミントします。
ミントしたいトークンID(0や1、100などなんでも)を入れて「Mint」を押します。
![](https://assets.st-note.com/img/1707796380874-AO9HEmgcKx.png?width=1200)
するとメタマスクが立ち上がり、進めると、このようになりました。
少し待ちます。
![](https://assets.st-note.com/img/1707796413067-1XF2eoVG7b.png?width=1200)
このように、トランザクションが完了したようです。
![](https://assets.st-note.com/img/1707796430842-kiS85esTlW.png?width=1200)
エクスプローラを確認すると、このように「Safe Mint」が実行されていました。
(若干の時間差あると思います。)
![](https://assets.st-note.com/img/1707796453130-ChJbzcaqxW.png?width=1200)
3 仕組みを見てみよう
では、仕組みを見ていきましょう。
ただ、ほとんど、前回の記事の「sendTransaction」とやっていることは同じです。
1 useWriteContractについて
今回使用するのは、こちらの「useWriteContract」です。
![](https://assets.st-note.com/img/1707867134900-bruwNgCsaH.png?width=1200)
「useWriteContract」の中で今回使用しているのは下の4つです。
この辺りは関数名が違うだけで「sendTransaction」と全く同じなので、詳細は上の記事をご確認ください。
![](https://assets.st-note.com/img/1707796881334-R5c3Ze26uJ.png?width=1200)
下のように使っています。
![](https://assets.st-note.com/img/1707796943554-mh4eLGXjUL.png?width=1200)
2 writeContract関数について
writeContract関数では、コントラクトの情報として、下の4つが必要です。
![](https://assets.st-note.com/img/1707797126014-SzgDBGqPJh.png?width=1200)
こちらです。
![](https://assets.st-note.com/img/1707797480424-4vXQmVvkOf.png?width=1200)
3 ABIについて
「ABI」のイメージがつきにくい方は、こちらもご参照ください。
![](https://assets.st-note.com/img/1707867549335-BuHkRwVCU1.png?width=1200)
コードとしては、こちらになります。
![](https://assets.st-note.com/img/1707797180151-U7UuFfaxhL.png?width=1200)
ちなみに、「ABI」の部分は下のようになっています。
これで、その関数が、どんな名前でどんな引数を取るのかがわかります。
![](https://assets.st-note.com/img/1707797196931-i0w7HtlbwI.png?width=1200)
ちなみに関数は下のようになっていました。
![](https://assets.st-note.com/img/1707797259692-o48NXTRqd2.png?width=1200)
コード自体はもっとありますが、今回のコントラクトの書き込みの部分については以上になります。
今回は以上です。
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊