Merge pull request #2238 from Web3Auth/fix/only-metamask-active

fix empty modal when only metamask is active

Author: chaitanyapotti

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

@@ -120,10 +120,15 @@ function Widget(props: WidgetProps) {
     () => isEmailPasswordLessLoginVisible || isSmsPasswordLessLoginVisible,
     [isEmailPasswordLessLoginVisible, isSmsPasswordLessLoginVisible]
   );
-  const showExternalWalletButton = useMemo(() => modalState.hasExternalWallets, [modalState]);
+  const showExternalWalletButton = useMemo(
+    () => modalState.hasExternalWallets || !!modalState.externalWalletsConfig[WALLET_CONNECTORS.METAMASK],
+    [modalState]
+  );
   const showExternalWalletPage = useMemo(
-    () => (areSocialLoginsVisible || showPasswordLessInput) && !modalState.externalWalletsVisibility,
-    [areSocialLoginsVisible, showPasswordLessInput, modalState.externalWalletsVisibility]
+    () =>
+      (areSocialLoginsVisible || showPasswordLessInput || !!modalState.externalWalletsConfig[WALLET_CONNECTORS.METAMASK]) &&
+      !modalState.externalWalletsVisibility,
+    [areSocialLoginsVisible, showPasswordLessInput, modalState]
   );
 
   const handleExternalWalletBtnClick = (flag: boolean) => {

packages/modal/src/ui/loginModal.tsx

@@ -297,11 +297,12 @@ export class LoginModal {
     options?: { externalWalletsInitialized: boolean; externalWalletsVisibility: boolean; showExternalWalletsOnly: boolean }
   ): void => {
     this.externalWalletsConfig = externalWalletsConfig;
+    const isMMAvailable = !!externalWalletsConfig[WALLET_CONNECTORS.METAMASK];
     this.setState({
       externalWalletsConfig,
       externalWalletsInitialized: !!options.externalWalletsInitialized,
       showExternalWalletsOnly: !!options.showExternalWalletsOnly,
-      externalWalletsVisibility: !!options.externalWalletsVisibility,
+      externalWalletsVisibility: isMMAvailable ? false : !!options.externalWalletsVisibility,
     });
   };