wagmiを使ってウォレット接続をしてみよう！
本日は、「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はこのような値を取ります。
本日は、以上です。
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