Thirdwebを使って、NFT Gated Websiteを作ってみよう（ERC1155）
こんにちは、CryptoGamesの高橋です。
本日はThirdwebを用いて、NFT Gated Websiteを作ってみようと思います。
なお、今回使うNFTはERC1155のものです。
０ 始める前に
今回の手順では、事前にthirdwebの「Edition Drop」でERC1155のNFTを作成する必要があります。
今回はこの部分の説明は省きますが、ググっていただいたり、実際にやってみるとあまり悩まずできると思います。
こちらは以前ERC4907の作り方を書きましたので参考です。
1 thirdweb createを実行する
まずは、Githubからgit cloneを行います。
git clone git@github.com:thirdweb-example/nft-gated-website.git
あとは、以降の
1 ②の２）で扱う「.env.local」
2 ②の３）で扱う「yourDetails.js」
３ ⑤のコントラクトアドレス設定
を設定すれば完了です。
あとは、下のようにすれば動くと思います。
cd thirdweb-app
yarn install
yarn dev
ただ、せっかくなので、コードの中身も紹介してみたいと思います。
2 コードの中身を読んでみる
では、コード内の主要な箇所を読んでいきましょう。
① アプリの全体像
では、「_app.js」から見ていきましょう。
1) ThirdwebProvider
下のように、@thirdweb-dev/reactからインポートした「ThirdwebProvider」で囲んでいます。
これでアプリケーション全てに「ThirdwebProvider」を反映させます。
2) chainID
どのチェーンにするかも、@thirdweb-dev/reactからインポートしたChainIdを使って設定します。
ここでは「desiredChainId」にMumbai（Polygonのテストネット）を設定していますね。
②Auth関連
1) ThirdwebAuth
「auth.config.js」で認証の設定をしていきます。
@thirdweb-dev/auth/nextからインポートした「ThirdwebAuth」を使っていきます。
渡す値は下のように①Privatekeyと②domainです。
2) 秘密鍵の設定
秘密鍵は、下のように、「env.local」で設定しています。
「.gitignore」に秘密鍵を入れたファイルが入っていることを確認しましょう。
3) domainの設定
domainNameは「yourDetails.js」で設定します。
なお、ここでコントラクトアドレスも設定します。
（このdomainNameがどう動いているかまだしっくりきていないので、しっくりきましたら追記します。）
4) export
最後に、このThirdwebAuthの返り値を「ThirdwebAuthHandler」「getUser」に入れてexportしています。
5) Auth API Endpointの設定
先ほどexportした「ThirdwebAuthHandler」を全てのauth endpointで管理できるように、「...」を使って設定します。
詳しくは、こちらをご参照ください。
https://nextjs.org/docs/api-routes/dynamic-api-routes#catch-all-api-routes
③getServerSideProps関数について
「index.jsx」を見てみます。
getServerSideProps関数はユーザー認証とNFTの個数を確認する、肝となる関数です。
大きく６つのステップから構成されています。
まずは、下のようになっています。
①ユーザーを取得（なければログインページにリダイレクト）
②秘密鍵の取得（未設定ならエラー）
③SDKの初期化
②の秘密鍵とはコントラクトの作成者の秘密鍵で、それをもとに③でSDKを初期化しています。
続いて
④ユーザーが今回のコントラクトのNFTを持っているかのチェック
⑤なければログインページにリダイレクト
⑥戻る
という流れです。
④checkBalance関数について
上のgetServerSideProps関数の時に使った、checkBalance関数も見てみましょう。
下のようになっています。
①コントラクトを取得
②持っているNFTの個数の取得
③１つ以上持っているかの判定（持っていればtrue,なければfalse）
なお、getEditionDrop()という書き方は非推奨になり、今はgetContract()と書くようですね。
また、balanceOfの第二引数の「0」はトークンIDを表しているようですね。
⑤SignInについて
では、Sign inを見てみましょう。
その前に、コントラクトアドレスをこのように設定します。
@thirdweb-dev/reactの「useLogin」を使います。
このように、「Sign In」ボタンが押されると、「useLogin」が呼ばれるようにしています。
ちなみに、ウォレット接続をしていない状態で入ろうとすると、このようにエラーになります。
⑥claimについて
今回はデモなので、ログイン画面でclaimができるようになっています。
これにより、NFTがない状態で入れないことを確認し、claimでNFTを取得した後に入れることを確認できます。
@thirdweb-dev/reactの「Web3Button」を使います。
このようにclaim関数を使います。
なお、引数は下のように、トークンIDと量を渡すようです。
すると、claimを押そうとするとき、ウォレット接続をしようとすると、このようにウォレット接続ができるようになります。
今回のウォレット接続はこれで代替しているようです。
以上です。
よかったら実際にやってみてください。
Discussion