thirdwebを使ってNFTのマーケットプレイスを作成する
こんにちは、CryptoGamesの高橋です。
今回はthirdwebを使って、NFTのマーケットプレイスを作成していきます。
こちらのGithubから簡単に作ることができます。
こちらの具体的な中身を見ていきましょう。
1 メタマスク接続について
まずは、「Conntect Wallet」を押したときに、メタマスク接続ができるようにしていきます。
こちらの、useMetamask関数を使います。
下のように、「connectWithMetamask」に入れて
下のように「Conntect Wallet」を押したときに実行しています。
2 コントラクトのインスタンスを取得する
こちらの、useContract関数を使います。
今回は、マーケットプレイス用に、こちらのコントラクトを用意しています。
なお、今回は作成方法の詳細は省きますが、こちらで簡単に作ることができます。
コントラクトのインスタンスを、下のように取得します。
なお、第二引数の「marketplace」はコントラクトタイプを表しています。
3 マーケットプレイスのアクティブリストを取得する
こちらの、useActiveListings関数を使います。
下のように、データとロードの状態を取得しています。
ロード状態時は、「Loading listings...」と表示させています。
ロードが終わりましたら、map関数を使って、個々のリスティングのIDや画像などを表示させています。
4 リストを作成する
下のように、リストを作成する処理を作っていきます。
こちらの、createListing関数を使います。
ここにあるように、引数として、コントラクトアドレスやトークンIDなどに加え、価格や開始時間、販売期間などを渡しています。
実際に、このように渡しています。
なお、ここでは下のように２つのトランザクションが要求されます。
①setApprovalForAll
②createListing
5 個々のリストを取得する
こちらの、useListing関数を使います。
下のように、ローディング中には「Loading...」と表示し、
リスティングがない場合には「Listing not found」と表示します。
リスティングが存在する場合には、下のように名前や画像などを取得しています。
結果、下のように表示されていました。
6 ネットワークが異なるかどうかを取得する
こちらの、useNetworkMismatch関数を使います。
ここに書かれているように、「desiredChainId」に一致するかどうかを取得しています。
下のように取得し、
trueかfalseかで、下のように分岐させています。
7 ネットワークを切り替える
こちらの、useNetwork関数を使います。
下のように、「switchNetwork」に入れて
このように、今回はGoerliに設定しています。
8 リストの商品を購入する
こちらの、buyoutListing関数を使います。
下のように適用しています。
9 オファーを行う
こちらの、makeOffer関数を使います。
下のように適用しています。
今回は以上です。
ぜひやってみてください。
Discussion