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 :

Tb0qebB0q8KbOS1347uQ0 81yRjAuyF78xf5r0k4E6wd9G0ijzU4iBGVEfkxm0Lbpp6rOyVC8Mcq9ugUGmjVCcUN8As8cQWZcSL2hYXyfZYjsivxMeEOWv5tjxH V1az0J5HLL87YlYrIq7Kb9Xw4G8oAdJMdEcIPMk30K57u1CI9ZInuyEhV Zdfui8Rw

voici la structure de notre projet :

e4V57xGbmC6RGC6H78AJHEm4xPCy8i3zMyfbp8Dh6x1GeMU7NIXJfPf1yb4maMKzH0Fqz2 eqJq03TkSry9GG0aTFJj0j 6Fh5lv8vuohnwJZccmBq7lZQYF4BHtnGSaDnmg0c dqPyxUpxqlCnvzDtd0SgYdtqXp m aH BXfhL9hteK8RFkiUug ARQ

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.

w1aO6SW7l7AIuSWhc0Vn7URCQi8jE99auS6zLGQ9jZZzQCAfstP3cgcYJrFOMtwsuQU2AuRm4MKF2hws2r77s8

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 :

tluEIk19vtAMjiF98sB96nzCON9tV5td5GbVRyJ5ZCIEQtLBZP3TpfwsfBiqZ5RQh6X3NxFVo hV9hYtjxPl34a3QiHhOqNOe0C9PhictSk5lHJCoIYvTwxmrmuwe0JVCzUJ0maIB9UUfh ivdwknrdPgHlRE51XFXX1kbE qgKnYHXG35 z3 U3HgRMKg

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:

eNt3V8TRl32DBHD7qWMOrIYc3B ygFR7bl2uI14q1X PkCo7BzWebXbWVHay07QnXM6CeyY8SyUrTzV5TYAxuUonUuiAVD9qSvWs57Ij9PGoNXgDN1Q4TzYtqCdpotfT8WtqekUBFgsEFmkfy8kKK HQLu6TL8LHjZTEXzs1d3Lbi5plkycDgFoNypodSw
NyWJY0XxA9W LzjLKCxz8QYBt3RHRH kHUGel mUOseYNP80T2n fvLDO6qc7WtEizAJhzkJgo4 vk49OuNy76JYEs6xZ4RvOT4beF9UTx0A5L8RR yikbtZ7UYdmQTE1Z8nuDHhFMaTUY3sIulXRg87DFaBvc8C8pFGVqrCEW 64nxrOGMdl12 Piw13w

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

3UNId 43ygUbFdkKa4AlmfiQPAv1eG0MYSNzvKWPE6uheh5sYvYDuK eXQrD59QUDuPnvlecjfvwVQfrX48 SVPKCX36yCwO1qWijPgcyB YmlhDjvLfdG8oDs 9Kim3d YyAz2S6UelIkNbBrUeL4Koq4 s vrWitiNGkgo5 2g0rlZjAmNuBlZnLY6Dw

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

kXc0hcH1lxd4l8nTThCABWA1AWnC2oGwhPHR6L05loXyUWxLBEb6LblAickEhqIiSD0NiijMdQnyfgX3JnD6EkFqqYOxcmEHGTJumvmO8dXI2Dsv

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

o8MLrMdE4W8uW55wwdtbOKTrcVzlmimWQIpWSGu4QO1CaP8prHnrVsb4bhXpeB xpjeND7fgsHgGVVMDJsKxX6l3ud3z

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:

Qsec0RdmnLRDjfryEvSGjDVe2xJfdAHigaevUzvvW94IC B Ccg H1c9dMYG foNIx Xvmx6PHdGslv0A 4bispkaR8LU1QIBNx5vff64 p9LBXWRL jgAtxk6bX3QprE

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

qOnwGs9uKLXIvpuN7pKK krKDWdSul9S9 zyK3qNRO667GJmhaj2gzhwP6VHVqczOU09UCt A50eXgPQmOf8 iDywmzcZ391g0hK149jDEoM5bXaJm2oJ5KiBtBFvIeDHKdD APYWaG E3okDaCn

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.

