Comment développer une DApp ?

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.

Implementer web3-react

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

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:

La fonction getLibrary est comme suivant:

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

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 :

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:

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():

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

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

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:

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

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

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