【完全保存版】AstarのWASMのフロント実装について（ウォレット接続・書き込み）
０ はじめに
本日は、WASMのコントラクトを作り、それをフロントエンドと繋ぎ込みます。
この記事では、ウォレット接続・コントラクトの書き込みを中心に説明していきます。
１ コントラクトのデプロイ〜立ち上げ
まずは、git cloneを行います。
git clone https://github.com/ytakahashi2020/wasm_frontend_connect_wallet.git
ちなみに、こちらをgit cloneしていました。
できましたら、コントラクトのデプロイと、フロントエンドの立ち上げを行います。
この流れは、こちらの記事の第１章第２節から第２章の終わりまでと全く同じ流れになるので、こちらをご参照ください。
２ 操作してみよう
１ ウォレット接続
ウォレットの接続の前に、コンソールを表示させます。
右クリックから「検証」を選択
こちらの「Console」を選択します。
これで準備完了です。
こちらの「CONNECT WALLET」ボタンから接続を行います。
すると、このように、ポップアップが立ち上がりますので、承認します。
「my dapp」というdAppsが許可を求めていました。
なお、私の場合は、「Talisman」というウォレットもインストールしていました。
接続を拒否すると、右の赤の部分のように、拒否された旨が表示されました。（ここは参考です）
下のように、表示されました。
「Web3Enable」では、「Polkadot.js」という一つのウォレットが接続されている旨を表しています。
「Web3Accounts」では合計で２つのアカウントが接続されている旨を表しています。（私はPolkadot.jsに２つのアカウントがあります。）
下の部分では、接続しているアカウントのアドレスと、ソース（どのウォレットか）を表示しています。
２ コントラクトの取得について
こちらは、下の記事の第３章第１節をご確認ください。
３ 読み込み関数の実行について（get関数）
こちらは、下の記事の第３章第２節をご確認ください。
４ 書き込み関数の実行について（flip関数）
では、「flip」関数を実行してみましょう。
ポップアップが立ち上がるので、トランザクションを実行します。
しばらくすると、下のように、完了した旨の表示が出ました。
なお、「flip」の前は、下のように、結果は「true」でした。
では、「GET CONTRACT INFORMATION」ボタンを押します。
すると、「true」が反転し、「false」になっていることが確認できました。
４ ソースコードを確認しよう
では、以上の内容のコードを確認してみましょう。
１ ウォレット接続について
まずは、「webEnable」についてです。
ここで、「Polkadot.js」や「Talisman」などの接続可能かのポップアップを表示させます。
「'my dapp'」の部分はdApp名を入れ、ウォレットに許可を求めるときに表示されます。
公式のページとしては、こちらになります。
なお、「web3Enable」は下のように、「@polkadot/extension-dapp」から取得しています。
次に、ユーザーが対応しているウォレットを持っていないか、許可をしなかった場合は、関数を終了させます。
続いて、「web3Accounts」で接続されているウォレットの全てのアカウントを取得します。
例えば、「Polkadot.js」に３つのアカウントがあれば、３つとも取得できます。（もちろん、見えない設定にしていれば、取得できません。）
公式はこちらになります。
次は、取得したアカウントの最初のアカウントを「account」に入れています。
下の部分で、アドレスとウォレットのソース（「Polkadot.js」か「Talisman」かなど）を取得しています。
ここは、参考として、コンソールで確認するためです。
２ コントラクトの接続とGet関数について
こちらについては、下の記事の第４章で解説しております。
３ Flip関数について
では、flip関数を見てみましょう。
下の部分で、「Web3FromSource」を用いて、アカウントからinjectorを取得します。
これは署名の際に用いられます。
こちらになります。
なお、「Web3FromSource」は下のように、「@polkadot/extension-dapp」から取得しています。
ちなみに、使用している場所はこちらです。
injectorから署名者を取得しています。
次に、トランザクションの作成部分を見てみましょう。
下のように、「contract.tx[メソッド名]」としています。
公式はこちらになります。
次に、gasLimitとstorageDepositLimtを設定しています。
この辺りの詳細は、下の記事の第４章第４・５節をご確認ください。
次に、「signAndSend」を確認します。
その名の通り、作成したトランザクションを「署名」し、ブロックチェーンに送付しています。
下のように、署名アカウント（誰が実行）や署名オプションを設定します。
③のコールバック関数も見てみましょう。
statusの値を監視し、ブロックに入ったときに、その旨がコンソールに表示できるようにしています。
今回は以上です。
いいなと思ったら応援しよう！
