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

ERC-721プロトコルに準拠したNFT資産に対して、どのように分散化取引を実現するのでしょうか？現在、主流のNFT取引プラットフォームは多くがオーダー方式を採用しており、商品をスーパーマーケットの棚に陳列するようなもので、買い手が価格が適切だと感じれば購入できます。本記事では、スマートコントラクトを作成し、シンプルなフロントエンドページを通じて、基本的なNFT分散化取引プラットフォームを実現します。

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

NFT (の特徴NFT)

NFTはERC-721規格に従い、各トークンは唯一無二であり、通常はウォレット内で異なる画像形式で表示され、唯一のIDで識別されます。NFTの非同質特性により、ERC-20トークンのように価格曲線で価格を設定することはできないため、一般的な取引方法は注文簿形式を採用しています。

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

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

注文簿モードには主に2種類があります: 1.価格表:売り手が価格を設定し、買い手が直接購入を承認します 2. 購入オーダー: バイヤーが購入価格を提示し、売り手が承認した後に販売を行う

この記事では、プライシングオーダーモデルについて重点的に紹介します。

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

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

基本的なNFT分散化取引プラットフォームは、以下の機能を含むべきです:

1. 上場:指定された価格でNFTを上場する
2. 購入:NFTの価格に従って購入する 3.手数料:取引価格に応じて、手数料の一定の割合が請求されます

上架プロセス

1. フロントエンド: ユーザーはNFTを選択し、価格を設定します
2. 契約:ユーザーはNFTの契約操作を許可する
3. コントラクト内で上架商品価格Mapを維持する

購入プロセス

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

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

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

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

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

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

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

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

2.1 売り手がNFTを出品する

プロセス:

1. ユーザーはNFTを選択します
2. 価格(を設定し、利用可能なステーブルコインまたはETHで評価)
3. コントラクトにNFTを許可する
4. 上架メソッドを呼び出す

上架方法には次のものが必要です:

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をゼロから実装する】(https://img-cdn.gateio.im/webp-social/moments-4dc46af090a3d3987626b915c0d5f1ac.webp)

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をゼロから実装する

3.2 ミントページ

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

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

3.3 ポートフォリオページ

ユーザーが所有するNFTを表示し、上場および下場操作をサポートします。

上場時に必要なこと:

1. NFTの権限付与メソッドを呼び出す
2. DEXコントラクトのlistNFTメソッドを呼び出す

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

3.4 購入ページ

上場しているすべてのNFTを表示し、購入操作をサポートします。

購入時にDEXコントラクトのpurchaseNFTメソッドを呼び出し、対応するETHを支払います。

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

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