Open app in metamask webview directly

[scyllacz]

Hello, I wanted to ask if it is possible to change the MetaMask button in the wallet list so that it does not try to open the connection via Wallet Connect but directly opens the application in MetaMask's webview.

I have tried it like this so far without success.

const customMetaMaskWallet = (options: MetaMaskWalletOptions): Wallet => {
    const {...wallet} = metaMaskWallet(options);
    return {
        ...wallet,
        id: "MetaMaskCustom",
        qrCode: {
            getUri: (uri: string) => "https://metamask.app.link/dapp/our.app"
        },
        mobile: {
            getUri: (uri: string) => "https://metamask.app.link/dapp/our.app",
        },
        createConnector: () => metaMask({useDeeplink: true})
    }
}

If I use the MetaMask connector from Wagmi, the MetaMask wallet does not get listed.
Thanks for help.

[DanielSinclair]

This is not currently possible as we use the standard WalletConnect connector to communicate with MetaMask. However, the user can open the dApp within the MetaMask web browser and connect directly via the injected connector. Although WalletConnect can be unreliable, it's best practice to let the user connect from whichever browser they prefer. In the scenario you are describing, the initial dApp session would be tossed out and restarted in the MetaMask in-app browser. This is okay for some dApps, but problem for others that rely on local state.

[mattcasey]

I have found a workaround if anyone else is looking here: this hook listens to click events for the metamask button:

function useMetamaskInterceptor() {
  useEffect(() => {
    function handleLinkClick(event: MouseEvent) {
      const metamaskButton = (event.target as Element).closest('[data-testid=rk-wallet-option-metaMask]');
      if (metamaskButton) {
        event.stopImmediatePropagation();
        window.location.replace(getMMDeeplink());
      }
    }

    // only intercept on mobile devices
    if (isTouchDevice()) {
      // passing true in the 3rd argument means listen in the capture phase
      document.addEventListener('click', handleLinkClick, true);
    }

    return () => {
      document.removeEventListener('click', handleLinkClick, true);
    };
  }, []);

  return null;
}

function getMMDeeplink() {
  const currentUrl = window.location.host + getBrowserPath();
  const deeplink = `https://metamask.app.link/dapp/${currentUrl}`;

  return deeplink;
}