![見出し画像](https://assets.st-note.com/production/uploads/images/112220584/rectangle_large_type_2_856a0bcde5d4fea5aad895f23defbc63.png?width=800)
【完全保存版】Astar のWASMコントラクト用のフロントエンドを作ろう!
0 はじめに
今回は、「true」と「false」が入れ替わるだけの「flipper」コントラクトを作成し、その内容をフロントエンドで読み取ります。
なお、「flipper」コントラクトにつきましては、こちらの記事をご確認ください。
1 準備を行う
1 git cloneを行う
まずは、下のように、git cloneを行います。
git clone https://github.com/ytakahashi2020/wasm_front_end_basic.git
![](https://assets.st-note.com/img/1690783208870-VYPpuPmCEV.png?width=800)
2 コントラクトをコンパイルする
次に、コントラクトをコンパイルします。
こちらもご参照ください。
下のように、ディレクトリを移動して、ビルドを行います。
cd wasm_front_end_basic/contracts/flipper_test/contracts/flipper
![](https://assets.st-note.com/img/1690783240960-df8o3yUoDH.png?width=800)
cargo contract build
![](https://assets.st-note.com/img/1690783258178-AwkJAamMZ4.png?width=800)
すると、下のように、コンパイルが完了しました。
デプロイ時には、「flipper.contract」を使用します。
![](https://assets.st-note.com/img/1690783324415-T5dUaskYU1.png?width=800)
3 デプロイする
デプロイはこちらの記事の第1章第3節をご確認ください。
ちなみに、こちらが、できたコントラクトアドレスです。
![](https://assets.st-note.com/img/1690791370233-xy1J83EqxZ.png?width=800)
2 フロントを立ち上げる
1 依存関係のインストール
下のように、フロントエンドのディレクトリに移動し、「yarn install」を行います。
cd ../../../../wasm-test1/
yarn install
![](https://assets.st-note.com/img/1690783386714-JE1nMOa5Fg.png?width=800)
2 立ち上げる
では、立ち上げてみましょう。
yarn dev
![](https://assets.st-note.com/img/1690783399454-z79rLmyZRw.png?width=800)
localhost:3000を確認すると、立ち上がっていることが確認できると思います。
http://localhost:3000/
![](https://assets.st-note.com/img/1690791234245-cWkV9UsFd3.png?width=800)
3 操作してみよう
1 コントラクトの接続
では、コントラクトの接続をしてみましょう。
第1章第3節でできた、コントラクトアドレスを貼り付け、「GetContract」を押します。
下のように、「OK」となりました。
![](https://assets.st-note.com/img/1690788137134-STu3LgBK8h.png?width=800)
2 関数の操作の確認
では、コントラクトの「get」関数で、「flipper」コントラクトの現在の状態を確認します。
「Get Contract Information」ボタンを押すと、「false」が取れました。
![](https://assets.st-note.com/img/1690788278887-dDltCDct78.png?width=800)
次に、第1章第3節で作った「flipper」コントラクトをSubstrateで操作してみましょう。
(フロントで操作するのは、また今度にしようと思います。)
下のように、「flip」関数を実行すると、中身が「true」になるはずです。
![](https://assets.st-note.com/img/1690788262856-EXaZpXLYVj.png?width=800)
下のように、ボタンを押すと、「true」になっていることが確認できました。
![](https://assets.st-note.com/img/1690788167675-GnlmtcaCYk.png?width=800)
4 ソースコードを確認しよう
では、フロントエンドのコードを確認してみましょう。
1 apiの取得
まず、プロバイダーを取得し、それをもとに、apiを取得しています。
この部分は毎回同じなので、このまま覚えてしまってもいいかもしれません。
![](https://assets.st-note.com/img/1690789609805-E8TN29QNJJ.png?width=800)
なお、具体的には、こちらのPolkadot{.js}の公式に記載されています。
![](https://assets.st-note.com/img/1690792873614-6GYKN6FhO2.png?width=800)
2 コントラクトの取得
次は、コントラクトの取得です。
「ContractPromise」を使い、必要なのは、①api、②メタデータ、③コントラクトアドレスの3つです。
![](https://assets.st-note.com/img/1690789685626-0TBMi2akQA.png?width=800)
なお、メタデータは第1章第2節でコンパイルを行った時にできた、「flipper.json」が該当しています。
![](https://assets.st-note.com/img/1690789894402-Ay4J56TsSX.png?width=800)
なお、公式の該当箇所はこちらです。
これにより、コントラクトのデータの読み取りと、トランザクションの実行が可能になります。
![](https://assets.st-note.com/img/1690793355024-TLXdku0HAH.png?width=800)
3 コントラクトのデータの取得
では、どうやって、データを取得しているのかを確認しましょう。
下のように、「contract.query.['関数名']」で取得しています。
ここでは、「flipper」コントラクトのget関数を使っています。
![](https://assets.st-note.com/img/1690790379534-en26OwtnAX.png?width=800)
次に、中身の確認です。
①で誰が行うのかを指定し、②でgasLimitなどを指定しています。
③は今回ありませんが、関数に必要な引数があれば、こちらに入ります。
![](https://assets.st-note.com/img/1690794037397-7Jx4pqxdrS.png?width=800)
なお、get関数の場合は、ガスが消費されないため、①の誰が行うかは重要ではありません。
そのため、下のように、空文字でも動きます。
![](https://assets.st-note.com/img/1690794180068-8wG3z1k4wb.png?width=800)
4 gasLimitについて
次は、gasLimitを見てみましょう。
まずは、大まかには、「WeightV2」というタイプで、ガスの上限を定めています。
![](https://assets.st-note.com/img/1690841177053-ogrshUJFxC.png?width=800)
そして、もう少し具体的に見ると、「api?.registry.createType」で「WeightV2」というタイプのインスタンスを作成しています。
![](https://assets.st-note.com/img/1690841208022-mWJNnBXOuB.png?width=800)
そして、この「WeightV2」の構成としては、「refTime」と「proofSize」で構成されています。
![](https://assets.st-note.com/img/1690841987984-ctRyz96u2p.png?width=800)
つまり、このようなイメージでした。
![](https://assets.st-note.com/img/1690842149171-pGgYXSOhg3.png?width=800)
ちなみに、「RefTime Limit」はトランザクションに要するとされる最大時間です。
![](https://assets.st-note.com/img/1695694443923-ZFHsNKtM19.png?width=800)
一方、「ProofSize Limit」はトランザクションで使用される、最大のStorageスペースの容量です。
![](https://assets.st-note.com/img/1695694471021-VYOTItR4Rk.png?width=800)
なお、今回は、こちらの値が設定されています。
![](https://assets.st-note.com/img/1690842923902-C7vFA6LtRJ.png?width=800)
ちなみに、Polkadot.jsの公式は昔のものになっておりますので、ご注意ください。
![](https://assets.st-note.com/img/1695695346544-8Odi3UrpEs.png?width=800)
数字が大きいので、BNを使用しています。
また、「isub」を用いて、「5_000_000_000_000」から「BN_ONE(1)」を引いています。
5 StorageDepositLimitについて
次は、StorageDepositLimitについてです。
こちらは、データの保存時などに使用する、ストレージにかかるガスの上限を表します。
![](https://assets.st-note.com/img/1695694641263-WXpC3gACaE.png?width=800)
これにより、想定以上にガス代がかかることを防ぎます。
![](https://assets.st-note.com/img/1690790435456-vD7IYnvrSq.png?width=800)
特に、上限を指定しない場合は、下のように、「null」を設定します。
![](https://assets.st-note.com/img/1690842864547-dYNbMY1NxC.png?width=800)
なお、取得した値は、このように、セットしています。
![](https://assets.st-note.com/img/1690790450884-X4ZKkOVDQO.png?width=800)
追記 コントラクトのコンパイルがうまくいかないときは
コントラクトのコンパイルがうまくいかないものの、フロントエンドとの繋ぎ込みの部分だけでもやりたいケースもあると思います。
1 フォルダの作成
まずは、「flipper」フォルダに「target」、「ink」フォルダを下のように作成して下さい。
フォルダ名を間違わないようにご注意ください。
![](https://assets.st-note.com/img/1695628610431-JIaxW4Miqg.png?width=800)
2 ファイルのダウンロード
次に、こちらのGithubの下の部分から、この3つのファイルをダウンロードします。
![](https://assets.st-note.com/img/1695628666324-reZm4im2xX.png?width=800)
3 ファイルの設定
最後に、下のように、ファイルを設定します。
また、デプロイ時には、こちらの「flipper.contract」を使用することでデプロイが可能です。
![](https://assets.st-note.com/img/1695628825619-N6r41qAJax.png?width=800)
今回は以上です。
サポートをしていただけたらすごく嬉しいです😄 いただけたサポートを励みに、これからもコツコツ頑張っていきます😊