Desarrollo práctico de DEX NFT: desde contratos inteligentes hasta la implementación en el frontend

robot
Generación de resúmenes en curso

Crear un DEX de NFT desde cero

¿Cómo se puede lograr el intercambio descentralizado para NFTs del protocolo ERC-721? Actualmente, los intercambios de NFT más populares suelen utilizar un método de orden de espera para realizar transacciones, similar a exhibir productos en los estantes de un supermercado, donde los compradores pueden adquirirlos si consideran que el precio es adecuado. Este artículo implementará una función básica de intercambio descentralizado de NFT mediante la redacción de contratos inteligentes y una sencilla página frontal.

Introducción a NFT

NFT(Token no fungible)es un token no fungible, cada token es único y sigue el protocolo ERC-721. Normalmente, cada NFT mostrará imágenes diferentes en la billetera y tendrá un ID único para su distinción. Debido a las características de los NFT, no se pueden establecer precios a través de curvas de precios como los tokens ERC-20, por lo que la forma común de transacción es en forma de libro de órdenes.

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

modo de operación del 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 puede vender si considera que el precio es adecuado.

En general, el precio de una orden de compra será inferior al de una orden de precio. Este artículo presenta principalmente el modo de orden de precio.

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

Funciones básicas del intercambio NFT

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

  1. Listar productos: poner 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 cobra un porcentaje del precio de la 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 la operación del contrato NFT

Proceso de compra de productos

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

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

implementación de un intercambio NFT

1. Crear un NFT de prueba

Se puede utilizar Remix para desplegar rápidamente un contrato NFT del protocolo ERC-721 para pruebas.

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

2. Redacción de contratos inteligentes

El contrato incluye principalmente los siguientes métodos:

2.1 Vendedor lista NFT

Flujo:

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

Método de listado de ejecución:

  1. Verificar la propiedad del NFT
  2. Agregar 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

Ejecución del contrato:

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

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

2.3 Cancelar la lista

Establecer el campo isActive del registro de listado en false

Web3 principiantes serie: implementar un NFT DEX desde cero

2.4 Retiro de tarifas

Retirar las tarifas acumuladas en el contrato

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

3. Desarrollar la interfaz frontal

Herramientas principales utilizadas:

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

El front-end incluye 3 páginas:

  • Mint: Crear NFT de prueba
  • Comprar: NFT intercambio
  • Portfolio: gestión de NFT del usuario

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

3.1 Conectar cartera

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

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

3.2 Página de Mint

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

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

3.3 Página de Portafolio

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

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

3.4 Página de Compra

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

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

A través de los pasos anteriores, se ha implementado un intercambio descentralizado básico de NFT. Se puede desplegar el frontend en Vercel para su acceso y uso.

MINT-1.74%
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
IntrovertMetaversevip
· hace6h
Comprar verduras en el supermercado es más fácil que esto, ¿verdad?
Ver originalesResponder0
DaisyUnicornvip
· hace6h
Ay, un protocolo pequeño y maravilloso que es aún más sorprendente que los estantes de los supermercados~
Ver originalesResponder0
GateUser-a180694bvip
· hace6h
Espero que este dex pueda cambiar los puntos de dolor en el comercio de nft.
Ver originalesResponder0
DecentralizedEldervip
· hace6h
La apertura ya ha comenzado, amigos. ¡Vengan a participar!
Ver originalesResponder0
ThatsNotARugPullvip
· hace6h
contratos inteligentes son un gran problema
Ver originalesResponder0
CascadingDipBuyervip
· hace6h
órdenes abiertas de compra y venta son ser liquidado
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)