从零搭建NFT去中心化交易所 智能合约与前端实现详解

从零打造NFT去中心化交易所

对于遵循ERC-721协议的NFT来说,实现去中心化交易是一个值得探讨的话题。目前主流的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实现

1. 创建测试NFT

可以通过Remix快速部署一个ERC-721协议的NFT合约进行测试。

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

2. 编写智能合约

主要包含以下方法:

2.1 卖家上架NFT

流程:

  1. 用户选择NFT
  2. 设置价格
  3. 授权NFT给合约
  4. 调用上架方法

上架方法需要:

  • 校验NFT所有权
  • 添加上架记录
  • 触发上架事件

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 + Vercel

主要页面:

  • Mint:铸造测试NFT
  • Buy:NFT交易商城
  • Portfolio:NFT上下架管理

3.1 连接钱包

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

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

3.2 Mint页面

使用wagmi的useWriteContract方法调用合约mint。

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

3.3 Portfolio页面

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

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

3.4 Buy页面

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

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

通过以上步骤,一个基础的NFT DEX就实现了。可以部署到Vercel进行访问使用。

MINT-15.67%
此页面可能包含第三方内容,仅供参考(非陈述/保证),不应被视为 Gate 认可其观点表述,也不得被视为财务或专业建议。详见声明
  • 赞赏
  • 6
  • 分享
评论
0/400
GmGnSleepervip
· 07-26 04:07
牛哇 自己动手写Dex 有内味儿了
回复0
TokenRationEatervip
· 07-25 22:02
经典技术贴 建议收藏了再说
回复0
MetaNomadvip
· 07-23 09:16
老项目了 就是不会写
回复0
破产豆豆vip
· 07-23 09:08
吓得我狗都掉了链上了
回复0
码农韭菜vip
· 07-23 09:08
今儿也是学区块链的一天哈~
回复0
熊市炒面师vip
· 07-23 09:05
反正跟挂单没啥区别,炒作罢了
回复0
交易,随时随地
qrCode
扫码下载 Gate APP
社群列表
简体中文
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)