ゼロからNFT分散化取引プラットフォームを構築する

ERC-20トークンの分散化取引を深く研究した後、私たちは次のように尋ねずにはいられません：ERC-721プロトコル（つまりNFT）の分散化取引をどのように実現するのでしょうか？

現在、主流のNFT取引プラットフォームは、スーパーの棚にある商品展示に似た注文方式で取引を行っています。購入者は適切な価格のNFTを見つけたら、直接購入することができます。

この記事では、簡単なNFT分散化取引プラットフォームを、スマートコントラクトの作成と基本的なフロントエンドインターフェースの開発を含めて、ステップバイステップで構築する方法を紹介します。なお、この記事の内容は学習参考用のみであり、実際の生産環境には適していません。

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

NFTの紹介

NFT（非同質化トークン）はERC-721プロトコルに従い、各Tokenは唯一無二です。NFTは通常、ウォレット内で異なる画像形式で表示され、専用のIDを持って区別されます。

NFTの独自性により、ERC-20トークンのように価格曲線で価格設定することはできません。そのため、一般的なNFTの取引方法はオーダーブック形式を採用しています。

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

オーダーブック取引モード

注文板取引には主に2つのモードがあります：

1. 価格設定：売り手が販売価格を設定し、買い手が適切だと感じたら購入できます。
2. 求購単：バイヤーが求購注文を発行し、売り手が価格を認めた後に販売できます。

通常、求購注文の価格は定価注文より低くなります。この記事では、定価注文のモデルに焦点を当てます。

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

NFT分散化取引プラットフォームの核心機能

基本的なNFT分散化取引プラットフォームは、以下の機能を備えているべきです：

1. NFTを上架する：ユーザーが価格を設定してNFTを上架できるようにする
2. NFTを購入する：ユーザーは定価でNFTを購入できます
3. プラットフォーム手数料：成交価格に基づいて一定割合の手数料を徴収します

NFTの上架プロセス

1. フロントエンド：ユーザーがNFTを選択し、価格を設定して、上場をクリックします。
2. 契約：ユーザーは契約にNFTの操作を許可します。

契約の中で、ユーザーが出品する商品の価格マッピングテーブルを維持する必要があります。このデータは契約の負担を軽減するために分散化サービスに保存することができますが、本稿ではそのデータを契約の中に保持します。

NFT購入プロセス

1. フロントエンド：ユーザーは購入したいNFTを選択し、購入をクリックします。
2. 契約：転送操作を実行し、買い手の資金を売り手に転送すると同時に、NFTを買い手に転送します。

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

NFT分散化取引プラットフォームの構築

次に、私たちは段階的にNFT分散化取引プラットフォームを実現します。

1. テスト用NFTを作成する

テストのために、Remixを使用してERC-721プロトコルに準拠したNFTコントラクトを迅速にデプロイすることができます。もちろん、既存のNFTを直接使用してテストすることもできます。

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

2. スマートコントラクト開発

私たちの契約には以下のコア機能が含まれている必要があります：

2.1 NFTリスト

出品者がNFTを上げる際には、NFTと価格を指定する必要があります。出品プロセスには以下が含まれます：

1. ユーザーはNFTを選択します
2. 価格を設定する（USDT、USDC、またはETHを使用できます）
3. コントラクトにNFTを付与する

契約の上架方法を完了する必要があります：

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

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

2.2 NFTの購入

バイヤーがNFTを購入する際、契約は実行する必要があります:

1. NFTデータを読み取る
2. 手数料を計算して差し引く
3. NFTを買い手に転送する
4. 購入イベントをトリガーする

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

2.3 上場の取り消し

売り手はNFTの上場をキャンセルできます。契約内でisActiveフィールドを使用して商品が有効かどうかをマークし、上場をキャンセルする際はそのフィールドをfalseに設定するだけです。

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

2.4 手数料の引き出し

プラットフォームは各取引で手数料を徴収することができ、この例では手数料が契約に保存されます。

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

3. フロントエンド開発

フロントエンド開発には以下のツールを使用します：

• Ant Design Web3:ウォレット接続とNFTディスプレイ用
• Wagmi：ウォレットインタラクションを実現
• Nextjs + Vercel：プロジェクトをデプロイする

フロントエンドアプリケーションには、3つの主要なページがあります：Mint、Buy、およびPortfolio。

3.1 ウォレットを接続する

Ant Design Web3の接続コンポーネントを使用して、ウォレット接続機能を実現します。クエリ速度を向上させるために、ZANのエンドポイントなどのノードサービスの使用をお勧めします。

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

3.2 ミントページ

wagmiのuseWriteContractメソッドを使用して、NFTのミント機能を実装します。

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

3.3 ポートフォリオページ

ユーザーが保有するNFTを表示し、上架と下架の操作をサポートします。opensea APIを使用してNFTリストを取得し、契約メソッドを通じてNFTの上架状態を判断します。

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

3.4 購入ページ

すべての上場しているNFTを表示し、購入機能を提供します。購入時にはpurchaseNFTメソッドを呼び出し、ETHで支払います。

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

以上のステップを完了すると、基本的なNFT分散化取引プラットフォームが構築されました。これをVercelなどのプラットフォームにデプロイしてテストおよび使用することができます。