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;