本日は、「wagmi」を使って、簡単にウォレット接続を実装してみたいと思います。

こちらの公式もご参照ください。

１　やってみよう

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

１　プロジェクトの作成

下では、「pnpm」を用いていますが、「yarn」や「npm」でも大丈夫です。

pnpm create wagmi

プロジェクト名などはそのまま、下のように実行しています。

２　インストールの実行

では、下のようにして、インストールを行います。

cd wagmi-project
pnpm install

３　実行しよう

インストールができましたので、実行してみましょう。

pnpm run dev

こちらに飛びましょう。

４　触ってみよう

このような画面になりましたので、「Metamask」で接続してみます。

（メタマスクをブラウザに入れていない場合は表示されません。）

このように、接続されたアドレスやチェーンIDなどを表示してくれました。

２　構成（config）の作成について

では、ここからは簡単に仕組みを見てみましょう。

まずは、どんなチェーンIDを使うかなどの設定を「wagmi.ts」で設定しています。

今回の構成としては、下のような構成を作成しています。

１　チェーンについて

ここでは、どんなチェーンを使うのかを設定しています。

２　コネクターについて

ここでは、どのウォレットで接続を行うかを設定します。

「injected()」は、ユーザーのブラウザにインストールされているウォレットとの接続を行います。

こんな感じになっています。

３　トランスポートについて

ここでは、それぞれのチェーンをどのような通信方法で接続するかを定義しています。

今回はHTTPを使用してデータの送受信を行います。

３　接続部分の挙動について

では、接続部分についてもみてみましょう。

今回は、「wagmi」から次の３つを使用しています。

「App.tsx」のこちらをご参照ください。

１　useConnectについて

では、接続部分の「useConnect」を見てみましょう。

下のように、１つの関数と３つの変数を使っています。

１ー１　ステータスについて

ステータスでは接続時の状態を管理します。

このように、接続の結果などを返します。

１ー２　エラーについて

　こちらは、エラー時の文言を表示するときなどに使います。

こんな感じです。

１ー３　コネクターについて

接続可能なウォレットが格納されています。

コネクター自体は、構成（config）で設定しています。

１ー４　connect関数について

ここでは、ボタンを押すことで接続を行っています。

このように接続ができるようになります。

２　useAccountについて

次に、接続後のアカウントについては「useAccount」の「account」を使います。

今回は、その中で、下の３つを使っています。

このように使っています。

このように表示されています。

なお、statusはこのような値を取ります。

本日は、以上です。