Construire une plateforme de trading NFT décentralisée à partir de zéro : smart contracts et mise en œuvre frontale

robot
Création du résumé en cours

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

Pour les NFT suivant le protocole ERC-721, comment réaliser une transaction décentralisée ? Actuellement, la plupart des plateformes de trading NFT adoptent principalement un mode de commande, semblable à des produits exposés sur des étagères, où les acheteurs peuvent acheter si le prix leur semble approprié. Cet article expliquera comment réaliser une fonctionnalité de trading NFT décentralisé de base en écrivant des contrats intelligents et une simple page frontale.

NFT( Token non fongible ) Introduction

Un NFT est un jeton non fongible, qui suit le protocole ERC-721, chaque jeton étant unique. En général, les NFT affichent différentes images dans le portefeuille, et chaque groupe de NFT possède un identifiant 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, c'est pourquoi la méthode de transaction courante est sous forme de carnet de commandes.

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

Mode de négociation sur le carnet de commandes

Dans le modèle de carnet de commandes, le prix des produits est fixé par l'homme, contrairement à la méthode des teneurs de marché automatiques qui calcule le prix en fonction de la courbe des prix. Le carnet de commandes comporte généralement deux modes 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 émet un ordre d'achat, le vendeur peut vendre s'il juge le prix approprié.

En général, le prix des ordres d'achat sera inférieur au prix des ordres de vente. Cet article présente principalement la méthode de transaction des ordres de vente.

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

Fonctionnalités de base de la plateforme NFT

Une plateforme de NFT 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. Frais de plateforme : prélevés en fonction du prix de transaction.

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 l'opération de NFT par le contrat

Le contrat doit maintenir une table de correspondance des prix des produits mis en vente par les utilisateurs.

Processus d'achat de produits

  1. Frontend : l'utilisateur choisit le NFT et clique sur acheter
  2. Contrat : transférer les fonds de l'acheteur au vendeur, NFT au acheteur

Web3 Nouveaux utilisateurs : créer un DEX NFT depuis zéro

Réaliser une plateforme d'échange NFT

Cette section va créer à partir de zéro une simple plateforme NFT.

1. Créer un NFT de test

Vous pouvez utiliser Remix pour déployer rapidement un contrat NFT basé sur le protocole ERC-721 pour des tests.

Web3 débutant série : réaliser un DEX NFT depuis zéro

2. Rédaction de contrats intelligents

Le contrat doit inclure les principales méthodes suivantes :

2.1 Le vendeur met en ligne le NFT

Flux:

  1. L'utilisateur choisit le NFT
  2. Définir le prix
  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 l'NFT
  2. Ajouter un enregistrement de mise en vente
  3. Déclencher un événement de mise en vente

Web3 débutant série : réaliser un DEX NFT de zéro

2.2 L'acheteur achète des 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 l'événement d'achat

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

2.3 Annuler la mise en vente

Définir le champ isActive des enregistrements en vente sur false.

2.4 Retrait des frais de transaction

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

Web3 Nouveaux Arrivants Série : Réaliser un DEX NFT de zéro

3. Développer l'interface frontale

Utilisez les outils suivants :

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

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

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

3.1 Connecter le portefeuille

Utiliser le composant de connexion Web3 d'Ant Design pour établir une connexion de portefeuille.

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

3.2 Page de Mint

Utilisé pour frapper des tests NFT, appeler le contrat en utilisant la méthode useWriteContract de wagmi.

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

3.3 Page de portefeuille

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

Processus de mise en ligne:

  1. Autoriser le NFT au contrat
  2. Appeler la méthode listNFT

Retrait : appel de la méthode cancelListing

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

3.4 Page d'achat

Afficher tous les NFT mis en vente, supporte l'opération d'achat.

Appelez la méthode purchaseNFT lors de l'achat, en utilisant ETH pour le paiement.

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

Après avoir terminé les étapes ci-dessus, une plateforme NFT fonctionnelle de base est mise en place et peut être déployée sur Vercel pour des tests.

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
  • Partager
Commentaire
0/400
TokenSleuthvip
· 07-15 08:04
C'est comme ça, sans rien d'extraordinaire.
Voir l'originalRépondre0
LiquidityWitchvip
· 07-12 12:42
Combien de frais peut-il y avoir ? Soyez réaliste.
Voir l'originalRépondre0
TheMemefathervip
· 07-12 12:40
Avec les frais de transaction, vous pouvez gagner beaucoup.
Voir l'originalRépondre0
VibesOverChartsvip
· 07-12 12:39
Encore envie de prendre les gens pour des idiots avec de nouveaux pigeons, n'est-ce 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)