![見出し画像](https://assets.st-note.com/production/uploads/images/109441392/rectangle_large_type_2_de4687999d49f3c5f8f869ad62480fba.png?width=800)
【完全保存版】 Banana SDKを使って、AstarのAccount Abstractionを作ってみよう!
この記事は、こちらのドキュメントをもとに作成しています。
また、今回使用しているコードは、元のGithubから若干コードを修正しています。(「await」が抜けていると思われた箇所があったため。)
元のGithubはこちらです。
1 チュートリアルを立ち上げてみよう
まずは、立ち上げてみましょう。
1 git clone
まずは、git cloneを行います。
git clone https://github.com/ytakahashi2020/astar_banana_sdk_tutorial.git
下のようになりました。
![](https://assets.st-note.com/img/1687949591075-fnIYQluEHq.png?width=800)
2 依存関係を入れる
次に、依存関係を入れていきます。
cd astar_banana_sdk_tutorial
npm install
下のように、依存関係が入りました。
![](https://assets.st-note.com/img/1687949628329-iHlxkr2vMY.png?width=800)
3 立ち上げる
最後に、立ち上げてみましょう。
npm start
このように、無事に立ち上がりました。
![](https://assets.st-note.com/img/1687949797622-akc4zmWJdk.png?width=800)
2 コードを見てみよう
1 インスタンスの取得
まずは、下のようにして「Banana」インスタンスを取得します。
チェーン情報として、「shibuyaTestnet」を渡していることがわかります。
![](https://assets.st-note.com/img/1687937261844-oRZO87I7yI.png?width=800)
そして、useEffectが使われ、依存性配列が[]なので、マウント時に一度だけ実行されます。
![](https://assets.st-note.com/img/1687950484591-wCeXJfvOgZ.png?width=800)
また、後ほど使用するコントラクトは、こちらを使用しています。
![](https://assets.st-note.com/img/1687988560679-CGx4t7L1Zd.png?width=800)
サンプルコードはこちらになります。
![](https://assets.st-note.com/img/1687988736999-zOso4vLbHG.png?width=800)
ただし、このコントラクトはセキュリティ上の問題があるように見えます。
あくまでもサンプルとしてのご活用をお勧めします。
2 ウォレットの作成
「createWallet」でウォレットを作成しています。
1節で取得したインスタンス(bananaSdkInstance)を用いてウォレットを作っていることがわかります。
![](https://assets.st-note.com/img/1687937682831-BVyjY4wufd.png?width=800)
実際に見てみましょう。
こちらを選択します。
![](https://assets.st-note.com/img/1687937921032-Eqd9f9WVYI.png?width=800)
すると、「Banana Wallet」のページに遷移します。
任意のユーザー名を入れて「Connect」を選択します。
![](https://assets.st-note.com/img/1687937840122-54et9usTqT.png?width=800)
すると、このようにウォレットを作成することができました。
![](https://assets.st-note.com/img/1687937870483-vgO7fFPV9X.png?width=800)
3 ウォレット接続
まずは、インスタンスに対し、「getWalletName」でウォレット名を取得します。
次に、取得したウォレット名を引数として、「connectWallet」を実行しています。
![](https://assets.st-note.com/img/1687950851284-tNTYGpjwbv.png?width=800)
また、今回取得した、「wallet」は下のように「walletInstance」にsetされています。
以降、この「walletInstance」を使っていくことになります。
![](https://assets.st-note.com/img/1687951098303-Wk5lQp0zdV.png?width=800)
実際に「Connect Wallet」から接続が確認できます。
![](https://assets.st-note.com/img/1687938459657-8AGKEhBmpH.png?width=800)
4 チェーンIDの取得
ウォレット接続の時に取得した、「walletInstance」を使っていきます。
getSignerで署名者を取得し、そこからチェーンIDを取得します。
![](https://assets.st-note.com/img/1687938645801-h4i33DXvLi.png?width=800)
下のようになりました。
この81は「Shibuya」のチェーンIDです。
![](https://assets.st-note.com/img/1687938743221-bpfMscYzoU.png?width=800)
5 ネットワークの取得
ウォレット接続時に取得した、「walletInstance」から「プロバイダー」を取得します。
そこからネットワークを取得しています。
![](https://assets.st-note.com/img/1687938855774-Ediq7oamYs.png?width=800)
下のように、取得できました。
![](https://assets.st-note.com/img/1687951459965-5RALVmhGQp.png?width=800)
6 トランザクションの実行
こちらの実行前に、ウォレットにガス代として「Shibuya」を入れる必要があります。
![](https://assets.st-note.com/img/1687951851752-WUemmFIGym.png?width=800)
「makeTransaction」でトランザクションを実行しています。
「walletInstance」から署名社を取得し、「sendTransaction」を実行しています。
![](https://assets.st-note.com/img/1687948710418-95Lh3t9yNC.png?width=800)
こちらの「Make transaction」を実行します。
![](https://assets.st-note.com/img/1687948854574-wlmBx2jPju.png?width=800)
すると、このように実行されました。
![](https://assets.st-note.com/img/1687948930172-HWSJ6S0OkH.png?width=800)
トランザクションはこちらになります。
現時点では、私は読み解くことができませんでした。
Fromの「0x48…b5」がバンドラーアドレス
Toの「0x5F..89」はエントリーポイントコントラクト
であると当初考えました。
しかし、「0x5F..89」はコントラクトアドレスでなかったので、エントリーポイントではないと考えています。
ここはわかり次第、追記します。
![](https://assets.st-note.com/img/1687949061848-JuFt5rSPuG.png?width=800)
7 メッセージの署名
「signMessage」でメッセージの署名を行っています。
署名者がメッセージに対し、「signBananaMessage」を行っています。
![](https://assets.st-note.com/img/1687949172605-oJVQz9MT2z.png?width=800)
「Sign message」でメッセージの署名ができました。
![](https://assets.st-note.com/img/1687949262066-DXmCBpATdi.png?width=800)
今回は以上です。
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