How to connect a MetaMask account to a DApp in the MetaMask Application?

Question

I created a DApp that uses MetaMask to interact with the ethereum blockchain. The DApp works wonderfully in the desktop browser while using MetaMask as a browser extension. Now I want to confirm that my DApp is accessible from mobile phones as well. To do that, I'm using the MetaMask App where I can log into my wallet and brows to the DApp that I developed. However, to use the DApp, I first have to connect my MetaMask account to the website like this.

Now, my question is, how to connect my MetaMask account to the DApp in the MetamMask application browser like in the picture? I wasn't able able to find any buttons or setting properties to do so. I tried to search how to connect to the DApp through the MetaMask application and found the following (source):

Notice how when you visit a Web3 site, you can connect your MetaMask account? MetaMask will never share your public address with a website unless you give it permission. This means you are always browsing privately and control the data you share with an application. It also makes it easy to browse between different applications without creating a new account each time.

This is the code that I use in my DApp to connect to MetaMask:

import Web3 from 'web3'; 


//current provider is the provider injected by MetaMask 
let web3;

//typeof is used to check if window is defined 
if (typeof window !== 'undefined' && typeof window.web3 !== 'undefined') {
  // We are in the browser and metamask is running.
  //Connect metamask to the webapp 
  window.ethereum.enable(); 
  web3 = new Web3(window.web3.currentProvider);
} else {
  // We are on the server *OR* the user is not running metamask
  const provider = new Web3.providers.HttpProvider( 'https://ropsten.infura.io/v3/KEY');
  web3 = new Web3(provider);
} 

export default web3;

Answer 1

I've recently dealt with this, I also needed to make sure MM connects to the app on mobile, from the browser.

What you can do is:

1. detect if the user is accessing your dApp from a mobile device

2. in case the user is from a mobile device, use WalletConnect modal , it has a mobile option, you'll find a MetaMask button there that'll lead you to the app and ask if you want to connect.