從零搭建NFT去中心化交易平台:智能合約與前端實現指南

robot
摘要生成中

從零打造NFT去中心化交易平台

在前幾篇文章中,我們探討了如何通過DEX實現ERC-20代幣的去中心化交易。那麼對於遵循ERC-721協議的NFT來說,又該如何實現去中心化交易呢?

目前主流NFT交易平台多採用掛單模式進行交易,類似於商品陳列在超市貨架上,買家覺得價格合適就可以購買帶走。本文將通過編寫智能合約和簡單前端頁面,實現NFT的去中心化交易。需要注意的是,本文內容僅供學習參考,不適用於生產環境。

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

NFT簡介

NFT即非同質化代幣,遵循ERC-721協議。每個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. 設置價格(可用穩定幣或ETH計價)
  3. 授權NFT給合約
  4. 調用上架方法

上架方法需執行:

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

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

2.2 買家購買NFT

買家選擇NFT並支付後,合約執行:

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

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

2.3 取消上架

將商品isActive字段設爲false即可。

2.4 提取手續費

可將手續費存入合約或轉至指定地址。

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

3. DEX前端開發

使用的主要工具:

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

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

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

3.1 連接錢包

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

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

3.2 Mint頁面

使用wagmi的useWriteContract方法實現NFT鑄造。

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

3.3 Portfolio頁面

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

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

3.4 Buy頁面

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

至此,一個基礎NFT DEX的前端就完成了。可將其部署到Vercel上進行訪問。

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

查看原文
此頁面可能包含第三方內容,僅供參考(非陳述或保證),不應被視為 Gate 認可其觀點表述,也不得被視為財務或專業建議。詳見聲明
  • 讚賞
  • 4
  • 轉發
  • 分享
留言
0/400
PoolJumpervip
· 07-21 17:01
会整是大佬
回復0
狗狗币单身汉vip
· 07-19 17:08
麻烦老铁多说点具体咋操作
回復0
BlockTalkvip
· 07-18 22:22
自己撸合约不如开盒砸盘
回復0
ApeDegenvip
· 07-18 22:22
终于有教程带我发财辣!
回復0
交易,隨時隨地
qrCode
掃碼下載 Gate APP
社群列表
繁體中文
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)