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 dapp 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 ?
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:
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:
Initialisez un nouveau projet React en utilisant la commande ci-dessous:
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:
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.
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:
Par la suite,on implémente cette library dans le fichier index.js comme ci-dessous:
On a importé Web3 ainsi que Web3ReactProvider .En effet,<Web3ReactProvider> doit envelopper tout le code comme ci-dessous:
Parlons maintenant de la fonction getLibrary().On va utiliser la bibliothèque web3 comme ci-dessous:
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:
Dans le fichier App.js,essayez d’écrire le code ci-dessous pour établir la connexion avec metamask:
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:
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:
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:
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.
Par la suite, on import le hook useContract et on l’initialise comme ci-dessous:
Ensuite,il nous reste qu’à écrire le code pour appeler la fonction mint() dans notre smart-contract:
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:
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:
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.
