Comment gérer les changements de chaîne dans mon DAPP avec Metamask?

Comprendre les changements de chaîne dans les DAPP

Lors du développement ou de l'interaction avec des applications décentralisées (DAPP), l'un des défis les plus courants auxquels les utilisateurs et les développeurs sont confrontés est de gérer les changements de chaîne . Metamask, étant l'un des portefeuilles de crypto-monnaie les plus utilisés, permet aux utilisateurs de basculer entre différents réseaux de blockchain. Cependant, cela peut entraîner des perturbations si un DAPP n'est pas correctement configuré pour détecter et répondre à ces changements de chaîne . Cela comprend des scénarios comme le passage de Ethereum MainNet à Binance Smart Chain ou dans tout environnement TestNet.

Le problème de base tourne autour de la garantie que votre DAPP réagit correctement lorsque le réseau sélectionné dans Metamask change. Cela est essentiel pour maintenir l'expérience utilisateur et prévenir les erreurs de transaction en raison d'identifices de chaîne incorrectes ou de points de terminaison RPC.

Détection des changements de réseau dans Metamask

Metamask fournit un écouteur d'événements appelé chainChanged , qui est déclenché chaque fois que l'utilisateur passe à un autre réseau. Pour gérer cela, vous devez implémenter un écouteur d'événements ChainChanged dans le code JavaScript de votre DAPP.

Voici comment vous pouvez le configurer:

• Importez Web3 ou utilisez le fournisseur injecté à partir de Window.ethereum.
• Ajoutez un écouteur d'événements pour chainChanged :

   window.ethereum.on('chainChanged', handleChainChanged);

• Définissez la fonction handleChainChanged pour recharger ou reconfigurer le DAPP en fonction du nouvel ID de chaîne.

Cela garantit que votre DAPP sait toujours à quel réseau l'utilisateur est actuellement connecté et peut s'adapter en conséquence.

Gestion des identifiants de chaîne et des identifiants de réseau

Chaque réseau de blockchain possède un identifiant unique connu sous le nom de chaîne ID . Par exemple, Ethereum MainNet utilise la chaîne ID 1 , tandis que Rinkeby utilise 4 . Lorsqu'un utilisateur change de chaîne, l'événement chainChanged renvoie le nouvel ID de chaîne au format hexadécimal.

Pour assurer la compatibilité, votre DAPP devrait:

• Convertissez l'ID de chaîne retournée de l'hexadécimal en décimal en utilisant parseInt(chainId, 16) .
• Comparez la valeur résultante avec une liste des ID de chaîne pris en charge.
• Affichez les commentaires de l'interface utilisateur appropriés ou redirigez l'utilisateur si la chaîne sélectionnée n'est pas prise en charge.

Si la chaîne n'est pas prise en charge, votre DAPP doit inciter l'utilisateur à revenir en arrière ou à fournir des instructions sur la façon d'ajouter des réseaux personnalisés via Metamask.

Mise à jour du fournisseur et reconnexion des contrats

Après avoir détecté un changement de chaîne, il est essentiel de mettre à jour votre fournisseur et de reconnecter toute instance de contrat intelligent. Le non-fait de le faire peut entraîner une récupération de données incorrecte ou des transactions échouées.

Étapes à suivre:

• Créez une nouvelle instance de web3 à l'aide de window.ethereum après le changement de chaîne.
• Reconnectez toutes les instances de contrat à l'aide du fournisseur mis à jour.
• Re-Fetch Les soldes du compte et les états contractuels pour refléter le réseau actuel.

Ce processus garantit que toutes les interactions se produisent sur la chaîne correcte et que votre DAPP reste réactif et précis indépendamment des commutateurs de réseau.

Inciter les utilisateurs à ajouter des chaînes personnalisées

Parfois, votre DAPP peut exiger que les utilisateurs se connectent à un réseau qui n'est pas disponible par défaut dans Metamask. Dans de tels cas, vous pouvez les inciter à ajouter un réseau personnalisé à l'aide de la méthode wallet_addEthereumChain .

Voici comment vous pouvez déclencher cette action:

• Préparez l'URL RPC, l'ID de chaîne, le symbole de devise et l'URL de l'Explorateur de blocs pour le réseau cible.
• Appelez la méthode suivante:

   await window.ethereum.request({ method: 'wallet_addEthereumChain', params: [{ chainId: '0x...', rpcUrls: ['https://...'], chainName: 'Custom Network', nativeCurrency: { name: 'Token', symbol: 'TKN', decimals: 18 }, blockExplorerUrls: ['https://...']

  }] });

Cela ouvrira une boîte de dialogue de confirmation Metamask permettant à l'utilisateur d'ajouter le réseau en toute sécurité.

Questions fréquemment posées

À quelle fréquence l'événement Chainchange tire-t-il?

L' événement ChainChanged se déclenche chaque fois que l'utilisateur change manuellement les réseaux dans Metamask ou lorsqu'un autre DAPP déclenche un changement de réseau. Il ne se déclenche pas pendant le chargement de la page initial, mais uniquement lorsque le réseau change après-initialisation.

Puis-je changer par programme dans les chaînes dans Metamask?

Oui, vous pouvez demander un interrupteur de chaîne à l'aide de la méthode wallet_switchEthereumChain . Vous devez passer l' ID de chaîne souhaité au format hexadécimal . Si la chaîne n'est pas déjà ajoutée, Metamask incitera l'utilisateur à l'ajouter en premier.

Pourquoi ma chaîne de détection DAPP ne change-t-elle pas immédiatement?

Votre DAPP doit écouter activement l'événement chainChanged à l'aide de window.ethereum.on('chainChanged', callback) . Si cet écouteur n'est pas enregistré au moment de l'exécution ou est supprimé pendant l'exécution, le DAPP ne détectera pas les modifications de la chaîne.

Que se passe-t-il si un utilisateur sélectionne une chaîne non prise en charge?

Si votre DAPP ne prend pas en charge la chaîne sélectionnée, elle devrait afficher un message d'avertissement indiquant que le réseau actuel n'est pas pris en charge. Vous pouvez également fournir un bouton pour guider l'utilisateur en ajoutant le réseau correct ou en revenant à un réseau pris en charge.