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

ERC-721プロトコルに従ったNFTにとって、分散化取引を実現することは重要な課題です。ERC-20トークンとは異なり、NFTの各トークンは唯一無二であるため、特定のDEXのように価格曲線を用いて取引価格を設定することはできません。現在主流のNFT取引プラットフォームは、注文方式で取引を行うことが多く、スーパーマーケットの棚に商品が陳列されているように、バイヤーは適切な価格の商品を選んで購入することができます。

本記事では、スマートコントラクトとシンプルなフロントエンドインターフェースを通じて、基本的なNFT分散化プラットフォームを実現する方法を紹介します。注意が必要なのは、本記事の内容は学習参考用であり、直接生産環境で使用するのには適していません。

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

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

基本的なNFT分散化取引プラットフォームは、以下の機能を備えている必要があります:

1. 商品を上架する: 売り手は価格を設定してNFTを上架することができます
2. 商品を非難する: 購入者は設定された価格でNFTを購入できます。
3. 取引手数料:プラットフォームは比例に応じて取引手数料を徴収できます

商品を上架するプロセス

1. フロントエンド: ユーザーがNFTを選択して価格を設定し、上架をクリックします。
2. コントラクト: ユーザーは契約にNFTを操作する権限を与えます

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

商品購入プロセス

1. フロントエンド:ユーザーが購入したいNFTを選択し、購入をクリックします。
2. 契約:買い手の資金を売り手に移し、NFTを買い手に移す

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

NFT取引プラットフォームの実現

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

テストのために、私たちはRemixを使用してERC-721プロトコルに準拠したNFTコントラクトを迅速にデプロイできます。また、用意されたNFTを直接使用してその後の操作を行うこともできます。

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

2. スマートコントラクトを作成する

契約は以下のコアメソッドを実装する必要があります:

2.1 売り手がNFTを出品する

プロセス:

1. ユーザーはNFTを選択します
2. 価格を設定(はステーブルコインまたはETHで評価できます)
3. コントラクトにNFTを付与する

契約の上場方法には次のものが必要です:

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

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

2.2 バイヤーがNFTを購入

契約購入方法には次のものが必要です:

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

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

2.3 上架の取り消し

上架記録のisActiveフィールドをfalseに設定するだけです。

2.4 手数料の引き出し

プラットフォームは、受け取った手数料を契約に保管するか、指定されたアドレスに転送できます。

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

3. フロントエンドインターフェースの開発

使用される主なツール:

• Ant Design Web3:ウォレットを接続してNFTを展示
• Wagmi:ウォレットとインタラクト
• Next.js + Vercel:プロジェクトをデプロイする

フロントエンドは3つの主要なページを実装する必要があります:

• Mint:テストNFTを鋳造するために使用
• 購入:NFTマーケットプレイス
• ポートフォリオ: ユーザーのNFTを管理

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

3.1 ウォレットを接続する

Ant Design Web3の接続コンポーネントを使用して、ウォレット接続機能を実現します。

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

####3.2ミントページ

wagmiのuseWriteContractメソッドを使用してNFTコントラクトのmint機能を呼び出します。

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

3.3 ポートフォリオページ

ユーザーが所有するNFTを表示し、上架と下架の操作をサポートします。

上架時にはlistNFTメソッドを呼び出し、事前にNFTを契約に承認する必要があります。 下架時にcancelListingメソッドを呼び出します。

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

3.4 購入ページ

すべての上場している有効なNFTを表示します。 購入時にpurchaseNFTメソッドを呼び出し、相応のETHを支払います。

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

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

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

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