Parfois en utilisant le MetaMasque portefeuille directement est l’approche la plus simple pour effectuer des transactions sur ethereum blockchains. Dans ce didacticiel, je vais couvrir une gamme de sujets pour vous et les plus importants pour vous aider à démarrer avec votre application décentralisée, comme la connexion / la déconnexion, la demande d’autorisation avec signe personnel et l’envoi de jetons via une transaction. Je vais également couvrir quelques bonnes pratiques pour vous aider à comprendre comment MetaMasque travaux.
Pour suivre la base de code open source complète, veuillez consulter mon Dépôt GitHub: https://github.com/blakewood84/metamask-transactions
Le premier et le plus important est d’initialiser votre application pour prendre en charge MetaMask. Le code suivant est une bonne pratique à utiliser comme dans un useEffect() hook à l’initialisation de votre application.
Pour vous donner une idée de ce que fait le code ci-dessus, nous vérifions d’abord si MetaMask est réellement installé sur le navigateur pris en charge par le client. Vous accéderez toujours à MetaMask via le code suivant : window.ethereum qui cible le plugin du navigateur. Pour voir plus de détails sur cette vérification, consultez la mise en route de la documentation MetaMask.
En plus de vérifier si MetaMask est installé, je dépose 2 écouteurs d’événement pour écouter certaines valeurs importantes si elles changent, comme le ID de chaîne le portefeuille est actuellement activé et le compte courant qui est sélectionné si le compte du portefeuille change réellement au cours du cycle de vie de votre application.
Pour ajouter des écouteurs d’événement, ajoutez simplement :
window.ethereum.on(‘message’, (value) => { // callback })
Pour un aperçu des différents messages d’événement, vous pouvez simplement écouter la section Événements de la documentation MetaMask. Selon la documentation, une bonne pratique consiste également à recharger le navigateur au cas où le ChainID / la chaîne changerait, car les choses pourraient devenir un peu compliquées. Je vous laisse décider quoi faire pour votre application.
Pour connecter MetaMask à votre site, vous voulez en quelque sorte penser à l’état de l’adresse du compte de l’utilisateur. Il y a quelques façons de le faire.
Chaque fois que vous soumettez une demande et effectuez une transaction avec MetaMask, vous utiliserez le code suivant :
window.ethereum.request({ method: ‘method’, params: [ ] })
Parfois, les requêtes peuvent ou non avoir des paramètres. Pour plus de détails sur les demandes, veuillez visiter l’Api Playground qui est très utile pour disséquer chaque demande.
- Connectez-vous au portefeuille avec eth_requestComptes ce qui déclenchera la connexion de l’utilisateur à son portefeuille MetaMask si aucun compte n’est connecté à l’application ou à l’adresse du site… Si le portefeuille MetaMask est déjà connecté à l’application, il ne vous alertera pas, saisissez simplement le compte actuellement sélectionné.
Ci-dessus, j’ai créé un bouton qui affichera l’adresse du compte si le portefeuille est connecté à l’application. Appuyez à nouveau sur le bouton et nous déconnecterons le portefeuille de l’application en changeant d’état.
Pour comprendre cela simplement, si vous avez actuellement l’adresse de portefeuille d’un utilisateur dans votre useState variable, pour moi j’utilise compte portefeuille, alors votre application est connectée à MetaMask.
2. Vous pouvez également créer un autre useState() appelé:
Qui peut être utilisé pour suivre l’état de connexion de l’application au portefeuille MetaMask comme suit :
A chaque fois qu’un compte utilisateur est fourni à l’état de l’application, nous considérerons alors le portefeuille MetaMask « connecté » à l’application.
3. Pour déconnecter l’application, nous pouvons simplement supprimer le compte de l’état.
4. Parfois, cependant, cela ne suffit pas. Pour certaines personnes, nous aimerions voir la fenêtre du portefeuille MetaMask s’ouvrir à nouveau pour forcer l’utilisateur à choisir le portefeuille qu’il souhaite connecter à l’application. Pour cela, vous pouvez exécuter un wallet_requestPermissions suivie par eth_requestComptes qui générera ce flux d’utilisateurs pour vous, déclenchant le MetaMask pour forcer l’utilisateur à choisir un nouveau compte pour se connecter à chaque fois. Vous pouvez faire ceci comme ceci :
Ce qui s’affichera à chaque fois :
Cela peut aider à générer un flux d’utilisateurs pour vous en utilisant toutes ces méthodes de connexion.
Connaissez-vous OpenSea et son processus d’authentification pour connecter un utilisateur ? Ça ressemble un peu à ça :
Cette méthode s’appelle signe_personnel et peut être utilisé de différentes manières, mais oblige l’utilisateur à simplement signer une demande ou un message, montrant qu’il confirme ou approuve cette demande. Pour gérer un signe personnel à des fins d’authentification, vous pouvez simplement utiliser le code suivant pour le faire :
La réponse signée sera une signature hachée utilisant le compte de votre portefeuille avec lequel vous vous connectez. Nous demandons d’abord eth_requestComptes pour obtenir le compte actuellement sélectionné dans le portefeuille MetaMask, puis appeler signe_personnel suivi de la message et Compte utilisé dans les paramètres. Pour plus d’informations sur ces demandes, consultez la documentation relative aux données de signature.
Vous voulez obtenir le solde de jetons du portefeuille sélectionné dans MetaMask ? Utilisez simplement la méthode de demande eth_getBalance et passer dans le compte + ‘dernier’ comme les paramètres aiment ceci:
await window.ethereum.request({ method: ‘eth_getBalance’, params: [ account, ‘latest’ ]})
Dans cette fonction, la demande renverra le solde en Wei, que pour convertir en Gwei (gaz), vous diviseriez par 10⁹ de puissance et pour convertir en Ether réel (ETH), nous diviserons par 10¹⁸ de puissance.
Pour cette demande, j’exécute un serveur Ganache local et j’ai importé le premier compte dans mon portefeuille MetaMask.
L’exécution d’un nœud Ganache local est l’un des moyens les plus simples de tester les transactions et d’utiliser les requêtes MetaMask localement. C’est un must pour le développement local en plus d’utiliser un Réseau de test Comme Ropsten ou Kovan et devoir visiter fréquemment un robinet pour recharger votre solde ETH. Vous pouvez également utiliser un explorateur Blockchain local tel qu’Ethernal pour afficher les transactions.
L’envoi de jetons entre comptes à l’aide de MetaMask peut être assez simple. La fonction suivante enverra une transaction entre deux parties tant que vous avez le l’adresse de l’expéditeur, adresse de réception, et quantité (converti en hexadécimal) :
wait window.ethereum.request({ méthode : ‘eth_sendTransaction’, paramètres : [tx]})
Pour plus d’informations sur les transactions, visitez Envoi de transactions.
J’utilise également un prix fixe du gaz de 21000 qui est en hexadécimal format. La plupart de toutes vos informations de transaction seront dans format hexadécimal juste pour noter. L’exécution de cette fonction générera la requête suivante :
Pour tester les transactions, j’ai configuré un serveur Ganache local et envoyé ETH entre deux des comptes locaux. Il est assez simple d’importer des comptes sur votre serveur Ganache local, il suffit de visiter ce guide Comment importer un compte. Vous voudrez importer la clé privée de votre compte en cliquant sur l’icône de la clé dans l’interface graphique de Ganache.
C’est tout pour le moment! 5 façons simples d’utiliser MetaMask avec votre application décentralisée. Pour des raisons de commodité, voici le lien open source complet vers ce projet sur GitHub : https://github.com/blakewood84/metamask-transactions
Comme toujours si vous avez des questions, n’hésitez pas à me contacter via LinkedIn à l’adresse : https://www.linkedin.com/in/blakewoodjr/ !
Je vous souhaite à tous une bonne journée et un bon codage !
Rejoignez Coinmonks Telegram Channel et Youtube Channel pour en savoir plus sur le trading et l’investissement crypto
Lire aussi
Donnez votre avis
Soyez le 1er à noter cet article
Partagez cet article maintenant !
Envoyez simplement nos contenus crypto et finance à vos proches.
Ce contenu a été rédigé par Mathias Vargelis
Créateur et rédacteur en chef de Crypto Week, j’élabore guides, tutoriels et analyses crypto. Expert blockchain et finance, j’influence la communauté Web3 via mes publications et interventions. Passionné par l’innovation et l’éthique numérique, je veille à rendre la crypto accessible et sécurisée pour tous.
