Qu’est ce que une dapp ?

Dapp est un programme exécuté sur une blockchain ou un réseau décentralisé. Dapp est l’abréviation du Decentralized application. Il n’est pas contrôlé par une seule organisation et fonctionne sur un réseau blockchain qui est libre de contrôle central.

Qu’est ce que React?

React est une bibliothèque JavaScript déclarative, efficace et flexible pour

créer des interfaces utilisateur ou des composants d’interface utilisateur. Il vous permet de composer des interfaces utilisateur complexes à partir de petits morceaux de code isolés appelés “composants”.

Qu’est ce que web3-react?

Web3-react est un framework web3 facile à utiliser, simple et extensible pour créer des dApps sur le réseau blockchain Ethereum.

Web3-react est le choix de nombreux développeurs pour ces raisons ;

  • Simple et facile à utiliser.
  • Développement plus rapide.
  • Communauté nombreuse et grandissante.

Qu’est ce qu’une Wallet?

Le rôle d’un portefeuille(wallet) est d’authentifier les transactions et de se connecter à la blockchain respective.On va utiliser metamask comme wallet dans cet article.

Créer votre premier dapp ?

Créer la page web statique en utilisant react:

Comme pour les applications web2, la création de la page statique est la première étape à faire avant d’implémenter des fonctionnalités dynamiques. Nous utiliserons également react-bootstrap pour styliser un peu la page car le but après cet article n’est pas d’apprendre le css. L’image ci-dessous est une présentation de notre page, vous pouvez vérifier le code à partir de ce lien dans github.

H9eOy5jefbccFretYOTGLd5k4gH2mnCTEX0VUe DW3L5LiTu4yjZg72BCHNPRkISaGQgR t

Implementer web3-react

Pour installer web3-react,vous devez écrire la commande ci-dessous dans votre terminal:

K1igR3GDsyv4DGjRZLi0u5Th9pyYYM3BNHJJXuUR9d2aGgkbeYc6d6vhZnJteISc3xLO5czE8pNP7gyMyUdl86Zwtc6ifur5UtJSEcyfMSswTUKf LKHZq019LdmpQx8vdEkOWtNPe9Q c8MESphPw
kheKS0JsR6En5Dkjeol euBxHMUsGYr9j 81O0t1nnv1BEfFJxeUKm3mXRjL0vYjZRRsZq H3nxjwdqmRwtOT33SmTpIfQ5Hm71 pr5Ycm2FgwBFcSO405v K

maintenant, nous devons ajouter le fournisseur de contexte <Web3ReactProvider>:

pour ce faire, nous devons d’abord importer les dépendances comme ci-dessous:

Après cela, vous devez envelopper tout votre code avec <Web3ReactProvider>

comme ci-dessous:

PixaNMsaUheehVN fwu PtVUHbWNaYm xG 7VNiAO3pZtppAYmoaf0hK2WpArATZLu12J0dQGS1B49sXZctZ8zQ7zTbdo ZZatxwBY6eyPcCq6DY5y qWsDVc56B6ifR7Psyped1ztSgWr CeK6vGw

La fonction getLibrary est comme suivant:

clhSiFA255v2EOOJXcD5sZ jchs6v2e6mrF1nBvgFMXhQpOTyiavydnKQvh2b9kPRJCdAaUYc1Aze7lyZrDn31uMZv4585tG0y23OX8ZgZizNrArISrNiqJ8eD8jSsFT2pK3CDFKuKLHzQi1bEXS6Q

N.B:Si vous rencontrez l’erreur dans l’image ci-dessous, veuillez vous trouverez la solution dans ce lien:

9nNLhnM5WLb0qsg4DwJtPsMnysoDWxYbImgLA8DVCQHM0oA3p4wEfnD6U0ft5Ezw2C6TmyELytLtG5aLfbiofesGDSBItmPilpT5t6FdqPIFzwb 3j opx6xr6XXAIfk1T15QSetfZu b07PkEfh56I

Connecter votre wallet

Pour connecter le portefeuille, vous devez créer une nouvelle component

Nous allons d’abord créer un connecteur injecté dans le dossier ./hook. Le code du fichier connector.js est dans l’image ci-dessous :

j0F9dgHqTPaxG WeMh9nz 7y kCEUiOqQp101XYMvETqFD4uWRe9IbT3v5VuvXFlC9ue9UbXZjj7cszA94Vy

