CODEWITHSUNDEEP
javascriptreactjssmartcontractsweb3jsmetamask
kool Erick
kool Erick

Reputation: 113

How to detect,launch and connect to metamask mobile app by clicking on a button on the webapp like on opensea?

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>
              ),
            };
          }
        };

Upvotes: 9

Views: 4964

Answers (1)

Sadat Mirza
Sadat Mirza

Reputation: 41

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

}

Upvotes: 4

Related Questions