Ce tutoriel est la partie 3 de la série NFT. N’hésitez pas à lire les deux premières parties avant de commencer cet article.

Partie 1 : Comment créer un NFT et le déployer à Rinkeby

Partie 2: Comment déployer votre NFT à IPFS

Dans cet article, nous allons créer une application de minting nft à l’aide de react. En fait, l’un des plus grands défis pour les développeurs du Web2 est de déterminer comment connecter le contact intelligent à un projet frontend et interagir avec les fonctions du solidity.

Si c’est la première fois que vous créez une dapp, nous avons déjà créé un article sur ce sujet. Vous pouvez le visiter en utilisant ce lien.

Qu’est-ce qu’une dapp de minting ?

1-Qu’est-ce qu’une dapp de minting ?

2-Créer une dapp de minting

Qu’est-ce qu’une dapp de minting ?

Une Minting dapp est une interface utilisateur simple dans laquelle vous pouvez minter des NFTS . Vous apprendrez à :

  • Connectez-vous à Metamask via votre projet frontend
  • Appelez des méthodes de contrat intelligentes depuis votre interface
  • Signer des transactions à l’aide de Metamask

Créer une dapp de minting

Pour suivre les instructions de  cet article, vous devez installer metamask ou tout autre portefeuille pour signer la transaction. De plus, vous devez savoir comment fonctionne React.

La première chose à faire est de créer un dossier Frontend dans votre répertoire racine comme l’image ci-dessous:

wlU5EUSXgvVjvMNNoFNVabeeOSaaLK4SCHjbrOi5kTBg1q78WXPFQYL4sBeMX5SfEFGMx5uzRQ2ewsmFZjhdgAe1aNKHwl9R196QZlN9 zMBJtnRV0UHGWR

Ensuite,on va créer un projet React.En effet,en utilisant votre terminal,écrire la commande ci-dessous pour naviguer vers le dossier frontend:

VWEfES7qhqmyz1ZM0QnwLhsPg3tcOSJWGNy yOblQeX zT452 RnMbPNb0cMVGtzvowkY4GG1zDWMwcrd9T7z1UwZLfmvgY 1LfG7Nnb HJIghdyw9pMeCl4lPtmtvkJwnzDZRvwByV1nVE7kMwGMbqUjnLsNeR hcGPX6mcL ZBIG2iCThm DU7

Initialisez un nouveau projet React en utilisant la commande ci-dessous:

M7BXKWhWmte28XKL3X2I6WGoRd cHt69E j1obSeyIfI lBbDsqT9YvC5EOFWIaLe 4veSTeVIXkfJ5tlCuKNjTUvBjonJ44tifcb GaYIrOitchOD1b4VBrd97Xt8AR7MLjBMPuCGjPrfaOXMB1Jj qjL17rdug84B oTADJwI5Lz4Q2mo5Iw5a

L’étape suivante est de créer la page statique en utilisant HTML et CSS.En effet, c’est a vous de la faire comme vous voulez,on va créer une simple page pour qu’on puisse se concentrer plus sur l’interaction avec la smart-contrat.Vous allez trouvez le code de la série en entier dans un repo github a la fin de cet article.

L’image ci-dessous représente la page de notre Dapp:

AyiX87vKA98Iow VagKatJurJ0shkEsho7Nk60wEZSzgoUm69w oBdqY8HapfE3EOKMYOZ0aNVEK14JuvUkzjysUYLi8mBZGQzETXSQg0A65a9aBlfutEZqyJApqZk7jMBLldO EOMceR gWkOqwh8

Ensuite,on va déplacer le dossier contracts qui se trouve dans le chemin ./build/ vers ./frontend/src car on va utiliser les fichiers .json qui représentent l’output de la compilation de nos contrats intelligents.

Rk8FOTMyvh5qxXYDEEZSmGtM nYho6lp7zLBNAqtMTed8zEHML9tW39g7oFF8btF0sKS1X618sBcdG2rJABA qgeotXAYWXWxiGqfA0 1pHIUV9KmRtFpmsRD7o kOPbS oS37dPRZUeDt81A mCm7ZCAC3GNLeJXWDfot6HjSmkjeWssjYDJl7n8Q

Ensuite, nous intégrerons web3-react, si vous n’avez jamais entendu parler de cette bibliothèque, je vous invite à visiter le lien où nous avons déjà parlé de comment créer votre première dapp.

Pour installer web3-react et web3,vous devez écrire les commandes ci-dessous dans votre terminal:

