从0到1:搭建你的NFT去中心化交易平台

robot
摘要生成中

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

ERC-20代币可以通过某些DEX进行去中心化交易,那么ERC-721协议的NFT如何实现去中心化交易呢?目前主流NFT交易所多采用挂单方式,类似商品上架到超市货架。本文将介绍如何通过智能合约和简单前端页面实现NFT的去中心化交易。

Web3新手系列:从零实现一个NFT DEX

NFT交易机制

NFT(非同质化代币)遵循ERC-721协议,每个Token都是独一无二的。由于其特性,无法像ERC-20那样通过价格曲线设定价格。目前常见的交易方式是订单簿形式。

订单簿模式主要有两种:

  1. 定价单:卖家设定价格,买家觉得合适即可购买
  2. 求购单:买家发出求购订单,卖家觉得价格合适即可出售

一般来说,求购单价格会低于定价单。本文主要介绍定价单交易方式。

Web3新手系列:从零实现一个NFT DEX

NFT DEX核心功能

一个基本的NFT DEX应包含以下功能:

  1. 上架商品:将NFT按设定价格上架
  2. 购买商品:按NFT定价进行购买
  3. 收取手续费:根据成交价按比例收取

上架商品流程

  1. 前端:用户选择NFT并设定价格,点击上架
  2. 合约:用户授权合约操作NFT

合约中需维护用户上架商品价格Map。

购买商品流程

  1. 前端:用户选择NFT,点击购买
  2. 合约:转账给卖方,将NFT转给买方

Web3新手系列:从零实现一个NFT DEX

NFT DEX实现

1. 创建NFT

可使用Remix快速部署ERC-721协议NFT,也可直接使用现有NFT。

Web3新手系列:从零实现一个NFT DEX

2. 合约开发

主要包含以下方法:

2.1 卖家上架NFT

  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. 前端开发

使用Ant Design Web3、Wagmi、Next.js等工具开发。

主要包含三个页面:

  • Mint:用于测试铸造NFT
  • Buy:NFT交易市场
  • Portfolio:管理用户NFT

Web3新手系列:从零实现一个NFT DEX

3.1 连接钱包

使用Ant Design Web3组件实现钱包连接。

Web3新手系列:从零实现一个NFT DEX

3.2 Mint页面

调用合约mint方法铸造测试NFT。

Web3新手系列:从零实现一个NFT DEX

3.3 Portfolio页面

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

  • 获取用户NFT列表
  • 判断NFT上架状态
  • 调用上架/下架合约方法

Web3新手系列:从零实现一个NFT DEX

3.4 Buy页面

展示所有已上架NFT,支持购买操作。

  • 展示isAlive的NFT
  • 调用purchaseNFT方法购买

前端开发完成后,可部署到Vercel等平台。

通过以上步骤,我们就实现了一个具备基本功能的NFT去中心化交易平台。

Web3新手系列:从零实现一个NFT DEX

MINT73.28%
此页面可能包含第三方内容,仅供参考(非陈述/保证),不应被视为 Gate 认可其观点表述,也不得被视为财务或专业建议。详见声明
  • 赞赏
  • 5
  • 分享
评论
0/400
快照暴击手vip
· 07-30 02:56
完全去中心化了吗
回复0
Whale_Whisperervip
· 07-29 00:12
架构挺完整的
回复0
空投猎手王vip
· 07-28 23:58
就差空投信息了
回复0
Token小灵通vip
· 07-28 23:53
是个好项目啊老哥
回复0
Alpha不开口vip
· 07-28 23:52
开干就在此刻
回复0
交易,随时随地
qrCode
扫码下载 Gate APP
社群列表
简体中文
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)