一步步创建NFT去中心化交易平台:从合约到前端实现

robot
摘要生成中

实现NFT去中心化交易

对于遵循ERC-721协议的NFT来说,实现去中心化交易的方式与ERC-20代币有所不同。目前主流的NFT交易平台多采用挂单的模式进行交易,类似于将商品陈列在超市货架上,买家看中合适价格的商品即可购买。

本文将通过编写智能合约和简单的前端界面,实现一个基础的NFT去中心化交易功能。需要注意的是,本文内容仅供学习参考,不适用于实际生产环境。

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

NFT基本特性

NFT即非同质化代币,每个Token都是独一无二的,遵循ERC-721协议。一般来说,每个NFT在钱包中会显示不同的图片,并且每组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. 设置价格
  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即可。

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

2.4 提取手续费

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

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

3. 开发DEX前端

前端开发需要用到的主要工具:

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

前端应包含三个主要页面:Mint、Buy和Portfolio。

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

3.1 连接钱包

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

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

3.2 Mint页面

用于铸造测试用NFT,使用wagmi的useWriteContract方法调用合约。

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

3.3 Portfolio页面

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

上架时需调用listNFT方法,下架时调用cancelListing方法。上架前需授权NFT给合约。

3.4 Buy页面

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

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

完成以上步骤后,一个基础的NFT DEX就实现了。可以将其部署到Vercel等平台进行测试和使用。

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

此页面可能包含第三方内容,仅供参考(非陈述/保证),不应被视为 Gate 认可其观点表述,也不得被视为财务或专业建议。详见声明
  • 赞赏
  • 7
  • 分享
评论
0/400
跑路预言家vip
· 07-08 04:56
前端也没必要这么折腾吧
回复0
0xInsomniavip
· 07-07 17:14
开发者最近都爱玩dex呗?
回复0
GasFeeSobbervip
· 07-06 19:00
望眼欲穿大牛解锁Solidity
回复0
OPsychologyvip
· 07-06 18:58
教练我也想写dex合约
回复0
just_here_for_vibesvip
· 07-06 18:55
这代码有点硬核啊
回复0
BearMarketSurvivorvip
· 07-06 18:55
又一个NFT市场 馋死我了
回复0
NFT黑洞钱包vip
· 07-06 18:55
终于有个靠谱的dex教程了
回复0
交易,随时随地
qrCode
扫码下载 Gate APP
社群列表
简体中文
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)