💎

Remixを使ってJPYCスマートコントラクト貯金箱をPolygonにデプロイする

5 min read 1

jpyc日本円ハッカソンに参加した時にRemix(https://remix.ethereum.org/)の使い方を教えて貰いました。RemixはEthereum IDEで、面倒な環境構築やエラーに悩まされることなく、Polygon NetworkにDappsをデプロイすることができます。

今回はなんでもトークンさん(@NandemoToken)に教えてもらったこともあり、なんでもさんのJPYCスマートコントラクト貯金箱をベースに説明します。

https://github.com/nandemotoken/JPYC_examples/blob/gh-pages/JPYC_example1_moneybox.sol

前提

  • Metamaskが入っている
  • Polygon Network やERC20などブロックチェーンの基礎的なことが分かっている
  • Maticを持っている(デプロイ時のガス代)

PolygonというのはEthereumのLayer2 Solutionですね。Ethereumを拡張するブロックチェーン。そのPolygonのトークンがMATICです。もしHiDEなどで投げ銭でJPYCをゲットしてて、「Polygon Network のJPYCは持ってるけどMATICは持ってないよー」という方はこちらの方法でJPYC→MATICにするとお得に交換できるようです(誤解されやすいですが、同じJPYCでもEthereum、Polygon、BSCとチェーンが違えば別物です)。

https://hide.ac/articles/KLab8twBb

画面説明


デフォルトでは file explorers タブにいて、default_workspaceが選択されています。左側のRemixのロゴの下に並ぶタブは全部で4つ。

  • file explorers
  • Solidity Compiler
  • Deploy & run transactions
  • Plugin Manager

コードを書いて、コンパイルして、デプロイ&実際にアプリの処理を試す(貯金箱からお金を引き出す等)場所ということですね。Plugin Manager は必要がない限り使いません。

貯金箱のコードをコピペ


基本的にSolidityのコードはcontracts配下に置くようです。contracts配下にmoneybox.solファイルを作成し、上記GitHubリポジトリのなんでもさんのmoneyboxのコードをコピペします。

コンパイル

Solidty Compiler タブに移り、Compile moneybox.solを押します。設定はデフォルトのままでOK.成功すると Solidty Compiler タブにチェックマークが付き、Contract(Dappsのこと)が生成されます。このとき、IERC20とJPYC_Exampleの2つのContractが生成されていることがわかります。

これは Solidty Compiler が、Solidityのコードをもとに自動的に生成しているようで、IERC20というのはERC20規格を読み込むため何からしく、よくわからないので(おい)一旦無視しましょう。

File exploeres タブに戻ってみると、contracts配下にartifactsフォルダが出来ており、2つのContractに紐づくjsonファイルが生成されています。

これ以降はJPYC_Example Contractのみを使います。

デプロイ

Deploy & run transactions タブに移動します。

①ENVIROMENT を injected Web3 に変更
初期では Javascript VM というローカル環境に構築したブロックチェーンにデプロイする設定になっているので、Polygon Networkにデプロイ時のするため injected Web3 に変えます。

②CONTRACTをJPYC_Exampleに変更

上記①②ができたら、Deployボタンを押すとMetamaskが起動します。

Deployに必要なMATICが表示されるので確認ボタンを押します。

しばらくすると下のコンソールに緑のチェックマークがついたログが流れたらDeploy成功です。

また左下のDeployed ContractsにDeploy済みのContract(Dapps)が追加されるはずです。分かりにくいですが矢印(>)を押すと展開され、貯金箱Contractに実装されたメソッド(スマートコントラクト)を呼ぶボタンが表示されているはずです。

Contract名(JPYC_Example)の横に表示されているのは、Polygon上のContractのアドレスです。

※たまにDeployed Contractsに何も表示されない場合もあるので、その際はMetamaskのアクティビティを見て、成功しているのならそのpolygonscan上にToとして表示されているContractのアドレスを、「At address」のフィールドに入れてやることで直接ContractをDeployed Contractsに追加することも可能です。

Run Transaction

貯金する

このContractでは貯金箱の総額の表示や引き出しなどのスマートコントラクトが実行(Run Transaction)できますが、Deploy直後は当然1JPYCも入っていません。

そこでMetamaskでこのContract宛にJPYCを送ってあげます(gweiは10くらいが承認が早いです)。

Transactionの承認が終わって(Metamaskで確認できるし下のコンソールにも出る)、もう一度jpyAmmountボタンを押すとたしかに1JPYCを送金できていることがわかります。

引き出す

このContractでは貯金箱からの送金を許可してからしか引き出せない仕様になってます。

まずapproveJpycFromContractボタンを押してMetamaskが起動し、Transactionを実行します。これは送金を許可するということをブロックチェーン上に記録するためのTransactionです。

これがpolygon上で承認されたら、次にwithdraw_jpycボタンを押し、再度Metamaskを起動して今度は引き出しのTransactionを実行します。

これで貯金箱の引き出しができました。

ローカルファイルとremixを同期

remixdというのを使います。手順はドキュメントの通りです。

https://remix-ide.readthedocs.io/en/latest/remixd.html

が僕みたいにせっかちな方のために答えだけ。

npm install -g @remix-project/remixd
remixd -s /moneybox-apps --remix-ide https://remix.ethereum.org

pathは絶対パス。

この状態でremix.ethereumのFile exploeresを開きWorkspacesで「Connect to localhost」を選択するとローカルファイルと同期されます。

npm run devとかでローカルサーバーを立ち上げてたりすると接続が上手く行かないことが多い。

その後

僕はPolygonというブロックチェーン上に初めて自分のContract(Dapps)をデプロイできただけでちょっと感動したのですが、実際このままでは誰にも見つけて貰えないどころか、RemixにわざわざContractを貼り付けてDeployed Contractsに追加しないと引き出しもできません。

だからこそReactやVueでフロントエンドを作り、web3.jsかethers.jsを使ってpolygon上のContractと通信できるようにしないといけないのですが、中々これが難しい。GanacheやTruffleというかなり前からあるEthereum開発のツール郡はあるのですが、ローカル開発するためのものだったり、Getting Started通りやってもエラーが出たりと初心者には難しい。

https://baasinfo.net/?p=3331#outline__2

こっちのRopstenテストネットワークに Hello world 的なContractをデプロイし、Next.jsから操作するスターターは動いたけど、PolygonのContractと通信したり、infraというまた新しいツールが出てきたりとカスタマイズは難しい。

https://github.com/tomhirst/solidity-nextjs-starter

シンプルに今回つくった貯金箱のデータを表示して、ボタンぽちぽちでMetamask起動して操作できる最小限のNext.jsアプリをVercelにデプロイしたいのだが。誰かいい方法知ってませんか?

Discussion

ログインするとコメントできます