Guide étape par étape pour construire une plateforme d'échange NFT décentralisée

robot
Création du résumé en cours

Construire une plateforme d'échange NFT décentralisée à partir de zéro

Pour les actifs NFT conformes au protocole ERC-721, comment réaliser des transactions décentralisées ? Actuellement, les principales plateformes de trading NFT adoptent souvent un modèle d'affichage, similaire à l'affichage de produits sur les étagères d'un supermarché, où les acheteurs peuvent acheter si le prix leur semble raisonnable. Cet article mettra en œuvre une plateforme de trading NFT décentralisée de base en écrivant des contrats intelligents et une simple page frontend.

Web3 nouveaux venus série : réaliser un DEX NFT depuis zéro

NFT( caractéristiques des jetons non fongibles )

Les NFT suivent le protocole ERC-721, chaque Token est unique, généralement affiché dans le portefeuille sous différentes formes d'images, et identifié par un ID unique. En raison de la nature non fongible des NFT, il n'est pas possible de fixer un prix comme pour les tokens ERC-20 via une courbe de prix, donc la méthode de transaction courante est d'utiliser un livre de commandes.

Web3 Nouveaux utilisateurs série : réaliser un DEX NFT à partir de zéro

Mode de trading sur carnet d'ordres

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

  1. Ordre de prix : le vendeur fixe le prix, et l'acheteur achète directement après avoir donné son accord.
  2. Bon de commande : l'acheteur propose un prix d'achat, le vendeur accepte avant de procéder à la vente.

Cet article mettra l'accent sur le modèle d'ordre 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 de Décentralisation

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

  1. Mise en vente : Mettre le NFT en vente au prix spécifié.
  2. Achat : acheter au prix NFT
  3. Frais de transaction : un certain pourcentage de frais de transaction est prélevé sur le prix de vente.

processus de mise en ligne

  1. Frontend : l'utilisateur choisit un NFT et fixe le prix
  2. Contrat : l'utilisateur autorise l'opération du NFT par le contrat
  3. Maintenir la carte des prix des produits mis en vente 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, transférer le NFT à l'acheteur

Web3 Nouveaux utilisateurs : Réaliser un DEX NFT de zéro

Réaliser une plateforme de trading NFT décentralisée

1. Créer un NFT de test

Vous pouvez utiliser Remix pour déployer rapidement un contrat NFT basé sur le protocole ERC-721, ou vous pouvez directement utiliser un NFT existant pour effectuer des tests.

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

2. Écrire un contrat intelligent

Le contrat doit implémenter les méthodes de base suivantes :

2.1 Le vendeur met en ligne le NFT

Processus:

  1. L'utilisateur choisit le NFT
  2. Définir le prix ( en stablecoins ou en ETH )
  3. Autoriser le NFT au contrat
  4. Appeler la méthode de mise en ligne

La méthode de mise en ligne nécessite :

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

Web3 Nouveaux utilisateurs : réaliser un DEX NFT à partir de zéro

2.2 L'acheteur achète un NFT

Étapes d'exécution du contrat :

  1. Lire les données 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

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

2.3 Annuler la mise en vente

Il suffit de définir le champ isActive des enregistrements de mise en ligne sur false.

2.4 Retrait des frais

Retirer les frais accumulés vers l'adresse spécifiée.

Web3 Nouveaux utilisateurs série : Réaliser un DEX NFT à partir de zéro

3. Développer le front-end de la plateforme de trading

Outils principaux utilisés :

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

L'interface utilisateur comprend trois pages principales :

  • Mint : utilisé pour créer des NFT de test
  • Acheter : hall d'échange NFT
  • Portfolio : gestion des NFT de l'utilisateur

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

3.1 Connecter le portefeuille

Utiliser le composant de connexion d'Ant Design Web3.

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

3.2 Page de Mint

Utilisez la méthode useWriteContract de wagmi pour appeler la méthode mint du contrat NFT.

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

3.3 Page Portfolio

Afficher les NFT possédés par l'utilisateur, supporte les opérations de mise en vente et de retrait.

Lors de la mise en ligne, il est nécessaire de :

  1. Appeler la méthode d'autorisation NFT
  2. Appeler la méthode listNFT du contrat DEX

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

3.4 Page d'achat

Afficher tous les NFT répertoriés, supportant l'opération d'achat.

Lors de l'achat, appelez la méthode purchaseNFT du contrat DEX et payez l'ETH correspondant.

À ce stade, une plateforme de trading NFT décentralisée de base est terminée. Elle peut être déployée sur des plateformes telles que Vercel pour des tests et une utilisation.

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

MINT-1.69%
Voir l'original
Cette page peut inclure du contenu de tiers fourni à des fins d'information uniquement. Gate ne garantit ni l'exactitude ni la validité de ces contenus, n’endosse pas les opinions exprimées, et ne fournit aucun conseil financier ou professionnel à travers ces informations. Voir la section Avertissement pour plus de détails.
  • Récompense
  • 7
  • Reposter
  • Partager
Commentaire
0/400
ChainBrainvip
· 07-20 07:03
Ce n'est pas un piège à coquille opensea ?
Voir l'originalRépondre0
NightAirdroppervip
· 07-18 10:16
666 buddy, fais-moi un coup.
Voir l'originalRépondre0
MetaverseVagabondvip
· 07-18 00:53
Le travail est assez détaillé, pas mal du tout.
Voir l'originalRépondre0
LiquidatedTwicevip
· 07-18 00:52
J'attends cette vague de bonne fortune
Voir l'originalRépondre0
AirdropDreamBreakervip
· 07-18 00:49
Analyse de code d'enseignement~
Voir l'originalRépondre0
Ser_APY_2000vip
· 07-18 00:49
Pas mal, c'est juste un peu difficile.
Voir l'originalRépondre0
HypotheticalLiquidatorvip
· 07-18 00:34
Alerte de risque : un autre puits à cochons à sec.
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)