cxWE3EbaIltTV XU6BRf9RcoIypMzz7WM yb4lA45x97hw xCfJv7fFFM0VNsNDX6pzWIyXACdJYNcsmDJubJNJna65uAEezmZ5yiEeKqi4rEq9i2Pv4ec2UqIsVYxH6psIwK c6Fm3WymkjlSj5NtY300hXryuB x9SCtslYj GPN5n
g

Par la suite,on implémente cette library dans le fichier index.js comme ci-dessous:

SXupHg3qZyE

On a importé Web3 ainsi que Web3ReactProvider .En effet,<Web3ReactProvider> doit envelopper tout le code comme ci-dessous:

ecVCvvAf564Zs z2mN929JPrfCKH8IUS9XatZ ojq5TDg6NBXhGi2GIDHBI9CtYga7CJFx5yIL4nIBvrp75UfgU

Parlons maintenant de la fonction getLibrary().On va utiliser la bibliothèque web3 comme ci-dessous:

t6LxHEIzAPOrUUtI6WQiSoQCfA5XJt dJ33GjA7PRka0AeeXgqzXnREsTzmiYZ6uIuStR0uMq3 e6 f1d48pKDqeBUgkm8G9pMKjth0a1yaw5689TX4H9HEK sKGg24 VCpNIZfx el7 zEdTSJMdtUfInLSYYNEyjLwxMVX8E XeFFfPD1GrjUDdg

Par la suite on va essayer de connecter metamask avec notre dapp.En effet,on va créer un fichier connectors.js dans le chemin ./utils/connectors.js:On va utiliser InjectedConnector importé de @web3-react/injected-connector comme ci-dessous:

lSSg PxRWOP F43x4a4L3z55PLcApzr3BKkTOn03vJRYz9 EPgQQvImiezVY48qdo423lG1nJAUSQAdboBpXAim3esGSVcLY NhFRrDM9UXkLADpKVRKcJK rzJMdQ4K9 jQOfWFQiwO6itxTGcN1midJHwLAc 1DqzSQp3KWz1XiLT0nOapcmHOag

Dans le fichier App.js,essayez d’écrire le code ci-dessous pour établir la connexion avec metamask:

r6U81bDIMCnBzVdSHIp0TZTgTkoJEPNEysGRaACKJlH0MoCFEJ5NF8Vyi5D5MFyx2YlI1pO69BsjfzBV8RjuNoO yupD8cwi

Comme mentionné dans l’image,on utilise activate pour établir la connexion.

L’étape suivante est de savoir comment interagir avec le contrat intelligent en utilisant les fichiers .json que nous avons déjà copiés dans le dossier ./contrats

Pour effectuer cette opération, nous utiliserons un hook personnalisé. Nous créerons un nouveau fichier useContract.js dans le dossier ./hooks.Le code est  comme ci-dessous:

9j3AYP5PXAAjRb8ShAIvxg6 FRvXIHrIgNPXpMYdXgSxDHmM0Pgeyb0 j6biP5Axn4lzlzZgq hmiaRd6Fsy9opsCourHVY3PYrs7 bn3623HL iUww452dP22WTVRr9w1au3Vimynuaqkc5TmkN1cGB4p4WvWgy 2cvavZZxNKEjr9J1V 1AEzERw

Expliquons ce code:

  • En premières lignes,on fait juste l’initialisation des variables avec la hook useState() ainsi qu’on essaye d’obtenir le signer.
  • Dans le hook useEffect(),on essaye juste d’obtenir l’adresse où le contract est déployé ainsi que l’instance en utilisant l’abi de notre contrat et l’adresse de déploiement, mais en cas d’erreur on obtient l’erreur,une addresse vide,et une instance undefined.
  • N.b:N’oubliez pas d’installer @ethersproject/constants en utilisant la commande ci-dessous:
tqInPq3yAFRq13D9WZEZHleYPgBxb7Vdis2phGpHLSg0oU82z1pWsj955Cy7

Il ne reste plus qu’à interagir avec la fonction de mint() et minter un NFT pour votre adresse.

On initialise une variable adsress avec useState() comme ci-dessous:

HX9pEbId0IV wjzbJrdXkgtzQSdkCHnv51ikJZ9KAqjzjLeHzHg1uUvHbd68 q2M9yhJhzhrxuqZujBMdsS0 dstMMt Knl2w
zC5Ymm NtuyiKnahznKncApJ2hFdqx0cTHl9b022k2oEngfmRCQfosS P4RBnYolshJVeCxoTOYFRZFdmRkjdMOkpa02NHW8VceWEyCyA9CfmW 4Hn1H6FZ6tvjXl05Y3TanP5LxyQWkXxrkljr0dw7eCBSabYiT47FHLWJ1enbpxn4QZDcXDko 8w