cV2gV6k2r6tbPAVLAeKctBSFvJCLpiJYxXYjX1 hLZMGmJfVNI 0jloU5T1Sw4RxasHfjEBq68303ml7 pTq2tKer9hay3nt6EaAt6stluNe2P0m eR 55viafUA62NONZgbiTxjUjXiX9fFfjs8T3Ld7a6Z8mA I7YZ6sEmVJ5IkhzwUljmNxU4 55JQA

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 :

kvOw n2LcgewIQrOZ6Tof4zxSKStUtTtjn1HTEw6P3au ZFqNNFIBdj4IZJT6M7mlTOYzuJHQ2PEPTJoIfkgqt2pDEPZH8o tM8ro Z15jp

La première chose à faire est d’importer le crochet et notre contrat pour commencer à travailler avec lui :

YAswkhlLnkXn5WYDzAb7DD zidY KlzX57aG0PfziA SeGS5ZwERl49dII 9OV6nVncMmbPySq3pIGA4OH90fNqGDDEBkSb9nl85Z4qA2i KbyTedv3lc6Sw60kqk6zoqiHRhAcTbqzEYFrRF5YM

Après cela, nous allons définir la variable contrat comme ci-dessous :

yAcaZxgIRwYwdFwNtO1GtR7bHywFSIxioW2 uET7ExKlPQlRKUsBCSXJOKU5edeEVx52pDOY FvAyG oVUAHfCa 6vJqYqSU0mGiD0Uu1igskdUSTPDQEsseIgEMURwpFqhKH0o1Zrk24jbe0yCoHqTdjAb3kG5cqMVdQ27 vJU8jepMeGGXyWAlL79HNQ

a-Obtenir le nom et le symbol:

Tout d’abord, nous allons initialiser 2 variables en utilisant useState()

MAT gukoduIF8Ciw8lNMJj5T9g3WMdUFUuevhfuv8f CoikdNSSLoesS0CoUOcT6aTtUEUXQIEHiISl0sWrXDcgOWbX MN0HapaTBLTMB8o02DKUA9Xz2 YQOYas2y0tSwMpov3X8owmpf7pG30i2q9rjpUt5SCZayOBwaRpXLaqS

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.

hINFOI u7m0gpxSaH2IiUC1t9HLXq7LozN17P3DoVvjZ cxlRE6 2QBnZhl96xN76PGip3KeYpxOygckfgl9agHAFCO jPOPT1KiaKDQo klKolljMFLuQc81EGGS9earEqFx42AEcGs1fK

La dernière étape consiste à insérer ces valeurs dans le code jsx pour les afficher à l’utilisateur.

JAibdR2h95aSYH8l94 LuXqL7VzYRUX2iOKHhe fOKNCYn77Z10QAgK31ega3E44dndj G98lzG3KbnIqVN1356dljJ9mnChMsjO6hpGcCxDFw8JL2cLNoLm772DWekIbGk6N6NX7pA8bw3BuRdJqB2pL35E5uLEE

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:

DdqdwSfTrhnmxxOOeGGXL0giNNKEWsoJT63cq2FPqIonIQxL VzK 226bY02da qSK09P9K4nEKlzE8E2y0pkSuWWvOMCPcFZ74FH LHogbhekiQnd5LbGNNo4 FAhXW5T3VJqENq2 SWmDLCD tBTBX0z MO8LmCCKl IbaWTAba8p6b8rwk90dYMR9WQ
6rNWKpMjrtF8oZjF GpgM cSqTMFDCiK7fnZrfSfW1DL6XIFVEQaYAUn7Fp3ebeerzXs6HKLoCOZxRzg7vu heBQgZWHOo
DDOKKr66rsKX sh2SwR7ApqyFIyXZ0o5 702 Cm7 DrRfmwJiZBAUdRr5WMObZ1JnNNbGmRoLRjMQxDG7j88a2yAwd1FNwIBG2n2adQiRL5 zK

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.

