【完全保存版】thirdwebでNFTギャラリーを作ろう！

０　はじめに

今回のコードは、こちらのGithubにあります。

そのため、以下のようにして、簡単に作れます。

１　git cloneを行う

git clone https://github.com/ytakahashi2020/thirdweb_gallery.git

２　yarnを行う

cd thirdweb_gallery 
yarn

３　yarn devを行う

yarn dev

４　ローカルを確認する

では、具体的なコードについても見ていきましょう。

１　アクティブチェーンの設定

まずは、どのブロックチェーンを利用するか設定します。

デフォルトでは「ethereum」になっています。

使用したいチェーンによって「ethereum」の部分を変えてください。

そのチェーンを「ThirdwebProvider」に設定しています。

２　コントラクトの取得

thirdwebでコントラクトを取得するには「useContract」を使います。

コントラクトアドレスは、こちらで設定しています。

今回は、Azukiのコントラクトを取得しています。

そのため、下のようになっています。

例えば、BAYCのコントラクトを設定すれば、下のように表示されます。

３　複数のNFTの取得

複数のNFTを取得するには、「useNFTs」を使います。

「count」を指定することで個数を、「start」を指定することでどのトークンIDから始まるかを設定できます。

４　複数のNFTの表示

では、上の章で取得した情報をもとに、NFTを表示させます。

「isLoading」を利用することで、ローディング中であれば表示させないようにします。

また、取得したdataをmap関数でそれぞれ処理を行なっています。

こちらが具体的な処理の部分です。

NFTを選択したときに、詳細ページに飛ぶように、「Link」を設定しています。

また、thirdwebでは、NFTを表示させる際には、「ThirdwebNftMedia」を使用します。

その他、NFTのデータについては、「metadata」の中にあります。

５　個別のNFTの表示

ゴールとしては、このように画像、属性、送付履歴を表示させるようにします。

１　個別のNFTの取得

まずは、個別のNFTの取得を行います。

「useNFT」を使用してデータを取得します。

この時、コントラクトアドレスとトークンIDを渡しています。

２　イベントの取得

次に、「Transfer」のイベントを取得しています。

「userContractEvents」を使います。

今回は、トランスファーの履歴を表示したいため、このように取得しています。

３　画像の表示

画像を表示させるときは、先ほどと同様に、「ThirdwebNftMedia」を使用しています。

４　属性、イベントの表示

属性やトランスファーイベントは複数あることが予測されるので、map関数を使っています。

これで以上になります！

最後までありがとうございました。