Le mint va être exécuté en cliquant sur le bouton “Let’s Mint”.Alors on doit définir une fonction mintNFT() qui s’exécute en cliquant sur cette button.

wPrIc BJsotSC1wEKV2KvqdbnBB7hdDU7Gqaw1pbsr8unREGZ6FKq9Wrt2XtCgaWw4JpvLONS0i0TmXu 53fDRi r7 n9vIXIkRLtb1lkjP5GaTDMO79iX 5toX94HUHuEzjzRFFbHwXi4sNJ7755lIe4pb8RudbIsodzSH7YXQKtLZrTSLqocVmHA
2II3lG2cWLSS UJi6eX31fnKeRSHEcmK6T0osgpzOydoJAEjGyhEcdsagh5qK toesJ l 3fyKorYJwZu5EQC9huOGaTR80 QUdM5yTugm9wSwKq84eBQcK2wJJwdIgdZWknDmNjivbeju6rS6pV UNsYwoOAyKaN0u7ES dyPwZ9MaJWBIoDLRGKw

Par la suite, on import le hook useContract et on l’initialise comme ci-dessous:

iXQU9j1mTohL9Kqrs2YPaGnmTY4D6k k 8Bh2w2UmRMYirPXbKtmaXS4HdgeEO2kg6HlMfje eAOyAD9hGxlib7Y8O4KCeEbvqFGNMmURKbW9Q8JVtNiLRYz80rCzZ3Lxkw5GpMzSeSxh4HTqFXLqWJRjUqd96z2eWkNBQk975qi8u2qSt 1j7c0zw
p eere6HdWNgRyNc1lN62UD7t8QT7R6h6ow6zMEgWunWDge qJjM77PyXGzn789CNZ1uS2FHcfgdT2ydeQbNVysNY9 C46KCEQbg3oH6i64ziD64jm7lqiwf9fLzvmVLdNlyR el40i5n34S0cHGE6NeVDVsq QOPn caWLARyXb8KobILj9aQ9vUg

Ensuite,il nous reste qu’à écrire le code pour appeler la fonction mint() dans notre smart-contract:

cpDM833JMdly7KZ4EDqrVJz3l4XlVzvFdzGzW5MVmPt3OmHhPFTPLwJiDLQbP9oZRPngKNdtVeGOqu9lcqeO aT6Om5HixkPZoq bSdNIi8gC5968Xbuos34MUSEEzui9iY5LPtKmOM31fKprrHTYKfLBV3FHvirIj3zyypJoCxm6dI6SAndoUS5 g

l’image ci-dessus représente comment on peut interagir avec une fonction qui écrit ou modifie dans la blockchain, alors on a besoin d’envoyer un montant de gas comme frais de l’opération exécutée.

Une fois vous cliquez sur la button “Let’s Mint”, il vous reste juste de confirmer la transaction avec metamask comme ci-dessous:

SQ44gZjrnvcYKvhoDyPTVgzF hwLKq0T8Jku0nTaH4bQ1eDhY28dDRMqh8RFGMGU1PpW46QdN61lCbyOy1LOW X9Fmy0COHKQD6p5lbo EmgJQP30za9YSxN0jbmfcMUmsbqlbf aEk3oSW7X57A1GS99q0fdGvNFYHxOtCg2WONvn0SO 5dIFX UQ

Si vous voulez appelez une fonction “view”,il y aura un petit changement parce qu’on ne vous demande pas d’envoyer les frais (gas fees),on veut juste obtenir des données venant du blockchain.Voici l’image ci-dessous:

X7U9xNHCBYB4T6rO8vOporh3sJ6jRKhQHZq7HOLwXJ x4BWkb50ooOA4yVZPyZziPC16YZaKDeUSTJsjs8h3Y5767Y0XrSuVHC0TrAmk8xMOAsrl4Xd2bj0UFoyg0c1T3dMm9GeRNuSHdhrOWFdvSBSMRrr iwMtuXkkRybNdVk9wQvwCvPRTooJ Q

Et voilà, félicitations encore une fois vous avez minté un nft en utilisant le dapp.

Certes cette série arrive à la fin, mais surement nous reviendrons à ce sujet parce qu’il y a beaucoup de choses à apprendre.

LAISSER UN COMMENTAIRE

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.