Développement complet d'une plateforme d'échange NFT décentralisée à partir de zéro

Créer une plateforme de trading NFT décentralisée à partir de zéro

Pour les actifs NFT conformes au protocole ERC-721, la manière de réaliser des transactions décentralisées a toujours été un point focal dans l'industrie. Actuellement, la plupart des places de marché NFT utilisent un modèle d'ordre, similaire à des produits exposés sur les étagères d'un supermarché pour que les acheteurs puissent choisir. Cet article mettra en œuvre un système de transaction NFT décentralisé de base via le développement de contrats intelligents et une interface frontale simple. Il est à noter que ce système est uniquement destiné à des fins d'apprentissage et ne doit pas être utilisé directement en production.

Introduction aux NFT

NFT est un jeton non fongible, conforme à la norme de protocole ERC-721. Chaque NFT est unique et est généralement affiché dans un portefeuille sous forme de différentes images, et possède un ID unique pour la distinction.

En raison des caractéristiques des NFT, il n'est pas possible de fixer le prix de transaction comme avec les jetons ERC-20 via une courbe de prix. La méthode de trading courante est de recourir à un livre de commandes.

Web3 Débutants Série : Réaliser un DEX NFT à partir de zéro

Mode de négociation sur carnet de commandes

Il existe principalement deux types de modèle de carnet de commandes :

  1. Ordre de prix : le vendeur fixe le prix, l'acheteur peut acheter s'il le trouve approprié.

  2. Commande d'achat : l'acheteur publie un ordre d'achat, le vendeur peut vendre dès qu'il accepte le prix.

Cet article se concentrera sur le modèle de commande de prix.

Série pour débutants Web3 : réaliser un DEX NFT à partir de zéro

Fonctionnalités clés de la plateforme NFT

Une plateforme de NFT de base devrait inclure les fonctionnalités suivantes :

  1. Mettre en vente des produits : les utilisateurs peuvent mettre des NFT en vente à un prix déterminé.
  2. Acheter des produits : Les utilisateurs peuvent acheter des NFT au prix de mise en vente.
  3. Frais de plateforme : un certain pourcentage des frais est facturé sur le prix de transaction.

processus de mise en ligne

  1. Front-end : l'utilisateur sélectionne le NFT et fixe le prix
  2. Contrat : l'utilisateur autorise le contrat à opérer des NFT

Un tableau de correspondance des prix des produits mis en vente doit être maintenu dans le contrat.

processus d'achat

  1. Frontend : L'utilisateur choisit le NFT qu'il souhaite acheter
  2. Contrat : transférer les fonds de l'acheteur au vendeur, NFT transféré à l'acheteur

Web3 nouveaux venus série : réaliser un DEX NFT à partir de zéro

Développer une plateforme NFT

1. Créer un NFT de test

Vous pouvez utiliser Remix pour déployer rapidement un contrat NFT basé sur le protocole ERC-721 pour des tests.

Série pour débutants Web3 : réaliser un DEX NFT à partir de zéro

2. Rédiger le contrat de plateforme de transaction

Le contrat doit implémenter les méthodes principales suivantes :

2.1 Vendeur met en vente NFT

  • Vérifier la propriété des NFT
  • Ajouter un enregistrement de mise en ligne
  • Déclencher un événement de mise en vente

2.2 L'acheteur achète NFT

  • Lire les données NFT
  • Calculer et déduire les frais
  • Transférer le NFT à l'acheteur
  • Déclencher un événement d'achat

2.3 Annuler la mise en vente

  • Marquer l'enregistrement de mise en ligne comme invalide

2.4 Retrait des frais

  • Transférer les frais accumulés

Web3 Débutant Série : Réaliser un DEX NFT à partir de zéro

3. Développement de l'interface frontale

Utilisez les outils suivants :

  • Ant Design Web3: connecter un portefeuille, afficher NFT
  • Wagmi: interaction avec le portefeuille
  • Next.js + Vercel : déployer le projet

Page principale:

  • Mint:铸造测试NFT
  • Acheter: marché NFT
  • Portfolio: gestion des NFT des utilisateurs

3.1 Connecter le portefeuille

Utiliser les composants Ant Design Web3 pour mettre en œuvre la fonctionnalité de connexion au portefeuille.

Web3 nouveau venu série : réaliser un DEX NFT à partir de zéro

3.2 Page de Mint

Appeler la méthode Mint du contrat pour créer un NFT.

Série pour débutants Web3 : réaliser un DEX NFT à partir de zéro

3.3 Page de portefeuille

  • Afficher tous les NFT de l'utilisateur
  • Prise en charge des opérations de mise en ligne et de retrait des NFT
  • Avant la mise en ligne, il est nécessaire d'autoriser le NFT au contrat

Web3 nouveaux venus : réaliser un DEX NFT à partir de zéro

Série pour débutants Web3 : Créer un DEX NFT à partir de zéro

Web3 nouveau venu série : réaliser un DEX NFT depuis zéro

3.4 Page d'achat

  • Afficher tous les NFT répertoriés
  • Réaliser la fonction d'achat de NFT

Web3 Nouveau venu série : réaliser un DEX NFT à partir de zéro

Web3 Novice Series : Réaliser un DEX NFT à partir de zéro

Enfin, déployez le front-end sur Vercel pour compléter une plateforme d'échange NFT décentralisée de base.

Web3 Nouveau venu série : réaliser un DEX NFT à partir de zéro

Voir l'original
This page may contain third-party content, which is provided for information purposes only (not representations/warranties) and should not be considered as an endorsement of its views by Gate, nor as financial or professional advice. See Disclaimer for details.
  • Récompense
  • 2
  • Partager
Commentaire
0/400
BearMarketLightningvip
· Il y a 14h
La technologie de base est très pratique.
Voir l'originalRépondre0
ApeWithAPlanvip
· Il y a 15h
Le front-end peut-il prévenir les injections ?
Voir l'originalRépondre0
  • Épingler
Trader les cryptos partout et à tout moment
qrCode
Scan pour télécharger Gate app
Communauté
Français (Afrique)
  • 简体中文
  • English
  • Tiếng Việt
  • 繁體中文
  • Español
  • Русский
  • Français (Afrique)
  • Português (Portugal)
  • Bahasa Indonesia
  • 日本語
  • بالعربية
  • Українська
  • Português (Brasil)