Construcción de una plataforma de intercambio NFT descentralizada: desde contratos inteligentes hasta la interfaz frontal

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

¿Cómo se puede lograr la Descentralización de transacciones para los NFT que siguen el protocolo ERC-721? Actualmente, el modo de transacción NFT más común es el modelo de libro de órdenes, similar a exhibir productos en estanterías, donde los compradores pueden adquirir si consideran que el precio es adecuado. Este artículo implementará una plataforma básica de transacciones NFT Descentralización mediante la escritura de contratos inteligentes y una sencilla página de frontend.

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

Funciones básicas de la plataforma NFT

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

  1. Listar NFT: el vendedor puede establecer un precio para listar el NFT
  2. Comprar NFT: el comprador puede adquirir el NFT listado al precio establecido.
  3. Cobro de comisiones: la plataforma puede extraer un cierto porcentaje de comisión del precio de transacción.

poner en la plataforma NFT

El proceso para listar un NFT es el siguiente:

  1. El vendedor elige el NFT que quiere listar y establece el precio
  2. El contrato de transacción autorizado por el vendedor puede operar ese NFT
  3. Llamar al método de listado del contrato, registrar la información de listado

comprar NFT

El proceso para comprar un NFT es el siguiente:

  1. El comprador elige el NFT que desea comprar.
  2. Llamar al método de compra del contrato
  3. El contrato transferirá los fondos del comprador al vendedor, al mismo tiempo que transferirá el NFT al comprador.

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

Implementación de la plataforma de transacciones

1. Crear NFT de prueba

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

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

2. Escribir un contrato de transacción

Los contratos de transacción necesitan implementar los siguientes métodos principales:

2.1 Listar NFT

solidity función listNFT(dirección nftAddress, uint256 tokenId, uint256 precio) público { // Verificación de la propiedad del NFT // Registrar información de listado
// Activar evento de listado }

2.2 Comprar NFT

solidity function purchaseNFT(address nftAddress, uint256 tokenId) public payable { // Obtener información de listado de NFT // Calcular y deducir la tarifa de transacción // Transferir NFT al comprador // Activar evento de compra
}

2.3 Cancelar listado

solidity función cancelarListado(dirección nftAddress, uint256 tokenId) público { // Verificar permisos de operación // Establecer el estado de listado como inválido // Activar evento de cancelación }

2.4 Retiro de tarifas

solidity function withdrawFees() public onlyOwner { // Transferencia de la tarifa de contrato }

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

3. Desarrollo de la interfaz frontal

Utiliza las siguientes herramientas para desarrollar el frontend:

  • Ant Design Web3: para la conexión de billeteras y la exhibición de NFT
  • Wagmi: utilizado para interactuar con la cartera
  • Next.js + Vercel: despliegue del proyecto

El front-end incluye las siguientes páginas principales:

  • Mint: utilizado para crear NFT de prueba
  • Comprar: mercado de NFT, se pueden comprar los NFT listados
  • Cartera: gestionar los NFT de los usuarios, se pueden listar y deslistar.

3.1 Conectar billetera

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

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

3.2 Página de Mint

Llamar al método mint del contrato NFT para crear un NFT de prueba.

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

3.3 Página de Portafolio

  • Obtener los NFT que posee el usuario
  • Determinar si el NFT ya está listado
  • Implementar la función de listado y delistado de NFT

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

3.4 Página de compra

  • Mostrar todos los NFT listados
  • Implementar la función de compra

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

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

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

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

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

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

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

MINT-0.24%
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
LiquidationWatchervip
· 07-04 15:00
he estado en demasiados rugpulls para confiar en otro dex... cuida esas tarifas y contratos inteligentes familia
Ver originalesResponder0
hodl_therapistvip
· 07-04 10:30
¿Después de estudiar contratos inteligentes todo el día, tengo que empezar desde el front-end?
Ver originalesResponder0
MetaverseLandladyvip
· 07-01 16:13
Las tarifas no pueden ser mejores, lo que ganamos como arrendadores se está agotando rápidamente.
Ver originalesResponder0
ChainMelonWatchervip
· 07-01 16:12
La tarifa es un impuesto puro sobre la inteligencia, ¿verdad?
Ver originalesResponder0
GasFeeCriervip
· 07-01 16:04
Otra vez están emitiendo moneda de gas. ¿Cuándo podrá ser más barato?
Ver originalesResponder0
FlashLoanKingvip
· 07-01 15:54
Me muero de risa, otra vez se están metiendo en contratos inteligentes.
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)