Desde cero, construir una plataforma de intercambio NFT: guía de implementación de contratos inteligentes y front-end

robot
Generación de resúmenes en curso

Crear una plataforma de intercambio NFT desde cero

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

Actualmente, las principales plataformas de intercambio de NFT utilizan un modelo de órdenes, similar a los productos exhibidos en las estanterías de un supermercado; los compradores pueden comprarlos y llevárselos si consideran que el precio es adecuado. Este artículo implementará el intercambio descentralizado de NFT a través de la redacción de contratos inteligentes y una simple página de frontend. Es importante tener en cuenta que el contenido de este artículo es solo para referencia de aprendizaje y no es adecuado para un entorno de producción.

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

Introducción a NFT

NFT es un token no fungible que sigue el protocolo ERC-721. Cada NFT es único y generalmente se muestra en la cartera en diferentes formas de imagen, y tiene un ID único para su identificación.

Debido a las características de NFT, no se puede establecer un precio a través de una curva de precios como los tokens ERC-20. Por lo tanto, la forma de negociación más común en la actualidad es utilizar un formato de libro de órdenes.

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

Modo de negociación de libro de órdenes

En el modo de libro de órdenes, el precio del producto es establecido por humanos, a diferencia del método de cálculo de precios mediante algoritmos. El libro de órdenes generalmente tiene dos modos de negociación:

  1. Orden de precios: 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 puede vender si considera que el precio es adecuado.

En general, el precio de la orden de compra será inferior al precio de la orden de precio. Este artículo se centrará en el modo de transacción de precios.

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

Funciones básicas de NFT DEX

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

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

proceso de listado de productos

  1. Frontend: el usuario selecciona el NFT y establece el precio, hace clic en listar
  2. Contrato: el usuario autoriza al contrato a operar su NFT

Es necesario mantener un mapa de precios de los productos listados por los usuarios en el contrato. Para reducir la carga del contrato, estos datos también se pueden almacenar en un servicio centralizado.

Proceso de compra de productos

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

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

Implementación de NFT DEX

A continuación, vamos a implementar un DEX de NFT desde cero.

1. Crear NFT

Para las pruebas, podemos crear rápidamente un NFT del protocolo ERC-721 a través de Remix. También podemos utilizar un NFT ya preparado.

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

2. Redacción de contratos

El contrato debe incluir los siguientes métodos principales:

2.1 Vendedor lista NFT

Proceso:

  1. El usuario elige NFT
  2. Establecer el precio ( en monedas estables o ETH )
  3. Autorizar NFT al contrato
  4. Llamar al método de listado

Método de listado que debe ejecutarse:

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

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

2.2 El comprador compra NFT

El comprador selecciona el NFT y, después de realizar el pago, se ejecuta el contrato:

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

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

2.3 Cancelar la lista

Solo establece el campo isActive del producto en false.

2.4 Retiro de tarifas

Se puede depositar la tarifa en el contrato o transferirla a la dirección designada.

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

3. Desarrollo del frontend de DEX

Herramientas principales utilizadas:

  • Ant Design Web3: conectar billetera, mostrar tarjetas NFT
  • Wagmi: Interactuar con la cartera
  • Nextjs + Vercel: despliegue del proyecto

La interfaz debe incluir tres páginas: Mint, Buy y Portfolio.

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

3.1 Conectar billetera

Utilizar el componente de conexión de Ant Design Web3 para implementar la conexión de billetera.

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

3.2 página de acuñación

Usar el método useWriteContract de wagmi para implementar la acuñación de NFT.

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

3.3 Página de Portafolio

Mostrar NFT del usuario, soporta operaciones de listado y deslistado.

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

3.4 Página de Compra

Muestra los NFT que ya están en la plataforma y soporta la operación de compra.

Hasta aquí, se ha completado el frontend de un DEX básico de NFT. Se puede desplegar en Vercel para su acceso.

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

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
  • 4
  • Republicar
  • Compartir
Comentar
0/400
PoolJumpervip
· 07-21 17:01
会整是experto
Ver originalesResponder0
DogeBachelorvip
· 07-19 17:08
Por favor amigo, dígame un poco más específico cómo operar.
Ver originalesResponder0
BlockTalkvip
· 07-18 22:22
No es mejor abrir una caja y hacer dumping que hacer un contrato uno mismo.
Ver originalesResponder0
ApeDegenvip
· 07-18 22:22
¡Finalmente hay un tutorial que me llevará a hacer dinero!
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)