零基礎搭建NFT去中心化交易平台全攻略

robot
摘要生成中

從零實現一個NFT去中心化交易平台

對於ERC-721協議的NFT來說,如何實現去中心化交易呢?目前主流的NFT交易所多採用掛單方式進行交易,類似於將商品陳列在超市貨架上,買家覺得價格合適就可以購買。

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

NFT(Non-Fungible Token)簡介

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

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

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

訂單簿交易模式

訂單簿模式下,商品價格由人爲設定,不同於某些DEX通過價格曲線計算價格的方式。訂單簿一般分爲兩種交易模式:

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

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

通常求購單的價格會低於定價單。本文主要介紹定價單交易方式。

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

NFT去中心化交易平台的基本功能

一個基礎的NFT去中心化交易平台應該包含以下功能:

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

上架商品流程

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

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

購買商品流程

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

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

實現NFT去中心化交易平台

本節將從零開始實現一個NFT去中心化交易平台。

1. 創建NFT合約

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

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

2. 編寫交易平台合約

交易平台合約應包含以下主要方法:

2.1 賣家上架NFT

上架流程:

  1. 用戶選擇NFT
  2. 設置價格(可用穩定幣或ETH計價)
  3. 授權NFT給合約

上架方法需要:

  1. 驗證NFT所有權
  2. 添加上架記錄
  3. 觸發上架事件

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

2.2 買家購買NFT

購買流程:

  1. 從listings中讀取NFT數據
  2. 計算並扣除手續費
  3. 轉移NFT給買家
  4. 觸發購買事件

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

2.3 取消上架

將listings中對應NFT的isActive字段設爲false即可。

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

2.4 提取手續費

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

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

3. 開發交易平台前端

使用的主要工具:

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

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

3.1 連接錢包

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

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

3.2 Mint頁面

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

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

3.3 Portfolio頁面

管理用戶NFT,實現上架和下架功能。使用opensea API獲取用戶NFT列表,調用合約判斷NFT上架狀態。

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

3.4 Buy頁面

展示所有上架NFT,實現購買功能。調用合約的purchaseNFT方法完成交易。

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

完成以上步驟後,一個基礎的NFT去中心化交易平台就實現了。可將其部署到Vercel等平台進行訪問使用。

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

查看原文
此页面可能包含第三方内容,仅供参考(非陈述/保证),不应被视为 Gate 认可其观点表述,也不得被视为财务或专业建议。详见声明
  • 讚賞
  • 3
  • 分享
留言
0/400
NFT资深考古学家vip
· 07-05 06:00
资深考古爱好者的简单开发尝试
回復0
DeFi工程师Jackvip
· 07-05 05:57
*sigh* 又一个跳过正式认证的教程...
查看原文回復0
社区打工仔vip
· 07-05 05:57
学个屁 实战才是硬道理
回復0
交易,隨時隨地
qrCode
掃碼下載 Gate APP
社群列表
繁體中文
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)