wagmiでトランザクションの送付（sendTransaction）を実行してみよう

０　事前準備

この記事では、テストトークンである、Sepoliaを使用します。

取得方法がご不明の場合は、こちらをご参照ください。

１　やってみよう

今回は、「wagmi」を使って、トークンの送付処理を行ってみます。

１　git clone

こちらのGithubに公式のコードを反映させていますので、git clone を行います。

git clone https://github.com/ytakahashi2020/wagmi_send_transaction.git

下のように、git cloneができました。

２　依存関係のインストール

下のようにして、依存関係をインストールします。

「yarn」や「npm」でも大丈夫です。

cd wagmi_send_transaction
pnpm i

３　立ち上げよう

下のように立ち上げ、「localhost」を見てみましょう。

pnpm run dev

このように立ち上げることができました。

４　処理を行おう

では、実際にやってみましょう。

今回は、メタマスクで接続を行います。

ボタンを押すと、このようにメタマスクが立ち上がったので、接続を行います。

次に、送付を行います。

送付先アドレスと送付量を入れて、「Send」を押します。

なお、実際の資金が使われるミスを防ぐため、資金が入っていないテストアカウントで行うことをお勧めします。

このように、少し経つと、無事にトランザクションが完了しました。

２　仕組みを理解しよう

１　useSendTransaction

まずは、useSendTransactionを見てみましょう。

今回使用するのは、こちらの４つです。

その名の通り、トランザクションの送付に関わるものです。

まずは、扱うデータを見てみましょう。

この部分で３つが使われています。

１ー１　sendTransaction関数について

送付先と送付量を引数にとり、実行することができます。

下のように、２つを入れて実行します。

１ー２　データについて（data）

データはトランザクションのハッシュ値として使われます。

これがあることで、エクスプローラでも、トランザクションの詳細を見ることができます。

https://sepolia.etherscan.io/tx/0xf8d3e7290d51d77b0d98e560a2ca4c0d698629af9b25e3fb7efec50c22bb342f

１ー３　エラーについて（error）

エラーは下のように、主にエラー文言を表示させるために使います。

これにより、なぜトランザクションの送付がうまくいかなかったのかがわかります。

１ー４　ペンディング中かについて（isPending）

これにより、トランザクションが実行中か否かを取得できます。

２　useWaitForTransactionReceipt

こちらは、トランザクションの実行中の状況などを取得できます。

今回は、トランザクションが①ロード中か②成功したかの２つをデータとして取得します。

２ー１　実行方法について

どのトランザクションについてかということを知るために、ハッシュ値を引数に取ります。

https://wagmi.sh/react/api/hooks/useWaitForTransactionReceipt#usage

コードとしては、こんな感じです。

２ー２　ロード中か（isLoading）

ロード中である旨を取得すると、このようにその旨を表示しています。

コードとしては、こんな感じです。

２ー３　成功したか（isSuccess）

成功した旨を取得すると、このように表示しています。

コードとしては、こんな感じです。

今回は以上です。