![見出し画像](https://assets.st-note.com/production/uploads/images/135333488/rectangle_large_type_2_4903c7e4d6851736e43dc76a0c319392.png?width=800)
【Solana】ウォレット接続ボタンを作ってみよう!
本日は、こちらに沿って、Solanaのウォレット接続ボタンを作ってみましょう。
1 やってみよう
では、やってみましょう。
1 git clone
まずは、Git clone を行います。
git clone https://github.com/anza-xyz/wallet-adapter.git
![](https://assets.st-note.com/img/1711581483489-VSnzgCOfNe.png?width=800)
2 依存関係のインストール
次に、依存関係をインストールしていきましょう。
cd wallet-adapter
pnpm install
![](https://assets.st-note.com/img/1711581512153-P0rm6JorHS.png?width=800)
3 ビルドの実施
次に、ビルドを行います。
ここは、ある程度の時間がかかります。(10分くらいかかるかも。。)
pnpm run build
![](https://assets.st-note.com/img/1711581529080-GVkT0nQMg1.png?width=800)
4 立ち上げてみよう
準備ができましたので、立ち上げてみましょう。
cd packages/starter/nextjs-starter/
pnpm run dev
![](https://assets.st-note.com/img/1711581559316-pjDMLrWpI6.png?width=800)
では、準備ができましたので、「http://localhost:3000/」に接続してみましょう。
このようになりました。
![](https://assets.st-note.com/img/1711581583056-UU4Krwjg4N.png?width=800)
ボタンを押すと、下のように、モーダルが立ち上がることも確認できました。
![](https://assets.st-note.com/img/1711581602440-SweetsnfOs.png?width=800)
では、以下で、具体的な中身も見てみましょう。
2 ネットワークの設定
まずは、「ConnectionProvider」を使ってネットワークを設定しています。
今回は、devnetに設定しています。
![](https://assets.st-note.com/img/1711573608972-WZqofvDktc.png?width=800)
1 ネットワークの取得
まずは、「WalletAdapterNetwork」から「Devnet」を取得しています。
![](https://assets.st-note.com/img/1711573721088-TPC4jBgu9s.png?width=800)
中身は、このようになっています。
今回は、「Devnet」を取得しています。
![](https://assets.st-note.com/img/1711573926128-pTXfH8HpZY.png?width=800)
2 RPCエンドポイントの取得
ブロックチェーンとやりとりするための、RPCエンドポイントを取得します。
「clusterApiUrl」を用いて、「Devnet」に相当するエンドポイントを取得します。
![](https://assets.st-note.com/img/1711574104761-V7lUY7rtBr.png?width=800)
ちなみに、「clusterApiUrl」は「@solana/web3.js」にあります。
![](https://assets.st-note.com/img/1711574327105-6m7bjDwXTY.png?width=800)
具体的には、こちらで、ネットワークに応じたエンドポイントを取得しています。
![](https://assets.st-note.com/img/1711574390610-FC1lAU7lss.png?width=800)
3 ウォレットの設定について
次に、ウォレットを設定します。
こちらの部分です。検出されたものを表示しています。
![](https://assets.st-note.com/img/1711579900233-yt6FMcbqCw.png?width=800)
なお、こちらのように、標準の実装は自動的になされます。
具体的には、「Mobile Wallet Adapter」と「Solana Wallet Standard」です。
![](https://assets.st-note.com/img/1711574726159-8GGNt3uSVO.png?width=800)
1 Mobile Wallet Adapterについて
まずは、こちらの「Mobile Wallet Adapter」が自動で実装されます。
![](https://assets.st-note.com/img/1711574947225-OFgjYjtWPs.png?width=800)
こちらは、「Solana Mobile」の開発者向けのレポジトリのようです。
![](https://assets.st-note.com/img/1711576455745-HuJk3ItDNM.png?width=800)
2 Solana Wallet Standardについて
こちらは、Solanaブロックチェーンとの互換性を確保するためのリソースを提供しています。
こちらも自動で実装されています。
![](https://assets.st-note.com/img/1711576526191-etkuEH9T0F.png?width=800)
3 ウォレットの設定について
上のウォレットを「WalletProvider」に設定しています。
標準的なものは自動で実装されるため、特定のウォレットを実装したい場合などを除き、追加の処理は不要だと思われます。
![](https://assets.st-note.com/img/1711576639163-rh5G5zCsFv.png?width=800)
4 モーダルの設定について
最後に、モーダル部分を設定しています。
実際には、下のように設定するだけです。
![](https://assets.st-note.com/img/1711576803626-DKnxBWNv8M.png?width=800)
このモーダルについての設定です。
![](https://assets.st-note.com/img/1711579965797-TIlhzdkmkr.png?width=800)
4 設定について
実際の配置は、こちらの「index.tsx」で行われています。
![](https://assets.st-note.com/img/1711578520028-a5MLzrhIfp.png?width=800)
このように、表示することができました。
![](https://assets.st-note.com/img/1711580968512-Iv9TldXw8a.png?width=800)
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