从零搭建NFT去中心化交易所:合约与前端开发指南

从零构建NFT去中心化交易所

阅读过前面几篇文章的读者应该了解,对于ERC-20协议代币,我们可以通过某DEX等去中心化交易所进行交易。那么对于ERC-721协议,也就是NFT来说,如何实现去中心化交易呢?

目前主流的NFT交易平台多采用挂单方式交易,类似于将商品陈列在超市货架上,买家觉得价格合适就可以购买。

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

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

NFT(非同质化代币)

NFT即非同质化代币,遵循ERC-721协议,每个Token都是独一无二的。通常NFT在钱包中会显示不同的图片,并且每组NFT都有唯一的ID用于区分。

由于NFT的特性,无法像ERC-20那样通过价格曲线设定价格。目前比较常见的交易方式是通过订单簿形式。

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

订单簿交易

订单簿模式简单来说就是人为设定商品价格,区别于某些DEX通过价格曲线计算价格的方式。订单簿一般有两种交易模式:

  1. 定价单:卖家设定出售价格,买家觉得合适就可以购买。

  2. 求购单:买家发出求购订单,卖家觉得价格合适就可以出售。

通常求购单价格会低于定价单。本文只介绍第一种定价方式。

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

NFT DEX的基本功能

一个NFT DEX应该包含以下基础功能:

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

上架商品

上架商品需要完成:

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

合约中需维护用户上架商品价格Map,可以放在中心化服务中以减轻合约负担,本文中将保存在合约内。

购买商品

购买商品时会发生:

  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给合约

上架方法需要:

  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 提取手续费

DEX可在每笔交易中收取手续费,存入合约或转至指定地址。本文采用存入合约方式。

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

3. DEX前端开发

使用工具:

  • Ant Design Web3:连接钱包和展示NFT卡片
  • Wagmi:与钱包交互
  • Nextjs + Vercel:部署项目

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

3.1 连接钱包

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

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

3.2 Mint

使用wagmi的useWriteContract方法实现NFT铸造。

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

3.3 Portfolio

展示用户NFT,支持上架和下架操作。使用opensea API获取NFT列表,通过合约判断是否已上架。

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

3.4 Buy

展示已上架NFT,支持购买操作。调用purchaseNFT方法完成交易。

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

至此,一个具备基础功能的NFT DEX前端页面就完成了,可部署到Vercel上。

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

此页面可能包含第三方内容,仅供参考(非陈述/保证),不应被视为 Gate 认可其观点表述,也不得被视为财务或专业建议。详见声明
  • 赞赏
  • 8
  • 转发
  • 分享
评论
0/400
空投猎手王vip
· 08-09 19:23
gas炒到天上了 别研究这些了
回复0
Crypto凤凰vip
· 08-08 21:10
底部区间真就是最佳开发时机啊 耐心等待开花结果
回复0
LiquidityOraclevip
· 08-07 16:48
哈?又造一个nft交易所?
回复0
GateUser-afe07a92vip
· 08-07 02:57
终于能把存着的猴子出手了
回复0
LiquidityWitchvip
· 08-07 02:56
酿造一些禁忌的去中心化交易魔法... 不得不说,这个市场结构确实需要一个黑暗仪式的升级。
查看原文回复0
Blockblindvip
· 08-07 02:51
开发不开发的 就是卖呗
回复0
瞎猫碰到死老鼠vip
· 08-07 02:50
啊哈 终于有人讲这个了
回复0
MEV猎人老王vip
· 08-07 02:45
哎呀又一个纸上谈兵的教程
回复0
交易,随时随地
qrCode
扫码下载 Gate APP
社群列表
简体中文
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)