Thirdwebを使って、NFTの枚数によって分岐するNFT Gated Websiteを作ってみよう（ERC721）
こんにちは、CryptoGamesの高橋です。
今回は、thirdwebを使って、所有しているNFTの枚数に応じて限定ページやVIPページへと飛ばすWebサイトを作ってみたいと思います。
その他、thirdwebのサンプルコードはERC1155なので、それをERC721に変更する方法やチェーンを変える方法についても、備忘録も兼ねて記していきます。
なお、内容としましては、下の記事の続きになります。
0. 始める前に
あらかじめ、thirdwebの「NFT Drop」でNFTの作成をお願いします。
ググったり、ポチポチやっていれば作成できると思います。
初めての場合は、テストネットで実行することを強くお勧めします。
1. チェーンの変更方法
まずはチェーンの変更方法を見ていきましょう。
まずはThirdwebProviderに渡すチェーンを変更しましょう。
SDKを初期化する際にもチェーンを渡すので、こちらも変更しましょう。
2. ERC1155からERC721のコントラクトに変更する
①コントラクトアドレスを設定する
ではコントラクトアドレスをあらかじめ作成したERC721用のものに設定しましょう。
「yourDetails.js」
「login.jsx」
②関数を変更する
こちらのgetContract関数の第二引数を今回用意したNFT用に変更します。
また、claimもERC721への変更と引数と修正しましょう。
３. NFTの所有数によって遷移先を変更させる
①NFT取得用の関数を用意する
デフォルトで用意されているcheckBalance関数はNFTの所有の有無を返す関数です。
この関数をもとにして、下のように、NFTの所有数を返す関数を作ってみましょう。
②getBalance関数を適用させる
作成したgetBalance関数を適用してみましょう。
importした上で
このように適用させましょう。
③遷移先を条件分岐させる
特定の個数以上でpriorityページに飛ばせるようにしてみましょう。
まずは、他のページなどを参照しながら、priorityページを作成します。
その上で、getBalance関数では所持しているNFTの個数が返ってくるので、その数に応じて条件分岐を行いましょう。
以上です。
よかったらやってみてください。
Discussion