【完全保存版】Astar のWASMコントラクト用のフロントエンドを作ろう！
０ はじめに
今回は、「true」と「false」が入れ替わるだけの「flipper」コントラクトを作成し、その内容をフロントエンドで読み取ります。
なお、「flipper」コントラクトにつきましては、こちらの記事をご確認ください。
１ 準備を行う
１ git cloneを行う
まずは、下のように、git cloneを行います。
git clone https://github.com/ytakahashi2020/wasm_front_end_basic.git
２ コントラクトをコンパイルする
次に、コントラクトをコンパイルします。
こちらもご参照ください。
下のように、ディレクトリを移動して、ビルドを行います。
cd wasm_front_end_basic/contracts/flipper_test/contracts/flipper 
cargo contract build
すると、下のように、コンパイルが完了しました。
デプロイ時には、「flipper.contract」を使用します。
３ デプロイする
デプロイはこちらの記事の第１章第３節をご確認ください。
ちなみに、こちらが、できたコントラクトアドレスです。
２ フロントを立ち上げる
１ 依存関係のインストール
下のように、フロントエンドのディレクトリに移動し、「yarn install」を行います。
cd ../../../../wasm-test1/
yarn install
２ 立ち上げる
では、立ち上げてみましょう。
yarn dev
localhost:3000を確認すると、立ち上がっていることが確認できると思います。
http://localhost:3000/
３ 操作してみよう
１ コントラクトの接続
では、コントラクトの接続をしてみましょう。
第１章第３節でできた、コントラクトアドレスを貼り付け、「GetContract」を押します。
下のように、「OK」となりました。
２ 関数の操作の確認
では、コントラクトの「get」関数で、「flipper」コントラクトの現在の状態を確認します。
「Get Contract Information」ボタンを押すと、「false」が取れました。
次に、第１章第３節で作った「flipper」コントラクトをSubstrateで操作してみましょう。
（フロントで操作するのは、また今度にしようと思います。）
下のように、「flip」関数を実行すると、中身が「true」になるはずです。
下のように、ボタンを押すと、「true」になっていることが確認できました。
４ ソースコードを確認しよう
では、フロントエンドのコードを確認してみましょう。
１ apiの取得
まず、プロバイダーを取得し、それをもとに、apiを取得しています。
この部分は毎回同じなので、このまま覚えてしまってもいいかもしれません。
なお、具体的には、こちらのPolkadot{.js}の公式に記載されています。
２ コントラクトの取得
次は、コントラクトの取得です。
「ContractPromise」を使い、必要なのは、①api、②メタデータ、③コントラクトアドレスの３つです。
なお、メタデータは第１章第２節でコンパイルを行った時にできた、「flipper.json」が該当しています。
なお、公式の該当箇所はこちらです。
これにより、コントラクトのデータの読み取りと、トランザクションの実行が可能になります。
３ コントラクトのデータの取得
では、どうやって、データを取得しているのかを確認しましょう。
下のように、「contract.query.['関数名']」で取得しています。
ここでは、「flipper」コントラクトのget関数を使っています。
次に、中身の確認です。
①で誰が行うのかを指定し、②でgasLimitなどを指定しています。
③は今回ありませんが、関数に必要な引数があれば、こちらに入ります。
なお、get関数の場合は、ガスが消費されないため、①の誰が行うかは重要ではありません。
そのため、下のように、空文字でも動きます。
４ gasLimitについて
次は、gasLimitを見てみましょう。
まずは、大まかには、「WeightV2」というタイプで、ガスの上限を定めています。
そして、もう少し具体的に見ると、「api?.registry.createType」で「WeightV2」というタイプのインスタンスを作成しています。
そして、この「WeightV2」の構成としては、「refTime」と「proofSize」で構成されています。
つまり、このようなイメージでした。
ちなみに、「RefTime Limit」はトランザクションに要するとされる最大時間です。
一方、「ProofSize Limit」はトランザクションで使用される、最大のStorageスペースの容量です。
なお、今回は、こちらの値が設定されています。
ちなみに、Polkadot.jsの公式は昔のものになっておりますので、ご注意ください。
数字が大きいので、BNを使用しています。
また、「isub」を用いて、「5_000_000_000_000」から「BN_ONE（1）」を引いています。
５ StorageDepositLimitについて
次は、StorageDepositLimitについてです。
こちらは、データの保存時などに使用する、ストレージにかかるガスの上限を表します。
これにより、想定以上にガス代がかかることを防ぎます。
特に、上限を指定しない場合は、下のように、「null」を設定します。
なお、取得した値は、このように、セットしています。
追記 コントラクトのコンパイルがうまくいかないときは
コントラクトのコンパイルがうまくいかないものの、フロントエンドとの繋ぎ込みの部分だけでもやりたいケースもあると思います。
１ フォルダの作成
まずは、「flipper」フォルダに「target」、「ink」フォルダを下のように作成して下さい。
フォルダ名を間違わないようにご注意ください。
２ ファイルのダウンロード
次に、こちらのGithubの下の部分から、この３つのファイルをダウンロードします。
３ ファイルの設定
最後に、下のように、ファイルを設定します。
また、デプロイ時には、こちらの「flipper.contract」を使用することでデプロイが可能です。
今回は以上です。
いいなと思ったら応援しよう！
