本日は、こちらに沿って、Solanaのウォレット接続ボタンを作ってみましょう。

１　やってみよう

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

１　git clone 

まずは、Git clone を行います。

git clone https://github.com/anza-xyz/wallet-adapter.git

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

次に、依存関係をインストールしていきましょう。

cd wallet-adapter
pnpm install

３　ビルドの実施

次に、ビルドを行います。

ここは、ある程度の時間がかかります。（10分くらいかかるかも。。）

pnpm run build

４　立ち上げてみよう

準備ができましたので、立ち上げてみましょう。

cd packages/starter/nextjs-starter/
pnpm run dev

では、準備ができましたので、「http://localhost:3000/」に接続してみましょう。

このようになりました。

ボタンを押すと、下のように、モーダルが立ち上がることも確認できました。

では、以下で、具体的な中身も見てみましょう。

２　ネットワークの設定

まずは、「ConnectionProvider」を使ってネットワークを設定しています。

今回は、devnetに設定しています。

１　ネットワークの取得

まずは、「WalletAdapterNetwork」から「Devnet」を取得しています。

中身は、このようになっています。

今回は、「Devnet」を取得しています。

２　RPCエンドポイントの取得

ブロックチェーンとやりとりするための、RPCエンドポイントを取得します。

「clusterApiUrl」を用いて、「Devnet」に相当するエンドポイントを取得します。

ちなみに、「clusterApiUrl」は「@solana/web3.js」にあります。

具体的には、こちらで、ネットワークに応じたエンドポイントを取得しています。

３　ウォレットの設定について

次に、ウォレットを設定します。

こちらの部分です。検出されたものを表示しています。

なお、こちらのように、標準の実装は自動的になされます。

具体的には、「Mobile Wallet Adapter」と「Solana Wallet Standard」です。

１　Mobile Wallet Adapterについて

まずは、こちらの「Mobile Wallet Adapter」が自動で実装されます。

こちらは、「Solana Mobile」の開発者向けのレポジトリのようです。

２　Solana Wallet Standardについて

こちらは、Solanaブロックチェーンとの互換性を確保するためのリソースを提供しています。

こちらも自動で実装されています。

３　ウォレットの設定について

上のウォレットを「WalletProvider」に設定しています。

標準的なものは自動で実装されるため、特定のウォレットを実装したい場合などを除き、追加の処理は不要だと思われます。

４　モーダルの設定について

最後に、モーダル部分を設定しています。

実際には、下のように設定するだけです。

このモーダルについての設定です。

４　設定について

実際の配置は、こちらの「index.tsx」で行われています。

このように、表示することができました。