ガスレスフリーミント（ガス代を作成者で負担するフリーミント）できるNFTを作成する方法を紹介します！
すべてノーコードで！

↓完成したものはこちら
https://wanco.nohiro230.com/mint

経緯

お正月イラストを描いたので、昨年と同じくフリーミントにしたい！

でもフリーと言いながらガス代は負担させてしまうし、
polygonならガス代安いけど、少額でもウォレットに入ってないといけないよね…。

それを解決するためにガスレスフリーミントできるNFTにしよう！と思い立ちました。

使うサービス

  • thirdweb
    コードを書かなくてもNFTを発行できるサービスです。
    とにかく多機能！
  • OpenZeppelin Defender
    今回はミントするユーザーの代わりにガス代を肩代わりしてくれる仕組みに使います。

基本的にはthirdweb公式さんがドキュメントを作ってくれてるのでこれを見ながら進めます。

Create a gasless NFT drop with Next.js and OpenZeppelin

用意するもの

  • MATICが入ったウォレット
  • thirdwebアカウント
  • OpenZeppelinアカウント

スマートコントラクトをつくる

まずはthirdwebにログインしてスマートコントラクト（以下、スマコン）を作ります。

メニューから「Contracts」> 「Explore」と進みます。

今回は複数ミントできるNFTをつくるので「Edition Drop」を選びます。

「5.0.1(latest)」と書いているところはバージョンです。
latestと書いてある最新版を使うようにしてください！！

「Deploy now」で先に進みます。

スマコンの名前やシンボルなどを自由に決めます。

使うチェーンを選択してデプロイ1しましょう。

※ 私はぶっつけ本番のPolygonでやってしまいましたが、Mumbai2とかでテストするようにしてください…！

デプロイ！
「Contracts」の一覧にスマコンが作成されました！

NFTをつくる

作ったスマコンにNFTをつくっていきます。

「Contracts」からスマコンを選択すると、いろいろ出てきます。
左側のメニューから「NFTs」を選択します。

ここでNFTを管理できます。

右側の青いボタンを押してみましょう！

NFTを作る画面が表示されます。

名前や画像などを設定して最後に「Lazy Mint NFT」を押したら作成できます。

次にミントしてもらうための設定をしていきます。

左メニューの「NFTs」へ行くとさっき作ったNFTがあるはずです。

それを選択すると設定したNFTの情報が出てくるので、次の手順で選んでいきます。

  1. 名前や説明文の下の「Claim Conditions」を選ぶ
  2. 下の方の「Add Phase」の中から「Public」を選ぶ

Publicを選ぶと↓のような枠が出てくるのでそれぞれ入力していきます。

  • Name
    名前
  • When will this phase start?
    NFTミントを開始する日時
  • How many NFTs will you drop in this phase?
    制限するミント数（欄内のUnlimitedを押すと無限にできます）
  • How much do you want to charge to claim each NFT?
    ミントするときのお値段
  • How many NFTs can be claimed per wallet?
    １ウォレットごとのミント数制限

「Save Phases」を押して設定を保存します！

OpenZeppelin Defenderでガス代を負担する仕組みをつくる

これでPolygonのNFTが作成できました。
このままでもいわゆるフリーミントはできます。

でも今回の目的はガスレスなので、OpenZeppelin Defenderを使ってガス代を負担する仕組みを作っていきます。
（Biconomyというサービスもあるみたいですが、失敗したのでまたいつか挑戦します…）

まずOpenZeppelinにログインします。

https://www.openzeppelin.com/defender

Relayerをつくる

次にメニュー右のほうにある「Manage」から「Relayers」を作成します。

  • Name:
    わかりやすい名前をつけてください。
  • Network
    thirdwebでつくったコントラクトと同じネットワークを選びます。

Relayerにトークンをいれる

ユーザーさんがミントをするときに、このRelayerからガス代が支払われます。
なので、あらかじめここにトークンを入れておく必要があります。

Address欄にアドレスがあるのでコピーして、ウォレットからトークンを送金しましょう！

※この記事を書いてる時点（2024/01/17）だと、１ミントあたり0.014MATICくらいのガス代がかかっています

無事MATICがRelayerに入ったらOKです👏

Actionをつくる

次に、作ったRelayerとコントラクトを紐づける必要があります。

上部メニューの「Actions」から「Create Action」を選択します。

General Information

  • Name:
    適当に名前をつけます。
  • Trigger:
    Webhookを選択します。
  • Connect to a Relayer (optional)
    クリックするとさっき作ったRelayerが出てくるのでそれを選択します。

Code

  • Dependency version:
    デフォルトの最新版でいいと思います。
  • Code:
    thirdwebが提供しているコードを貼り付けます。
    → コードはこちら

入力したら保存します。

「Actions」の一覧に戻ると、いま設定したActionがあると思います。

ここのWebhookのURIをコピーしておきましょう。

これでOpenZeppelin Defenderの準備ができました！

あとすこし！！

ミントサイト（ページ）に貼りつける

またthirdwebのスマコンのダッシュボードにもどって、
左のメニューの「Embed」を選びます。

いろいろ設定するところがありますが、
「Gasless」のところを開いて、「OpenZeppelin Relayer」を選んでください。

「OpenZeppelin Relayer URL」という項目に、さっきコピーしたWebhookのUPIを貼り付けます。

あとはボタンの色とかを好きなのを選んで、右側のタグ（Embed Code）をコピーします。
（ページの下のほうにプレビューが表示されます）

最後は自分のウェブサイトにコピーしたタグを貼りつけるだけ！
たとえばワードプレスなら「カスタムHTML」みたいなのに貼り付けたらできると思います！

できた！

やった〜！！

実際に自分でミントして試してみましょう！
無事にミントできたらガスレスフリーミントの完成です！

さいごに

ほぼサービスにおまかせですが、自分のウェブサイトからミントしてもらえるのはすごく嬉しい体験でした！

実際はいろいろ失敗しながらの実装になりました。
これを見てチャレンジされる方がいましたら、Xなどでお気軽にご相談ください✨

2024/1/31くらいまでお正月NFTのフリーミントができるのでよかったらミントしてみてください〜！！
↓
ミントページ

  1. デプロイ: 実際に使えるようにすること ↩︎
  2. Mumbai: Polygonをテストできるネットワーク ↩︎