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

ERC-721規格に準拠したNFT資産について、分散化取引の実現は業界の注目の焦点となっています。現在、主流のNFT取引所は主にオーダーブックモデルを採用しており、これはスーパーの棚に商品が並んでいるような形で、買い手が選べるようになっています。本稿では、スマートコントラクトの開発とシンプルなフロントエンドインターフェースを通じて、基本的なNFT分散化取引システムを実現します。なお、このシステムは学習参考用であり、直接生産環境での使用は不可とします。

NFTの紹介

NFTは非代替性トークンを意味し、ERC-721プロトコル標準に従っています。各NFTは独特であり、通常はウォレット内で異なる画像の形で表示され、唯一のIDで区別されます。

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

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

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

オーダーブックモードには主に2種類あります:

1. プライスオーダー: 売り手が価格を設定し、買い手が適切だと感じれば購入することができます

2. 購買注文: バイヤーが購入注文を発行し、売り手が価格を承認すれば販売されます。

この記事では、価格設定オーダーモードについて説明します。

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

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

基本的なNFT取引プラットフォームには、以下の機能が含まれるべきです:

1. 商品の上架: ユーザーは指定された価格でNFTを上架することができます。
2. 商品購入: ユーザーは上架価格に従ってNFTを購入できます
3. プラットフォーム手数料: 成交価格に基づいて一定割合の手数料を徴収します

上架プロセス

1. フロントエンド: ユーザーはNFTを選択し、価格を設定します
2. 契約:ユーザーはNFTの契約操作を許可します

契約内には、上架商品に対する価格マッピング表を維持する必要があります。

購入プロセス

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

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

NFT取引プラットフォームの開発

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

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

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

2. 取引プラットフォーム契約の作成

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

2.1 売り手がNFTを出品する

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

2.2 バイヤーがNFTを購入する

• NFTデータを読み取る
• 手数料を計算して差し引きます
• NFTを買い手に移転する
• 購入イベントをトリガーする

2.3 上架を取り消す

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

2.4 手数料の引き出し

• 累積した手数料を引き出す

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

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

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

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

主要ページ:

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

3.1 ウォレットを接続する

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

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

3.2 ミントページ

コントラクトのMintメソッドを呼び出してNFTを鋳造します。

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

3.3 ポートフォリオページ

• ユーザーのすべてのNFTを表示
• NFTの上架および下架操作をサポート
• 上場する前に、NFTを契約に承認する必要があります

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

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

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

3.4 購入ページ

• すべての上場NFTを表示
• NFT購入機能の実装

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

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

最後に、フロントエンドをVercelにデプロイすることで、基本的なNFT分散化取引プラットフォームが完成します。

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