如何通过单击网络应用程序上的按钮(如 opensea 上的按钮)来检测、启动和连接到 Metamask 移动应用程序?

koo*_*ick 8 javascript reactjs smartcontracts web3js metamask

我实现了一个短代码,它连接到metamask浏览器扩展并使用web3 和reactjs显示用户帐户,该代码在使用桌面浏览器时效果很好,但是当我在移动浏览器上尝试时,metamask移动版本由于非-其扩展程序在移动浏览器中的存在,像opensea这样的网络应用程序如何使用移动网络浏览器上的按钮打开metamask移动应用程序?

代码 :

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>
              ),
            };
          }
        };
Run Code Online (Sandbox Code Playgroud)

小智 4

您可以通过从以下链接生成元掩码应用程序的深层链接来实现此目的: https: //metamask.github.io/metamask-deeplinks/# 并通过分辨率或 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

}
Run Code Online (Sandbox Code Playgroud)