Zenn
😎

便利な直コンツールを作った

2022/10/07に公開
Solidity
Ethereum
Web3
tech

コントラクトを叩く際にいちいちVerifyしたりスクリプトを書くのが面倒なので、シンプルなコントラクト直叩きツールを作りました。
せっかくなので一般にも公開しようと思い、使い方などをまとめて紹介します。

制作物

https://contract-tester.xyz/
https://github.com/inaridiy/contract-tester

機能

  1. ABIから直コンUIを生成
  2. タグで管理することで複数のコントラクト同時展開
  3. ABIなどの情報の永続化
  4. 各種ByteCodeのエンコード、デコード
  5. コントラクトなどのスクリプトを実行
  6. コントラクトの内容の推測
  7. 読み込んだコントラクトなどのシェア

注意点

チェーンを切り替えた場合はページを再読み込みしてください。

使い方

コントラクトの読み込み

  1. Tagに任意の名前を入力
  2. Contract Addressにコントラクトのアドレスを入力
  3. Contract AbiにコントラクトABIのJSONをペースト
  4. 右上のConnectWalletをクリックしてサイトと接続
  5. Loadボタンをクリックしてコントラクトを読み込む
  6. 直コンUIが生成される

コントラクトの読み込み#2

オンチェーンに展開されているバイトコードからも直コンUIを生成できる
0. 右上のConnectWalletをクリックしてサイトと接続

  1. 叩きたいコントラクトがデプロイされているチェーンに切り替える
  2. Tagに任意の名前を入力
  3. Contract Addressにコントラクトのアドレスを入力
  4. Loadボタンをクリックしてコントラクトを読み込む
  5. 直コンUIが生成される
    対象のコントラクトがProxyコントラクトの場合はProxyの直コンUIが生成されてしまう。
    それを回避するにはRead beyond the Proxyにチェックを踏んでください。
    あくまで推測なので正確ではない場合があります。

コントラクトの追加読み込み

  1. タグ名を書き換え
  2. その他パラメータを書き換え
  3. Loadボタンをクリック
  4. 下側のタブに新しくタグが追加され、コントラクトを切り替えれる

コントラクトを叩く

1.　生成された直コンUIからいい感じに叩く

バイトコード関係

  1. コントラクトを読み込んでおく
  2. Byte Date Toolタブの上側から対象の関数、イベントを選ぶ
  3. 対象の何を扱うかを次で選ぶ
  4. バイトコードを入力する
  5. 一番下のボタンを押す

スクリプト関係

  1. コントラクトを読み込んでおく
  2. Ethers Playgroundタブでコードを書く
  3. Runを押して実行
    実行環境内ではethersとWeb3Providerとcontractが挿入されているので、柔軟なスクリプトを素早く実行できます。
    console.logのみラップしたものにさし変わってるので、console.logの出力は下側に表示されます

スペースのシェア

読み込んでいるコントラクトやコードを保存したり共有リンクを発行したりできる。

  1. コントラクトを読み込んでおく
  2. 右上のメニューバーをクリック
  3. Share This Spaceをクリック
  4. 共有リンクが生成される

終わりに

今後も僕の気まぐれで機能が増えていくと思います。
もし、追加機能の要望などありましたら、GithubでISSUEなりPRなりください

Discussion