window.ethereum undefined on mobile?

[christopheSeeka]

I built a web application calling metamask with code such as this one:

   await window.ethereum.request({
      method: 'wallet_switchEthereumChain',
      params: [{ chainId: chainId }],
   });

But on mobile, android chrome, window.ethereum is undefined, despit metamask being installed. On desktop everything work as expected, any idea what could be the reason?

Do we have to do something special for mobile?

[sethkfman]

@christopheSeeka Are you doing this from the OS browser or the browser inside the MetaMask wallet. If you are trying from the OS, please try the browser inside the wallet.

[sicadev]

Thank you for the answer, thats right it work if using metamask btowser but not with OS browser. I really though i was able to use metamask with OS browser before on some webapps but that will do it for now, thanks :)

[Pacheco95]

@sethkfman is this proposital? There is no information about that in the docs.

[SwapnilKD]

@sethkfman instead of using os browser, in wallet browser it works, but are we going to support the os browser to interact with metamask mobile app like extension does in desktop browser in anytime soon?

[KBKUN024]

@sethkfman instead of using os browser, in wallet browser it works, but are we going to support the os browser to interact with metamask mobile app like extension does in desktop browser in anytime soon? you can add walletconnect to your webapp,so that can interact with metamask app event other wallets.

[Tabisharaza]

Any update for this?

[Oba-One]

Any update? I know Rainbow connect works well on mobile browser and links to wallet apps on your phones. Given Metamask is an extension there will never be an injected ethereum. I'm curious to explore this on a brave browser which has a wallet integrated.

[jdmwood]

We can reliably reproduce this issue on several sites that we manage.

UPDATE: I think this may also be covered here: https://github.com/MetaMask/metamask-mobile/issues/3521

For clarity, I'm referring here to running the embedded/WebView mode in the MetaMask mobile app on Android (tested on a Pixel 6a).

One particular use case where this fails reliably is in a Shopify store. For example, if we add the following script to the HTML of a page in Shopify:

   <div id="add-message-here">window.ethereum: ***LOADING***</div> 
   <script type="application/javascript">
      if (window.ethereum) {
        handleEthereum();
      } else {
        window.addEventListener('ethereum#initialized', handleEthereum, {
          once: true,
        });
      
        // If the event is not dispatched by the end of the timeout,
        // the user probably doesn't have MetaMask installed.
        setTimeout(handleEthereum, 3000); // 3 seconds
      }
      
      function handleEthereum() {
        const eth = window.ethereum ? 'window.ethereum: PRESENT' : 'window.ethereum: NOT_PRESENT';
        document.getElementById("add-message-here").innerHTML = eth;
      }
  </script>

...If we run this on a vanilla Shopify store on WebView MetaMask, window.ethereum is never present. But, the same site on Chrome+MetaMask extension, it is present.

And, a non Shopify plain webpage with the same code works in all cases.

So there is some combination of Shopify + MetaMask WebView which doesn't work.

Obviously, Shopify is a very complex platform and they will do a lot of stuff outside of our control (tonnes of other scripts are loaded etc). And I guess, in theory, something in their codebase could be doing something extremely weird like unsetting window.ethereum but this seems unlikely, especially since it works fine in Desktop+Extension.

My hunch is that this isn't Shopify, per se, but that there is some subtle thing about those sites which breaks things.

What would be really helpful would be some information about how and when the mobile app injects in the window.ethereum.

For example:

• HTTPS only?
• Are Cookies related (I've seen other threads which seem to hint at this)?
• Website security headers?
• CORS?

[jdmwood]

Just to add to my previous comment, for anyone else reading this, I think the lesson here is to simply not worry about the MetaMask WebView mode and instead simply use WalletConnect. In fact, wagmi now even recommend this:

By doing this, the UX is actually way better: a user starts their journey inside a normal Chrome window. Then you connect via WalletConnect. This then opens a deep-link into Metamask and then switches straight back to Chrome with a connected wallet. This is actually way better than trying to mess around inside MetaMask's browser.