Comment ajouter un bouton "Connexion" à mon site Web?

Comprendre l'objectif d'un bouton «Connexion»

L'ajout d'un bouton «Connecter Wallet» à votre site Web est essentiel si vous créez une application décentralisée (DAPP) ou si vous intégrez des fonctionnalités basées sur la blockchain. Ce bouton permet aux utilisateurs de connecter en toute sécurité leurs portefeuilles de crypto-monnaie, tels que Metamask, le portefeuille de confiance ou WalletConnect, pour interagir avec votre plate-forme. La fonction principale de ce bouton est d'établir une connexion entre le portefeuille de l'utilisateur et votre application Web afin que les transactions puissent être signées et vérifiées sur la chaîne.

Avant de continuer, il est important de comprendre comment les connexions de portefeuille fonctionnent dans le contexte d'Ethereum et d'autres blockchains compatibles EVM. Lorsqu'un utilisateur clique sur le bouton «Connecter le portefeuille» , il est invité à approuver l'accès à son adresse de portefeuille. Une fois approuvé, votre site gagne un accès temporaire à l'adresse du portefeuille et peut effectuer des opérations de lecture à partir de la blockchain ou initier la signature des transactions.

Sélection de la bibliothèque d'intégration du portefeuille droit

Pour implémenter efficacement un bouton «Connecter Wallet» , les développeurs utilisent souvent des bibliothèques comme Web3.js , Ethers.js ou web3Modal , ce qui résume une grande partie de la complexité impliquée dans la connexion des portefeuilles. Parmi ceux-ci, Web3Modal est largement utilisé car il prend en charge plusieurs fournisseurs de portefeuilles hors de la boîte, y compris Metamask, WalletConnect, Coinbase Wallet, etc.

Pour commencer, vous devrez installer les packages requis. Par exemple, en utilisant NPM , vous pouvez courir:

• npm install web3modal
• npm install ethers

Une fois installé, importez les modules dans votre fichier JavaScript ou TypeScript:

 import Web3Modal from 'web3modal'; import { ethers } from 'ethers';

Cette configuration vous donne accès aux outils nécessaires pour initialiser une interface de connexion de portefeuille.

Configuration de l'interface utilisateur du bouton du portefeuille de connexion

L'étape suivante implique la création du bouton «Wallet Connect» réel dans votre fichier HTML ou JSX. Selon votre cadre Frontend - réagir, Vue, Angular ou HTML ordinaire - vous pouvez structurer le bouton en conséquence. Voici un exemple simple en utilisant un html ordinaire:

 Connect Wallet

Vous pouvez styliser le bouton à l'aide de CSS pour correspondre à la conception de votre site Web. Il est également courant de modifier dynamiquement le texte du bouton une fois qu'un portefeuille est connecté, par exemple, affichant l'adresse de portefeuille tronquée ou modifiant l'étiquette en «déconnectez» .

Implémentation de la logique de connexion

Vient maintenant la partie centrale: implémentation de la logique derrière le bouton «Connexion du portefeuille» . À l'aide de Web3Modal , vous pouvez initialiser un fournisseur et demander un accès au portefeuille de l'utilisateur. Voici une implémentation de base:

 const connectWalletButton = document.getElementById('connectWalletButton'); connectWalletButton.AddeventListener ('click', async () => { const web3Modal = new web3Modal (); const Connection = attendre web3Modal.connect (); const Provider = newThers.providers.web3Provider (connexion);


// Obtenez le signataire et l'adresse du portefeuille const siner = provider.getSigner (); const Address = Await Sign.GetAddress ();


Console.log ('Adresse du portefeuille connecté:', adresse); ConnectWalletButton.TextContent = Connected: ${address.slice(0, 6)}...${address.slice(38, 42)} ; });

Ce script écoute un événement de clic sur le bouton, ouvre le modal de sélection du portefeuille via web3modal , se connecte au portefeuille sélectionné et récupère l'adresse du portefeuille à l'aide de Ethers.js .

Il est crucial de gérer gracieusement les erreurs. Vous devez envelopper cette logique dans les blocs de capture d'essai et fournir des commentaires des utilisateurs en cas de connexions ou de refus.

Gestion de la déconnexion du portefeuille

Après avoir réussi à connecter un portefeuille, les utilisateurs peuvent vouloir se déconnecter à tout moment. Pour prendre en charge cela, vous pouvez ajouter une fonctionnalité «déconnecter» qui efface la connexion mise en cache dans web3modal et réinitialise l'état de l'interface utilisateur.

Voici comment étendre le code précédent pour permettre la déconnexion:

 let currentAddress = null; connectWalletButton.AddeventListener ('click', async () => { if (! currentAddress) {


const web3Modal = new Web3Modal(); const connection = await web3Modal.connect(); const provider = new ethers.providers.Web3Provider(connection); const signer = provider.getSigner(); currentAddress = await signer.getAddress(); connectWalletButton.textContent = `Connected: ${currentAddress.slice(0, 6)}...${currentAddress.slice(38, 42)}`;
 } autre {
 
// Disconnect const web3Modal = new Web3Modal(); web3Modal.clearCachedProvider(); currentAddress = null; connectWalletButton.textContent = 'Connect Wallet';
 } });

Cette approche se randonne entre les états de connexion et de déconnexion en fonction de la question de savoir si un portefeuille est déjà connecté.

Questions fréquemment posées

Q: Puis-je personnaliser les options de portefeuille indiquées dans le web3Modal?

Oui, Web3Modal permet la personnalisation des fournisseurs de portefeuilles affichés. Vous pouvez spécifier quels portefeuilles apparaissent en passant une liste de connecteurs autorisés lors de l'instanciation de l'objet Web3Modal. Par exemple:

 const web3Modal = new Web3Modal({ network: 'mainnet', cacheProvider: true, providerOptions: { walletconnect: { package: WalletConnectProvider, options: { infuraId: 'YOUR_INFURA_ID' } }

} });

Cela vous permet de contrôler les portefeuilles disponibles pour l'utilisateur.

Q: Comment détecter si un utilisateur a installé Metamask?

Vous pouvez vérifier la présence de l'objet Ethereum dans la fenêtre:

 if (typeof window.ethereum !== 'undefined') { console.log('MetaMask is installed!'); } else { console.log('MetaMask not found. Please install it.'); }

Cela permet de déterminer s'il faut inciter les utilisateurs à installer un portefeuille si aucun n'est détecté.

Q: Est-il possible de connecter automatiquement un portefeuille après la fermeture et la réouverture de la page?

Oui, Web3Modal prend en charge la mise en cache de la connexion du fournisseur. Si l'utilisateur avait précédemment connecté un portefeuille et ne se déconnectait pas manuellement, la connexion peut être restaurée automatiquement. Activez ce comportement en définissant cacheProvider: true lors de l'initialisation.

Q: Quelles autorisations le DAPP obtient-il après que le portefeuille est connecté?

Lorsqu'un portefeuille est connecté, le DAPP reçoit généralement la permission de:

• Lisez l'adresse du portefeuille de l'utilisateur.
• Demander des signatures de transaction.
• Requête les données de blockchain liées au compte de l'utilisateur.

Cependant, le DAPP ne peut pas signer ou envoyer des transactions sans l'approbation explicite de l'utilisateur via l'interface du portefeuille.