How to add a rederecting in mobile metamask browser?

Question

I created a site using web3.ys with some features, without react and node. How can I make it so that when entering from a mobile device and when clicking on the button, the user is transferred to the mobile metamask and immediately opens the browser with my site?

Answer 1

Here is what I use:

export function connectMetaMask(chainId) {
  if (!window.ethereum && isMobile()) connectMetamaskMobile();
  else return metaMaskConnector.activate(chainId);
}

export const connectMetamaskMobile = () => {
  const dappUrl = window.location.href.split("//")[1].split("/")[0];
  const metamaskAppDeepLink = "https://metamask.app.link/dapp/" + dappUrl;
  window.open(metamaskAppDeepLink, "_self");
};

This is described in the MetaMask Docs. I'm using this together with web3-react, however you only need the connectMetaMaskMobile part. Check this out if you want more info on detecting mobile browsers.