DAppsの基礎的な技術を詰め込んでBuyMeAKatsuを作った！
はじめに
ここ数ヶ月，いくつかSolidityのチュートリアルをこなしつつ，サマーインターンでNFT-Fiなどをつくりました．その知識の定着を図るために，BuyMeAKatsuというwebアプリを作りました！
簡単にいうと，BuyMeACoffeeの「カツ」版で，100JPYC（polygon)を私に投げ銭できるサービスです！
・メタマスクによるログイン
・どのチェーンにログインしているか確認
・イベントの受け取り
・外部コントラクトを利用（JPYC）
・approveしてから，transferFromする
・自分でERC20のトークンを発行してテストする
など，どんなDAppsを開発をするのにも（多分）必要な技術が使われているので是非御覧ください．
使われている技術
・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