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

ZAN Team
ZAN Team2025/05/20 06:34
この記事では、スマート コントラクトとシンプルなフロントエンド ページを作成して、NFT の分散型取引を実装します。

これまでの記事を読んだユーザーは、ERC-20プロトコルトークンの場合、Uniswapに代表されるDEXを介して取引することで分散化を実現できることを知っているはずです。では、ERC-721プロトコル、つまりNFTでは、分散型トランザクションをどのように実現するのでしょうか?

現在主流の NFT 取引所の中には、スーパーマーケットの棚に商品を並べるのと同じように、注文配置方式を使用して取引を行うものもあります。購入者が価格が適切だと思ったら、商品を持ち帰ることができます。

この記事では、スマート コントラクトとシンプルなフロントエンド ページを作成して、NFT の分散型取引を実装します。この記事は学習目的のみであり、実際の運用環境では使用できませんのでご注意ください。

NFT(非代替性トークン)

NFT は非代替性トークンです。つまり、各トークンは非代替性で異なり、ERC-721 プロトコルに準拠しています。一般的に、各 NFT はウォレット内で異なる画像を表示し、各 NFT セットにはそれらを区別するための一意の ID が与えられます。

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

NFT の特性上、トークンごとに価格が異なるため、ERC-20 のような価格曲線を通じて価格を設定することは不可能です。したがって、現在では注文帳を介した取引方法がより一般的です。

オーダーブック取引

簡単に言えば、オーダーブックモデルとは商品の価格が手動で設定されることを意味します。これは、価格曲線を通じて価格を計算する Uniswap の方法とは異なります。注文帳は一般的に 2 つの取引モードに分かれています。 1つは価格設定注文で、売り手が心の中で販売価格を設定することです。価格が適切だと考える買い手がいれば、その買い手が購入することができます。もう 1 つは注文書です。つまり、買い手が自分のニーズに基づいて注文書を発行し、売り手が価格が適切だと思ったら、売り手はそれを販売することができます。

一般的に言えば、買い注文の価格は見積注文の価格よりも低くなります。この記事では、最初の価格設定方法のみを紹介します。

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 認証方式に署名して、スマート コントラクトに NFT を操作する権限を与え、購入者が購入すると取引が自動的に完了できるようにする必要があります。

したがって、プロセスは次のようになります: 1. ユーザーが自分の NFT を選択します。 2. 価格を設定します。安定通貨の USDT、USDC、または ETH を選択できます。 3. NFT を契約に承認します。

その後、契約リストメソッドを呼び出すことができます。このメソッドでは、次の処理を実行する必要があります。

  1. NFTの所有権を確認する
  2. リストレコードを追加
  3. リスト表示をトリガーするイベント

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

2.2.購入者がNFTを購入する

購入者が NFT を購入する場合、ユーザーは希望する NFT を選択し、対応するトークンを支払うだけです。契約レベルでは、以下の手順が実行されます: 1. 「リスト」から対応する NFT データを読み取ります。 2. NFTの価格に基づいて手数料を計算し、取引価格から差し引きます。 3. NFT を購入者に譲渡します。 4. 購入イベントをトリガーする

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

2.3.掲載の取り消し

もちろん、出品者が価格が不適切だと感じて出品をキャンセルする可能性もあります。製品が有効かどうかを示すリスト情報が保存される isActive フィールドが予約されていることがわかります。したがって、リストをキャンセルする場合は、このフィールドを false に設定するだけで済みます。

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

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 は、ユーザーが当社の NFT を購入できる DEX モールです。ポートフォリオでは、ユーザーは NFT をリストしたり、リストから削除したりできます。

3.1.ウォレットへの接続

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

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

まず、プロジェクトの外側のレイヤーにプロバイダーをラップして、後続のコードで Ant Design Web3 の機能を使用できるようにします。さらに、sepolia テスト チェーンに接続する必要があるため、速度を考慮して、データ クエリの速度を上げるためにいくつかのノード サービスを使用することをお勧めします。ここでは、アジア太平洋環境での使用に非常に適したZANエンドポイントを使用します。速度が速く、コスト効率が非常に高く、幅広いチェーンをサポートします。

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

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

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

以上です。とても簡単です。

3.2.ミント

https://zan.top/faucet/ethereum で NFT を作成し、テストトークンを入手してください。

Mint ページでは、テスト用に NFT を作成できます。 Mint は契約書を作成するための操作です。ここでは、wagmi の useWriteContract メソッドを使用する必要があります。契約アドレス、契約 ABI、契約パラメータを指定するだけです。

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

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

3.3.ポートフォリオ

ユーザーのNFTの管理

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

ユーザーの NFT リストを取得したら、それが棚に置かれているかどうかを判断する必要があります。まだ棚に並んでいないなら出品を支援できますし、棚に並んでいるなら出品中止を支援できます。判断方法は、DEX コントラクトの「getSellerListings」メソッドを通じてユーザーがリストした NFT を取得し、これらの NFT の「isAlive」フィールドに基づいてリストされているかどうかを判断することです。

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

出品する場合は「listNFT」コントラクトメソッドを呼び出し、キャンセルする場合は「cancelListing」メソッドを呼び出す必要があります。リストする前に、NFT 認証メソッドを呼び出して、NFT を契約に認証する必要があります。これにより、後続のトランザクションが完了した後、NFT が自動的に購入者に転送されます。

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

3.4.買う

NFTはBuyで購入できます

まず、リストされている NFT を表示する必要があります。ポートフォリオ内のユーザーの既存の NFT の表示と同様に、ここでの違いは、1 つはグローバルであり、特定のユーザー向けではなくなり、もう一方は isAlive NFT のみを表示する必要があることです。

ご購入の際は、「purchaseNFT」方式をご利用ください。このメソッドを呼び出すときは、販売価格を支払うために ETH を使用する必要があります。

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

ここでの「価値」とは、購入者が支払う必要のある ETH のことです。

すべての基本機能を備えた DEX フロントエンド ページが完成したので、vercel にデプロイできます。

シェア先:

著者:ZAN Team

この記事はPANewsのコラムニストの見解を表しており、PANewsの立場を代表するものではなく、法的責任を負いません。

記事および意見は投資アドバイスを構成するものではありません

画像出典:ZAN Team著作権侵害がある場合は、著者に削除を依頼してください。

PANews公式アカウントをフォローして、一緒に強気相場と弱気相場を乗り越えましょう