Construire une plateforme de trading NFT décentralisée à partir de zéro : guide de mise en œuvre des smart contracts et du front-end

robot
Création du résumé en cours

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

Dans les articles précédents, nous avons exploré comment réaliser des échanges décentralisés de tokens ERC-20 via DEX. Mais comment réaliser des échanges décentralisés pour les NFT conformes au protocole ERC-721 ?

Actuellement, la plupart des plateformes NFT populaires adoptent un modèle de commande en attente pour les transactions, similaire à des produits exposés sur les étagères d'un supermarché, où les acheteurs peuvent acheter et emporter si le prix leur semble approprié. Cet article mettra en œuvre un échange décentralisé de NFT en écrivant des contrats intelligents et une simple interface frontale. Il est important de noter que le contenu de cet article est uniquement destiné à des fins d'apprentissage et n'est pas adapté à un environnement de production.

Web3 nouvel utilisateur série : réaliser un DEX NFT à partir de zéro

Introduction aux NFT

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

En raison des caractéristiques des NFT, il n'est pas possible de fixer un prix via une courbe de prix comme pour les jetons ERC-20. Par conséquent, la méthode de transaction courante est d'adopter un format de livre de commandes.

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

Mode de transaction sur carnet de commandes

Dans le mode carnet de commandes, le prix des produits est fixé par l'homme, contrairement à la méthode de calcul des prix par algorithme. Le carnet de commandes a généralement deux modes de trading :

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

  2. Commande d'achat : l'acheteur émet une commande d'achat, le vendeur peut vendre si le prix lui semble approprié.

En général, le prix des ordres d'achat sera inférieur à celui des ordres de prix. Cet article se concentrera sur le mode de transaction de prix.

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

Fonctionnalités de base du DEX NFT

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

  1. Mettre en vente des produits : mettre le NFT en vente au prix fixé
  2. Acheter des produits : acheter au prix NFT
  3. Perception de frais: perçue selon le prix de transaction au prorata.

processus de mise en ligne des produits

  1. Frontend : l'utilisateur choisit un NFT et fixe le prix, puis clique sur mettre en vente.
  2. Contrat : l'utilisateur autorise le contrat à opérer son NFT

Il est nécessaire de maintenir une table de correspondance des prix des produits mis en vente par les utilisateurs dans le contrat. Pour alléger la charge du contrat, ces données peuvent également être stockées dans un service centralisé.

Processus d'achat de biens

  1. Front-end : L'utilisateur choisit le NFT qu'il souhaite acheter et clique sur acheter.
  2. Contrat : transférer les fonds de l'acheteur au vendeur, NFT au acheteur

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

Réalisation DEX NFT

Nous allons créer un DEX NFT à partir de zéro.

1. Créer un NFT

Pour les besoins des tests, nous pouvons créer rapidement un NFT selon le protocole ERC-721 via Remix. Nous pouvons également utiliser directement un NFT déjà préparé.

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

2. Rédaction de contrat

Le contrat doit inclure les principales méthodes suivantes :

2.1 Vendeur met en ligne 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

Méthodes de mise en ligne à exécuter :

  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 Nouveaux utilisateurs : Créer un DEX NFT à partir de zéro

2.2 L'acheteur achète un NFT

L'acheteur choisit un NFT et effectue le paiement, le contrat s'exécute :

  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 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 vente

Il suffit de définir le champ isActive du produit sur false.

2.4 Retrait des frais de transaction

Les frais peuvent être déposés dans un contrat ou transférés à une adresse spécifiée.

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

3. Développement de l'interface DEX

Outils principaux utilisés :

  • Ant Design Web3 : connexion de portefeuille, affichage des cartes NFT
  • Wagmi: interaction avec le portefeuille
  • Nextjs + Vercel : déploiement du projet

L'interface utilisateur devrait inclure trois pages : Mint, Buy et Portfolio.

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 pour établir la connexion au portefeuille.

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

3.2 Page Mint

Utiliser la méthode useWriteContract de wagmi pour réaliser l'alimentation de NFT.

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

3.3 Page du portefeuille

Afficher les NFT des utilisateurs, support des opérations de mise en ligne et de retrait.

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

3.4 Page d'achat

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

À ce stade, le front-end d'un DEX NFT de base est terminé. Il peut être déployé sur Vercel pour y accéder.

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

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
  • Reposter
  • Partager
Commentaire
0/400
PoolJumpervip
· 07-21 17:01
会整是pro
Voir l'originalRépondre0
DogeBachelorvip
· 07-19 17:08
Pouvez-vous, s'il vous plaît, donner plus de détails sur la façon de procéder, buddy ?
Voir l'originalRépondre0
BlockTalkvip
· 07-18 22:22
Il vaut mieux ouvrir une boîte et faire du dumping que de gérer un contrat soi-même.
Voir l'originalRépondre0
ApeDegenvip
· 07-18 22:22
Enfin, j'ai un tutoriel qui va me rendre riche !
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)