０　はじめに

今回は、「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」を使用することでデプロイが可能です。

今回は以上です。