Web3初心者シリーズ：ゼロからNFT DEXを実現する

前の数記事を見たユーザーは、ERC-20プロトコルのトークンについて、Uniswapを代表とするDEXを通じて取引を行い、分散化を実現できることを知っているはずです。それでは、ERC-721プロトコル、つまりNFTについては、どのように分散化取引を実現するのでしょうか。

現在主流のいくつかの NFT 取引所は、オーダーブック方式で取引を行っています。これは、商品をスーパーマーケットの棚に並べるようなもので、購入者が価格が適切だと感じたら、商品を持ち帰ることができます。

本記事では、スマートコントラクトの作成とシンプルなフロントエンドページを通じて、NFTの分散化取引を実現します。注意：本記事は学習目的のみであり、実際の運用環境には使用できません。

NFT(Non-Fungible Token:非代替性トークン)

NFT つまり非代替性トークンであり、各トークンは非同質で異なるもので、ERC-721プロトコルに従います。一般的に、各NFTはウォレット内で異なる画像を表示し、各NFTのセットには識別のための唯一無二のIDがあります。

! Web3スターターシリーズ:NFT DEXをゼロから実装する

NFTの特性により、ERC-20のように価格曲線で価格を設定することはできません——なぜなら、各トークンは異なるからです。したがって、現在一般的な取引方法は注文簿形式です。

オーダーブック取引

オーダーブックモデルは簡単に言うと、商品の価格が人為的に設定されていることを意味し、Uniswapのように価格曲線で価格を計算する方法とは異なります。オーダーブックは一般的に二つの取引モードに分かれます。一つは価格設定注文、つまり売り手が自分の心の中で設定した販売価格で、買い手がその価格が適切だと感じた場合、買い手が購入できます。もう一つは購入注文、つまり買い手が自分のニーズに基づいて購入注文を出し、売り手がその価格が適切だと感じた場合、売り手が販売できます。

一般的に、購入注文の価格は定価注文の価格よりも低くなります。この記事では、最初の価格設定方法のみを紹介します。

NFT DEXの特徴

NFT DEX の基本機能には以下の基本的な機能が含まれているべきです：

1. 商品を上げる：定価に従って NFT を上げる
2. 商品を購入する：NFTの価格に基づいて購入する
3. DEX 手数料：成立した価格に基づいて手数料が比例して徴収されます

商品を上架する

商品を上架するには、以下のことを行う必要があります：

1. フロントエンド：ユーザーは自分のNFTを選択し、価格を設定して、上場をクリックします。
2. コントラクト：ユーザーはコントラクトに権限を設定する必要があり、ユーザーのNFTを操作できます。

これで商品は上架完了です。契約の中では、ユーザーの上架商品価格のマップを維持する必要があります。この部分のデータは一般的に分散化されたサービスで管理でき、契約の負担を減らすことができますが、本記事ではこのマップデータは契約内で維持されます。

商品を購入する

商品を購入する際に、以下のいくつかのことが発生します：

1. フロントエンド：ユーザーは購入したいNFTを選択し、購入をクリックします。
2. コントラクト：コントラクトを呼び出し、ユーザーのお金をNFTの売り手に移し、NFTを買い手に移します。

NFT DEXを実装する

この章では、ゼロから NFT の DEX を実装します。これは著者がすでにデプロイした DEX アドレス nft-dex-frontend.vercel.app です。

! Web3スターターシリーズ:NFT DEXをゼロから実装する

1. NFTを作成する

テストのためには、自分のNFTを持つことが最良です。Remixを使って、ERC-721プロトコルのNFTを迅速に構築でき、対応するテンプレートが提供されています。

! Web3スターターシリーズ:NFT DEXをゼロから実装する

私たちはテンプレートに従って簡単にNFTを展開できます。当然、このステップをスキップして、私たちが用意したNFTを直接使用することもできます。

2. コントラクトの作成

私たちの契約メソッドは、以下のいくつかのメソッドを含むべきです：

2.1. 売り手がNFTを出品する

売り手は販売する NFT とそれに対応する価格を指定する必要があります。出品時に、ユーザーは NFT の承認方法に署名し、私たちのスマートコントラクトがこの NFT を操作する権限を持つようにします。そうすることで、購入者が購入した際に、この取引は自動的に成立します。

したがって、プロセスは次のようになります： 1. ユーザーは自分のNFTを選択します；2. 価格を設定します。ここでの価格は、安定通貨のUSDT、USDC、またはETHにすることができます；3. NFTをコントラクトに許可します。

その後、契約の上場メソッドを呼び出すことができ、そのメソッドは以下のいくつかのことを行う必要があります：

1. NFTの所有権を確認する
2. リスティングレコードを追加する
3. 上場をトリガーするイベント

! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img.gateio.im/social/moments-bbcdd555c73cdb0b92bfb216ebb5ec24)

2.2. バイヤーが NFT を購入する

購入者がNFTを購入する際、ユーザーは欲しいNFTを選択し、相応のトークンを支払うだけで済みます。契約レベルでは以下のステップが実行されます： 1. 「listings」から対応するNFTデータを読み取る；2. NFTの価格に基づいて手数料を計算し、成立価格からこの部分を差し引く；3. NFTを購入者の手に移転する；4. 購入のイベントを発火させる