CibPWMPDJj06Um0G99pAfPc0o7xtTVVSC0kOunaCuQKio8hQvq9pWsoeu1JxdZoVPYGSNA1LlwXriGmN2UisUjY3Gow OVjfAES7q46bQxbVo3zDU29VkuWQclbwIXQ0QhpJaWXKnRsqmSg mXaSSC3C3Fj4B86COLkfAFXLRFuAx8AXdteBEpsACyBw w
mR2m5ejK7 4bo5msBBKZPxZr82URdahfZSU4PmUcYVCb6Zc0ssf7G8ssPf9SFuXu4nucdbE2tGNQof2dkltnsa876bcqmqHmzredIAjk6pIJscAUpYLQbP08jy8UdPHN7J16r6eIinzq7BtTDN260cPK9gf35Ph8BL BwwgzMYlFOYxciTr9dk GkizSdQ
Pw1G0Y kal8piXUdLSxaPW3Dvd6wCoBnhMTn 2Rs1hwKP0O9D1KfLT1 0AZmJVb5Z0y4DBIyYj

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:

cx9l q uBmiC8Vp33WdnX4HOBcpRyIiGZ7WMyEfsIIlsB0vU1Qzp5Ndzz hZBnq0C8kXIDplxp45WYuxWzpzE7p2 lREeaRowlJ1seyYmK383sc4sSP9wXYF2qTkJxedOrxHH3PAI41nxCSGbxxrb6S6EGcbSQ0x X8cSuFMJDQLR2KqnPKxhmGAppTs Q

après cela, nous relierons ces variables avec les entrées comme ci-dessous :

8ss0WteFwWelKedDq vUb5t sWS2qHXrTqQuojoRZq 3Mq 4ycNXTLgMZF2Op7boLzxm1aAXu9jG4bbfWe frVSQaRnjkVGMshSlzrR RX9E4Y7uESmej1 wM3Mxj0

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 :

Z64VQyMGcHeqXiZyYJTKIzNlHQ4JWjV ZY EnUVdla3Gsu2Nzoi7GgVyoPOfg9nVpeOSzEtPAPxj Kj3mgqoGRar76Uqv43oEX9SMZhTIIvaw TzsUtx8UZ QK5s0nr8t1fHXbFVMe2S BqmMbTx g 4E UAoEiqXG n7Glhbgm47KTB1gpgN2dgWNVCgQ

le transfert sera fait à partir du compte connecté, c’est pourquoi nous allons récupérer le compte de web3-react comme ci-dessous :

N5qZTOuRNEa6ZLQ rqB9E CZXYMnRKa8XY81VetYUDM BVr8umI7VWx9xq20oH169iOPmgGZCwcVThHu7
AcVS7sOloJrfqA7rhQ8MbUjkIcMZifAN kQGBvAloYYHcKf j5IGB8aPjhhYplLsPuTwuCufkYgp6HngLWvQL t xOFTr6

Rien ne sera nouveau dans la fonction de transfert comme vous le remarquez dans l’image ci-dessous

Y8FGNybDxgwTkRHWG0iG7ZJnOJubY RoyYXB2c9TWYwhQUkfdZ4R4GmvJqlXUi6vi67lelVsbf0wtc6C XKAgz 05Y91ASs7vKiEdPZ6rVrgtK0Qs2 eaI8PFGa CGRXAnZJdLJGkZN4iYBUWq54Fgt9MiMfV 9 tu2Fxv4pOm T3 ggWOBKPIs48mYZ4g

Execution du fonction de transfert:

Wgp54fukMUokTElh ETVUqEVkzGKYsrP2y7daH5ZWSEiZp6NCAi7ABE9R1IPccwMEfNaB5hi9ISVR0d 5ctJYgZIhieF122Qo3 zHHm7wlw0V29mYV1aNEWLszCN9Yox4HVh8eZxHi10DNmOEKIfzpa5Rqz wKpzik4YJEyuIG1gaIDizqNaAh1kKYSp4A

vérifions si le transfert a été effectué avec succès:

DxFY yjfGskS1DuVsrtW9t9MuaO5IICWFPTdaI pMjPxn hcJpx7EPgpSxnq8IZkWI7vhQiLKemVdWuDg 4WqFg0mH6yU4Q1y2K VxdkeysDy TGRPm7wIN4gj0qLdZ97wJIZkQZ0kkzk rg yb

Félicitations, vous avez créé une application qui peut gérer les fonctions les plus importantes des contrats ERC20.

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.