Construcción desde cero de un DEX NFT: explicación detallada de contratos inteligentes y front-end.

Crear un DEX de NFT desde cero

Para los NFT que siguen el protocolo ERC-721, la implementación de un intercambio descentralizado es un tema digno de discusión. Actualmente, las plataformas de intercambio de NFT más populares suelen utilizar el método de órdenes, similar a exhibir productos en estanterías para que los compradores los elijan. Este artículo mostrará cómo implementar el intercambio descentralizado de NFT a través de la redacción de contratos inteligentes y una sencilla página de frontend. Es importante señalar que el contenido de este artículo es solo para fines de aprendizaje y no es adecuado para entornos de producción reales.

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

Resumen de NFT

NFT es un token no fungible, cada token es único y sigue el protocolo ERC-721. Normalmente, los NFT mostrarán diferentes imágenes en la billetera, y cada grupo de NFT tiene un ID único para diferenciarlos. Debido a las características de los NFT, no se puede establecer un precio a través de una curva de precios como con los tokens ERC-20. Por lo tanto, el método de intercambio más común actualmente es a través de un libro de órdenes.

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

Modo de transacción de libro de órdenes

El modo de libro de órdenes se divide principalmente en dos tipos:

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

En general, el precio de las órdenes de compra será inferior al de las órdenes de precio fijo. Este artículo se centrará en el método de negociación de órdenes de precio fijo.

Web3 novato serie: implementar un NFT DEX desde cero

Funciones básicas de NFT DEX

Un DEX básico de NFT debe incluir las siguientes funciones:

  1. Listar producto: Colocar NFT a precio establecido
  2. Comprar productos: comprar según el precio del NFT
  3. Cobro de comisiones: se cobra un porcentaje del precio de transacción.

Proceso de listado de productos

  1. Frontend: El usuario selecciona NFT y establece el precio, hace clic en poner a la venta.
  2. Contrato: el usuario autoriza la operación del NFT

Proceso de compra de productos

  1. Frontend: el usuario selecciona NFT y hace clic en comprar
  2. Contrato: Transferir los fondos del comprador al vendedor, el NFT al comprador

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

Implementación de NFT DEX

1. Crear NFT de prueba

Se puede desplegar rápidamente un contrato NFT del protocolo ERC-721 para pruebas a través de Remix.

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

2. Escribir un contrato inteligente

Principalmente incluye los siguientes métodos:

2.1 Vendedor sube NFT

Flujo:

  1. El usuario elige NFT
  2. Establecer precio
  3. Autorizar NFT al contrato
  4. Llamar al método de listado

El método de listado requiere:

  • Verificar la propiedad del NFT
  • Añadir registro de listado
  • Activar el evento de listado

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

2.2 El comprador compra NFT

Pasos de ejecución del contrato:

  1. Leer datos de NFT
  2. Calcular y deducir la tarifa
  3. Transferir NFT al comprador
  4. Disparar el evento de compra

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

2.3 Cancelar listado

Solo necesitas establecer el campo isActive del registro de listado en false.

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

2.4 Retiro de tarifas

Los honorarios cobrados se depositarán en el contrato o se transferirán a la dirección designada.

Web3 novato serie: desde cero implementar un NFT DEX

3. Desarrollo front-end

Herramientas principales utilizadas:

  • Ant Design Web3
  • Wagmi
  • Next.js + Vercel

Página principal:

  • Mint: acuñación de NFT de prueba
  • Comprar:NFT intercambio
  • Cartera: gestión de listado y deslistado de NFT

3.1 Conectar billetera

Implementado usando el componente de conexión de Ant Design Web3.

Serie de principiantes de Web3: construir un NFT DEX desde cero

3.2 Página de acuñación

Utilizar el método useWriteContract de wagmi para llamar al contrato mint.

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

3.3 Página de Portafolio

Mostrar NFT de usuarios, soporta operaciones de listado y deslistado.

Serie de principiantes de Web3: crear un NFT DEX desde cero

3.4 Página de compra

Mostrar NFT que ya están en venta, soporta la operación de compra.

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

A través de los pasos anteriores, se ha implementado un DEX de NFT básico. Se puede desplegar en Vercel para su uso.

MINT-3.08%
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
  • 6
  • Compartir
Comentar
0/400
GmGnSleepervip
· 07-26 04:07
alcista哇 自己动手写Dex 有内味儿了
Ver originalesResponder0
TokenRationEatervip
· 07-25 22:02
Publicación técnica clásica, se recomienda guardar antes de hablar.
Ver originalesResponder0
MetaNomadvip
· 07-23 09:16
Es un proyecto antiguo, simplemente no sé cómo escribirlo.
Ver originalesResponder0
BrokeBeansvip
· 07-23 09:08
Me asusté tanto que mi perro se me escapó.
Ver originalesResponder0
DevChivevip
· 07-23 09:08
Hoy también es un día para aprender sobre Cadena de bloques, ¡eh~
Ver originalesResponder0
BearMarketNoodlervip
· 07-23 09:05
De todos modos, no hay mucha diferencia con las órdenes abiertas, es solo especulació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)