@web3auth/modal 10.0.0-beta.12 → 10.0.0-beta.13

package/dist/lib.cjs/packages/modal/src/config.js

@@ -2,7 +2,7 @@
 
 var noModal = require('@web3auth/no-modal');
 
-const version = "10.0.0-beta.12";
+const version = "10.0.0-beta.13";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

package/dist/lib.cjs/packages/modal/src/modalManager.js

@@ -97,64 +97,101 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     noModal.log.info("modalConfig", this.modalConfig);
   }
   async init(options) {
-    const {
-      signal
-    } = options || {};
-    super.checkInitRequirements();
-    // get project config and wallet registry
-    const {
-      projectConfig,
-      walletRegistry
-    } = await this.getProjectAndWalletConfig();
-    // init config
-    this.initUIConfig(projectConfig);
-    super.initAccountAbstractionConfig(projectConfig);
-    super.initChainsConfig(projectConfig);
-    super.initCachedConnectorAndChainId();
-    // init login modal
-    const {
-      filteredWalletRegistry,
-      disabledExternalWallets
-    } = this.filterWalletRegistry(walletRegistry, projectConfig);
-    this.loginModal = new loginModal.LoginModal(_objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
-      connectorListener: this,
-      web3authClientId: this.options.clientId,
-      web3authNetwork: this.options.web3AuthNetwork,
-      authBuildEnv: this.options.authBuildEnv,
-      chainNamespaces: this.getChainNamespaces(),
-      walletRegistry: filteredWalletRegistry
-    }), {
-      onInitExternalWallets: this.onInitExternalWallets,
-      onSocialLogin: this.onSocialLogin,
-      onExternalWalletLogin: this.onExternalWalletLogin,
-      onModalVisibility: this.onModalVisibility
+    // init analytics
+    const startTime = Date.now();
+    this.analytics.init();
+    this.analytics.identify(this.options.clientId, {
+      web3auth_client_id: this.options.clientId,
+      web3auth_network: this.options.web3AuthNetwork
     });
-    await noModal.withAbort(() => this.loginModal.initModal(), signal);
-    // setup common JRPC provider
-    await noModal.withAbort(() => this.setupCommonJRPCProvider(), signal);
-    // initialize connectors
-    this.on(noModal.CONNECTOR_EVENTS.CONNECTORS_UPDATED, ({
-      connectors: newConnectors
-    }) => {
-      const onAbortHandler = () => {
-        var _this$connectors;
-        noModal.log.debug("init aborted");
-        if (((_this$connectors = this.connectors) === null || _this$connectors === void 0 ? void 0 : _this$connectors.length) > 0) {
-          super.cleanup();
-        }
-      };
-      noModal.withAbort(() => this.initConnectors({
-        connectors: newConnectors,
+    this.analytics.setGlobalProperties({
+      dapp_url: window.location.origin,
+      sdk_name: noModal.ANALYTICS_SDK_TYPE.WEB_MODAL,
+      sdk_version: noModal.sdkVersion
+    });
+    let trackData = {};
+    try {
+      var _authConnector$authIn, _this$coreOptions$uiC;
+      const {
+        signal
+      } = options || {};
+      super.checkInitRequirements();
+      // get project config and wallet registry
+      const {
         projectConfig,
+        walletRegistry
+      } = await this.getProjectAndWalletConfig();
+      // init config
+      this.initUIConfig(projectConfig);
+      super.initAccountAbstractionConfig(projectConfig);
+      super.initChainsConfig(projectConfig);
+      super.initCachedConnectorAndChainId();
+      super.initWalletServicesConfig(projectConfig);
+      trackData = this.getInitializationTrackData();
+      // init login modal
+      const {
+        filteredWalletRegistry,
         disabledExternalWallets
-      }), signal, onAbortHandler);
-    });
-    await noModal.withAbort(() => super.loadConnectors({
-      projectConfig,
-      modalMode: true
-    }), signal);
-    // initialize plugins
-    await noModal.withAbort(() => super.initPlugins(), signal);
+      } = this.filterWalletRegistry(walletRegistry, projectConfig);
+      this.loginModal = new loginModal.LoginModal(_objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
+        connectorListener: this,
+        web3authClientId: this.options.clientId,
+        web3authNetwork: this.options.web3AuthNetwork,
+        authBuildEnv: this.options.authBuildEnv,
+        chainNamespaces: this.getChainNamespaces(),
+        walletRegistry: filteredWalletRegistry,
+        analytics: this.analytics
+      }), {
+        onInitExternalWallets: this.onInitExternalWallets,
+        onSocialLogin: this.onSocialLogin,
+        onExternalWalletLogin: this.onExternalWalletLogin,
+        onModalVisibility: this.onModalVisibility
+      });
+      await noModal.withAbort(() => this.loginModal.initModal(), signal);
+      // setup common JRPC provider
+      await noModal.withAbort(() => this.setupCommonJRPCProvider(), signal);
+      // initialize connectors
+      this.on(noModal.CONNECTOR_EVENTS.CONNECTORS_UPDATED, ({
+        connectors: newConnectors
+      }) => {
+        const onAbortHandler = () => {
+          var _this$connectors;
+          noModal.log.debug("init aborted");
+          if (((_this$connectors = this.connectors) === null || _this$connectors === void 0 ? void 0 : _this$connectors.length) > 0) {
+            super.cleanup();
+          }
+        };
+        noModal.withAbort(() => this.initConnectors({
+          connectors: newConnectors,
+          projectConfig,
+          disabledExternalWallets
+        }), signal, onAbortHandler);
+      });
+      await noModal.withAbort(() => super.loadConnectors({
+        projectConfig,
+        modalMode: true
+      }), signal);
+      // initialize plugins
+      await noModal.withAbort(() => super.initPlugins(), signal);
+      // track completion event
+      const authConnector = this.getConnector(noModal.WALLET_CONNECTORS.AUTH);
+      trackData = _objectSpread(_objectSpread({}, trackData), {}, {
+        connectors: this.connectors.map(connector => connector.name),
+        plugins: Object.keys(this.plugins),
+        auth_ux_mode: (authConnector === null || authConnector === void 0 || (_authConnector$authIn = authConnector.authInstance) === null || _authConnector$authIn === void 0 || (_authConnector$authIn = _authConnector$authIn.options) === null || _authConnector$authIn === void 0 ? void 0 : _authConnector$authIn.uxMode) || ((_this$coreOptions$uiC = this.coreOptions.uiConfig) === null || _this$coreOptions$uiC === void 0 ? void 0 : _this$coreOptions$uiC.uxMode)
+      });
+      this.analytics.track(noModal.ANALYTICS_EVENTS.SDK_INITIALIZATION_COMPLETED, _objectSpread(_objectSpread({}, trackData), {}, {
+        duration: Date.now() - startTime
+      }));
+    } catch (error) {
+      if (error instanceof DOMException && error.name === "AbortError") return;
+      // track failure event
+      this.analytics.track(noModal.ANALYTICS_EVENTS.SDK_INITIALIZATION_FAILED, _objectSpread(_objectSpread(_objectSpread({}, trackData), noModal.getErrorAnalyticsProperties(error)), {}, {
+        duration: Date.now() - startTime
+      }));
+      noModal.log.error("Failed to initialize modal", error);
+      throw error;
+    }
   }
   async connect() {
     if (!this.loginModal) throw noModal.WalletInitializationError.notReady("Login modal is not initialized");
@@ -187,6 +224,49 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       this.once(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, handleVisibility);
     });
   }
