手把手教你構建NFT去中心化交易平台

robot
摘要生成中

從零開始構建NFT去中心化交易平台

對於遵循ERC-721協議的NFT資產,如何實現去中心化交易呢?目前主流的NFT交易平台多採用掛單模式,類似於將商品陳列在超市貨架上,買家覺得價格合適就可以購買。本文將通過編寫智能合約和簡單的前端頁面,實現一個基礎的NFT去中心化交易平台。

Web3新手系列:從零實現一個NFT DEX

NFT(非同質化代幣)的特性

NFT遵循ERC-721協議,每個Token都是獨一無二的,通常在錢包中以不同的圖片形式展示,並有唯一的ID進行標識。由於NFT的非同質特性,無法像ERC-20代幣那樣通過價格曲線設定價格,因此常見的交易方式是採用訂單簿形式。

Web3新手系列:從零實現一個NFT DEX

訂單簿交易模式

訂單簿模式主要有兩種:

  1. 定價單:賣家設定價格,買家認可後直接購買
  2. 求購單:買家提出求購價格,賣家認可後進行出售

本文將重點介紹定價單模式。

Web3新手系列:從零實現一個NFT DEX

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

3. 開發交易平台前端

使用的主要工具:

  • Ant Design Web3:連接錢包和展示NFT
  • Wagmi:與錢包交互
  • Next.js + Vercel:部署項目

前端包含三個主要頁面:

  • Mint:用於鑄造測試NFT
  • Buy:NFT交易大廳
  • Portfolio:管理用戶NFT

Web3新手系列:從零實現一個NFT DEX

3.1 連接錢包

使用Ant Design Web3的連接組件實現。

Web3新手系列:從零實現一個NFT DEX

3.2 Mint頁面

使用wagmi的useWriteContract方法調用NFT合約的mint方法。

Web3新手系列:從零實現一個NFT DEX

3.3 Portfolio頁面

展示用戶擁有的NFT,支持上架和下架操作。

上架時需要:

  1. 調用NFT授權方法
  2. 調用DEX合約的listNFT方法

Web3新手系列:從零實現一個NFT DEX

3.4 Buy頁面

展示所有已上架的NFT,支持購買操作。

購買時調用DEX合約的purchaseNFT方法,並支付相應ETH。

至此,一個基礎的NFT去中心化交易平台就完成了。可以部署到Vercel等平台進行測試和使用。

Web3新手系列:從零實現一個NFT DEX

查看原文
此頁面可能包含第三方內容,僅供參考(非陳述或保證),不應被視為 Gate 認可其觀點表述,也不得被視為財務或專業建議。詳見聲明
  • 讚賞
  • 7
  • 分享
留言
0/400
ChainBrainvip
· 9小時前
这不就是套壳opensea?
回復0
夜不撸毛vip
· 07-18 10:16
666老铁 带带我整一个
回復0
元宇宙流浪汉vip
· 07-18 00:53
干活挺详细 不错不错
回復0
LiquidatedTwicevip
· 07-18 00:52
期待这波好运
回復0
空投碎梦师vip
· 07-18 00:49
蹲个教学代码解析~
回復0
Ser_APY_2000vip
· 07-18 00:49
还不错 就是有点难
回復0
假设性清算vip
· 07-18 00:34
风险暗示:又一个资金枯竭的杀猪池
回復0
交易,隨時隨地
qrCode
掃碼下載 Gate APP
社群列表
繁體中文
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)