从零搭建NFT去中心化交易平台:智能合约与前端实现指南

robot
摘要生成中

从零打造NFT去中心化交易平台

在前几篇文章中,我们探讨了如何通过DEX实现ERC-20代币的去中心化交易。那么对于遵循ERC-721协议的NFT来说,又该如何实现去中心化交易呢?

目前主流NFT交易平台多采用挂单模式进行交易,类似于商品陈列在超市货架上,买家觉得价格合适就可以购买带走。本文将通过编写智能合约和简单前端页面,实现NFT的去中心化交易。需要注意的是,本文内容仅供学习参考,不适用于生产环境。

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

NFT简介

NFT即非同质化代币,遵循ERC-721协议。每个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. 设置价格(可用稳定币或ETH计价)
  3. 授权NFT给合约
  4. 调用上架方法

上架方法需执行:

  1. 校验NFT所有权
  2. 添加上架记录
  3. 触发上架事件

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

2.2 买家购买NFT

买家选择NFT并支付后,合约执行:

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

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

2.3 取消上架

将商品isActive字段设为false即可。

2.4 提取手续费

可将手续费存入合约或转至指定地址。

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

3. DEX前端开发

使用的主要工具:

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

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

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

3.1 连接钱包

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

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

3.2 Mint页面

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

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

3.3 Portfolio页面

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

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

3.4 Buy页面

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

至此,一个基础NFT DEX的前端就完成了。可将其部署到Vercel上进行访问。

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

此页面可能包含第三方内容,仅供参考(非陈述/保证),不应被视为 Gate 认可其观点表述,也不得被视为财务或专业建议。详见声明
  • 赞赏
  • 4
  • 转发
  • 分享
评论
0/400
PoolJumpervip
· 07-21 17:01
会整是大佬
回复0
狗狗币单身汉vip
· 07-19 17:08
麻烦老铁多说点具体咋操作
回复0
BlockTalkvip
· 07-18 22:22
自己撸合约不如开盒砸盘
回复0
ApeDegenvip
· 07-18 22:22
终于有教程带我发财辣!
回复0
交易,随时随地
qrCode
扫码下载 Gate APP
社群列表
简体中文
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)