De 0 a 1: Guía completa para construir un DEX de NFT

robot
Generación de resúmenes en curso

Crear un DEX de NFT desde cero

En artículos anteriores, discutimos cómo los tokens ERC-20 se comercian a través de DEX. ¿Pero cómo se puede lograr el comercio descentralizado para los NFT que siguen el protocolo ERC-721?

Actualmente, la mayoría de las plataformas de intercambio de NFT utilizan un modelo de órdenes pendientes, similar a exhibir productos en estantes para que los compradores elijan. Este artículo implementará un sistema básico de intercambio descentralizado de NFT mediante la escritura de contratos inteligentes y una interfaz frontal simple. Cabe señalar que este artículo es solo para referencia educativa y no es adecuado para entornos de producción.

Serie para principiantes de Web3: Implementar un NFT DEX desde cero

Introducción a NFT

NFT es un token no fungible, cada token es único. Sigue el protocolo ERC-721, generalmente se muestra en la billetera en diferentes formas de imagen, y cada NFT tiene una ID única para ser distinguido.

Debido a la especificidad de los NFT, no se pueden valorar de la misma manera que los tokens ERC-20 a través de curvas de precios. Por lo tanto, el comercio de NFT generalmente adopta la forma de un libro de órdenes.

Serie para principiantes de Web3: implementar un NFT DEX desde cero

Modo de negociación en el libro de órdenes

En el modo de libro de órdenes, el precio del producto es establecido por el vendedor, en lugar de calcularse mediante un algoritmo. Generalmente hay dos tipos de métodos de negociación:

  1. Orden de precio: el vendedor establece el precio de venta, el comprador puede comprar si lo considera adecuado.
  2. Orden de compra: El comprador publica una orden de compra, y el vendedor puede vender si considera que el precio es adecuado.

Este artículo se centrará en el primer tipo de método de precios para el comercio.

Serie para principiantes en Web3: implementar un NFT DEX desde cero

Funciones básicas del intercambio NFT

Un intercambio básico de NFT debe contener las siguientes funciones:

  1. Listar producto: poner el NFT a la venta a un precio establecido
  2. Comprar productos: realizar la compra según el precio del NFT
  3. Cobro de comisiones: se cobrará un porcentaje según el precio de transacción

proceso de listado

  1. El usuario selecciona el NFT en el front-end y establece el precio.
  2. El usuario autoriza al contrato a operar su NFT
  3. Registrar la información de listado en el contrato

Proceso de compra

  1. El usuario selecciona el NFT en el front-end y hace clic en comprar
  2. El contrato transferirá los fondos del comprador al vendedor y transferirá el NFT al comprador.

Serie para principiantes en Web3: Crear un DEX NFT desde cero

Implementar un intercambio de NFT

A continuación, implementaremos un intercambio NFT simple desde cero.

1. Crear un NFT de prueba

Para facilitar las pruebas, podemos usar Remix para desplegar rápidamente un contrato NFT del protocolo ERC-721. Por supuesto, también podemos utilizar NFTs existentes para las pruebas.

Serie para principiantes en Web3: Crear un NFT DEX desde cero

2. Escribir contratos inteligentes

El contrato necesita implementar las siguientes funciones principales:

2.1 Vendedor lista NFT

Flujo:

  1. Verificar la propiedad del NFT
  2. Añadir registro de listado
  3. Activar evento de listado

Serie para principiantes en Web3: implementar un NFT DEX desde cero

2.2 El comprador compra NFT

Flujo:

  1. Obtener información sobre la lista de NFT
  2. Calcular y deducir la tarifa
  3. Transferir la propiedad del NFT
  4. Activar el evento de compra

Serie para principiantes en Web3: Crear un NFT DEX desde cero

2.3 Cancelar la lista

Esto se logra configurando el campo isActive como false.

Serie para principiantes de Web3: implementar un NFT DEX desde cero

2.4 Retiro de tarifas

El propietario del contrato puede retirar las comisiones acumuladas.

Serie para principiantes de Web3: Cómo construir un NFT DEX desde cero

3. Desarrollo de la interfaz frontal

Utiliza las siguientes herramientas:

  • Ant Design Web3: conectar billetera y mostrar NFT
  • Wagmi: Interacción con la billetera
  • Next.js + Vercel: despliegue del proyecto

El frontend incluye tres páginas principales:

  • Mint: acuñar NFT de prueba
  • Comprar: mercado de NFT
  • Portafolio: gestionar NFT del usuario

Serie para principiantes de Web3: implementar un NFT DEX desde cero

3.1 Conectar billetera

Implementar utilizando el componente de conexión de Ant Design Web3.

Serie para principiantes de Web3: Crear un DEX NFT desde cero

3.2 Página de Mint

Utilizar el método useWriteContract de wagmi para llamar al contrato y acuñar NFT.

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

3.3 Página de Portafolio

Mostrar NFT del usuario y soportar operaciones de listado/deslistado.

Serie para principiantes de Web3: implementar un DEX NFT desde cero

3.4 Página de compra

Muestra todos los NFT en venta y admite la función de compra.

A través de los pasos anteriores, hemos logrado crear un intercambio descentralizado de NFT con funciones básicas. Por último, se puede desplegar el proyecto en Vercel para su uso.

Ver originales
Esta página puede contener contenido de terceros, que se proporciona únicamente con fines informativos (sin garantías ni declaraciones) y no debe considerarse como un respaldo por parte de Gate a las opiniones expresadas ni como asesoramiento financiero o profesional. Consulte el Descargo de responsabilidad para obtener más detalles.
  • Recompensa
  • 7
  • Compartir
Comentar
0/400
ChainMaskedRidervip
· 08-04 18:11
Este artículo no dice nada, es como si no dijera nada.
Ver originalesResponder0
CommunityWorkervip
· 08-04 01:49
¿Quién quiere un dex sin gas?
Ver originalesResponder0
MelonFieldvip
· 08-02 21:21
Wow, este artículo está muy fácil de escribir.
Ver originalesResponder0
GmGmNoGnvip
· 08-02 21:21
懒得学代码 还是去 Cupones de clip吧
Ver originalesResponder0
ILCollectorvip
· 08-02 21:03
Ah ah ah, otra vez hay una nueva colección que va a tomar a la gente por tonta.
Ver originalesResponder0
RugPullProphetvip
· 08-02 21:00
Con tener manos es suficiente, primero hay que actuar como muestra de respeto.
Ver originalesResponder0
LazyDevMinervip
· 08-02 20:53
El frontend está mal escrito, ¿por qué no se utiliza en producción?
Ver originalesResponder0
Opere con criptomonedas en cualquier momento y lugar
qrCode
Escanee para descargar la aplicación Gate
Comunidad
Español
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)