Après cela, nous allons créer une component connectWallet où nous n’avons qu’un seul bouton sur lequel nous cliquons pour connecter notre dapp au portefeuille

pour connecter le portefeuille, nous utiliserons activate from useweb3react().Voici le code dans l’image ci-dessous:

89Q8vJj1nDgnPDeRZ6WYn 005tX9LnhAAqPcB 6udn7JZIkOCgB1cYYatV Mxb1YbgcTPhVQndzz2zT ZfEpvq L0Qs
kWFfhrNbDSn rcNGcm lh5BDDYn27x8UgiynQkqnQUsgNlvgkE8DLbKIdq9gCXz1bWwvb5SnOj6ZfWaoUpyqUHncw6FS xIMaqvRFS0w1JYX JPuBqgo58 ONB0eElmW SaT0ToUjfDU9Ce5J8 tcA

Affichage des infos:

nous commencerons par afficher le numéro de compte qui est le plus simple, nous obtiendrons simplement la propriété account de useWeb3React():

9bwwuOXiwymVziIOjLA36YFrs GVe1jyS5ZWha2rmgJGtTcmBvUcXyqTdpfCeH

Tout ce que vous avez à faire est de l’afficher où vous voulez comme ci-dessous :

tJ0J2oFQ auKf4qzQ0 HwhTlMb6OEXlHNWzDBGW7Q7FOrQ7A1YL1K3adVub1eQLWqHM9QEKVKNRxw 3LzSYZDUv7rpx6OJe3Hf

la deuxième information à afficher est soit le réseau est mainnet ou testnet,pour ce faire nous utiliserons le chainId également importé de useWeb3React(). En fait, si l’id de la chaîne est 1, nous parlons de mainet, sinon le réseau est testnet

7HHJjXHg93qtIW Vi5dLhFF4PPTKx 0ZdtJPe7Jem43xRDlpILY xNE0OuIezpwMdzTzL6T55pR97d8UYZ OTVMJfPaNrXVuNuaQiPQonqzbm0dfMbwASy LBRsXEBcX2X9D4OKEp1Rom1vtl4wPlA

ensuite, le dernier est d’afficher le solde, nous le ferons dans une fonction séparée. En fait, nous utiliserons la propriété library importé de  useweb3react(),mais avant cela installons une dépendance que nous utiliserons pour formater le solde avec la commande ci-dessous:NvQ7omRIXMLYFS1A fAoTG2ZkXD4SMqYzafRqFdfKsKgRxVUIC39eBfLdqb36CZm8ROcG4 j8O4UUkQdguqZIQc2PVfn7PNsYJbvMHa2QrH2pk4oXNvHkXgrxSQqrVwa6hmwwbpec c0DTfksEmcJ6w3jdBZdCCvdwcOU5msLycjaWac4AbOkDnJfIPlgz

Pour obtenir la balance, nous utilisons la fonction dans l’image ci-dessous :

86SvDD9IPuvvi1pImUieHMLcAhwkDo1EGke2buymt3h0AIY1enPkPfjA7EBe8Q4DZHBjiKYI6LS8ZkXYxYrpzEk2L Lr
j3JNqN0i x7BkhOqEImIp6r1bFeIl b q2a9cBgdOU39IRoBbvqDzVDG0 LOqEbIu5eaBH7vSEsmNOKUnR0TQEFDSQzkXPIa8RwMdOdsPqciU
8QFlNuPIA6ZNWQoYSryC8ZX0H35Gvw2IrmiRZ6edzQy36nMYVP0Oh GbRQ7cJHNlEyj3pb1UiaYSueF1fm9zoOQC260wTL9g5bSJzbHc9L9pzHVkIfQFo 8uiaHNHpvMHZ6qL3EXG U6XwA1PKHRn2Y

Et voilà le résultat final pour notre dapp:

g9kxShZyoNjPIVNfryamC8FzSjOmW2JzQd6JnQbrCaEK XDFRzkKDoJE5xHNaABVtFqSYoZHwEwl7Kso uA4HXJp3v0ypftaEwliN5ThRNjYjvcht6rqUZ0YZAAQeEiKhGTjyur5vfsOX1uM6ZzQmPY

Félicitations!! vous venez de créer votre premier dapp.

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.