Comprendre en un article le processus complet de développement d'une plateforme de trading NFT décentralisée.

robot
Création du résumé en cours

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

Pour les NFT conformes au protocole ERC-721, la manière d'implémenter la décentralisation des échanges est différente de celle des jetons ERC-20. Actuellement, la plupart des plateformes de trading NFT adoptent un modèle d'ordonnancement, similaire à la disposition des produits sur les étagères d'un supermarché, où les acheteurs peuvent choisir librement.

Cet article présentera comment réaliser une plateforme d'échange NFT décentralisée de base à l'aide de contrats intelligents et d'une interface frontale simple. Il convient de noter que ceci n'est qu'un exemple d'apprentissage et n'est pas adapté à un environnement de production réel.

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

Caractéristiques et modes de transaction des NFT

NFT est l'abréviation de jetons non fongibles, chaque Token est unique. En général, les NFT affichent différentes images dans le portefeuille, et chaque groupe de NFT a un identifiant unique.

En raison de cette caractéristique des NFT, il n'est pas possible de les tarifer comme des jetons ERC-20 par une courbe de prix. La méthode de transaction la plus courante actuellement est d'utiliser un livre de commandes.

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

Mode de transaction sur carnet de commandes

Il existe principalement deux formes de modèle de livre de commandes :

  1. Ordre de prix : le vendeur fixe le prix, l'acheteur peut acheter directement 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 bons de commande est inférieur à celui des ordres de prix. Cet article se concentrera sur le mode des ordres de prix.

Série pour débutants Web3 : 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 les NFT en vente à un prix spécifié.
  2. Acheter des biens : effectuer un achat selon le prix NFT
  3. Frais de plateforme : un certain pourcentage de frais est prélevé sur le prix de la transaction.

processus de mise en ligne

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

En même temps, il est nécessaire de maintenir une table de correspondance des prix des produits listés dans le contrat.

Processus d'achat

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

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

Développement d'une plateforme NFT

Nous allons ensuite créer une plateforme NFT simple à partir de zéro.

1. Créer un contrat NFT

Pour les besoins des tests, nous pouvons utiliser Remix pour déployer rapidement un contrat NFT basé sur le protocole ERC-721. Bien sûr, nous pouvons également utiliser un contrat NFT existant.

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

2. Contrat de plateforme

La plateforme de négociation doit inclure les fonctionnalités clés suivantes :

2.1 Le vendeur met en ligne le NFT

Le processus est le suivant :

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

Méthodes de mise en ligne nécessaires :

  • Vérifier la propriété des NFT
  • Ajouter un enregistrement de mise en ligne
  • Déclencher l'événement de mise en ligne

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

2.2 L'acheteur achète un NFT

Processus d'achat:

  1. Lire les données de mise en ligne des NFT
  2. Calculer et déduire les frais de transaction
  3. Transférer le NFT au acheteur
  4. Déclencher un événement d'achat

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

2.3 Annuler la mise en ligne

Pour annuler la mise en ligne, définissez le champ isActive sur false.

2.4 Retrait des frais

La plateforme peut percevoir un certain pourcentage des frais de transaction, stocké dans le contrat ou transféré à une adresse désignée.

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

3. Développement frontend

Le développement front-end nécessite les outils suivants :

  • Ant Design Web3 : pour la connexion de portefeuille et l'affichage de NFT
  • Wagmi: utilisé pour l'interaction avec le portefeuille
  • Next.js + Vercel : déploiement de projet

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

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

3.1 Connexion du portefeuille

Utiliser le composant de connexion Ant Design Web3 pour réaliser la fonctionnalité de connexion au portefeuille.

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

3.2 Page de Mint

Utilisé pour frapper des NFT de test, appelant le contrat via la méthode useWriteContract de wagmi.

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

3.3 Page Portfolio

Afficher les NFT détenus par l'utilisateur, prend en charge les opérations de mise en ligne et de retrait.

Il est nécessaire d'appeler les méthodes listNFT et cancelListing du contrat, et d'autoriser le NFT au contrat avant de le mettre en vente.

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

3.4 Page d'achat

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

Appelez la méthode purchaseNFT lors de l'achat et payez le montant correspondant en ETH.

À ce stade, une plateforme de trading NFT décentralisée de base a été développée. Nous pouvons la déployer sur des plateformes comme Vercel pour des tests.

Web3 Nouveaux venus : 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
  • 5
  • Partager
Commentaire
0/400
failed_dev_successful_apevip
· 07-29 23:38
Ne fais pas ces choses ennuyeuses, écris juste un démo.
Voir l'originalRépondre0
FalseProfitProphetvip
· 07-29 23:38
Leçon d'introduction pour les programmeurs
Voir l'originalRépondre0
ZKProofstervip
· 07-29 23:34
hmm... techniquement parlant, cette implémentation manque de vecteurs de confidentialité critiques
Voir l'originalRépondre0
MetaverseHobovip
· 07-29 23:23
Les frais peuvent-ils être exploités ?
Voir l'originalRépondre0
consensus_failurevip
· 07-29 23:11
informations précieuses Juste que 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)