refactor code

Author: tanguyenvn

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

@@ -153,8 +153,7 @@ function ConnectWallet(props: ConnectWalletProps) {
     const isInjectedConnectorAndSingleChainNamespace = button.hasInjectedWallet && button.chainNamespaces?.length === 1;
     // if doesn't have wallet connect & doesn't have install links, must be a custom connector
     const isCustomConnector = !button.hasInjectedWallet && !button.hasWalletConnect && !button.hasInstallLinks;
-    // for non-injected Metamask, handle it as a discoverable wallet to display QR code instead of treating as custom connector
-    if (isInjectedConnectorAndSingleChainNamespace || (button.name !== WALLET_CONNECTORS.METAMASK && isCustomConnector)) {
+    if (isInjectedConnectorAndSingleChainNamespace || isCustomConnector) {
       return handleExternalWalletClick({ connector: button.name });
     }
 

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

@@ -303,12 +303,12 @@ function Root(props: RootProps) {
     }, [] as ExternalButton[]);
 
     // if metamask connector is not injected, use the registry button instead to display QR code
-    const metamaskCustomConnectorIdx = installedConnectors.findIndex((button) => button.name === WALLET_CONNECTORS.METAMASK);
+    const metamaskCustomConnectorIdx = installedConnectors.findIndex((x) => x.name === WALLET_CONNECTORS.METAMASK && !x.hasInjectedWallet);
     if (metamaskCustomConnectorIdx !== -1) {
       const metamaskCustomConnector = installedConnectors[metamaskCustomConnectorIdx];
       let metamaskRegistryButton = allButtons.find((button) => button.name === WALLET_CONNECTORS.METAMASK);
       if (!metamaskRegistryButton) {
-        // if metamask is not in the registry, use the default metamask registry item
+        // use the default metamask registry item if it's not in the registry
         metamaskRegistryButton = generateWalletButtons({
           [WALLET_CONNECTORS.METAMASK]: DEFAULT_METAMASK_WALLET_REGISTRY_ITEM,
         })[0];

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

@@ -173,11 +173,14 @@ function Widget(props: WidgetProps) {
     // TODO: maybe move this inside root
     if (!modalState.modalVisibility) return;
     if (typeof modalState.externalWalletsConfig === "object") {
+      // auto connect to WC if not injected to generate QR code URI for mobile connection
       const wcAvailable = (modalState.externalWalletsConfig[WALLET_CONNECTORS.WALLET_CONNECT_V2]?.showOnModal || false) !== false;
-      const mmAvailable = !modalState.externalWalletsConfig[WALLET_CONNECTORS.METAMASK]?.isInjected;
       if (wcAvailable && !modalState.walletConnectUri && typeof handleExternalWalletClick === "function") {
         handleExternalWalletClick({ connector: WALLET_CONNECTORS.WALLET_CONNECT_V2 });
       }
+
+      // auto connect to MetaMask if not injected to generate QR code URI for mobile connection
+      const mmAvailable = !modalState.externalWalletsConfig[WALLET_CONNECTORS.METAMASK]?.isInjected;
       if (mmAvailable && !modalState.metamaskConnectUri && typeof handleExternalWalletClick === "function") {
         handleExternalWalletClick({ connector: WALLET_CONNECTORS.METAMASK });
       }

packages/no-modal/src/base/connector/baseConnector.ts

@@ -48,8 +48,9 @@ export abstract class BaseConnector<T> extends SafeEventEmitter<ConnectorEvents>
   public abstract get provider(): IProvider | null;
 
   checkConnectionRequirements(): void {
-    // we reconnect without killing existing wallet connect session on calling connect again.
+    // we reconnect without killing existing Wallet Connect or Metamask Connect session on calling connect again.
     if (this.name === WALLET_CONNECTORS.WALLET_CONNECT_V2 && this.status === CONNECTOR_STATUS.CONNECTING) return;
+    if (this.name === WALLET_CONNECTORS.METAMASK && !this.isInjected && this.status === CONNECTOR_STATUS.CONNECTING) return;
 
     if (this.status === CONNECTOR_STATUS.CONNECTING) throw WalletInitializationError.notReady("Already connecting");
     if (this.status === CONNECTOR_STATUS.CONNECTED) throw WalletLoginError.connectionError("Already connected");

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

@@ -80,9 +80,10 @@ class MetaMaskConnector extends BaseEvmConnector<void> {
     };
 
     // initialize the MetaMask SDK
-    const metamaskOptions = deepmerge(this.metamaskOptions || { headless: true }, { dappMetadata: appMetadata }); // TODO: only use headless for Modal SDK
+    const metamaskOptions = deepmerge(this.metamaskOptions || {}, { dappMetadata: appMetadata });
     this.metamaskSDK = new MetaMaskSDK(metamaskOptions);
-    // 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
+    // Work around: in case there is an existing SDK instance in memory (window.mmsdk exists), it won't initialize the new SDK instance again
+    // and return the existing instance instead of undefined (this is an assumption, not sure if it's a bug or feature of the MetaMask SDK)
     const initResult = await this.metamaskSDK.init();
     if (initResult) {
       this.metamaskSDK = initResult;
@@ -110,11 +111,8 @@ class MetaMaskConnector extends BaseEvmConnector<void> {
       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) {
+          // when metamask is not injected and headless is true, broadcast the uri to the login modal
           this.metamaskSDK.getProvider().on("display_uri", (uri) => {
             this.updateConnectorData({ uri } as MetaMaskConnectorData);
           });

packages/no-modal/src/noModal.ts

@@ -370,7 +370,7 @@ export class Web3AuthNoModal extends SafeEventEmitter<Web3AuthNoModalEvents> imp
   }
 
   protected async loadConnectors({ projectConfig, modalMode }: { projectConfig: ProjectConfig; modalMode?: boolean }) {
-    // always add auth and metaMask connector
+    // always add auth connector
     const connectorFns = [...(this.coreOptions.connectors || []), authConnector()];
     const config = {
       projectConfig,
@@ -412,6 +412,7 @@ 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
+    // only set headless to true if modal SDK is used, otherwise just use the modal from native Metamask SDK
     connectorFns.push(metaMaskConnector(modalMode ? { headless: true } : undefined));
 
     // add WalletConnectV2 connector if external wallets are enabled