! Web3スターターシリーズ:NFT DEXをゼロから実装する

2.3. リスティングのキャンセル

もちろん、売り手は価格が適切でないと感じるかもしれないので、上架をキャンセルすることを選ぶかもしれません。私たちが上架情報を保存する場所には、その商品の有効性を示すための isActive フィールドを保持していますので、上架をキャンセルする際には、このフィールドを false に設定するだけで済みます。

! 【Web3スターターシリーズ:NFT DEXをゼロから実装する】(https://img.gateio.im/social/moments-51b5823eaa9dd7ca88fe759adeb279fa)

2.4. 手数料の引き出し

DEXは各取引ごとに手数料を徴収でき、この手数料は契約に保存することも、自分の別のアドレスに転送することもできます。本記事では契約に保存する方法を採用します。

! Web3スターターシリーズ:NFT DEXをゼロから実装する

ここまでで、私たちの契約の基本機能は完成したと言えます。

3. DEX フロントエンド開発

始める前に、いくつかのツールを準備する必要があります。以下のツールが含まれます：

1. Ant Design Web3：ウォレットの接続および NFT カードの表示に使用されます。
2. Wagmi：ウォレットとインタラクションするために使用されます。
3. Nextjs + Vercel：私たちのプロジェクトをデプロイします。

私たちのフロントエンドアプリケーションには、Mint、Buy、Portfolioの3つのページが含まれるべきです。Mintはユーザーが私たちのNFTをミントできるようにするもので、デモ用にのみ使用されます。Buyは私たちのDEXマーケットプレイスで、ユーザーはその中で私たちのNFTを購入できます。Portfolioでは、ユーザーはNFTの上場と上場解除の操作を行うことができます。

3.1. ウォレットに接続する

ユーザーのウォレットに接続し、Ant Design Web3を使用して実現

ユーザーのウォレットを接続するプロセスは非常に簡単で、Ant Design Web3 が提供する接続コンポーネントを使用するだけです。

まず、プロジェクトの外側にプロバイダーを包みます。これにより、今後のコード内でAnt Design Web3の機能を利用できるようになります。また、sepoliaテストチェーンに接続する必要があるため、速度を考慮して、データクエリの速度を向上させるためにいくつかのノードサービスを使用することをお勧めします。ここでは、ZANのエンドポイントを使用しています。これはアジア太平洋地域での使用に非常に適しており、速度が速く、価格も非常にお得で、サポートされているチェーンも豊富です。

! Web3スターターシリーズ:NFT DEXをゼロから実装する

その後、ウォレットを接続する必要がある場所に接続ボタンを配置します。

! Web3スターターシリーズ:NFT DEXをゼロから実装する つまり、非常に簡単です。

3.2. ミント

NFTをミントして、テストトークンを取得するには

Mint ページでは、テスト用の NFT を Mint できます。Mint はコントラクトを書く操作で、ここでは wagmi の useWriteContract メソッドを使用します。コントラクトのアドレス、コントラクトの ABI、およびコントラクトのパラメータを指定する必要があります。

! Web3初心者シリーズ:NFT DEXをゼロから実装する

その後、ウォレットで確認すれば、ミントが成功します。

3.3. ポートフォリオ

ユーザーのNFTを管理する

ここでは、ユーザーのすべての NFT を表示する必要があります。いくつかの NFT API を使用して取得できますが、ここでは opensea の API を使用します。なぜなら、sepolia テストチェーンをサポートする NFT API はあまり多くないからです。

ユーザーのNFTリストを取得した後、すでに上架されているかどうかを判断する必要があります。未上架のものは上架をサポートし、すでに上架されているものは下架をサポートします。判断方法はDEXプロトコルの「getSellerListings」メソッドを使って、ユーザーが上架したNFTを取得し、これらのNFTの「isAlive」フィールドに基づいて上架中かどうかを判断します。

! Web3スターターシリーズ:NFT DEXをゼロから実装する

上場する際には「 listNFT 」コントラクトメソッドを呼び出す必要があり、キャンセルする際には「 cancelListing 」メソッドを呼び出す必要があります。上場する前に、NFTの承認メソッドを追加で呼び出し、NFTをコントラクトに承認する必要があります。そうすることで、後の取引が成立した後、このNFTは自動的に買い手に転送されます。

! Web3スターターシリーズ:NFT DEXをゼロから実装する

3.4. 買う

Buyの中でNFTを購入できます

まず、上架された NFT を展示する必要があります。Portfolio 内にある既存の NFT を展示するのと似ていますが、ここでの違いは、1つは全体的なもので、特定のユーザーではないこと、もう1つは isAlive の NFT だけを展示する必要があることです。

購入する際は「 purchaseNFT 」メソッドを使用し、このメソッドを呼び出す際には、ETHを使って販売価格を支払う必要があります。

! Web3初心者シリーズ:NFT DEXをゼロから実装する

ここでのこの「 value 」は、買い手が支払う必要のある ETH です。

こうしたすべての基本機能を含むDEXのフロントエンドページが完成しました。これをvercelにデプロイすることができます。

この記事は、ZAN Team（X アカウント @zan_team）のYeezo（X アカウント @GaoYeezo 75065）によって執筆されました。