Desde cero, construye un DEX NFT: guía de desarrollo de contratos y frontend

Construir un intercambio DEX de NFT desde cero

Los lectores que han leído los artículos anteriores deberían entender que, para los tokens del protocolo ERC-20, podemos comerciar a través de algún intercambio descentralizado como DEX. Entonces, ¿cómo podemos realizar transacciones descentralizadas para el protocolo ERC-721, que es NFT?

Actualmente, las plataformas de intercambio de NFT más populares utilizan el método 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á el intercambio descentralizado de NFT a través de la redacción de contratos inteligentes y una página frontal simple. Es importante tener en cuenta que el contenido de este artículo solo es para referencia de aprendizaje y no es adecuado para entornos de producción.

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

NFT( token no fungible )

NFT es un token no fungible, que sigue el protocolo ERC-721, y cada token es único. Normalmente, los NFT se muestran con 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 pueden establecer precios a través de curvas de precios como en el ERC-20. Actualmente, la forma de交易 más común es a través de un libro de órdenes.

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

Comercio de libro de órdenes

El modo de libro de órdenes, en pocas palabras, es establecer manualmente el precio de los productos, a diferencia de algunos DEX que calculan el precio a través de curvas de precios. Generalmente, hay dos modos de operación en el libro de órdenes:

  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 puede vender si considera que el precio es adecuado.

Normalmente, el precio de la orden de compra será inferior al precio de la orden de oferta. Este artículo solo presenta el primer método de fijación de precios.

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

Funciones básicas del NFT DEX

Un DEX de NFT debería incluir las siguientes funciones básicas:

  1. Listar productos: poner NFT a la venta a precio fijado
  2. Comprar productos: realizar la compra según el precio de NFT
  3. Comisión DEX: se cobra una comisión en proporción al precio de la transacción.

artículo en la lista

Para listar productos, es necesario completar:

  1. Frontend: el usuario selecciona el NFT y establece el precio, luego hace clic en listar.
  2. Contrato: el usuario autoriza la operación de NFT del contrato.

En el contrato se debe mantener un mapa de precios de los productos que los usuarios suben, que se puede almacenar en un servicio centralizado para aliviar la carga del contrato; en este artículo se guardará dentro del contrato.

Comprar productos

Al comprar productos, ocurrirá:

  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 en Web3: implementar un NFT DEX desde cero

Implementar NFT DEX

Vamos a implementar un DEX NFT desde cero.

1. Crear NFT

Para necesidades de prueba, podemos crear rápidamente un NFT del protocolo ERC-721 a través de Remix. También podemos saltar este paso y usar un NFT existente directamente.

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

2. Redacción de contratos

El método del contrato debe incluir:

2.1 Vendedor lista NFT

Flujo:

  1. El usuario selecciona NFT
  2. Establecer el precio ( en stablecoins o ETH )
  3. Autorizar NFT al contrato

El método de listado requiere:

  1. Verificar la propiedad del NFT
  2. Añadir registro de listado
  3. Activar 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. Activar evento de compra

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

2.3 Cancelar listado

Establecer el campo isActive de los registros en la lista como falso.

2.4 Retiro de tarifas

El DEX puede cobrar una tarifa por cada transacción, depositar en un contrato o transferir a una dirección específica. Este artículo utiliza el método de depósito en contrato.

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

3. Desarrollo frontend de DEX

Uso de herramientas:

  • Ant Design Web3: conectar billetera y mostrar tarjetas NFT
  • Wagmi: Interactuar con la billetera
  • Nextjs + Vercel: desplegar proyecto

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

3.1 Conectar billetera

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

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

3.2 Mintear

Implementar la acuñación de NFT utilizando el método useWriteContract de wagmi.

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

3.3 Portafolio

Mostrar NFT de usuarios, soporta operaciones de listado y deslistado. Utilizar la API de opensea para obtener la lista de NFT, determinar si ya está listado a través del contrato.

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

3.4 Comprar

Muestra los NFT listados y admite la operación de compra. Llama al método purchaseNFT para completar la transacción.

Web3 nuevo en la serie: implementar un NFT DEX desde cero

Hasta aquí, se ha completado una página de front-end de un DEX de NFT con funciones básicas, lista para ser desplegada en Vercel.

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

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
  • 9
  • Republicar
  • Compartir
Comentar
0/400
AirdropHunterKingvip
· 08-09 19:23
el gas ha subido hasta el cielo. Deja de estudiar estas cosas.
Ver originalesResponder0
CryptoPhoenixvip
· 08-08 21:10
El rango inferior realmente es el mejor momento para desarrollar. Paciencia para esperar los frutos.
Ver originalesResponder0
LiquidityOraclevip
· 08-07 16:48
¿Eh? ¿Otra vez creando un intercambio de NFT?
Ver originalesResponder0
GateUser-afe07a92vip
· 08-07 02:57
Finalmente puedo vender los MONKY que tengo guardados.
Ver originalesResponder0
LiquidityWitchvip
· 08-07 02:56
preparando un poco de magia dex prohibida... no voy a mentir, esta estructura de mercado necesita una actualización de ritual oscuro de verdad
Ver originalesResponder0
Blockblindvip
· 08-07 02:51
Desarrollar o no, simplemente se vende.
Ver originalesResponder0
LuckyBlindCatvip
· 08-07 02:50
Ah, finalmente alguien habla de esto.
Ver originalesResponder0
MEVHunterWangvip
· 08-07 02:45
Ay, otro tutorial que solo queda en teoría.
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)