Te enseñaré paso a paso a construir una plataforma de intercambio NFT de Descentralización.

robot
Generación de resúmenes en curso

Construir una plataforma de intercambio NFT de Descentralización desde cero

¿Cómo implementar el comercio descentralizado para los activos NFT que siguen el protocolo ERC-721? Actualmente, las principales plataformas de comercio de NFT utilizan en su mayoría un modelo de órdenes, similar a exhibir productos en estantes de supermercado, donde los compradores pueden comprar si consideran que el precio es adecuado. Este artículo implementará una plataforma básica de comercio NFT descentralizado mediante la redacción de contratos inteligentes y una página frontal sencilla.

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

NFT( características de los tokens no fungibles )

NFT sigue el protocolo ERC-721, cada Token es único, generalmente se muestra en las carteras en diferentes formas de imágenes y tiene un ID único para su identificación. Debido a la naturaleza no fungible de los NFT, no se puede establecer un precio a través de curvas de precios como los tokens ERC-20, por lo que la forma de negociación común es en forma de libro de órdenes.

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

Modo de negociación de libro de órdenes

El modo de libro de órdenes tiene principalmente dos tipos:

  1. Orden de precios: el vendedor establece el precio, el comprador lo acepta y compra directamente.
  2. Orden de compra: el comprador presenta el precio de compra, el vendedor lo acepta y procede a la venta.

Este artículo se centrará en el modo de orden de precios.

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

Funciones clave de la plataforma de intercambio NFT Descentralización

Una plataforma básica de NFT debe incluir las siguientes funciones:

  1. Listar: poner el NFT a la venta a un precio específico
  2. Compra: realizar la compra según el precio del NFT
  3. Comisión: se cobrará un porcentaje fijo de la comisión según el precio de la transacción.

proceso de listado

  1. Frontend: el usuario selecciona NFT y establece el precio
  2. Contrato: el usuario autoriza la operación del NFT
  3. Mantener el mapa de precios de los productos listados en el contrato

Proceso de compra

  1. Frontend: el usuario elige el NFT que desea comprar
  2. Contrato: Transferir los fondos del comprador al vendedor, transferir el NFT al comprador

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

Implementación de la plataforma de comercio descentralizado de NFT

1. Crear NFT de prueba

Se puede utilizar Remix para desplegar rápidamente un contrato NFT del protocolo ERC-721, o se puede utilizar directamente un NFT existente para realizar pruebas.

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

2. Escribir contratos inteligentes

El contrato necesita implementar los siguientes métodos clave:

2.1 Vendedor publica NFT

Proceso:

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

El método de listado requiere:

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

Serie para principiantes en Web3: crear un DEX de 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 evento de compra

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

2.3 Cancelar listado

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

2.4 Retiro de comisiones

Retirar las tarifas acumuladas a la dirección especificada.

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

3. Desarrollo del frontend de la plataforma de trading

Herramientas principales utilizadas:

  • Ant Design Web3: conectar billetera y mostrar NFT
  • Wagmi: Interactuar con la cartera
  • Next.js + Vercel: despliegue de proyecto

El front-end incluye tres páginas principales:

  • Mint: utilizado para acuñar NFT de prueba
  • Comprar: sala de negociación de NFT
  • Cartera: gestionar los NFT del usuario

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

3.1 Conectar billetera

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

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

3.2 Página de Mint

Utiliza el método useWriteContract de wagmi para llamar al método mint del contrato NFT.

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

3.3 Página de cartera

Mostrar los NFT que posee el usuario, soporta operaciones de listado y deslistado.

Al momento de listar se necesita:

  1. Llamar al método de autorización de NFT
  2. Llamar al método listNFT del contrato DEX

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

3.4 Página de Compra

Mostrar todos los NFT listados, soporta la operación de compra.

Al comprar, llama al método purchaseNFT del contrato DEX y paga el ETH correspondiente.

Hasta aquí, se ha completado una plataforma básica de comercio descentralizado de NFT. Se puede implementar en plataformas como Vercel para pruebas y uso.

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

MINT-1.69%
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
  • Republicar
  • Compartir
Comentar
0/400
ChainBrainvip
· 07-20 07:03
¿No es esto una trampa de opensea?
Ver originalesResponder0
NightAirdroppervip
· 07-18 10:16
666 amigo, ayúdame a hacer uno.
Ver originalesResponder0
MetaverseVagabondvip
· 07-18 00:53
El trabajo es bastante detallado, muy bien.
Ver originalesResponder0
LiquidatedTwicevip
· 07-18 00:52
Espero que esta buena suerte llegue.
Ver originalesResponder0
AirdropDreamBreakervip
· 07-18 00:49
Un análisis de código de enseñanza~
Ver originalesResponder0
Ser_APY_2000vip
· 07-18 00:49
Está bien, solo que es un poco difícil.
Ver originalesResponder0
HypotheticalLiquidatorvip
· 07-18 00:34
Advertencia de riesgo: otro fondo agotado de piscina de cerdos.
Ver originalesResponder0
  • Anclado
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)