Guía completa para crear una plataforma de intercambio de NFT descentralizada con contratos inteligentes

robot
Generación de resúmenes en curso

Construir una plataforma de intercambio de NFT descentralizada

Para los NFT que siguen el protocolo ERC-721, lograr la Descentralización en el comercio es un tema importante. A diferencia de los tokens ERC-20, cada Token de un NFT es único, por lo que no se puede establecer el precio de transacción a través de curvas de precios como en algunos DEX. Actualmente, las plataformas de comercio de NFT más populares utilizan un método de orden, similar a cómo los productos se exhiben en los estantes de un supermercado, donde los compradores pueden elegir productos a precios adecuados para comprar.

Este artículo presentará cómo implementar una plataforma básica de intercambio NFT descentralizada a través de contratos inteligentes y una interfaz frontal simple. Es importante tener en cuenta que el contenido de este artículo es solo para referencia de aprendizaje y no es adecuado para su uso directo en un entorno de producción.

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

Funciones clave de la plataforma NFT

Una plataforma básica de NFT Descentralización debería contar con las siguientes funciones:

  1. Listar productos: el vendedor puede establecer el precio para poner el NFT en la plataforma.
  2. reprobar producto: el comprador puede comprar NFT a un precio establecido
  3. Comisión de transacción: la plataforma puede cobrar una comisión de transacción proporcional.

proceso de listado de productos

  1. Frontend: los usuarios seleccionan NFT y establecen el precio, hacen clic en publicar
  2. Contrato: el usuario autoriza al contrato a operar su NFT

El contrato necesita mantener una tabla de mapeo de precios de los productos listados por los usuarios. Aunque estos datos también pueden almacenarse en un servicio centralizado para aliviar la carga del contrato, este artículo los mantendrá dentro del contrato.

Proceso de compra de productos

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

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

Implementar una plataforma de NFT

1. Crear NFT de prueba

Para realizar pruebas, podemos utilizar Remix para desplegar rápidamente un contrato NFT que siga el protocolo ERC-721. También podemos utilizar un NFT ya preparado para las operaciones posteriores.

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

2. Escribir contratos inteligentes

El contrato necesita implementar los siguientes métodos clave:

2.1 Vendedor sube NFT

Proceso:

  1. El usuario selecciona NFT
  2. Establecer el precio ( puede ser valorado en monedas estables o ETH )
  3. Autorizar NFT al contrato

El método de listado de contratos requiere:

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

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

2.2 Comprador compra NFT

El método de compra de contratos requiere:

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

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

2.3 Cancelar listado

Solo establece el campo isActive en el registro de la lista como false.

2.4 Retiro de tarifas

La plataforma puede depositar las comisiones cobradas en un contrato o transferirlas a una dirección designada.

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

3. Desarrollar la interfaz frontal

Herramientas principales utilizadas:

  • Ant Design Web3: conectar billetera y mostrar NFT
  • Wagmi: interacción con la cartera
  • Next.js + Vercel: despliegue del proyecto

El front-end necesita implementar tres páginas principales:

  • Mint: utilizado para acuñar NFT de prueba
  • Comprar: mercado de NFT
  • Portafolio: gestión de NFT del usuario

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

3.1 Conectar billetera

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

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

3.2 Página de Mint

Utiliza el método useWriteContract de wagmi para llamar a la función mint del contrato NFT.

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

3.3 Página de Portafolio

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

Al listar, es necesario llamar al método listNFT y autorizar previamente el NFT al contrato. Llama al método cancelListing al deslistar.

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

3.4 Página de Compra

Mostrar todos los NFT que están listados y son válidos. Llama al método purchaseNFT al comprar y paga el ETH correspondiente.

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

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

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

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

MINT1.93%
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
MEVEyevip
· 07-19 22:03
¿No son demasiado caros los costos de transacción?
Ver originalesResponder0
PensionDestroyervip
· 07-19 12:46
La tarifa de transacción va a tomar a la gente por tonta de nuevo.
Ver originalesResponder0
AirdropF5Brovip
· 07-18 20:13
¡Las tarifas son muy altas, fuera!
Ver originalesResponder0
PoetryOnChainvip
· 07-16 23:37
Esto otra vez va a tomar a la gente por tonta.
Ver originalesResponder0
ShitcoinConnoisseurvip
· 07-16 23:32
Solo se fríe el arroz frío, la forma de comer no es bonita.
Ver originalesResponder0
staking_grampsvip
· 07-16 23:32
gas debe ser calculado correctamente
Ver originalesResponder0
probably_nothing_anonvip
· 07-16 23:19
No se pierde nada por jugar en el Testnet.
Ver originalesResponder0
WalletDetectivevip
· 07-16 23:12
¿Las tarifas de transacción son demasiado altas?
Ver originalesResponder0
RugDocScientistvip
· 07-16 23:07
He iniciado sesión, voy a cavar un hoyo.
Ver originalesResponder0
Ver más
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)