Minting dapp 沒有連接到手機上的 metamask 應用程序？

Question

// 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 應用程序，我們現在不知道如何解決這個問題......如果這里有人可以提供幫助，那就太好了。 我們有一個解決方案，而不是使用元掩碼，我們想使用錢包連接集成，但我們也不知道該怎么做。 我們已經閱讀了文檔，但我們對此感到困惑......

Answer 1

在移動設備上連接到錢包在您的普通 chrome/safari 瀏覽器中不起作用 - 蘋果或其他移動創建者不允許這樣做，您只能使用手機上 metamask 應用程序中的瀏覽器連接您的錢包。 IE。

1. 導航到 metamask 或您在手機上使用的任何錢包
2. 在該應用程序中打開瀏覽器
3. 訪問您需要的網站

Answer 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