Connecting to Snaps from your dapp is now easier with EIP-6963 Multi Injected Provider Discovery

[Montoya]

Have you ever struggled with dapp connections? Have you ever noticed that window.ethereum sometimes gets modified by browser extensions other than MetaMask? Well you can now use EIP-6963: Multi Injected Provider Discovery to simplify your dapp connect code and consistently get the MetaMask provider in your dapp.

Here is an example of how this works: https://montoya.github.io/snap-connect-example/

The relevant code to get the ProviderDetail is just a few lines:

window.onload = function() {

  window.addEventListener(
    "eip6963:announceProvider",
    (event) => {
      /* event.detail contains the discovered provider interface */ 
      const providerDetail = event.detail; 

      /* catch any version of MetaMask that supports Snaps */
      switch(providerDetail.info.rdns) { 
        case "io.metamask": /* MetaMask */
        case "io.metamask.flask": /* MetaMask Flask */
        case "io.metamask.mmi": /* MetaMask Institutional */
          let provider = providerDetail.provider; 
          /* you can use provider the same way you would use window.ethereum! */
          break; 
        default: 
          break; 
      }
    }
  );

  window.dispatchEvent(new Event("eip6963:requestProvider"));

}

EIP-6963 prescribes an event-based model, where the dapp dispatches an event requesting wallet providers and the providers can each respond with an event to be discovered. Since EIP-6963 support was added to MetaMask / MMI / Flask after Snaps, you can just assume using EIP-6963 gives you Snap-enabled MetaMask regardless.

Benefits of this approach:

• You can treat MetaMask, MMI, and Flask equivalently and make your dapp agnostic, or you can easily detect for a specific one if you need to
• The ProviderDetail > info object includes the name and icon, for easily embedding into your site

Try it in your dapps! If you have any questions, feel free to ask here.