![見出し画像](https://assets.st-note.com/production/uploads/images/112307846/rectangle_large_type_2_eb0ddeee1207ab4deb63580ae2b4ec68.png?width=800)
【完全保存版】AstarのWASMのフロント実装について(ウォレット接続・書き込み)
0 はじめに
本日は、WASMのコントラクトを作り、それをフロントエンドと繋ぎ込みます。
この記事では、ウォレット接続・コントラクトの書き込みを中心に説明していきます。
1 コントラクトのデプロイ〜立ち上げ
まずは、git cloneを行います。
git clone https://github.com/ytakahashi2020/wasm_frontend_connect_wallet.git
![](https://assets.st-note.com/img/1690930034519-irR7IAsMoe.png?width=800)
ちなみに、こちらをgit cloneしていました。
できましたら、コントラクトのデプロイと、フロントエンドの立ち上げを行います。
この流れは、こちらの記事の第1章第2節から第2章の終わりまでと全く同じ流れになるので、こちらをご参照ください。
2 操作してみよう
1 ウォレット接続
ウォレットの接続の前に、コンソールを表示させます。
右クリックから「検証」を選択
![](https://assets.st-note.com/img/1690931024602-1NccAq88g0.png?width=800)
こちらの「Console」を選択します。
これで準備完了です。
![](https://assets.st-note.com/img/1690931050502-OQgGOL5akl.png?width=800)
こちらの「CONNECT WALLET」ボタンから接続を行います。
![](https://assets.st-note.com/img/1690931720451-saT19L1tqp.png?width=800)
すると、このように、ポップアップが立ち上がりますので、承認します。
「my dapp」というdAppsが許可を求めていました。
![](https://assets.st-note.com/img/1690931137412-KOTWAYrVAh.png?width=800)
なお、私の場合は、「Talisman」というウォレットもインストールしていました。
接続を拒否すると、右の赤の部分のように、拒否された旨が表示されました。(ここは参考です)
![](https://assets.st-note.com/img/1690932066654-GDOVvmYA4k.png?width=800)
下のように、表示されました。
「Web3Enable」では、「Polkadot.js」という一つのウォレットが接続されている旨を表しています。
「Web3Accounts」では合計で2つのアカウントが接続されている旨を表しています。(私はPolkadot.jsに2つのアカウントがあります。)
![](https://assets.st-note.com/img/1690931188292-obp042LGmc.png?width=800)
下の部分では、接続しているアカウントのアドレスと、ソース(どのウォレットか)を表示しています。
![](https://assets.st-note.com/img/1690931222189-s9dp5rYtr4.png?width=800)
2 コントラクトの取得について
こちらは、下の記事の第3章第1節をご確認ください。
3 読み込み関数の実行について(get関数)
こちらは、下の記事の第3章第2節をご確認ください。
4 書き込み関数の実行について(flip関数)
では、「flip」関数を実行してみましょう。
![](https://assets.st-note.com/img/1690931263522-KMxmbQGlCL.png?width=800)
ポップアップが立ち上がるので、トランザクションを実行します。
![](https://assets.st-note.com/img/1690931314218-CMLVxqvkVc.png?width=800)
しばらくすると、下のように、完了した旨の表示が出ました。
なお、「flip」の前は、下のように、結果は「true」でした。
![](https://assets.st-note.com/img/1690931491412-jGiKY0gabX.png?width=800)
では、「GET CONTRACT INFORMATION」ボタンを押します。
すると、「true」が反転し、「false」になっていることが確認できました。
![](https://assets.st-note.com/img/1690931445004-FPl74zTRDa.png?width=800)
4 ソースコードを確認しよう
では、以上の内容のコードを確認してみましょう。
1 ウォレット接続について
まずは、「webEnable」についてです。
ここで、「Polkadot.js」や「Talisman」などの接続可能かのポップアップを表示させます。
「'my dapp'」の部分はdApp名を入れ、ウォレットに許可を求めるときに表示されます。
![](https://assets.st-note.com/img/1690880163956-sa2fJWCSO8.png?width=800)
公式のページとしては、こちらになります。
![](https://assets.st-note.com/img/1695695692784-gc7NESKSOh.png?width=800)
なお、「web3Enable」は下のように、「@polkadot/extension-dapp」から取得しています。
![](https://assets.st-note.com/img/1690880353639-UScV6sfDZX.png?width=800)
次に、ユーザーが対応しているウォレットを持っていないか、許可をしなかった場合は、関数を終了させます。
![](https://assets.st-note.com/img/1690880187627-ckOnz2jEYm.png?width=800)
続いて、「web3Accounts」で接続されているウォレットの全てのアカウントを取得します。
例えば、「Polkadot.js」に3つのアカウントがあれば、3つとも取得できます。(もちろん、見えない設定にしていれば、取得できません。)
![](https://assets.st-note.com/img/1690880204367-6yVQkNywJ1.png?width=800)
公式はこちらになります。
![](https://assets.st-note.com/img/1695695829656-OQRThInClk.png?width=800)
次は、取得したアカウントの最初のアカウントを「account」に入れています。
![](https://assets.st-note.com/img/1690880231203-gT9T7tIfz9.png?width=800)
下の部分で、アドレスとウォレットのソース(「Polkadot.js」か「Talisman」かなど)を取得しています。
ここは、参考として、コンソールで確認するためです。
![](https://assets.st-note.com/img/1690880246129-ESdmnCZ3Qx.png?width=800)
2 コントラクトの接続とGet関数について
こちらについては、下の記事の第4章で解説しております。
3 Flip関数について
では、flip関数を見てみましょう。
下の部分で、「Web3FromSource」を用いて、アカウントからinjectorを取得します。
これは署名の際に用いられます。
![](https://assets.st-note.com/img/1690858282256-47uSLxohKz.png?width=800)
こちらになります。
![](https://assets.st-note.com/img/1695695970203-q2veEQmvmw.png?width=800)
なお、「Web3FromSource」は下のように、「@polkadot/extension-dapp」から取得しています。
![](https://assets.st-note.com/img/1690858549187-D61lCHVtQr.png?width=800)
ちなみに、使用している場所はこちらです。
injectorから署名者を取得しています。
![](https://assets.st-note.com/img/1690858678874-hSieMSkO20.png?width=800)
次に、トランザクションの作成部分を見てみましょう。
下のように、「contract.tx[メソッド名]」としています。
![](https://assets.st-note.com/img/1690868690633-jCoyLCvB7K.png?width=800)
公式はこちらになります。
![](https://assets.st-note.com/img/1690868804936-cxgrzwKbzT.png?width=800)
次に、gasLimitとstorageDepositLimtを設定しています。
![](https://assets.st-note.com/img/1690868870964-54eX6WdWcv.png?width=800)
この辺りの詳細は、下の記事の第4章第4・5節をご確認ください。
次に、「signAndSend」を確認します。
その名の通り、作成したトランザクションを「署名」し、ブロックチェーンに送付しています。
下のように、署名アカウント(誰が実行)や署名オプションを設定します。
![](https://assets.st-note.com/img/1690869598159-n8ae6LXX9z.png?width=800)
③のコールバック関数も見てみましょう。
statusの値を監視し、ブロックに入ったときに、その旨がコンソールに表示できるようにしています。
![](https://assets.st-note.com/img/1690869621419-r1AsWFniff.png?width=800)
今回は以上です。
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