+  initUIConfig(projectConfig) {
+    super.initUIConfig(projectConfig);
+    this.options.uiConfig = deepmerge(noModal.cloneDeep(projectConfig.whitelabel || {}), this.options.uiConfig || {});
+    if (!this.options.uiConfig.defaultLanguage) this.options.uiConfig.defaultLanguage = utils.getUserLanguage(this.options.uiConfig.defaultLanguage);
+    if (!this.options.uiConfig.mode) this.options.uiConfig.mode = "light";
+    this.options.uiConfig = deepmerge(projectConfig.loginModal || {}, this.options.uiConfig, {
+      arrayMerge: (_, sourceArray) => sourceArray
+    });
+    // merge login methods order from project config and user config, with user config taking precedence
+    const defaultAuthConnections = projectConfig.embeddedWalletAuth.filter(x => x.isDefault).map(x => x.authConnection);
+    const mergedAuthConnections = [...(this.options.uiConfig.loginMethodsOrder || []), ...defaultAuthConnections];
+    const loginMethodsOrder = [];
+    const authConnectionSet = new Set();
+    for (const authConnection of mergedAuthConnections) {
+      if (authConnectionSet.has(authConnection)) continue;
+      authConnectionSet.add(authConnection);
+      loginMethodsOrder.push(authConnection);
+    }
+    this.options.uiConfig.loginMethodsOrder = loginMethodsOrder;
+  }
+  getInitializationTrackData() {
+    var _this$modalConfig, _this$modalConfig2, _this$modalConfig3, _this$options$uiConfi, _this$options$uiConfi2, _this$options$uiConfi3, _this$options$uiConfi4, _this$options$uiConfi5, _this$options$uiConfi6, _this$options$uiConfi7, _this$options$uiConfi8, _this$options$uiConfi9, _this$options$uiConfi0, _this$options$uiConfi1, _this$options$uiConfi10, _this$options$uiConfi11, _this$options$uiConfi12;
+    return _objectSpread(_objectSpread({}, super.getInitializationTrackData()), {}, {
+      modal_hide_wallet_discovery: (_this$modalConfig = this.modalConfig) === null || _this$modalConfig === void 0 ? void 0 : _this$modalConfig.hideWalletDiscovery,
+      modal_connectors: Object.keys(((_this$modalConfig2 = this.modalConfig) === null || _this$modalConfig2 === void 0 ? void 0 : _this$modalConfig2.connectors) || {}),
+      modal_auth_connector_login_methods: Object.keys(((_this$modalConfig3 = this.modalConfig) === null || _this$modalConfig3 === void 0 || (_this$modalConfig3 = _this$modalConfig3.connectors) === null || _this$modalConfig3 === void 0 || (_this$modalConfig3 = _this$modalConfig3[noModal.WALLET_CONNECTORS.AUTH]) === null || _this$modalConfig3 === void 0 ? void 0 : _this$modalConfig3.loginMethods) || {}),
+      // UI config
+      ui_login_methods_order: (_this$options$uiConfi = this.options.uiConfig) === null || _this$options$uiConfi === void 0 ? void 0 : _this$options$uiConfi.loginMethodsOrder,
+      ui_modal_z_index: (_this$options$uiConfi2 = this.options.uiConfig) === null || _this$options$uiConfi2 === void 0 ? void 0 : _this$options$uiConfi2.modalZIndex,
+      ui_display_errors_on_modal: (_this$options$uiConfi3 = this.options.uiConfig) === null || _this$options$uiConfi3 === void 0 ? void 0 : _this$options$uiConfi3.displayErrorsOnModal,
+      ui_login_grid_col: (_this$options$uiConfi4 = this.options.uiConfig) === null || _this$options$uiConfi4 === void 0 ? void 0 : _this$options$uiConfi4.loginGridCol,
+      ui_primary_button: (_this$options$uiConfi5 = this.options.uiConfig) === null || _this$options$uiConfi5 === void 0 ? void 0 : _this$options$uiConfi5.primaryButton,
+      ui_modal_widget_type: (_this$options$uiConfi6 = this.options.uiConfig) === null || _this$options$uiConfi6 === void 0 ? void 0 : _this$options$uiConfi6.widgetType,
+      ui_modal_target_id_used: Boolean((_this$options$uiConfi7 = this.options.uiConfig) === null || _this$options$uiConfi7 === void 0 ? void 0 : _this$options$uiConfi7.targetId),
+      ui_modal_logo_alignment: (_this$options$uiConfi8 = this.options.uiConfig) === null || _this$options$uiConfi8 === void 0 ? void 0 : _this$options$uiConfi8.logoAlignment,
+      ui_modal_border_radius_type: (_this$options$uiConfi9 = this.options.uiConfig) === null || _this$options$uiConfi9 === void 0 ? void 0 : _this$options$uiConfi9.borderRadiusType,
+      ui_modal_button_radius_type: (_this$options$uiConfi0 = this.options.uiConfig) === null || _this$options$uiConfi0 === void 0 ? void 0 : _this$options$uiConfi0.buttonRadiusType,
+      ui_modal_sign_in_methods: (_this$options$uiConfi1 = this.options.uiConfig) === null || _this$options$uiConfi1 === void 0 ? void 0 : _this$options$uiConfi1.signInMethods,
+      ui_modal_add_previous_login_hint: (_this$options$uiConfi10 = this.options.uiConfig) === null || _this$options$uiConfi10 === void 0 ? void 0 : _this$options$uiConfi10.addPreviousLoginHint,
+      ui_modal_display_installed_external_wallets: (_this$options$uiConfi11 = this.options.uiConfig) === null || _this$options$uiConfi11 === void 0 ? void 0 : _this$options$uiConfi11.displayInstalledExternalWallets,
+      ui_modal_display_external_wallets_count: (_this$options$uiConfi12 = this.options.uiConfig) === null || _this$options$uiConfi12 === void 0 ? void 0 : _this$options$uiConfi12.displayExternalWalletsCount
+    });
+  }
   filterWalletRegistry(walletRegistry, projectConfig) {
     const {
       disableAllRecommendedWallets,
@@ -215,7 +295,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     };
   }
   async getProjectAndWalletConfig() {
-    var _this$options$account, _this$modalConfig;
+    var _this$options$account, _this$modalConfig4;
     const [projectConfigResult, walletRegistryResult] = await Promise.allSettled([noModal.fetchProjectConfig({
       clientId: this.options.clientId,
       web3AuthNetwork: this.options.web3AuthNetwork,
@@ -235,7 +315,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       default: {}
     };
     const isExternalWalletEnabled = Boolean(projectConfig.externalWalletAuth);
-    if (isExternalWalletEnabled && !((_this$modalConfig = this.modalConfig) !== null && _this$modalConfig !== void 0 && _this$modalConfig.hideWalletDiscovery)) {
+    if (isExternalWalletEnabled && !((_this$modalConfig4 = this.modalConfig) !== null && _this$modalConfig4 !== void 0 && _this$modalConfig4.hideWalletDiscovery)) {
       if (walletRegistryResult.status === "fulfilled") {
         walletRegistry = walletRegistryResult.value;
       } else {
@@ -247,25 +327,6 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       walletRegistry
     };
   }
-  initUIConfig(projectConfig) {
-    this.options.uiConfig = deepmerge(noModal.cloneDeep(projectConfig.whitelabel || {}), this.options.uiConfig || {});
-    if (!this.options.uiConfig.defaultLanguage) this.options.uiConfig.defaultLanguage = utils.getUserLanguage(this.options.uiConfig.defaultLanguage);
-    if (!this.options.uiConfig.mode) this.options.uiConfig.mode = "light";
-    this.options.uiConfig = deepmerge(projectConfig.loginModal || {}, this.options.uiConfig, {
-      arrayMerge: (_, sourceArray) => sourceArray
-    });
-    // merge login methods order from project config and user config, with user config taking precedence
-    const defaultAuthConnections = projectConfig.embeddedWalletAuth.filter(x => x.isDefault).map(x => x.authConnection);
-    const mergedAuthConnections = [...(this.options.uiConfig.loginMethodsOrder || []), ...defaultAuthConnections];
-    const loginMethodsOrder = [];
-    const authConnectionSet = new Set();
-    for (const authConnection of mergedAuthConnections) {
-      if (authConnectionSet.has(authConnection)) continue;
-      authConnectionSet.add(authConnection);
-      loginMethodsOrder.push(authConnection);
-    }
-    this.options.uiConfig.loginMethodsOrder = loginMethodsOrder;
-  }
   async initConnectors({
     connectors,
     projectConfig,
@@ -314,7 +375,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     projectConfig,
     disabledExternalWallets
   }) {
-    var _this$modalConfig2;
+    var _this$modalConfig5;
     // Auth connector config: populate this with the default config for auth connectors.
     const loginMethods = {};
     const embedWalletConfigMap = new Map();
@@ -345,7 +406,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       }
     };
     // populate the user config data with the dashboard config.
-    if ((_this$modalConfig2 = this.modalConfig) !== null && _this$modalConfig2 !== void 0 && (_this$modalConfig2 = _this$modalConfig2.connectors) !== null && _this$modalConfig2 !== void 0 && _this$modalConfig2[noModal.WALLET_CONNECTORS.AUTH]) {
+    if ((_this$modalConfig5 = this.modalConfig) !== null && _this$modalConfig5 !== void 0 && (_this$modalConfig5 = _this$modalConfig5.connectors) !== null && _this$modalConfig5 !== void 0 && _this$modalConfig5[noModal.WALLET_CONNECTORS.AUTH]) {
       if (!this.modalConfig.connectors[noModal.WALLET_CONNECTORS.AUTH].loginMethods) this.modalConfig.connectors[noModal.WALLET_CONNECTORS.AUTH].loginMethods = {};
     }
     const authProviders = new Set(config$1.AUTH_PROVIDERS);
@@ -375,13 +436,13 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     // merge default connectors with the custom configured connectors.
     const allConnectorNames = [...new Set([...Object.keys(this.modalConfig.connectors || {}), ...this.connectors.map(connector => connector.name)])];
     const connectorNames = allConnectorNames.map(connectorName => {
-      var _this$modalConfig3, _this$modalConfig$con, _this$modalConfig$con2;
+      var _this$modalConfig6, _this$modalConfig$con, _this$modalConfig$con2;
       // start with the default config of connector.
       const defaultConnectorConfig = {
         label: noModal.CONNECTOR_NAMES[connectorName] || connectorName.split("-").map(config$1.capitalizeFirstLetter).join(" "),
         showOnModal: true
       };
-      this.modalConfig.connectors[connectorName] = _objectSpread(_objectSpread({}, defaultConnectorConfig), ((_this$modalConfig3 = this.modalConfig) === null || _this$modalConfig3 === void 0 || (_this$modalConfig3 = _this$modalConfig3.connectors) === null || _this$modalConfig3 === void 0 ? void 0 : _this$modalConfig3[connectorName]) || {});
+      this.modalConfig.connectors[connectorName] = _objectSpread(_objectSpread({}, defaultConnectorConfig), ((_this$modalConfig6 = this.modalConfig) === null || _this$modalConfig6 === void 0 || (_this$modalConfig6 = _this$modalConfig6.connectors) === null || _this$modalConfig6 === void 0 ? void 0 : _this$modalConfig6[connectorName]) || {});
       // check if connector is configured/added by user and exist in connectors map.
       const connector = this.getConnector(connectorName);
       noModal.log.debug("connector config", connectorName, (_this$modalConfig$con = this.modalConfig.connectors) === null || _this$modalConfig$con === void 0 || (_this$modalConfig$con = _this$modalConfig$con[connectorName]) === null || _this$modalConfig$con === void 0 ? void 0 : _this$modalConfig$con.showOnModal, connector);
@@ -401,9 +462,9 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       }
       // skip WC connector if external wallets are disabled or hideWalletDiscovery is true
       if (connectorName === noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2) {
-        var _this$modalConfig4;
+        var _this$modalConfig7;
         if (!isExternalWalletEnabled) return;
-        if ((_this$modalConfig4 = this.modalConfig) !== null && _this$modalConfig4 !== void 0 && _this$modalConfig4.hideWalletDiscovery) return;
+        if ((_this$modalConfig7 = this.modalConfig) !== null && _this$modalConfig7 !== void 0 && _this$modalConfig7.hideWalletDiscovery) return;
       }
       this.modalConfig.connectors[connectorName] = connectorConfig;
       return connectorName;
@@ -454,12 +515,12 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         // note: not adding cachedWallet to modal if it is external wallet.
         // adding it later if no in-app wallets are available.
         if (connector.type === noModal.CONNECTOR_CATEGORY.IN_APP) {
-          var _this$modalConfig$con6, _this$options$uiConfi, _this$options$uiConfi2, _this$options$uiConfi3;
+          var _this$modalConfig$con6, _this$options$uiConfi13, _this$options$uiConfi14, _this$options$uiConfi15;
           noModal.log.info("connectorInitResults", connectorName);
           const loginMethods = ((_this$modalConfig$con6 = this.modalConfig.connectors[connectorName]) === null || _this$modalConfig$con6 === void 0 ? void 0 : _this$modalConfig$con6.loginMethods) || {};
-          this.loginModal.addSocialLogins(connectorName, loginMethods, ((_this$options$uiConfi = this.options.uiConfig) === null || _this$options$uiConfi === void 0 ? void 0 : _this$options$uiConfi.loginMethodsOrder) || config$1.AUTH_PROVIDERS, _objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
-            loginGridCol: ((_this$options$uiConfi2 = this.options.uiConfig) === null || _this$options$uiConfi2 === void 0 ? void 0 : _this$options$uiConfi2.loginGridCol) || 3,
-            primaryButton: ((_this$options$uiConfi3 = this.options.uiConfig) === null || _this$options$uiConfi3 === void 0 ? void 0 : _this$options$uiConfi3.primaryButton) || "socialLogin"
+          this.loginModal.addSocialLogins(connectorName, loginMethods, ((_this$options$uiConfi13 = this.options.uiConfig) === null || _this$options$uiConfi13 === void 0 ? void 0 : _this$options$uiConfi13.loginMethodsOrder) || config$1.AUTH_PROVIDERS, _objectSpread(_objectSpread({}, this.options.uiConfig), {}, {
+            loginGridCol: ((_this$options$uiConfi14 = this.options.uiConfig) === null || _this$options$uiConfi14 === void 0 ? void 0 : _this$options$uiConfi14.loginGridCol) || 3,
+            primaryButton: ((_this$options$uiConfi15 = this.options.uiConfig) === null || _this$options$uiConfi15 === void 0 ? void 0 : _this$options$uiConfi15.primaryButton) || "socialLogin"
           }));
         }
       } catch (error) {

package/dist/lib.cjs/packages/modal/src/react/context/Web3AuthInnerContext.js

@@ -35,6 +35,9 @@ function Web3AuthInnerProvider(params) {
       try {
         setInitError(null);
         setIsInitializing(true);
+        web3Auth.setAnalyticsProperties({
+          integration_type: noModal.ANALYTICS_INTEGRATION_TYPE.REACT_HOOKS
+        });
         await web3Auth.init({
           signal: controller.signal
         });

package/dist/lib.cjs/packages/modal/src/react/wagmi/provider.js

@@ -130,6 +130,9 @@ function WagmiProvider(_ref) {
     web3Auth,
     isInitialized
   } = useWeb3Auth.useWeb3Auth();
+  web3Auth === null || web3Auth === void 0 || web3Auth.setAnalyticsProperties({
+    wagmi_enabled: true
+  });
   const finalConfig = react.useMemo(() => {
     var _web3Auth$coreOptions;
     if (!isInitialized) return constants.defaultWagmiConfig;

package/dist/lib.cjs/packages/modal/src/ui/components/ConnectWallet/ConnectWallet.js

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var noModal = require('@web3auth/no-modal');
 var react = require('react');
 var constants = require('../../constants.js');
+var AnalyticsContext = require('../../context/AnalyticsContext.js');
 var RootContext = require('../../context/RootContext.js');
 var ConnectWalletChainFilter = require('./ConnectWalletChainFilter/ConnectWalletChainFilter.js');
 var ConnectWalletHeader = require('./ConnectWalletHeader/ConnectWalletHeader.js');
@@ -34,6 +35,9 @@ function ConnectWallet(props) {
     bodyState,
     setBodyState
   } = react.useContext(RootContext.RootContext);
+  const {
+    analytics
+  } = react.useContext(AnalyticsContext.AnalyticsContext);
   const [currentPage, setCurrentPage] = react.useState(constants.CONNECT_WALLET_PAGES.CONNECT_WALLET);
   const [selectedWallet, setSelectedWallet] = react.useState(false);
   const [isLoading] = react.useState(false);
@@ -120,6 +124,18 @@ function ConnectWallet(props) {
   }, [walletDiscoverySupported, defaultButtons, installedWalletButtons, isShowAllWallets, totalExternalWalletsCount]);
   const handleWalletClick = button => {
     var _button$chainNamespac2, _button$chainNamespac3;
+    const isInstalled = button.hasInjectedWallet || !button.hasWalletConnect && !button.hasInstallLinks;
+    analytics === null || analytics === void 0 || analytics.track(noModal.ANALYTICS_EVENTS.EXTERNAL_WALLET_SELECTED, {
+      connector: isInstalled ? button.name : button.hasWalletConnect ? noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2 : "",
+      wallet_name: button.displayName,
+      is_installed: isInstalled,
+      is_injected: button.hasInjectedWallet,
+      chain_namespaces: button.chainNamespaces,
+      has_wallet_connect: button.hasWalletConnect,
+      has_install_links: button.hasInstallLinks,
+      has_wallet_registry_item: !!button.walletRegistryItem,
+      total_external_wallets: allUniqueButtons.length
+    });
     // show chain namespace selector if the button is an injected connector with multiple chain namespaces
     const isChainNamespaceSelectorRequired = button.hasInjectedWallet && ((_button$chainNamespac2 = button.chainNamespaces) === null || _button$chainNamespac2 === void 0 ? void 0 : _button$chainNamespac2.length) > 1;
     if (isChainNamespaceSelectorRequired) {
@@ -139,7 +155,7 @@ function ConnectWallet(props) {
         connector: button.name
       });
     }
-    if (button.hasWalletConnect || !isInjectedConnectorAndSingleChainNamespace) {
+    if (button.hasWalletConnect) {
       setSelectedButton(button);
       setSelectedWallet(true);
       setCurrentPage(constants.CONNECT_WALLET_PAGES.SELECTED_WALLET);

package/dist/lib.cjs/packages/modal/src/ui/components/Footer/Footer.js

@@ -32,16 +32,19 @@ function Footer({
       })]
     }), jsxRuntime.jsxs("div", {
       className: "w3a--flex w3a--items-center w3a--justify-center w3a--gap-2",
-      children: [jsxRuntime.jsx("img", {
-        height: "36",
+      children: [jsxRuntime.jsx("div", {
+        className: "w3a--text-xs w3a--text-app-gray-300 dark:w3a--text-app-gray-500",
+        children: t("modal.footer.message-new")
+      }), jsxRuntime.jsx("img", {
+        height: "16",
         src: "https://images.web3auth.io/web3auth-footer-logo-light.svg",
         alt: "Web3Auth Logo Light",
-        className: "w3a--block w3a--h-9 dark:w3a--hidden"
+        className: "w3a--block w3a--h-4 dark:w3a--hidden"
       }), jsxRuntime.jsx("img", {
-        height: "36",
+        height: "16",
         src: "https://images.web3auth.io/web3auth-footer-logo-dark.svg",
         alt: "Web3Auth Logo Dark",
-        className: "w3a--hidden w3a--h-9 dark:w3a--block"
+        className: "w3a--hidden w3a--h-4 dark:w3a--block"
       })]
     })]
   });

package/dist/lib.cjs/packages/modal/src/ui/components/Login/Login.js

@@ -9,6 +9,7 @@ var react = require('react');
 var reactI18next = require('react-i18next');
 var config = require('../../config.js');
 var constants = require('../../constants.js');
+var AnalyticsContext = require('../../context/AnalyticsContext.js');
 var RootContext = require('../../context/RootContext.js');
 var factory = require('../../handlers/factory.js');
 var localeImport = require('../../localeImport.js');
@@ -52,6 +53,9 @@ function Login(props) {
     bodyState,
     setBodyState
   } = react.useContext(RootContext.RootContext);
+  const {
+    analytics
+  } = react.useContext(AnalyticsContext.AnalyticsContext);
   const [countryCode, setCountryCode] = react.useState("");
   const [countryFlag, setCountryFlag] = react.useState("");
   const [passwordlessErrorMessage, setPasswordlessErrorMessage] = react.useState("");
@@ -265,6 +269,10 @@ function Login(props) {
     if (isSmsPasswordLessLoginVisible) getLocation();
   }, [isSmsPasswordLessLoginVisible]);
   const handleConnectWallet = e => {
+    analytics === null || analytics === void 0 || analytics.track(noModal.ANALYTICS_EVENTS.EXTERNAL_WALLET_LIST_EXPANDED, {
+      total_external_wallets: totalExternalWallets,
+      installed_external_wallets: installedExternalWallets.length
+    });
     setIsPasswordLessCtaClicked(false);
     e.preventDefault();
     if (handleExternalWalletBtnClick) handleExternalWalletBtnClick(true);
@@ -304,6 +312,17 @@ function Login(props) {
   };
   const handleInstalledWalletClick = wallet => {
     var _wallet$chainNamespac;
+    analytics === null || analytics === void 0 || analytics.track(noModal.ANALYTICS_EVENTS.EXTERNAL_WALLET_SELECTED, {
+      connector: wallet.name,
+      wallet_name: wallet.displayName,
+      is_installed: true,
+      is_injected: wallet.hasInjectedWallet,
+      chain_namespaces: wallet.chainNamespaces,
+      has_wallet_connect: wallet.hasWalletConnect,
+      has_install_links: wallet.hasInstallLinks,
+      has_wallet_registry_item: !!wallet.walletRegistryItem,
+      total_external_wallets: totalExternalWallets
+    });
     // for non-injected Metamask, show QR code to connect
     if (wallet.name === noModal.WALLET_CONNECTORS.METAMASK && !wallet.hasInjectedWallet) {
       setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {

package/dist/lib.cjs/packages/modal/src/ui/components/Widget/Widget.js

@@ -129,7 +129,7 @@ function Widget(props) {
         externalWalletsVisibility: flag
       });
     });
-    if (handleShowExternalWallets) handleShowExternalWallets(modalState.externalWalletsInitialized);
+    if (flag && handleShowExternalWallets) handleShowExternalWallets(modalState.externalWalletsInitialized);
   };
   const onCloseModal = () => {
     setModalState(prevState => _objectSpread(_objectSpread({}, prevState), {}, {
@@ -169,7 +169,7 @@ function Widget(props) {
         });
       }
       // auto connect to MetaMask if not injected to generate QR code URI for mobile connection
-      const mmAvailable = !((_modalState$externalW2 = modalState.externalWalletsConfig[noModal.WALLET_CONNECTORS.METAMASK]) !== null && _modalState$externalW2 !== void 0 && _modalState$externalW2.isInjected);
+      const mmAvailable = modalState.externalWalletsConfig[noModal.WALLET_CONNECTORS.METAMASK] && !((_modalState$externalW2 = modalState.externalWalletsConfig[noModal.WALLET_CONNECTORS.METAMASK]) !== null && _modalState$externalW2 !== void 0 && _modalState$externalW2.isInjected);
       if (mmAvailable && !modalState.metamaskConnectUri && typeof handleExternalWalletClick === "function") {
         handleExternalWalletClick({
           connector: noModal.WALLET_CONNECTORS.METAMASK

package/dist/lib.cjs/packages/modal/src/ui/context/AnalyticsContext.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var react = require('react');
+
+const AnalyticsContext = /*#__PURE__*/react.createContext({
+  analytics: undefined
+});
+
+exports.AnalyticsContext = AnalyticsContext;