show loader when connecting to Metamask on mobile

Author: tanguyenvn

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

@@ -1,12 +1,11 @@
 import { WALLET_CONNECTORS, type WalletRegistryItem } from "@web3auth/no-modal";
-import Bowser from "bowser";
 import { JSX, useCallback, useContext, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 
 import { CONNECT_WALLET_PAGES, DEFAULT_METAMASK_WALLET_REGISTRY_ITEM, PAGES } from "../../constants";
 import { BodyState, RootContext } from "../../context/RootContext";
 import { ThemedContext } from "../../context/ThemeContext";
-import { browser, ExternalButton, mobileOs, MODAL_STATUS, os, platform, TOAST_TYPE, ToastType } from "../../interfaces";
+import { ExternalButton, mobileOs, MODAL_STATUS, TOAST_TYPE, ToastType } from "../../interfaces";
 import i18n from "../../localeImport";
 import { cn, getBrowserExtensionUrl, getBrowserName, getIcons, getMobileInstallLink, getOsName } from "../../utils";
 import BottomSheet from "../BottomSheet";
@@ -42,6 +41,7 @@ function Root(props: RootProps) {
     isSmsPasswordLessLoginVisible,
     preHandleExternalWalletClick,
     uiConfig,
+    deviceDetails,
   } = props;
 
   const {
@@ -99,16 +99,6 @@ function Root(props: RootProps) {
   };
 
   // Wallet Details
-  const deviceDetails = useMemo<{ platform: platform; browser: browser; os: mobileOs }>(() => {
-    if (typeof window === "undefined") return { platform: "mobile", browser: "chrome", os: "ios" };
-    const browserData = Bowser.getParser(window.navigator.userAgent);
-    return {
-      platform: browserData.getPlatformType() as platform,
-      browser: browserData.getBrowserName().toLowerCase() as browser,
-      os: browserData.getOSName() as mobileOs,
-    };
-  }, []);
-
   const mobileInstallLinks = useMemo<JSX.Element[]>(() => {
     if (deviceDetails.platform === "desktop") return [];
     const installConfig = bodyState.installLinks?.wallet?.walletRegistryItem?.app || {};
@@ -490,11 +480,7 @@ function Root(props: RootProps) {
                         totalExternalWallets={totalExternalWallets}
                         logoAlignment={logoAlignment}
                         buttonRadius={buttonRadiusType}
-                        deviceDetails={{
-                          platform: deviceDetails.platform,
-                          browser: deviceDetails.browser,
-                          os: deviceDetails.os as os,
-                        }}
+                        deviceDetails={deviceDetails}
                         handleSocialLoginClick={handleSocialLoginClick}
                         handleExternalWalletBtnClick={onExternalWalletBtnClick}
                         handleSocialLoginHeight={handleSocialLoginHeight}
@@ -512,11 +498,7 @@ function Root(props: RootProps) {
                         allExternalButtons={allButtons}
                         connectorVisibilityMap={connectorVisibilityMap}
                         customConnectorButtons={customConnectorButtons}
-                        deviceDetails={{
-                          platform: deviceDetails.platform,
-                          browser: deviceDetails.browser,
-                          os: deviceDetails.os as os,
-                        }}
+                        deviceDetails={deviceDetails}
                         chainNamespace={chainNamespaces}
                         buttonRadius={buttonRadiusType}
                         handleWalletDetailsHeight={handleWalletDetailsHeight}

packages/modal/src/ui/components/Root/Root.type.ts

@@ -1,6 +1,6 @@
 import type { ChainNamespaceType, WalletRegistry } from "@web3auth/no-modal";
 
-import { ModalState, SocialLoginEventType, SocialLoginsConfig, UIConfig } from "../../interfaces";
+import { browser, ModalState, os, platform, SocialLoginEventType, SocialLoginsConfig, UIConfig } from "../../interfaces";
 
 export interface RootProps {
   appLogo?: string;
@@ -18,6 +18,7 @@ export interface RootProps {
   isEmailPasswordLessLoginVisible: boolean;
   isSmsPasswordLessLoginVisible: boolean;
   uiConfig: UIConfig;
+  deviceDetails: { platform: platform; browser: browser; os: os };
   handleSocialLoginClick: (params: SocialLoginEventType) => void;
   handleExternalWalletBtnClick?: (flag: boolean) => void;
   preHandleExternalWalletClick: (params: { connector: string; chainNamespace?: ChainNamespaceType }) => void;

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

@@ -22,6 +22,7 @@ function Widget(props: WidgetProps) {
     chainNamespaces,
     walletRegistry,
     uiConfig,
+    deviceDetails,
   } = props;
 
   const { widgetType } = uiConfig;
@@ -219,6 +220,7 @@ function Widget(props: WidgetProps) {
             isEmailPasswordLessLoginVisible={isEmailPasswordLessLoginVisible}
             isSmsPasswordLessLoginVisible={isSmsPasswordLessLoginVisible}
             uiConfig={uiConfig}
+            deviceDetails={deviceDetails}
           />
         )}
       </Modal>
@@ -250,6 +252,7 @@ function Widget(props: WidgetProps) {
           isEmailPasswordLessLoginVisible={isEmailPasswordLessLoginVisible}
           isSmsPasswordLessLoginVisible={isSmsPasswordLessLoginVisible}
           uiConfig={uiConfig}
+          deviceDetails={deviceDetails}
         />
       )}
     </Embed>

packages/modal/src/ui/components/Widget/Widget.type.ts

@@ -1,17 +1,18 @@
 import { SafeEventEmitter } from "@web3auth/auth";
 import { ChainNamespaceType, WalletRegistry } from "@web3auth/no-modal";
 
-import { ExternalWalletEventType, SocialLoginEventType, StateEmitterEvents, UIConfig } from "../../interfaces";
+import { browser, ExternalWalletEventType, os, platform, SocialLoginEventType, StateEmitterEvents, UIConfig } from "../../interfaces";
 
 export interface WidgetProps {
   stateListener: SafeEventEmitter<StateEmitterEvents>;
   appLogo?: string;
   appName?: string;
   chainNamespaces: ChainNamespaceType[];
   walletRegistry?: WalletRegistry;
+  uiConfig: UIConfig;
+  deviceDetails: { platform: platform; browser: browser; os: os };
   handleSocialLoginClick: (params: SocialLoginEventType) => void;
   handleExternalWalletClick: (params: ExternalWalletEventType) => void;
   handleShowExternalWallets: (externalWalletsInitialized: boolean) => void;
   closeModal: () => void;
-  uiConfig: UIConfig;
 }

packages/modal/src/ui/loginModal.tsx

@@ -26,6 +26,7 @@ import {
   type Web3AuthNoModalEvents,
   WIDGET_TYPE,
 } from "@web3auth/no-modal";
+import Bowser from "bowser";
 import { createRoot } from "react-dom/client";
 
 import { getLoginModalAnalyticsProperties } from "../utils";
@@ -34,11 +35,14 @@ import { DEFAULT_LOGO_DARK, DEFAULT_LOGO_LIGHT, DEFAULT_ON_PRIMARY_COLOR, DEFAUL
 import { AnalyticsContext } from "./context/AnalyticsContext";
 import { ThemedContext } from "./context/ThemeContext";
 import {
+  browser,
   ExternalWalletEventType,
   LoginModalCallbacks,
   LoginModalProps,
   MODAL_STATUS,
   ModalState,
+  os,
+  platform,
   SocialLoginEventType,
   StateEmitterEvents,
   UIConfig,
@@ -112,6 +116,16 @@ export class LoginModal {
     return this.uiConfig.mode === "dark" || (this.uiConfig.mode === "auto" && window.matchMedia("(prefers-color-scheme: dark)").matches);
   }
 
+  get deviceDetails() {
+    if (typeof window === "undefined") return { platform: "mobile" as platform, browser: "chrome" as browser, os: "ios" as os };
+    const browserData = Bowser.getParser(window.navigator.userAgent);
+    return {
+      platform: browserData.getPlatformType() as platform,
+      browser: browserData.getBrowserName().toLowerCase() as browser,
+      os: browserData.getOSName() as os,
+    };
+  }
+
   initModal = async (): Promise<void> => {
     const darkState = { isDark: this.isDark };
 
@@ -249,6 +263,7 @@ export class LoginModal {
               appName={this.uiConfig.appName}
               chainNamespaces={this.chainNamespaces}
               walletRegistry={this.walletRegistry}
+              deviceDetails={this.deviceDetails}
               handleShowExternalWallets={this.handleShowExternalWallets}
               handleExternalWalletClick={this.handleExternalWalletClick}
               handleSocialLoginClick={this.handleSocialLoginClick}
@@ -394,7 +409,7 @@ export class LoginModal {
 
       // don't show loader in case of metamask qr code, because currently it listens for incoming connections without any user interaction
       const isMetamaskInjected = this.externalWalletsConfig?.[WALLET_CONNECTORS.METAMASK]?.isInjected;
-      if (data?.connector === WALLET_CONNECTORS.METAMASK && !isMetamaskInjected) return;
+      if (data?.connector === WALLET_CONNECTORS.METAMASK && !isMetamaskInjected && this.deviceDetails.platform === "desktop") return;
 
       this.setState({ status: MODAL_STATUS.CONNECTING });
     });