Nous avons déjà créé un jeton erc20 dans un article précédent, voici le lien vers celui-ci :Comment écrire votre premier contrat intelligent ERC20 ?
Le problème que nous avons est que seuls les programmeurs peuvent interagir avec notre smart contrat, c’est pourquoi nous allons créer une interface web qui peut gérer presque toutes les fonctionnalités importantes dans le contrat erc20.
Si c’est la première fois que vous travaillez sur une dapp, veuillez consulter notre article précédent sur l’interaction avec le portefeuille en utilisant une dapp frontale. voici le lien vers l’article: Comment Developper une Dapp
N.B:Vous pouvez obtenir le code de ce tutoriel en allant sur ce repo github.
1-Créer le projet react
Tout d’abord, nous devons compiler le contrat et le déployer sur un testnet du réseau ethereum pour le tester avant de le déployer sur le mainnet. En fait, nous avons déjà fait cela dans l’article ou on a créé le contrat, s’il vous plaît jetez un coup d’oeil si vous ne savez pas comment déployer un contrat intelligent à un testnet (nous allons utiliser goerli car lors de la création de cet article, il y a quelques problèmes dans Rinkeby. )
Dans le dossier racine, nous allons initialiser un projet react en utilisant la commande ci-dessous :
voici la structure de notre projet :
Une fois que le projet est initié avec succès, nous allons déplacer les contrats compilés qui existent dans ./solidity/build vers le chemin ./frontend/src.
Après cela, nous allons nettoyer notre projet en supprimant les fichiers qui ne seront pas intégrés pendant le développement.
voici la structure finale de notre projet :
2-Connecter le frontend avec la portefeuille metamask:
Comme nous avons déjà fait dans les articles précédents, nous allons utiliser web3-react pour connecter le frontend avec le wallet.
Pour installer web3-react,vous devez écrire la commande 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:
A la ligne 12, window.ethereum est en fait le fournisseur de MetaMask, il vérifie si MetaMask est installé.
s’il n’est pas installé, nous arrêtons l’exécution de la fonction connectWallet(), sinon, s’il est installé, nous l’activons.
Dans la partie jsx,nous vérifions si metamask est installé et s’il l’est, nous vérifions s’il est connecté ou a besoin d’être connecté avec notre dapp.
3-Implémenter les fonctionnalités du contrat ERC20:
Maintenant, nous allons créer le hook qui nous aidera à interagir avec notre contrat intelligent, le code est dans l’image ci-dessous si vous ne comprenez pas ce que nous avons fait s’il vous plaît revenir à l’article sur la création de votre premier dapp mentionné précédemment.
Nous créerons un nouveau fichier useContract.js dans le dossier ./hooks.
Nous allons utiliser react-bootstrap pour faire la mise en page de notre page. Vous pouvez trouver le code html/css dans le repo github.
Voici ci-dessous la mise en page que vous obtiendrez lorsque vous utiliserez le repo. Nous ne nous concentrerons pas sur le design car le but de cet article est d’interagir avec le contrat Erc20 :
La première chose à faire est d’importer le crochet et notre contrat pour commencer à travailler avec lui :
Après cela, nous allons définir la variable contrat comme ci-dessous :
a-Obtenir le nom et le symbol:
Tout d’abord, nous allons initialiser 2 variables en utilisant useState()
Ensuite, nous allons récupérer les données de notre contrat intelligent, et les stocker dans les variables que nous avons créées dans l’étape précédente.
La dernière étape consiste à insérer ces valeurs dans le code jsx pour les afficher à l’utilisateur.
b-Obtenir la balance d’un compte:
Nous obtiendrons la balance presque par la même méthode que celle utilisée pour obtenir le nom et le symbole.En fait, nous avons besoin que l’utilisateur entre l’adresse du compte, puis c’est à nous de récupérer le solde du compte et de l’afficher dans la dapp.
Voici le code ci-dessous:
C-obtenir le propriétaire,les décimales,et le total supply:
En fait, dans cette section, nous ne ferons rien de nouveau ; c’est le même processus que précédemment.
d-transférer le token
Pour transférer le jeton vers un compte, nous devons spécifier l’adresse du récepteur et le montant. C’est pourquoi nous allons créer 2 variables récepteur et montant comme ci-dessous:
après cela, nous relierons ces variables avec les entrées comme ci-dessous :
Tout ce qu’il nous reste à faire est d’ajouter la fonctionnalité au bouton. En fait, lorsque l’utilisateur clique sur “let’s transfer”, le transfert doit être effectué.
Voici le code ci-dessous :
le transfert sera fait à partir du compte connecté, c’est pourquoi nous allons récupérer le compte de web3-react comme ci-dessous :
Rien ne sera nouveau dans la fonction de transfert comme vous le remarquez dans l’image ci-dessous
Execution du fonction de transfert:
vérifions si le transfert a été effectué avec succès:
Félicitations, vous avez créé une application qui peut gérer les fonctions les plus importantes des contrats ERC20.
