🐮

DAppsの基礎的な技術を詰め込んでBuyMeAKatsuを作った!

2022/10/30に公開約1,600字

はじめに

ここ数ヶ月,いくつかSolidityのチュートリアルをこなしつつ,サマーインターンでNFT-Fiなどをつくりました.その知識の定着を図るために,BuyMeAKatsuというwebアプリを作りました!
簡単にいうと,BuyMeACoffeeの「カツ」版で,100JPYC(polygon)を私に投げ銭できるサービスです!

https://buy-me-a-katsu.vercel.app/

・メタマスクによるログイン
・どのチェーンにログインしているか確認
・イベントの受け取り
・外部コントラクトを利用(JPYC)
・approveしてから,transferFromする
・自分でERC20のトークンを発行してテストする

など,どんなDAppsを開発をするのにも(多分)必要な技術が使われているので是非御覧ください.

https://github.com/phi7/BuyMeAKatsu-contracts
https://github.com/phi7/BuyMeAKatsu-front

使われている技術

・Next.js(Typescript)
・Solidity
・Vercel
・Tailwind
・DaisyUI

とりあえず流行っている技術で作りました.
デザインなんもわからん民からするとDaisyUIは本当にすばらしいです...!

推しポイント


approveや送金など処理中に,カツが回転するようにしました.(ひとくちカツを送れば見られますよ!!)
ちょっとカワイイですね.
Tailwindでも簡単にアニメーションを付けられることがわかってよかったです.

詰まったところ

わざわざ本物のJPYCを使って開発すると,JPYCが尽きてしまうので,ERC20で自作したニセJPYCトークンを使って開発を進めておりました.
大方ニセJPYCトークンでうまくようになったので,いざ本物のJPYCで試そうとしたらうまくいきませんでした...
JPYCのコントラクトアドレスをJPYCの公式サイトで調べ,そのアドレスをpolygonscanで検索してABIをひっぱてきたのですが,どうやらこれがいけなかったようです.

これはJPYCのUpgradableなコントラクトアドレスであり,つまり,外側のコントラクトのABIを引っ張ってきてもダメなようです.

解決策はUpgradableなコントラクトアドレスでpolygonscanで検索した後に,下記の画像のように,「Contractをクリック」→「Read as Proxyをクリック」→「ABI for the implementation contract at 0xf2fab05f26dc8da5a3f24d015fb043db7a8751cf, using the EIP-1967 Transparent Proxy pattern.」の中身のコントラクトアドレスである「0xf2fab05f26dc8da5a3f24d015fb043db7a8751cf」をクリックし,遷移先のabiを利用することです.

強い方に教えていただき助かりました.

終わりに

間違っている箇所などがあったら,教えていただけると幸いです.

Discussion

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