從0到1搭建NFT去中心化交易平台全流程

robot
摘要生成中

從零搭建NFT去中心化交易平台

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

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

NFT(Non-Fungible Token)簡介

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

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

Web3新手系列:從零實現一個NFT 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交易平台

1. 創建測試用NFT

可以通過Remix快速部署一個ERC-721協議的NFT合約用於測試。

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

2. 編寫智能合約

合約應包含以下主要功能:

2.1 賣家上架NFT

流程:

  1. 用戶選擇NFT
  2. 設置價格(可用USDT、USDC或ETH計價)
  3. 授權NFT給合約
  4. 調用上架方法

上架方法需要:

  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即可。

2.4 提取手續費

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

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

3. 開發前端界面

使用以下工具:

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

前端包含三個主要頁面:

  1. Mint:用於鑄造測試NFT
  2. Buy:NFT交易市場,可購買NFT
  3. 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,支持上架和下架操作。

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

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

3.4 Buy頁面

展示所有上架的NFT,調用purchaseNFT方法進行購買。

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

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

查看原文
此頁面可能包含第三方內容,僅供參考(非陳述或保證),不應被視為 Gate 認可其觀點表述,也不得被視為財務或專業建議。詳見聲明
  • 讚賞
  • 3
  • 分享
留言
0/400
gas费省钱大师vip
· 20小時前
手续费这块讲的不错啊
回復0
MetaLord420vip
· 20小時前
良心教程啊 干货满满
回復0
幻想破灭预言家vip
· 20小時前
我不看懂也要买!
回復0
交易,隨時隨地
qrCode
掃碼下載 Gate APP
社群列表
繁體中文
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)