🍣

swankyを使用してTypescriptの型生成を行なう

2023/02/01に公開

自動生成

Swankyとは

swankyはAstar Networkが開発した、WASMを使用してastar上で動くdappsを作るためのフレームワークです。EVMで例えるとHardhatやtruffleと同じようなものです。

実際に使ってみて便利だと感じた点は以下になります。

nodeを別で用意する必要がない
コンパイルもテスト実行も出来る
tsの型生成が出来る

特にtypescriptの型生成を自動で行ってくれるのが嬉しかったので、やり方を記事にまとめることにしました。ちなみにスクラップにもまとめてあります。

なぜ型生成できたのか

コントラクトのクエリをフロント側から叩く際にtypescriptだと型があると便利です。
普通は型の自動生成を使うので、探してみたのですが良いものが見つからない状態でした。そのため、自分で型定義するか、anyのまま行なうしか無く非常に面倒でした。

solidityからの自動生成は有名どころのtypeChainがあるのですが、ink!対応はしていません。
rustから型生成するrs-ts等試してみたのですが、ink!対応ではないため上手く行かず。。

一応、polkadot公式にもそれっぽい記事はあるのですが、試してみたところ動きませんでした。

もうink!の型自動生成は無理だと諦めていたところだったので、今回型自動生成が実装されており、非常に驚きました。

どうやら、swankyではsupercolony-netが開発しているtypechain-polkadotを内部で使用しているようです。

実際に他のプロジェクトで作ったwasmコントラクトから型生成してみたのですが、無事生成されました。これは見つけられなかったです。すごい、開発者の方ありがとうございます。

swankyでTSの型生成を行なう手順

swanky-cliとswanky nodeがあるのですが、swanky-cliでnodeも使えるのでcliのみで進めます。また、ついでにpolkadot.js/appにデプロイするところまで綴っておきます。

swanky-cliインストール

$ npm i -g @astar-network/swanky-cli@latest

projectを作成する

swanky nodeはローカルに落としてきているのならnoでも良いです。ただ、yesにしておけばswanky node startでnodeを動かせるのでそちらの方が楽かと思います。

$ swanky init yourProject
? Which contract language should we use? ink
? Which contract template should we use initially? flipper
? What should we name your initial contract? flipper
? What is your name? yourname
? What is your email? yourname@mail.com
? Do you want to download Swanky node? Yes

今回はデフォルトのままで進めます。

コントラクトをコンパイルする

./contract/配下にコンパイルされたコントラクトが出力されます。

$ swanky contract compile CONTRACTNAME

この際、./test/yourContract/typedContract/配下にtypescriptの型定義が生成されます。自動で生成されるのですごく便利です。
TS型生成

このようにして簡単に読み込むことが出来ます。便利ですね。
また、しっかり作成したContractの中のクエリにも型定義がなされており、非常に開発しやすくなっていました。

import YourContract from "../typed_contracts/contracts/your_contract"

const typed_contract = new YourContract(
    contract.address.toString(), 
    signer, 
    contract.api
);

swanky nodeを起動

今まではastar-collatorをダウンロードして別で立ち上げないといけなかったのですが、コマンド一つで済みます。

$ swanky node start

起動したnodeにコントラクトをデプロイする

githubを見ると以下のように書かれていました。
swanky-cli github
./contract/配下にあるデプロイしたいコントラクトを指定し、gas代とデプロイアカウントを指定しているようです。
デプロイ後はコントラクトアドレスが表示されます。

$ swanky contract deploy flipper --account alice --gas 1000000000 --args true
~~~~~~~~~~~~~~~~~snip
Contract deployed!
Contract address: AAAyourContractAddressZZZ

polkadot.js/appで動作確認

polkadot.js/appのdevelopmentに移動して、既存のコントラクトを追加するよりコントラクトを追加します。
先ほど得たコントラクトアドレスを入力して、./contract/yourContract/target/ink/metadata.jsonをアップロードすれば、コントラクトがデプロイされていることを確認できます。

最後に

詳しい使い方については公式のDocを見てください。

現在、新卒の仕事でGoをひいこら言いながら書いているのですが、web3の勉強もがんばります。
皆さんと一緒にプログラミング学習頑張っていきたいです。今後ともよろしくお願いします。