Minting dapp 没有连接到手机上的 metamask 应用程序？答案

【问题标题】：Minting dapp does not Connecting to metamask app on mobile?Minting dapp 没有连接到手机上的 metamask 应用程序？
【发布时间】：2022-08-19 23:30:16
【问题描述】：

// constants
import Web3EthContract from \"web3-eth-contract\";
import Web3 from \"web3\";
// log
import { fetchData } from \"../data/dataActions\";

const connectRequest = () => {
  return {
    type: \"CONNECTION_REQUEST\",
  };
};

const connectSuccess = (payload) => {
  return {
    type: \"CONNECTION_SUCCESS\",
    payload: payload,
  };
};

const connectFailed = (payload) => {
  return {
    type: \"CONNECTION_FAILED\",
    payload: payload,
  };
};

const updateAccountRequest = (payload) => {
  return {
    type: \"UPDATE_ACCOUNT\",
    payload: payload,
  };
};

export const connect = () => {
  return async (dispatch) => {
    dispatch(connectRequest());
    const abiResponse = await fetch(\"/config/abi.json\", {
      headers: {
        \"Content-Type\": \"application/json\",
        Accept: \"application/json\",
      },
    });
    const abi = await abiResponse.json();
    const configResponse = await fetch(\"/config/config.json\", {
      headers: {
        \"Content-Type\": \"application/json\",
        Accept: \"application/json\",
      },
    });
    const CONFIG = await configResponse.json();
    const { ethereum } = window;
    const metamaskIsInstalled = ethereum && ethereum.isMetaMask;
    if (metamaskIsInstalled) {
      Web3EthContract.setProvider(ethereum);
      let web3 = new Web3(ethereum);
      try {
        const accounts = await ethereum.request({
          method: \"eth_requestAccounts\",
        });
        const networkId = await ethereum.request({
          method: \"net_version\",
        });
        if (networkId == CONFIG.NETWORK.ID) {
          const SmartContractObj = new Web3EthContract(
            abi,
            CONFIG.CONTRACT_ADDRESS
          );
          dispatch(
            connectSuccess({
              account: accounts[0],
              smartContract: SmartContractObj,
              web3: web3,
            })
          );
          // Add listeners start
          ethereum.on(\"accountsChanged\", (accounts) => {
            dispatch(updateAccount(accounts[0]));
          });
          ethereum.on(\"chainChanged\", () => {
            window.location.reload();
          });
          // Add listeners end
        } else {
          dispatch(connectFailed(`Change network to ${CONFIG.NETWORK.NAME}.`));
        }
      } catch (err) {
        dispatch(connectFailed(\"Something went wrong.\"));
      }
    } else {
      dispatch(connectFailed(\"Install Metamask.\"));
    }
  };
};

export const updateAccount = (account) => {
  return async (dispatch) => {
    dispatch(updateAccountRequest({ account: account }));
    dispatch(fetchData(account));
  };
};

Metamask 扩展在桌面上运行良好，但问题是它不能在移动设备上运行，它没有打开 metamask 应用程序，我们现在不知道如何解决这个问题...... 如果这里有人可以提供帮助，那就太好了。我们有一个解决方案，而不是使用元掩码，我们想使用钱包连接集成，但我们也不知道该怎么做。我们已经阅读了文档，但我们对此感到困惑......

标签： javascript web3js metamask

【解决方案1】：

在移动设备上连接到钱包在您的普通 chrome/safari 浏览器中不起作用 - 苹果或其他移动创建者不允许这样做，您只能使用手机上 metamask 应用程序中的浏览器连接您的钱包。 IE。

导航到 metamask 或您在手机上使用的任何钱包
在该应用程序中打开浏览器
去你需要的网站

【讨论】：

【解决方案2】：

我找到了一种通过深度链接从浏览器使用 Android 和 IOS 的方法，它解决了我打开 MetaMask 并将我的应用程序重定向到那里的问题（或者如果未安装则安装）

这是完整的代码，你可以在这里找到这部分代码：

https://github.com/EhsanParsania/MetaMask-React-sample/blob/main/src/components/MetaMaskInstallModal.js#L74

或克隆它并运行以使用并检查所有功能：

https://github.com/EhsanParsania/MetaMask-React-sample

【讨论】：