handle connecting to Metamask multiple times

Author: tanguyenvn

packages/modal/src/modalManager.ts

@@ -420,12 +420,7 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
           if (connector.status !== CONNECTOR_STATUS.NOT_READY) return;
 
           // only initialize a external connectors here if it is a cached connector.
-          if (
-            this.cachedConnector !== connectorName &&
-            connectorName !== WALLET_CONNECTORS.METAMASK &&
-            connector.type === CONNECTOR_CATEGORY.EXTERNAL
-          )
-            return;
+          if (this.cachedConnector !== connectorName && connector.type === CONNECTOR_CATEGORY.EXTERNAL) return;
 
           // in-app wallets or cached wallet (being connected or already connected) are initialized first.
           // if connector is configured then only initialize in app or cached connector.
@@ -533,6 +528,8 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
   private onModalVisibility = async (visibility: boolean): Promise<void> => {
     log.debug("is login modal visible", visibility);
     this.emit(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility);
+
+    // handle WC session refresh
     const wcConnector = this.getConnector(WALLET_CONNECTORS.WALLET_CONNECT_V2);
     if (wcConnector) {
       const walletConnectStatus = wcConnector?.status;
@@ -557,6 +554,32 @@ export class Web3Auth extends Web3AuthNoModal implements IWeb3AuthModal {
         wcConnector.status = CONNECTOR_STATUS.READY;
       }
     }
+
+    // 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;
+      }
+    }
   };
 
   private getChainNamespaces = (): ChainNamespaceType[] => {

packages/no-modal/src/connectors/metamask-connector/metamaskConnector.ts

@@ -79,10 +79,14 @@ class MetaMaskConnector extends BaseEvmConnector<void> {
       iconUrl,
     };
 
-    // Initialize the MetaMask SDK
+    // initialize the MetaMask SDK
     const metamaskOptions = deepmerge(this.metamaskOptions || { headless: true }, { dappMetadata: appMetadata }); // TODO: only use headless for Modal SDK
     this.metamaskSDK = new MetaMaskSDK(metamaskOptions);
-    await this.metamaskSDK.init();
+    // Note: in case there is an existing SDK instance in memory (window.mmsdk exists), it won't initialize the new SDK instance and return the existing instance instead of undefined
+    const initResult = await this.metamaskSDK.init();
+    if (initResult) {
+      this.metamaskSDK = initResult;
+    }
     this.isInjected = this.metamaskSDK.isExtensionActive();
 
     this.status = CONNECTOR_STATUS.READY;
@@ -103,15 +107,18 @@ class MetaMaskConnector extends BaseEvmConnector<void> {
     const chainConfig = this.coreOptions.chains.find((x) => x.chainId === chainId);
     if (!chainConfig) throw WalletLoginError.connectionError("Chain config is not available");
     try {
-      // when metamask is not injected and headless is true, broadcast the uri to the login modal
-      if (!this.metamaskSDK.isExtensionActive() && this.metamaskOptions.headless) {
-        this.metamaskSDK.getProvider().on("display_uri", (uri) => {
-          this.updateConnectorData({ uri } as MetaMaskConnectorData);
-        });
-      }
       if (this.status !== CONNECTOR_STATUS.CONNECTING) {
         this.status = CONNECTOR_STATUS.CONNECTING;
         this.emit(CONNECTOR_EVENTS.CONNECTING, { connector: WALLET_CONNECTORS.METAMASK });
+        if (!this.metamaskSDK.isInitialized()) {
+          await this.metamaskSDK.init();
+        }
+        // when metamask is not injected and headless is true, broadcast the uri to the login modal
+        if (!this.metamaskSDK.isExtensionActive() && this.metamaskOptions.headless) {
+          this.metamaskSDK.getProvider().on("display_uri", (uri) => {
+            this.updateConnectorData({ uri } as MetaMaskConnectorData);
+          });
+        }
         await this.metamaskSDK.connect();
       }
 

packages/no-modal/src/noModal.ts

@@ -371,7 +371,7 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
 
   protected async loadConnectors({ projectConfig, modalMode }: { projectConfig: ProjectConfig; modalMode?: boolean }) {
     // always add auth and metaMask connector
-    const connectorFns = [...(this.coreOptions.connectors || []), authConnector(), metaMaskConnector(modalMode ? { headless: true } : undefined)];
+    const connectorFns = [...(this.coreOptions.connectors || []), authConnector()];
     const config = {
       projectConfig,
       coreOptions: this.coreOptions,
@@ -411,6 +411,9 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
       }
     }
 
+    // it's safe to add it here as if there is a MetaMask injected provider, this won't override it
+    connectorFns.push(metaMaskConnector(modalMode ? { headless: true } : undefined));
+
     // add WalletConnectV2 connector if external wallets are enabled
     if (isExternalWalletEnabled && (chainNamespaces.has(CHAIN_NAMESPACES.SOLANA) || chainNamespaces.has(CHAIN_NAMESPACES.EIP155))) {
       const { walletConnectV2Connector } = await import("./connectors/wallet-connect-v2-connector");