fixes metamask autoconnect in mobile

Author: arch1995

packages/modal/src/modalManager.ts

@@ -603,9 +603,8 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
   }): Promise<void> => {
     try {
       const connector = this.getConnector(params.connector as WALLET_CONNECTOR_TYPE, params.loginParams?.chainNamespace);
-      // auto-connect WalletConnect and non-injected MetaMask in background to generate QR code URI without interfering with user's selected connection
-      const shouldStartConnectionInBackground =
-        connector.name === WALLET_CONNECTORS.WALLET_CONNECT_V2 || (connector.name === WALLET_CONNECTORS.METAMASK && !connector.isInjected);
+      // auto-connect WalletConnect in background to generate QR code URI without interfering with user's selected connection
+      const shouldStartConnectionInBackground = connector.name === WALLET_CONNECTORS.WALLET_CONNECT_V2;
       if (shouldStartConnectionInBackground) {
         const initialChain = this.getInitialChainIdForConnector(connector);
         await connector.connect({ chainId: initialChain.chainId });
@@ -648,30 +647,30 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
     }
 
     // handle MM session refresh if MM is not injected
-    const metamaskConnector = this.getConnector(WALLET_CONNECTORS.METAMASK);
-    if (metamaskConnector && !metamaskConnector.isInjected) {
-      const status = metamaskConnector?.status;
-      log.debug("trying refreshing MM session", visibility, status);
-      if (visibility && (status === CONNECTOR_STATUS.READY || status === CONNECTOR_STATUS.CONNECTING)) {
-        log.debug("refreshing MM session");
-
-        // refreshing session for MM whenever modal is opened.
-        try {
-          const initialChain = this.getInitialChainIdForConnector(metamaskConnector);
-          metamaskConnector.connect({ chainId: initialChain.chainId });
-        } catch (error) {
-          log.error(`Error while connecting to MM`, error);
-        }
-      }
-      if (
-        !visibility &&
-        this.status === CONNECTOR_STATUS.CONNECTED &&
-        (status === CONNECTOR_STATUS.READY || status === CONNECTOR_STATUS.CONNECTING)
-      ) {
-        log.debug("this stops MM connector from trying to reconnect once proposal expires");
-        metamaskConnector.status = CONNECTOR_STATUS.READY;
-      }
-    }
+    // const metamaskConnector = this.getConnector(WALLET_CONNECTORS.METAMASK);
+    // if (metamaskConnector && !metamaskConnector.isInjected) {
+    //   const status = metamaskConnector?.status;
+    //   log.debug("trying refreshing MM session", visibility, status);
+    //   if (visibility && (status === CONNECTOR_STATUS.READY || status === CONNECTOR_STATUS.CONNECTING)) {
+    //     log.debug("refreshing MM session");
+
+    //     // refreshing session for MM whenever modal is opened.
+    //     try {
+    //       const initialChain = this.getInitialChainIdForConnector(metamaskConnector);
+    //       metamaskConnector.connect({ chainId: initialChain.chainId });
+    //     } catch (error) {
+    //       log.error(`Error while connecting to MM`, error);
+    //     }
+    //   }
+    //   if (
+    //     !visibility &&
+    //     this.status === CONNECTOR_STATUS.CONNECTED &&
+    //     (status === CONNECTOR_STATUS.READY || status === CONNECTOR_STATUS.CONNECTING)
+    //   ) {
+    //     log.debug("this stops MM connector from trying to reconnect once proposal expires");
+    //     metamaskConnector.status = CONNECTOR_STATUS.READY;
+    //   }
+    // }
   };
 
   private getChainNamespaces = (): ChainNamespaceType[] => {

packages/modal/src/ui/components/Login/Login.tsx

@@ -356,13 +356,17 @@ function Login(props: LoginProps) {
     });
     // for non-injected Metamask, show QR code to connect
     if (wallet.name === WALLET_CONNECTORS.METAMASK && !wallet.hasInjectedWallet) {
-      setBodyState({
-        ...bodyState,
-        metamaskQrCode: {
-          show: true,
-          wallet: wallet,
-        },
-      });
+      handleExternalWalletClick({ connector: wallet.name });
+      // We should show QR code only if the wallet is not installed.
+      if (!wallet.isInstalled) {
+        setBodyState({
+          ...bodyState,
+          metamaskQrCode: {
+            show: true,
+            wallet: wallet,
+          },
+        });
+      }
       return;
     }
 

packages/modal/src/ui/components/Widget/Widget.tsx

@@ -185,11 +185,11 @@ function Widget(props: WidgetProps) {
       }
 
       // auto connect to MetaMask if not injected to generate QR code URI for mobile connection
-      const mmAvailable =
-        modalState.externalWalletsConfig[WALLET_CONNECTORS.METAMASK] && !modalState.externalWalletsConfig[WALLET_CONNECTORS.METAMASK]?.isInjected;
-      if (mmAvailable && !modalState.metamaskConnectUri && typeof handleExternalWalletClick === "function") {
-        handleExternalWalletClick({ connector: WALLET_CONNECTORS.METAMASK });
-      }
+      // const mmAvailable =
+      //   modalState.externalWalletsConfig[WALLET_CONNECTORS.METAMASK] && !modalState.externalWalletsConfig[WALLET_CONNECTORS.METAMASK]?.isInjected;
+      // if (mmAvailable && !modalState.metamaskConnectUri && typeof handleExternalWalletClick === "function") {
+      //   handleExternalWalletClick({ connector: WALLET_CONNECTORS.METAMASK });
+      // }
     }
   }, [modalState, handleExternalWalletClick]);