🐷

Thirdwebを使って、NFTの枚数によって分岐するNFT Gated Websiteを作ってみよう(ERC721)

2022/11/19に公開約2,000字

こんにちは、CryptoGamesの高橋です。

今回は、thirdwebを使って、所有しているNFTの枚数に応じて限定ページやVIPページへと飛ばすWebサイトを作ってみたいと思います。

その他、thirdwebのサンプルコードはERC1155なので、それをERC721に変更する方法やチェーンを変える方法についても、備忘録も兼ねて記していきます。

なお、内容としましては、下の記事の続きになります。

https://zenn.dev/yuki2020/articles/77f0f452bdbea4

0. 始める前に

あらかじめ、thirdwebの「NFT Drop」でNFTの作成をお願いします。

ググったり、ポチポチやっていれば作成できると思います。
https://thirdweb.com/deployer.thirdweb.eth/DropERC721

初めての場合は、テストネットで実行することを強くお勧めします。

1. チェーンの変更方法

まずはチェーンの変更方法を見ていきましょう。

まずはThirdwebProviderに渡すチェーンを変更しましょう。

SDKを初期化する際にもチェーンを渡すので、こちらも変更しましょう。

2. ERC1155からERC721のコントラクトに変更する

①コントラクトアドレスを設定する

ではコントラクトアドレスをあらかじめ作成したERC721用のものに設定しましょう。

「yourDetails.js」

「login.jsx」

②関数を変更する

こちらのgetContract関数の第二引数を今回用意したNFT用に変更します。

また、claimもERC721への変更と引数と修正しましょう。

3. NFTの所有数によって遷移先を変更させる

①NFT取得用の関数を用意する

デフォルトで用意されているcheckBalance関数はNFTの所有の有無を返す関数です。

この関数をもとにして、下のように、NFTの所有数を返す関数を作ってみましょう。

②getBalance関数を適用させる

作成したgetBalance関数を適用してみましょう。

importした上で

このように適用させましょう。

③遷移先を条件分岐させる

特定の個数以上でpriorityページに飛ばせるようにしてみましょう。

まずは、他のページなどを参照しながら、priorityページを作成します。

その上で、getBalance関数では所持しているNFTの個数が返ってくるので、その数に応じて条件分岐を行いましょう。

以上です。

よかったらやってみてください。

Discussion

ログインするとコメントできます