手把手教你构建NFT去中心化交易平台

robot
摘要生成中

从零开始构建NFT去中心化交易平台

对于遵循ERC-721协议的NFT资产,如何实现去中心化交易呢?目前主流的NFT交易平台多采用挂单模式,类似于将商品陈列在超市货架上,买家觉得价格合适就可以购买。本文将通过编写智能合约和简单的前端页面,实现一个基础的NFT去中心化交易平台。

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

NFT(非同质化代币)的特性

NFT遵循ERC-721协议,每个Token都是独一无二的,通常在钱包中以不同的图片形式展示,并有唯一的ID进行标识。由于NFT的非同质特性,无法像ERC-20代币那样通过价格曲线设定价格,因此常见的交易方式是采用订单簿形式。

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

订单簿交易模式

订单簿模式主要有两种:

  1. 定价单:卖家设定价格,买家认可后直接购买
  2. 求购单:买家提出求购价格,卖家认可后进行出售

本文将重点介绍定价单模式。

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

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

一个基础的NFT去中心化交易平台应包含以下功能:

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

上架流程

  1. 前端:用户选择NFT并设定价格
  2. 合约:用户授权合约操作NFT
  3. 在合约中维护上架商品价格Map

购买流程

  1. 前端:用户选择想购买的NFT
  2. 合约:转移买家资金给卖家,将NFT转给买家

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

实现NFT去中心化交易平台

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

合约执行步骤:

  1. 读取NFT数据
  2. 计算并扣除手续费
  3. 转移NFT给买家
  4. 触发购买事件

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

2.3 取消上架

将上架记录的isActive字段设为false即可。

2.4 提取手续费

将累积的手续费提取到指定地址。

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

3. 开发交易平台前端

使用的主要工具:

  • Ant Design Web3:连接钱包和展示NFT
  • Wagmi:与钱包交互
  • Next.js + Vercel:部署项目

前端包含三个主要页面:

  • Mint:用于铸造测试NFT
  • Buy:NFT交易大厅
  • 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,支持上架和下架操作。

上架时需要:

  1. 调用NFT授权方法
  2. 调用DEX合约的listNFT方法

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

3.4 Buy页面

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

购买时调用DEX合约的purchaseNFT方法,并支付相应ETH。

至此,一个基础的NFT去中心化交易平台就完成了。可以部署到Vercel等平台进行测试和使用。

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

MINT19.28%
此页面可能包含第三方内容,仅供参考(非陈述/保证),不应被视为 Gate 认可其观点表述,也不得被视为财务或专业建议。详见声明
  • 赞赏
  • 7
  • 分享
评论
0/400
ChainBrainvip
· 07-20 07:03
这不就是套壳opensea?
回复0
夜不撸毛vip
· 07-18 10:16
666老铁 带带我整一个
回复0
元宇宙流浪汉vip
· 07-18 00:53
干活挺详细 不错不错
回复0
LiquidatedTwicevip
· 07-18 00:52
期待这波好运
回复0
空投碎梦师vip
· 07-18 00:49
蹲个教学代码解析~
回复0
Ser_APY_2000vip
· 07-18 00:49
还不错 就是有点难
回复0
假设性清算vip
· 07-18 00:34
风险暗示:又一个资金枯竭的杀猪池
回复0
交易,随时随地
qrCode
扫码下载 Gate APP
社群列表
简体中文
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)