【完全保存版】thirdwebでsignature mintingをやってみよう！
０ はじめに
本日は、thirdwebを用いて、signature mintingを学んでみましょう。
１ signature mintingとは
１ 概要
まずは、「signature minting」とは何かについて学んでみましょう。
詳しくはこちらをご参照ください。
「signature minting」とは、ミントの権限を持たない人が署名を使ってミントを行うことです。
２ admin（権限がある人）によるトランザクション
例えば、あるコントラクトに対して、「admin(管理者の意味です)」がミントのトランザクションを行うとします。
彼は権限があるので、ミントができます。
３ 権限がない人によるトランザクション
一方、それ以外の人は権限がないので、ミントを行うことができません。
４ 権限があるとは？
では、そもそも権限があるということはどういうことなのでしょうか？
それは、実行する中身（ペイロード）にサインを行い、署名を作ることができるということだと私は考えています。
つまり、Aさんがトランザクションを行えないのは、「Payload（中身）」に対して、サインができず、署名が作れないからです。
そして、トランザクションには、必ず署名が必要です。
５ Signature Mintingによる解決策
そのため、「Signature Minting」では、Aさんが「admin」に対して、署名をお願いします。
そして、「admin」が署名して問題なければ、署名をAさんに渡します。
これで、Aさんはトランザクションに必要な署名をつけることができます。
これにより、Aさんはトランザクションを実行できます。
これが「Signature Minting」の流れです。
２ やってみよう
１ APIキーの取得
まずは、thirdwebでAPIキーを取得しましょう。
２ Loyalty Cardコントラクトの作成
今回は、こちらからコントラクトを作成します。
事前のメール登録やウォレット接続の部分は今回省略します。
「Deploy now」を選択します。
「Name」や「Recipient Address」を入力し、「Mumbai」チェーンであることを確認して、「Deploy now」
なお、一次セールスの売上が入るアドレスをロイヤリティのアドレスと同じにするのなら、下のようにすれば良いと思います。
下のようにできました。
３ git clone
では、準備ができましたので、進めていきましょう。
まずは、git clone を行います。
git clone https://github.com/thirdweb-example/loyalty-card.git
４ 依存関係のインストール
では、依存関係をインストールします。
cd loyalty-card/
yarn install
５ .envファイルを作成する
「.env.example」をコピーして、「.env」ファイルを作成します。
中身はAPIキーの内容として、クライアントIDとシークレットキーを入れます。
そして、コントラクトを作成したアカウントの秘密鍵を入れます。
６ コントラクトアドレスの入力
こちらの、「consts.ts」にコントラクトアドレスを入れます。
７ 画像を変更する（任意）
ミントを行った時、私は画像がうまく表示されなかったので、変更しました。
こちらは変更しなくてもミント自体は行えます。
ちなみに、私はこちらのサイトを使用しました。
８ 立ち上げよう
準備ができましたので、「yarn dev」で立ち上げましょう。
yarn dev
すると、このように立ち上がりました。
９ NFTの作成
では、「Generate NFT」でNFTを生成します。
このようにポップアップが表示されました。
このように、NFTが作成できました。
１０ cancelの実行
ちなみに、「cancel」はここではバーンにあたります。
実行すると、このように、バーンされました。
もう一度、「Generate NFT」でNFTを作成します。
ちなみに、thirdwebを確認すると、下のように、NFTの生成やバーンを確認することができます。
１１ NFTのアップデート
では、次に、「Admin Dashboard」に行ってみましょう。
このように、全てのNFTが表示されました。
では、「Edit」を押してみましょう。
任意の数字にして、「update」
これで、NFTの持っているデータを変更することができました。
３ コードを見てみよう（バックエンド）
１ 署名作成ファイルについて
まず署名を作成する、「generate-sig.ts」から見てみましょう。
引数として、「NextApiRequest」「NextApiResponse」のそれぞれの型のリクエストとリスポンスをとっています。
Nextの公式のこの辺りが参考になると思います。
２ HTTPメソッドの分岐について
リクエストのメソッドが「POST」でない場合は、「405」エラーになるようにしています。
なお、405エラーは「Method Not Allowed」です。
３ SDKの初期化について
そして、「fromPrivateKey」を使って、SDKを初期化しています。
公式はこの部分です。
なお、サーバーサイドのため、「ClientID」ではなく、秘密鍵を使用しています。
４ コントラクトの取得について
そして、コントラクトを取得するために、「getContract」を使用しています。
公式としては、この辺りです。
基本的に毎回使われます。
５ リクエストからのアドレスの取得について
そして、リクエストからアドレスを取得しています。
ちなみに、下のように、「NextApiRequest」の「body」はなんでも含められるように、「any」の型になっています。
６ ペイロードについて
次に、「PayloadToSign721withQuantity」の型で、渡す値を指定しています。
必須の部分は多くはありませんが、型としてはこのようになっています。
７ 署名の作成について
そして、下の部分で、NFTをミントするための署名を作成しています。
公式としては、下の部分です。
なお、なぜ署名に、ミント内容が必要なのかなどについてご不明の場合は、こちらもご参照ください。
成功した場合は、署名されたペイロード（中身）を返しています。
４ コードを見てみよう（フロントエンド）
１ fetchについて
次に、「index.tsx」を確認します。
先ほどの、generate-sigに対して、fetchを行なってい、レスポンスを取得しています。
fetchがご不明の場合は、この辺りをご参照ください。
また、JSON形式で、アドレスを送っていることも確認できます。
ご不明の場合は、こちらもご参照ください。
返ってきたデータを下のように取得しています。
ご不明の場合は、こちらもご参照ください。
２ ミントの実施について
次に、取得した、署名済みのペイロードを使用して、ミントを行っています。
３ update関数について
次に、「NFT.tsx」の「update」関数を見てみましょう。
まずはこちらで、メタデータを更新しています。
まずは、スプレッド構文（…）を使って、要素の展開を行なっています。
次に、「filter」関数を使って、一旦「points」以外で構成した後、新しい「points」を加えています。
簡潔に言えば、「points」のデータだけを差し替えています。
次に、「update」の部分を見てみましょう。
変更したい、トークンIDとメタデータを渡しています。
中身を見ると、このようになっていました。
この「update」が何をやっているのか、少し自信がないですが、現在こうでないかと思っているところを書きます。
処理としては、「NFTMetadata」コントラクトの「setTokenURI」関数を使っていると考えています。
「update」の処理で、メタデータの情報をthirdwebがIPFSに格納し、そのURLとトークンIDを引数として、「setTokenURI」に渡しているのではと考えています。
上の部分は誤りがあれば修正しようと思います。
４ revokeとcancelについて
次に、「revoke」を見てみます。
内容が似ているので、「cancel」も一緒に見てみます。
この２つは、どちらも、バーンを行なっています。
ただ、渡している引数が違うので、名前は同じ「_burn」でも中身は違うようです。
なお、引数が１つの方（revoke）も結局は２つ目の引数に自動で「false」を設定しています。
そして、引数が２つの「_burn」関数は次のようになります。
２つ目の引数の「approvalCheck」はNFTの保有者か承認を得ているかのチェックをしています。
つまり、引数が一つの方は「false」になっているため、このチェックを通らずにバーンができるということです。
つまり、このようになります。
管理者はapprovalがない状態で、バーンをしたいため、管理者は「revoke」を使って、バーンが行えるようになっています。
今回は以上です。
いいなと思ったら応援しよう！
