Guide étape par étape pour créer une plateforme de trading NFT décentralisée

robot
Création du résumé en cours

Construire une plateforme NFT de décentralisation à partir de zéro

Pour les NFT basés sur le protocole ERC-721, la décentralisation des transactions est un sujet important. Actuellement, la plupart des plateformes NFT adoptent un système de commande, similaire à des produits exposés sur des étagères pour que les acheteurs puissent les choisir. Cet article mettra en œuvre des transactions décentralisées pour les NFT à travers des contrats intelligents et un front-end simple, uniquement à des fins d'apprentissage.

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

Aperçu des NFT

NFT est un jeton non fongible, chaque Token est unique. Il suit le protocole ERC-721, et est généralement affiché dans les portefeuilles sous forme d'images différentes, avec un identifiant unique. En raison de la spécificité des NFT, ils ne peuvent pas être évalués comme des jetons ERC-20 par des courbes de prix, mais sont échangés selon un modèle de carnet d'ordres.

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

Mode de transaction sur carnet de commandes

Il existe principalement deux types de transactions sur le livre de commandes :

  1. Ordre de prix : le vendeur fixe le prix, l'acheteur peut acheter si cela lui convient.
  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 d'ordre de prix.

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

Les fonctionnalités clés de la plateforme NFT DEX

Un DEX NFT de base devrait inclure les fonctionnalités suivantes :

  1. Mise en ligne des produits : le vendeur fixe le prix pour mettre en ligne le NFT
  2. Achat de produit : l'acheteur achète le NFT au prix fixé
  3. Frais de transaction : un certain pourcentage est prélevé sur le prix de transaction.

processus de mise en ligne

  1. Frontend : l'utilisateur choisit un NFT et fixe le prix
  2. Contrat : l'utilisateur autorise le contrat à opérer des NFT

Le contrat doit maintenir un tableau de correspondance des prix des produits mis en vente.

processus d'achat

  1. Front-end : l'utilisateur choisit un NFT et clique sur acheter
  2. Contrat : transférer les fonds de l'acheteur au vendeur, NFT transféré à l'acheteur

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

Réalisation de DEX NFT

1. Créer un NFT de test

Vous pouvez déployer rapidement des contrats NFT basés sur le protocole ERC-721 avec Remix.

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

2. Écrire un contrat intelligent

Principalement composé des méthodes suivantes :

2.1 Le vendeur met en ligne le NFT

  1. Vérifier la propriété de l'NFT
  2. Ajouter un enregistrement de mise en vente
  3. Déclencher l'événement de mise en vente

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

2.2 L'acheteur achète un NFT

  1. Lire les données de mise en vente des NFT
  2. Calculer et déduire les frais de transaction
  3. Transférer le NFT à l'acheteur
  4. Déclencher un événement d'achat

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

2.3 Annuler le listing

Définir le champ isActive des enregistrements de mise en ligne sur false

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

2.4 Retrait de frais

Extraire les frais accumulés du contrat

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

3. Développement front-end

Utiliser l'outil :

  • Ant Design Web3: connexion de portefeuille et exposition de NFT
  • Wagmi: interaction de portefeuille
  • Nextjs + Vercel : déploiement

Page principale:

  • Mint:铸造测试NFT
  • Acheter : marché des NFT
  • Portfolio : gérer les NFT personnels

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

3.1 Connexion du portefeuille

Utiliser le composant de connexion Ant Design Web3.

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

3.2 Page de Mint

Appeler la méthode mint du contrat pour frapper un NFT.

Web3 Nouveaux utilisateurs : Créer un DEX NFT à partir de zéro

3.3 Page Portfolio

Afficher les NFT des utilisateurs, prendre en charge les opérations de mise en ligne et de retrait. Avant la mise en ligne, il est nécessaire d'autoriser le NFT au contrat.

Web3 novice series : réaliser un DEX NFT à partir de zéro

3.4 Page d'achat

Afficher tous les NFT listés, prise en charge des opérations d'achat. Appelez la méthode purchaseNFT et payez avec ETH lors de l'achat.

Une fois terminé, il peut être déployé sur la plateforme Vercel.

Grâce aux étapes ci-dessus, nous avons réalisé une plateforme de trading NFT décentralisée dotée de fonctionnalités de base. Cela jette les bases pour le développement ultérieur d'un système de trading NFT plus complexe.

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
  • 6
  • Partager
Commentaire
0/400
GasGrillMastervip
· Il y a 10h
Les amis qui ne savent pas coder peuvent aussi comprendre.
Voir l'originalRépondre0
fomo_fightervip
· Il y a 10h
Apprenez-le rapidement, la prochaine vague de bull run en dépend.
Voir l'originalRépondre0
BridgeNomadvip
· Il y a 10h
bruh... mieux ajouter des vérifications multi-sig ou nous verrons un autre scénario de pont ronin
Voir l'originalRépondre0
LeekCuttervip
· Il y a 10h
Le tutoriel est hardcore ! À garder absolument.
Voir l'originalRépondre0
MysteryBoxOpenervip
· Il y a 10h
Regarder les deux premières minutes m'a donné envie de Rug Pull.
Voir l'originalRépondre0
CryptoTarotReadervip
· Il y a 10h
bull ah témoigner de la prochaine os de ses propres yeux
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)