De 0 à 1 : Guide complet pour construire un DEX NFT

robot
Création du résumé en cours

Créer un DEX NFT à partir de zéro

Dans un article précédent, nous avons exploré comment les tokens ERC-20 peuvent être échangés via des plateformes d'échange décentralisées. Mais qu'en est-il des NFT qui suivent le protocole ERC-721, comment réaliser un échange décentralisé ?

Actuellement, la plupart des plateformes d'échange NFT mainstream adoptent un modèle d'ordre, similaire à l'affichage de produits sur des étagères pour que les acheteurs puissent les choisir. Cet article mettra en œuvre un système de trading NFT décentralisé de base en écrivant des contrats intelligents et une interface frontale simple. Il convient de préciser que cet article est uniquement à des fins d'apprentissage et ne convient pas à un environnement de production.

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

Introduction aux NFT

NFT est un jeton non fongible, chaque Token est unique. Il suit le protocole ERC-721, généralement affiché sous différentes formes d'images dans le portefeuille, et chaque NFT a un ID unique pour le distinguer.

En raison de la spécificité des NFT, il n'est pas possible de les évaluer par une courbe de prix comme les tokens ERC-20. Par conséquent, les transactions NFT se font généralement sous forme de livre de commandes.

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

Mode de trading sur carnet d'ordres

Dans le mode de carnet de commandes, le prix des produits est fixé par le vendeur lui-même, et non calculé par un algorithme. Il existe généralement deux types de méthodes de transaction :

  1. Ordre de prix : le vendeur fixe le prix de vente, l'acheteur peut acheter s'il le juge approprié.
  2. Ordre d'achat : L'acheteur publie un ordre d'achat, le vendeur peut vendre si le prix lui semble approprié.

Cet article mettra l'accent sur le premier type de méthode de prix.

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

Fonctionnalités de base d'une plateforme d'échange NFT

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

  1. Mettre en vente des produits : Mettre l'NFT en vente au prix fixé.
  2. Achat de produits : achat au prix de l'NFT
  3. Perception des frais : prélevés en fonction du prix de transaction

processus de mise en ligne

  1. L'utilisateur choisit le NFT sur le frontend et fixe le prix.
  2. L'utilisateur autorise le contrat à opérer son NFT
  3. Enregistrer les informations de mise en vente dans le contrat

Processus d'achat

  1. L'utilisateur sélectionne le NFT sur le front-end et clique sur acheter
  2. Le contrat transfère les fonds de l'acheteur au vendeur et transfère le NFT à l'acheteur.

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

Réaliser une plateforme d'échange NFT

Nous allons créer une plateforme d'échange NFT simple à partir de zéro.

1. Créer un NFT de test

Pour faciliter les tests, nous pouvons utiliser Remix pour déployer rapidement un contrat NFT au protocole ERC-721. Bien sûr, nous pouvons également utiliser des NFT existants pour les tests.

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

2. Rédiger un contrat intelligent

Le contrat doit réaliser les principales fonctionnalités suivantes :

2.1 Vendeur met en ligne NFT

Processus :

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

Web3 Nouveaux utilisateurs série : réaliser un NFT DEX depuis zéro

2.2 L'acheteur achète un NFT

Processus:

  1. Obtenir des informations sur la mise en ligne des NFT
  2. Calculer et déduire les frais de transaction
  3. Transférer la propriété de l'NFT
  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 ligne

Cela peut être réalisé en définissant le champ isActive sur false.

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

2.4 Retrait des frais de transaction

Le propriétaire du contrat peut retirer les frais accumulés.

Web3 Nouveaux Utilisateurs Série : Réaliser un NFT DEX à partir de zéro

3. Développer l'interface frontale

Utilisez les outils suivants :

  • Ant Design Web3 : connexion de portefeuille et affichage des NFT
  • Wagmi: Interagir avec le portefeuille
  • Next.js + Vercel : déployer le projet

L'interface utilisateur comprend trois pages principales :

  • Mint: Tester l'acquisition d'un NFT
  • Acheter : marché NFT
  • Portefeuille : gestion des NFT de l'utilisateur

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

3.1 Connecter le portefeuille

Utiliser le composant de connexion Ant Design Web3.

Série pour débutants Web3 : réaliser un NFT DEX depuis zéro

3.2 Page de Mint

Utilisez la méthode useWriteContract de wagmi pour appeler le contrat et frapper des NFT.

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

3.3 Page du portefeuille

Afficher les NFT des utilisateurs et prendre en charge les opérations de mise en ligne / mise hors ligne.

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

3.4 Page d'achat

Afficher tous les NFT en vente et prendre en charge la fonction d'achat.

Grâce à ces étapes, nous avons réalisé une plateforme d'échange décentralisée NFT avec des fonctionnalités de base. Enfin, le projet peut être déployé sur Vercel pour être utilisé en ligne.

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
  • Partager
Commentaire
0/400
ChainMaskedRidervip
· 08-04 18:11
Cet article ne dit que des absurdités, c'est comme s'il n'avait rien dit.
Voir l'originalRépondre0
CommunityWorkervip
· 08-04 01:49
Qui voudrait utiliser un DEX sans frais de gas ?
Voir l'originalRépondre0
MelonFieldvip
· 08-02 21:21
Waouh, cet article est écrit facilement.
Voir l'originalRépondre0
GmGmNoGnvip
· 08-02 21:21
Je n'ai pas envie d'apprendre le code, autant couper les coupons.
Voir l'originalRépondre0
ILCollectorvip
· 08-02 21:03
Ah ah ah, encore une nouvelle collection qui va me prendre les gens pour des idiots.
Voir l'originalRépondre0
RugPullProphetvip
· 08-02 21:00
Avoir une main suffit, agissons d'abord par respect.
Voir l'originalRépondre0
LazyDevMinervip
· 08-02 20:53
Le front-end est mal écrit, pourquoi ne pas l'utiliser en production ?
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)