Metamask pour les développeurs: comment connecter un DAPP?

Comprendre Metamask et son rôle dans le développement DAPP

Metamask est un portefeuille de crypto-monnaie largement utilisé qui permet aux utilisateurs d'interagir avec la blockchain Ethereum directement via leur navigateur Web. Pour les développeurs, il sert d'outil critique pour tester et déployer des applications décentralisées (DAPP). Il agit non seulement comme un portefeuille mais aussi en tant que fournisseur de l' API JavaScript Ethereum , qui permet à DAPPS de communiquer avec le réseau Ethereum.

Lors de la construction ou de la connexion à un DAPP, il est essentiel de comprendre comment Metamask injecte son fournisseur dans l'environnement du navigateur. Ce fournisseur injecté donne aux développeurs un accès à des fonctions comme Web3.eth.getAccounts () , web3.eth.sendransaction () , et plus encore. La possibilité de demander des autorisations utilisateur et de gérer la signature des transactions rend Metamask indispensable pour le développement frontal impliquant des interactions blockchain.

Configuration de votre environnement de développement

Avant de pouvoir connecter votre DAPP à Metamask, assurez-vous que votre pile de développement prend en charge les bibliothèques Ethereum basées sur JavaScript telles que Web3.js ou Ethers.js . Ces bibliothèques sont couramment utilisées pour s'interfacer avec le fournisseur Ethereum de Metamask.

• Installer web3.js à l'aide de npm: npm install web3
• Alternativement, utilisez un lien CDN si vous travaillez dans une configuration HTML / JS de base

Assurez-vous que votre serveur de développement local est en cours d'exécution. Des outils comme Vite , WebPack Dev Server ou même le serveur en direct dans VS Code sont des options appropriées. Votre DAPP doit être servi sur HTTP ou HTTPS afin que Metamask puisse détecter et interagir correctement avec.

Détecter la métamasque dans le navigateur

Metamask injecte un objet Ethereum dans l'objet de fenêtre global du navigateur. Vous pouvez vérifier sa présence en inspectant cet objet:

 if (typeof window.ethereum !== 'undefined') { console.log('MetaMask is installed!'); } else { console.log('Please install MetaMask to use this dApp.'); }

Cette étape de détection est cruciale car elle empêche les erreurs lorsqu'ils essaient d'appeler les fonctions Metamask sur des navigateurs non pris en charge. Une fois détecté, vous pouvez procéder pour demander l'accès du compte depuis l'utilisateur.

Demander un accès au compte depuis Metamask

Pour interagir avec le portefeuille d'un utilisateur, votre DAPP doit d'abord obtenir la permission d'accéder à ses comptes Ethereum. Cela se fait généralement en utilisant la méthode Ethereum.Request ({Method: 'Eth_RequestAccouts'}) :

 const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' }); console.log('Connected account:', accounts[0]);

Cela déclenchera une fenêtre contextuelle de Metamask demandant à l'utilisateur d'accorder l'accès à ses comptes. Après approbation, votre DAPP reçoit un éventail d'adresses publiques associées au portefeuille de l'utilisateur. Si elle est refusée, la promesse rejetera et vous devriez gérer cela gracieusement dans votre interface utilisateur.

Il est important de noter que cette demande doit être déclenchée par une action utilisateur , comme cliquer sur un bouton. Les navigateurs bloquent les demandes de raisons de sécurité non initiées par l'utilisateur.

Connexion à l'aide de Web3.js ou Ethers.js

Une fois que vous avez détecté Metamask et obtenu un accès au compte, vous pouvez initialiser une instance Web3 à l'aide du fournisseur injecté:

 const web3 = new Web3(window.ethereum);

Alternativement, avec Ethers.js , vous pouvez vous connecter en utilisant le modèle suivant:

 const provider = new ethers.providers.Web3Provider(window.ethereum); const signer = provider.getSigner();

Ces instances permettent à votre DAPP d'effectuer diverses actions telles que la lecture des données du contrat, l'envoi de transactions et l'écoute des événements. Assurez-vous toujours de gérer les modifications de la chaîne et les modifications de compte en ajoutant des auditeurs d'événements:

 window.ethereum.on('chainChanged', (chainId) => { window.location.reload(); }); window.ethereum.on ('compteschanged', (comptes) => { // gérer le changement de compte });

Gestion des transactions et des interactions utilisateur

Avec la connexion établie, votre DAPP peut désormais envoyer des transactions. Voici un exemple utilisant web3.js pour envoyer ETH:

 const transactionParameters = { to: '0x...', // Recipient address from: accounts[0], // Sender address value: Web3.utils.toHex(Web3.utils.toWei('0.1', 'ether')), }; essayer { const txhash = attendre window.ethereum.request ({


method: 'eth_sendTransaction', params: [transactionParameters],
 }); Console.log («Transaction Hash:», TxHash); } catch (erreur) { Console.Error («Transaction a échoué:», erreur); }

En utilisant Ethers.js , le processus semble légèrement différent:

 const tx = await signer.sendTransaction({ to: '0x...', value: ethers.utils.parseEther('0.1'), }); await tx.wait(); console.log('Transaction mined:', tx.hash);

Fournissez toujours des commentaires aux utilisateurs au cours de ces opérations, y compris les états de chargement, les messages de réussite et la gestion des erreurs.

Questions fréquemment posées

Q: Puis-je connecter Metamask à un DAPP mobile? Oui, vous pouvez intégrer Metamask Mobile en utilisant le protocole WalletConnect . Cela permet à votre DAPP de communiquer avec Metamask via une analyse de code QR ou une liaison profonde.

Q: Que dois-je faire si Metamask ne demande pas d'accès au compte? Assurez-vous que la demande est lancée par un geste utilisateur comme un clic à bouton. Vérifiez également que Metamask est déverrouillé et a au moins un compte créé.

Q: Comment tester mon DAPP avec Metamask sans véritable fonds? Utilisez Rinkeby , Goerli ou Sepolia TestNets. Vous pouvez changer de réseaux dans Metamask et demander un test d'eth à un robinet pour simuler les interactions réelles.

Q: Est-il possible de se déconnecter de Metamask par programme? Metamask ne prend pas en charge la déconnexion programmatique. Cependant, vous pouvez effacer l'état de votre application et inciter l'utilisateur à se reconnecter manuellement.