window.etheruem is undefined in Metamask Android app browser with Shopify

[uzairbangee]

Hey, I am trying to integrate Metamask into the Shopify store and it's working completely fine with desktop and IOS devices but not working with android devices. window.ethereum is always undefined.

To Reproduce Steps to reproduce the behavior

1. Go to https://liquiddeath.com/products/mhdc-tee-02 in metamask android app browser.
2. Click on Connect Wallet button and you will get a popup.
3. Click on metamask.
4. You will be redirected to a deep link which is incorrect instead metamask should popup connect.

I want metamask android browser to inject metamask into the app.

Smartphone (please complete the following information):

• Device: Android
• App Version all

• How critical is the impact of this bug on a user? (all the android users are not able to connect)
• Add stats if available on % of customers impacted (not available right now)
• Is this visible to all users? (yes)
• Is this tech debt? (yes)

[tommasini]

Hey @uzairbangee, thanks for reporting!

I can't find the wallet connect button on the website that you provided, could you send a record or explain little better where to find that feature?

[uzairbangee]

Hey @uzairbangee, thanks for reporting!

I can't find the wallet connect button on the website that you provided, could you send a record or explain little better where to find that feature?

it's a token gating service you just go to the https://liquiddeath.com/products/mhdc-tee-02 website below the image and title of the product you will find the Connect Wallet button

SCREEN SHOT: https://cdn.statically.io/gh/uzairbangee/image-folder/main/shot.jpeg

[uzairbangee]

any update on this issue?

[tommasini]

I was able to replicate it, can you share what are you using to connect with MetaMask?

[uzairbangee]

Just doing a basic connection like this on when the window gets loads it works everywhere but specifically not working with Shopify.

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 { ethereum } = window;
  if (ethereum && ethereum.isMetaMask) {
    console.log('Ethereum successfully detected!');
    // Access the decentralized web!
  } else {
    console.log('Please install MetaMask!');
  }
}

[tommasini]

I will bring this to our team, thank you for report!

[tommasini]

We had this issue before, check the details here https://github.com/MetaMask/metamask-mobile/issues/3521

[tommasini]

Since this issue is duplicated we will close this one in order to let the https://github.com/MetaMask/metamask-mobile/issues/3521 open