thirdwebのコントラクトにOpenZeppelin Defenderを使って、ミント時にガス不要の実装をしてみる
こんにちは、CryptoGamesのユウキです。
本日は、thirdwebのこちらの記事を用いて、OpenZeppelin Defenderを用いて、ガス不要のトランザクションを実装していきます。
今回、thirdwebを使ってERC721のコントラクトをあらかじめ作成しますが、その部分は省略いたします。
ご不明の場合は、こちらのハンズオンをご参照ください。
ちなみに、ガス不要といってもミントをする人にかからないだけで、実際には管理者などが肩代わりするようなイメージです。
では、見ていきましょう。
0.始める前に
始める前に、内容確認の上、OpenZeppelin Defenderの登録をお願いします。
1.Relayerを作成する
では、実際にトランザクションを行ってくれるRelayerを作成していきましょう。
「Add first Relayer」を選択
名前とネットワークを入力して、「Create」
これで、Relayerができました。
なお、こちらに記載があるように、「Secret Key」はこのタイミングでしか取得ができないので、安全な場所に保管してください。
保管したら、チェックをつけて、「Go to relayer」
このような画面になりました。
現在、0ETHなので、このアドレスに対して、外部からGoerliを送付します。
下のように、0.2ETH(Goerli)を送りました。
2.Autotaskを作成する
では、どのような時に自動で実行されるかの、Autotaskを設定していきます。
「Create Autotask」を選択
下のように、任意の名前を設定し、「Webhook」を選択し、先ほど作成したRelayerを設定します。
次はコードを設定します。
下のthirdwebが作成したコードをコピペしていきます。
最初に入力されていたコードを消した後、thirdwebのコードをコピペします。
できたら、「Create」を選択
すると、このように、「Autotask」ができました。
こちらの「Webhook URI」を設定していくことになります。
3.コードを編集する
では、コードを作成していきましょう。
下のGithubからgit cloneを行います。
下のようになりました。
下のように、「gasless-nft-drop」に移動して、「yarn install」
「.env」を作成し、先ほどできた「Webhook URL」を設定していきます。
NEXT_PUBLIC_OPENZEPPELIN_URL=
ちなみに、「_app.js」を確認すると、今回のWebhook URLが下のように設定されていることが確認できます。
また、チェーンを下のように、Goerliに設定しています。
「index.js」に行き、あらかじめthirdwebで作成した、ERC721のコントラクトアドレスを設定します。
ちなみに、オリジナルのGithubのコードはERC1155だったため、下線の部分を若干変更しました。
なお、下のように、パースエラーが出るかもしれません。
その場合、下のようにして、修正ができると思います。
{
"extends": ["next", "next/core-web-vitals", "prettier", "next/babel"]
}
これで準備ができたので、立ち上げてみましょう。
yarn dev
claimを行うと署名は求められるものの、ガス代はかからないことが確認できると思います。
今回は以上です。
最後までありがとうございました。
Discussion
大変参考になりました！
質問よろしいですか？
thirdwebを使いNFTを2222枚デプロイし、2222枚を自分のウォレットアドレスへクレームしました。
クレームしたNFTを相手に送信する際のガス代が2222番目に行くにつれてかなり高くなってしまいます。。。
解決策ご存じでしょうか。。
そうですねー。
比べたわけではないので、どちらがガス代が安いかは確かではないのですが、基本的に一括でやることにより、ガス代は節約できます。
そのため、こちらのエアドロコントラクトを利用することで安くなる可能性はあります。
ただ、その場合、エアドロコントラクトをデプロイするのにガス代がかかるなど、追加でかかるものもあります。
そのため、テストネットなどで試してみて、安くなるのが確認できたらやってみる、くらいが良いのかなーと思いました。