Thread by @ExyUzi

[THREAD] Créer sa DAPP Web3 et interagir avec un smart-contract 🔗

Après avoir créer notre smart-contract, créons maintenant notre site #Web3 afin que nos utilisateurs puissent mint directement via notre site web 🧑🏻‍💻

N'hésitez pas à me Follow, RT/Liker pour me soutenir 💙⚡️

A savoir que je vais reprendre l'application que nous avions créer sur notre premier Thread ou nous avions créer un système de connexion via Metamask, il faut donc s'assurer que sur notre application React la librairie #ethers est bien installée avec la commande "npm i ethers"

Puis nous importons la librairie en haut de notre page app.js, ensuite, nous créons une constate qui est égale à l'adresse de notre smart-contract

Nous allons maintenant devoir importer l'abi de notre smart-contract, pour ce faire, dans notre dossier src nous allons créer un dossier abi, puis un fichier nommé NFTabi.json

Ici, nous y collerons notre abi trouvable sur rinkeby.etherscan pour ensuite importer notre abi sur notre app.js

Nous avons maintenant notre abi + notre constante smart contract, nous pouvons maintenant appeler les fonctions de notre smart-contract, avant de créer notre fonction de mint, il nous faut récupérer certaines données comme le prix de mint d'un NFT et stocker cette valeur

Nous pouvons maintenant créer notre fonction de mint, afin de pouvoir mint plusieurs NFT nous allons également devoir créer une constante mintNumber que nous modifierons sur notre front-end afin de renseigner le nombre d'NFT que nous souhaitons mint

Pour finir, nous allons créer notre front-end très basique, sans trop de CSS afin de pouvoir lorsque nous sommes connecté, mint un/plusieurs NFT et retourner des erreurs si il y'en a afin de les afficher sur notre front-end.

onClick nous allons lancer la fonction mint.

Nous pouvons ensuite tester notre application, nous pouvons voir que le mint fonctionne bien et que les erreurs sont bien retournées, par exemple si on veux mint alors que notre max per wallet est atteint, l'erreur sera affichée sur notre DAPP

Si tu as trouvé ce Thread intéressant, n'hésite pas à me follow
@ExyUzi pour de futurs Threads et RT/Like le premier post afin de le partager ⚡️