De 0 à 1, construire le processus complet d'une plateforme d'échange NFT décentralisée

robot
Création du résumé en cours

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

Pour les NFT basés sur le protocole ERC-721, comment réaliser des transactions décentralisées ? Actuellement, les principales plateformes d'échange de NFT utilisent principalement un système d'ordres, similaire à la disposition des produits sur les étagères d'un supermarché, où les acheteurs peuvent acheter directement si le prix leur semble approprié. Cet article expliquera comment créer une plateforme de交易 décentralisée de NFT de base en rédigeant des contrats intelligents et une simple page frontale.

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

NFT(Token Non Fongible)Présentation

NFT est un jeton non fongible, chaque Token est unique et suit le protocole ERC-721. En général, chaque NFT affichera une image différente dans le portefeuille, et chaque groupe de NFT a un ID unique pour les distinguer.

En raison des caractéristiques des NFT, il n'est pas possible de fixer un prix comme pour les jetons ERC-20 via une courbe de prix. Par conséquent, la méthode de trading la plus courante actuellement est sous forme de carnet de commandes.

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

Mode de transaction sur le livre de commandes

Le modèle de carnet de commandes, en termes simples, est celui où le prix des marchandises est fixé par des humains, contrairement à la méthode de calcul des prix par courbes de prix. Le carnet de commandes a généralement deux modes de trading :

  1. Ordre de prix : le vendeur fixe le prix de vente, et l'acheteur peut acheter directement si cela lui convient.

  2. Ordre d'achat : L'acheteur émet un ordre d'achat, le vendeur peut vendre s'il pense que le prix est approprié.

En général, le prix des ordres d'achat sera inférieur à celui des ordres de prix. Cet article présente principalement le modèle d'ordre de prix.

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

Fonctionnalités de base de la plateforme NFT

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

  1. Mettre en vente des produits : Mettre les NFT en vente selon le prix fixé.
  2. Acheter des produits : acheter en fonction du prix de l'NFT
  3. Frais de plateforme : des frais sont prélevés en proportion du prix de la transaction.

processus de mise en ligne des produits

  1. Front-end : l'utilisateur choisit le NFT et fixe le prix, puis clique sur mettre en vente.
  2. Contrat : l'utilisateur autorise le contrat à opérer des NFT

Il est nécessaire de maintenir un tableau de correspondance des prix des produits mis en vente par les utilisateurs dans le contrat. Ces données peuvent également être stockées dans des services centralisés pour alléger la charge du contrat, mais dans cet article, elles seront directement stockées dans le contrat.

Processus d'achat de biens

  1. Frontend : L'utilisateur choisit l'NFT qu'il souhaite acheter et clique sur acheter
  2. Contrat : Transférer les fonds de l'acheteur au vendeur, NFT à l'acheteur

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

Réaliser une plateforme de NFT

1. Créer un NFT de test

Vous pouvez déployer rapidement un contrat NFT du protocole ERC-721 pour des tests via Remix.

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

2. Rédaction de contrats intelligents

Le contrat doit inclure les principales fonctionnalités suivantes :

2.1 Vendeur met en ligne NFT

Processus :

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

Méthode de mise en ligne requise :

  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 ligne

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

2.2 L'acheteur achète un NFT

Processus:

  1. Lire les données NFT à partir des listings
  2. Calculer et déduire les frais de service
  3. Transférer le NFT à l'acheteur
  4. Déclencher l'événement d'achat

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

2.3 Annuler la mise en ligne

Il suffit de définir le champ isActive correspondant à l'NFT dans les listings sur false.

2.4 Retrait des frais de transaction

Retirer les frais accumulés dans le contrat à l'adresse spécifiée.

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

3. Développer l'interface frontale

Utilisez les outils suivants :

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

L'interface utilisateur comprend trois pages principales :

  1. Mint: utilisé pour frapper des NFT de test
  2. Acheter : marché des NFT, possibilité d'acheter des NFT
  3. Portefeuille : gérer les NFT des utilisateurs, prendre en charge la mise en vente et le retrait.

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

3.1 Connecter le portefeuille

Utilisez le composant de connexion Ant Design Web3.

Web3 nouveau venu série : 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 Nouveaux venus série : Réaliser 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 suppression.

Lors de la mise en vente, appelez la méthode listNFT, et pour l'annulation, appelez la méthode cancelListing. Avant la mise en vente, vous devez autoriser le NFT au contrat.

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

3.4 Page d'achat

Afficher tous les NFT mis en vente, appeler la méthode purchaseNFT pour effectuer l'achat.

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

À ce stade, une plateforme d'échange NFT décentralisée de base est terminée. Le projet peut être déployé sur Vercel pour des tests et une utilisation.

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
  • 4
  • Partager
Commentaire
0/400
NestedFoxvip
· Il y a 4h
Ah, c'est si simple que je me suis endormi.
Voir l'originalRépondre0
GasSavingMastervip
· 07-22 00:40
C'est bien expliqué en ce qui concerne les frais.
Voir l'originalRépondre0
MetaLord420vip
· 07-22 00:37
C'est un bon tutoriel, avec des informations précieuses.
Voir l'originalRépondre0
DisillusiionOraclevip
· 07-22 00:36
Je vais acheter même si je ne comprends pas !
Voir l'originalRépondre0
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)