この記事は、こちらのドキュメントをもとに作成しています。

また、今回使用しているコードは、元のGithubから若干コードを修正しています。（「await」が抜けていると思われた箇所があったため。）

元のGithubはこちらです。

１　チュートリアルを立ち上げてみよう

まずは、立ち上げてみましょう。

１　git clone

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

git clone https://github.com/ytakahashi2020/astar_banana_sdk_tutorial.git

下のようになりました。

２　依存関係を入れる

次に、依存関係を入れていきます。

cd astar_banana_sdk_tutorial
npm install

下のように、依存関係が入りました。

３　立ち上げる

最後に、立ち上げてみましょう。

npm start

このように、無事に立ち上がりました。

２　コードを見てみよう

１　インスタンスの取得

まずは、下のようにして「Banana」インスタンスを取得します。

チェーン情報として、「shibuyaTestnet」を渡していることがわかります。

そして、useEffectが使われ、依存性配列が[]なので、マウント時に一度だけ実行されます。

また、後ほど使用するコントラクトは、こちらを使用しています。

サンプルコードはこちらになります。

ただし、このコントラクトはセキュリティ上の問題があるように見えます。

あくまでもサンプルとしてのご活用をお勧めします。

２　ウォレットの作成

「createWallet」でウォレットを作成しています。

１節で取得したインスタンス（bananaSdkInstance）を用いてウォレットを作っていることがわかります。

実際に見てみましょう。

こちらを選択します。

すると、「Banana Wallet」のページに遷移します。

任意のユーザー名を入れて「Connect」を選択します。

すると、このようにウォレットを作成することができました。

３　ウォレット接続

まずは、インスタンスに対し、「getWalletName」でウォレット名を取得します。

次に、取得したウォレット名を引数として、「connectWallet」を実行しています。

また、今回取得した、「wallet」は下のように「walletInstance」にsetされています。

以降、この「walletInstance」を使っていくことになります。

実際に「Connect Wallet」から接続が確認できます。

４　チェーンIDの取得

ウォレット接続の時に取得した、「walletInstance」を使っていきます。

getSignerで署名者を取得し、そこからチェーンIDを取得します。

下のようになりました。

この81は「Shibuya」のチェーンIDです。

５　ネットワークの取得

ウォレット接続時に取得した、「walletInstance」から「プロバイダー」を取得します。

そこからネットワークを取得しています。

下のように、取得できました。

６　トランザクションの実行

「makeTransaction」でトランザクションを実行しています。

「walletInstance」から署名社を取得し、「sendTransaction」を実行しています。

こちらの「Make transaction」を実行します。

すると、このように実行されました。

トランザクションはこちらになります。

７　メッセージの署名

「signMessage」でメッセージの署名を行っています。

署名者がメッセージに対し、「signBananaMessage」を行っています。

「Sign message」でメッセージの署名ができました。

今回は以上です。