🎉

Thirdwebを使って、NFT Gated Websiteを作ってみよう（ERC1155）

2022/11/19に公開

ブロックチェーン

こんにちは、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