【Solana】ウォレット接続ボタンを作ってみよう!
本日は、こちらに沿って、Solanaのウォレット接続ボタンを作ってみましょう。
1 やってみよう
では、やってみましょう。
1 git clone
まずは、Git clone を行います。
git clone https://github.com/anza-xyz/wallet-adapter.git
2 依存関係のインストール
次に、依存関係をインストールしていきましょう。
cd wallet-adapter
pnpm install
3 ビルドの実施
次に、ビルドを行います。
ここは、ある程度の時間がかかります。(10分くらいかかるかも。。)
pnpm run build
4 立ち上げてみよう
準備ができましたので、立ち上げてみましょう。
cd packages/starter/nextjs-starter/
pnpm run dev
では、準備ができましたので、「http://localhost:3000/」に接続してみましょう。
このようになりました。
ボタンを押すと、下のように、モーダルが立ち上がることも確認できました。
では、以下で、具体的な中身も見てみましょう。
2 ネットワークの設定
まずは、「ConnectionProvider」を使ってネットワークを設定しています。
今回は、devnetに設定しています。
1 ネットワークの取得
まずは、「WalletAdapterNetwork」から「Devnet」を取得しています。
中身は、このようになっています。
今回は、「Devnet」を取得しています。
2 RPCエンドポイントの取得
ブロックチェーンとやりとりするための、RPCエンドポイントを取得します。
「clusterApiUrl」を用いて、「Devnet」に相当するエンドポイントを取得します。
ちなみに、「clusterApiUrl」は「@solana/web3.js」にあります。
具体的には、こちらで、ネットワークに応じたエンドポイントを取得しています。
3 ウォレットの設定について
次に、ウォレットを設定します。
こちらの部分です。検出されたものを表示しています。
なお、こちらのように、標準の実装は自動的になされます。
具体的には、「Mobile Wallet Adapter」と「Solana Wallet Standard」です。
1 Mobile Wallet Adapterについて
まずは、こちらの「Mobile Wallet Adapter」が自動で実装されます。
こちらは、「Solana Mobile」の開発者向けのレポジトリのようです。
2 Solana Wallet Standardについて
こちらは、Solanaブロックチェーンとの互換性を確保するためのリソースを提供しています。
こちらも自動で実装されています。
3 ウォレットの設定について
上のウォレットを「WalletProvider」に設定しています。
標準的なものは自動で実装されるため、特定のウォレットを実装したい場合などを除き、追加の処理は不要だと思われます。
4 モーダルの設定について
最後に、モーダル部分を設定しています。
実際には、下のように設定するだけです。
このモーダルについての設定です。
4 設定について
実際の配置は、こちらの「index.tsx」で行われています。
このように、表示することができました。
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