8

I implemented a shortcode that connects to metamask browser extension and shows the user account using web3 and reactjs, this code works well when using the desktop browser, but when I try it on mobile browser, metamask mobile version doesn't open due to the non-existence of its extension in the mobile browser, How a web app like opensea opens metamask mobile app using the button on the mobile web browser?

code :

export const connectWallet = async () => {
          if (window.ethereum) {
            try {
              const addressArray = await window.ethereum.request({
                method: "eth_requestAccounts",
              });
              const obj = {
                status: " Write a message in the text-field above.",
                address: addressArray[0],
              };
              return obj;
            } catch (err) {
              return {
                address: "",
                status: "... " + err.message,
              };
            }
          } else {
            return {
              address: "",
              status: (
                <span>
                  <p>
                    {" "}
                    {" "}
                    <a target="_blank" href={`https://metamask.io/download.html`}>
                      You must install Metamask, a virtual Ethereum wallet, in your
                      browser.
                    </a>
                  </p>
                </span>
              ),
            };
          }
        };
kool Erick
  • 101
  • 1
  • 6

1 Answers1

3

You can do that by generating a deeplink to the metamask app from below link: https://metamask.github.io/metamask-deeplinks/# And detecting the device by resolution or userAgent.

// first detect if window.ethereum is there
// render app
// else
// detect if mobile device

if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){

// open the deeplink page 
window.open("insert deeplink here")

} else {

// install metamask message

}
Sadat Mirza
  • 31
  • 2
  • Three types of links are provided, one sends me to the MetaMask page in appstore regardless whether the app has been installed or not, the other two are payment requests. Which deeplink are you using under this case? – Terry Windwalker Jun 04 '22 at 11:59
  • I used "Open a dapp" to create deeplink, it works fine on my iphone, it opens the metamask browser with the dapp link. But i also encounter the same issue only sometimes, it opens the appstore page regardless. – Sadat Mirza Jun 06 '22 at 13:28