一步步創建NFT去中心化交易平台:從合約到前端實現

robot
摘要生成中

實現NFT去中心化交易

對於遵循ERC-721協議的NFT來說,實現去中心化交易的方式與ERC-20代幣有所不同。目前主流的NFT交易平台多採用掛單的模式進行交易,類似於將商品陳列在超市貨架上,買家看中合適價格的商品即可購買。

本文將通過編寫智能合約和簡單的前端界面,實現一個基礎的NFT去中心化交易功能。需要注意的是,本文內容僅供學習參考,不適用於實際生產環境。

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

NFT基本特性

NFT即非同質化代幣,每個Token都是獨一無二的,遵循ERC-721協議。一般來說,每個NFT在錢包中會顯示不同的圖片,並且每組NFT都有唯一的ID進行區分。

由於NFT的這種特性,無法像ERC-20代幣那樣通過價格曲線來確定價格。因此目前常見的交易方式是通過訂單簿的形式。

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

訂單簿交易模式

訂單簿模式中,商品價格由人爲設定,不同於通過算法計算價格的自動做市商模式。訂單簿通常有兩種交易方式:

  1. 定價單:賣家設定出售價格,買家覺得合適即可購買。

  2. 求購單:買家發出求購訂單,賣家覺得價格合適即可出售。

一般來說,求購單價格會低於定價單。本文將重點介紹定價單交易方式。

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

NFT DEX的基本功能

一個基礎的NFT DEX應該包含以下核心功能:

  1. 上架商品:將NFT按照定價進行上架
  2. 購買商品:按照NFT定價進行購買
  3. 收取手續費:根據成交價格按比例收取手續費

上架商品流程

上架商品需要完成以下步驟:

  1. 前端:用戶選擇NFT並設定價格,點擊上架。
  2. 合約:用戶授權合約操作NFT。

合約中需要維護一份用戶上架商品價格的映射表。這部分數據也可以存儲在中心化服務中以減輕合約負擔,但本文將其保存在合約中。

購買商品流程

購買商品時會發生以下事項:

  1. 前端:用戶選擇想要購買的NFT,點擊購買。
  2. 合約:調用合約,將買家資金轉給賣家,並將NFT轉給買家。

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

實現NFT DEX

接下來將從零開始實現一個NFT DEX。

1. 創建測試用NFT

爲了測試需要,我們可以使用Remix快速部署一個遵循ERC-721協議的NFT合約。也可以直接使用已準備好的NFT進行測試。

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

2. 編寫智能合約

合約需要包含以下主要方法:

2.1 賣家上架NFT

流程:

  1. 用戶選擇NFT
  2. 設置價格
  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即可。

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

2.4 提取手續費

將合約中累積的手續費提取到指定地址。

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

3. 開發DEX前端

前端開發需要用到的主要工具:

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

前端應包含三個主要頁面:Mint、Buy和Portfolio。

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

3.1 連接錢包

使用Ant Design Web3組件實現錢包連接功能。

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

3.2 Mint頁面

用於鑄造測試用NFT,使用wagmi的useWriteContract方法調用合約。

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

3.3 Portfolio頁面

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

上架時需調用listNFT方法,下架時調用cancelListing方法。上架前需授權NFT給合約。

3.4 Buy頁面

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

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

完成以上步驟後,一個基礎的NFT DEX就實現了。可以將其部署到Vercel等平台進行測試和使用。

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

查看原文
此页面可能包含第三方内容,仅供参考(非陈述/保证),不应被视为 Gate 认可其观点表述,也不得被视为财务或专业建议。详见声明
  • 讚賞
  • 7
  • 分享
留言
0/400
跑路预言家vip
· 07-08 04:56
前端也没必要这么折腾吧
回復0
0xInsomniavip
· 07-07 17:14
开发者最近都爱玩dex呗?
回復0
GasFeeSobbervip
· 07-06 19:00
望眼欲穿大牛解锁Solidity
回復0
OPsychologyvip
· 07-06 18:58
教练我也想写dex合约
回復0
just_here_for_vibesvip
· 07-06 18:55
这代码有点硬核啊
回復0
BearMarketSurvivorvip
· 07-06 18:55
又一个NFT市场 馋死我了
回復0
NFT黑洞钱包vip
· 07-06 18:55
终于有个靠谱的dex教程了
回復0
交易,隨時隨地
qrCode
掃碼下載 Gate APP
社群列表
繁體中文
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)