MetaMask connector doesn't handle mobile situations gracefully

[RobbyUitbeijerse]

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.6.0

Current Behavior

At the moment, the MetaMask connector provided by wagmi relies on MetaMask being 'installed' by window.ethereum being present. This works great for any browser that has the extension installed, as the extension will ensure that window.ethereum is always there.

There are browsers where this isn't possible yet: any mobile browser on android/iOS. These users could of course already use our app through WalletConnect, but since we provide the MetaMask connector to the wagmi provider through the client configuration, the MetaMask option comes back through useConnect().connectors

Currently, without manually filtering the MetaMask connector out for mobile users, it would show up in our application which looks something like this. Please note that in our actual implementation, we now filter out the MetaMask button based on the connector.ready)

  const { connectors } = useConnect()
  
   return (
       <>
         {connectors.map(connector => (
           <button onClick={() => connect({ connector })}>{connector.name}</button>
          ))}
       </>
     )

but for mobile users, the MetaMask button would never actually "do it's job", from an experience point of view.

Expected Behavior

In the MetaMask mobile app they provide a solution for this by injecting javascript in the WebView that they render, and therefore window.ethereum will always be present for visitors that use the in-app browser, you can find the source for that here , so users that use the in-app browser have the expected experience.

The team over at RainbowKit thought of another solution: if a mobile user clicks on the MetaMask option that they provide, what happens underneath is that the MetaMask connector simply mimics the behaviour of what WalletConnect does, and sends the user over the WalletConnect bridge, you can find the source for that here

Steps To Reproduce

No response

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

From a technical point of view I can imagine you could consider this a feature request and not really a bug - after all it's not up to wagmi if window.ethereum is available or not, but it still feels like something that could be handled more gracefully - or documented more extensively (we spend quite some time figuring this out which could have been prevented with more extensive docs)

[tmm]

@RobbyUitbeijerse thanks for jotting this down! Like you point out, MetaMaskConnector is a type of InjectedConnector so it's only available when window.ethereum.isMetaMask is present.

In the MetaMask mobile app they provide a solution for this by injecting javascript in the WebView that they render, and therefore window.ethereum will always be present for visitors that use the in-app browser, you can find the source for that here , so users that use the in-app browser have the expected experience.

We could explore doing this, but doesn't seem as stable as another approach could be.

The team over at RainbowKit thought of another solution: if a mobile user clicks on the MetaMask option that they provide, what happens underneath is that the MetaMask connector simply mimics the behaviour of what WalletConnect does, and sends the user over the WalletConnect bridge, you can find the source for that here

RainbowKit adds a "wallet" abstraction on top of connectors. We could explore doing this as well, but seems best for wagmi to remain a lower-level, unopinionated framework for folks to compose (like RK did with the MetaMaskConnector and WalletConnectConnector). For example, you might want to support MetaMask on desktop, but not want to use WalletConnect because of it's large bundle size. If we combine the two by default, you have no choice.

It might make sense to revisit this decision if something changes, but right now it's not a priority.

[allenchuang]

It seems like the folks at https://docs.family.co/connectkit is doing the same by providing Mobile Metamask support. I believe Metamask still holds majority marketshare in the wallet space, and it would actually be a good feature to add whilest keeping the flexibility of WAGMI to allow customization over the connect UI.

[jasan-s]

this should fallback to mobile metamask

[jeremylzn]

still no solution ?

[ITLight]

same problem @@

[unauthxrized]

find something?