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

ERC-721プロトコルに従ったNFT資産に対して、どのように分散化取引を実現するのでしょうか？ 現在、主流のNFT取引プラットフォームは多くが注文方式を採用しており、商品を上架販売するのに似ています。本記事では、スマートコントラクトとシンプルなフロントエンドを作成することで、基本的なNFTの分散化取引機能を実現します。

NFTの特性と取引モデル

NFTは非同質化トークンを指し、各トークンは唯一無二で、通常はウォレット内で異なる画像として表示され、ユニークIDで識別されます。NFTのこの特性により、ERC-20トークンのように価格曲線で価格を設定することはできません。一般的なNFT取引方法はオーダーブックモデルで、価格設定注文と購入注文の2種類があります。本稿では主に価格設定注文モデルについて紹介します。

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

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

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

1. NFTを上架する: ユーザーが価格を設定してNFTを上架する
2. NFTの購入:定価に従ってNFTを購入します
3. 手数料の徴収: 成交価格に基づいて一定の割合の手数料を徴収します。

NFTの上架プロセス

1. ユーザーはNFTを選択し、価格を設定します
2. 契約を通じてユーザーのNFTを操作する
3. コントラクトの上場方法を呼び出し、NFT情報を記録する

NFT購入プロセス

1. ユーザーは購入したいNFTを選択します
2. コントラクト購入メソッドの呼び出し
3. 契約が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. リスティングレコードを追加する
3. 上場イベントをトリガーする

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

2.2 購入者がNFTを購入する

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

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

2.3 上架を取り消す

上架記録を無効としてマークする

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

2.4 手数料の引き出し

プラットフォームは、契約または指定されたアドレスに一定割合の手数料を徴収することができます。

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

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

以下のツールを使用してください:

• Ant Design Web3:ウォレットを接続し、NFTを表示します
• Wagmi:ウォレットとのインタラクション
• Next.js + Vercel:アプリケーションをデプロイする

フロントエンドには3つの主要なページが含まれています:

3.1 ウォレットを接続する

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

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

3.2 ミントページ

テストNFTを鋳造するために、コントラクトのmintメソッドを呼び出します。

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

3.3 資産管理ページ

ユーザーのNFTを表示し、上場および下場の操作をサポートします。listNFTおよびcancelListingコントラクトメソッドを呼び出します。

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

3.4 購入ページ

すべての上場NFTを表示し、購入操作をサポートします。purchaseNFTコントラクトメソッドを呼び出して取引を完了します。

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

これにより、基本的なNFT分散化取引プラットフォームが完成しました。スマートコントラクトを通じてコア取引ロジックを実現し、フロントエンドがユーザーフレンドリーな操作インターフェースを提供することで、NFTの分散化取引をサポートします。

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

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