@web3auth/modal 10.0.0-beta.6 → 10.0.0-beta.8

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.6";
+const version = "10.0.0-beta.8";
 const defaultConnectorsModalConfig = {
   hideWalletDiscovery: false,
   connectors: {

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

@@ -2,6 +2,7 @@
 
 var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+var auth = require('@web3auth/auth');
 var noModal = require('@web3auth/no-modal');
 var deepmerge = require('deepmerge');
 var config = require('./config.js');
@@ -41,6 +42,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     _defineProperty(this, "onModalVisibility", async visibility => {
       noModal.log.debug("is login modal visible", visibility);
       this.emit(interfaces.LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, visibility);
+      // handle WC session refresh
       const wcConnector = this.getConnector(noModal.WALLET_CONNECTORS.WALLET_CONNECT_V2);
       if (wcConnector) {
         const walletConnectStatus = wcConnector === null || wcConnector === void 0 ? void 0 : wcConnector.status;
@@ -62,6 +64,28 @@ class Web3Auth extends noModal.Web3AuthNoModal {
           wcConnector.status = noModal.CONNECTOR_STATUS.READY;
         }
       }
+      // handle MM session refresh if MM is not injected
+      const metamaskConnector = this.getConnector(noModal.WALLET_CONNECTORS.METAMASK);
+      if (metamaskConnector && !metamaskConnector.isInjected) {
+        const status = metamaskConnector === null || metamaskConnector === void 0 ? void 0 : metamaskConnector.status;
+        noModal.log.debug("trying refreshing MM session", visibility, status);
+        if (visibility && (status === noModal.CONNECTOR_STATUS.READY || status === noModal.CONNECTOR_STATUS.CONNECTING)) {
+          noModal.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) {
+            noModal.log.error(`Error while connecting to MM`, error);
+          }
+        }
+        if (!visibility && this.status === noModal.CONNECTOR_STATUS.CONNECTED && (status === noModal.CONNECTOR_STATUS.READY || status === noModal.CONNECTOR_STATUS.CONNECTING)) {
+          noModal.log.debug("this stops MM connector from trying to reconnect once proposal expires");
+          metamaskConnector.status = noModal.CONNECTOR_STATUS.READY;
+        }
+      }
     });
     _defineProperty(this, "getChainNamespaces", () => {
       var _this$coreOptions$cha;
@@ -126,7 +150,8 @@ class Web3Auth extends noModal.Web3AuthNoModal {
       }), signal, onAbortHandler);
     });
     await noModal.withAbort(() => super.loadConnectors({
-      projectConfig
+      projectConfig,
+      modalMode: true
     }), signal);
     // initialize plugins
     await noModal.withAbort(() => super.initPlugins(), signal);
@@ -199,8 +224,9 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     }), noModal.fetchWalletRegistry(config.walletRegistryUrl)]);
     // handle project config result
     if (projectConfigResult.status === "rejected") {
-      noModal.log.error("Failed to fetch project configurations", projectConfigResult.reason);
-      throw noModal.WalletInitializationError.notReady("failed to fetch project configurations", projectConfigResult.reason);
+      const error = await auth.serializeError(projectConfigResult.reason);
+      noModal.log.error("Failed to fetch project configurations", error);
+      throw noModal.WalletInitializationError.notReady("failed to fetch project configurations", error);
     }
     const projectConfig = projectConfigResult.value;
     // handle wallet registry result
@@ -225,7 +251,9 @@ class Web3Auth extends noModal.Web3AuthNoModal {
     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);
+    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];
@@ -413,7 +441,7 @@ class Web3Auth extends noModal.Web3AuthNoModal {
         // skip if connector is already initialized
         if (connector.status !== noModal.CONNECTOR_STATUS.NOT_READY) return;
         // only initialize a external connectors here if it is a cached connector.
-        if (this.cachedConnector !== connectorName && connectorName !== noModal.WALLET_CONNECTORS.METAMASK && connector.type === noModal.CONNECTOR_CATEGORY.EXTERNAL) return;
+        if (this.cachedConnector !== connectorName && connector.type === noModal.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.
         // external wallets are initialized on INIT_EXTERNAL_WALLET event.

package/dist/lib.cjs/packages/modal/src/react/hooks/useWalletServicesPlugin.js

@@ -1,11 +1,12 @@
 'use strict';
 
+var noModal = require('@web3auth/no-modal');
 var react = require('react');
 var WalletServicesInnerContext = require('../context/WalletServicesInnerContext.js');
 
 const useWalletServicesPlugin = () => {
   const context = react.useContext(WalletServicesInnerContext.WalletServicesContext);
-  if (!context) throw new Error("WalletServicesContext not found");
+  if (!context) throw noModal.WalletInitializationError.fromCode(1000, "usage of useWalletServicesPlugin not wrapped in `WalletServicesContextProvider`.");
   return context;
 };
 

package/dist/lib.cjs/packages/modal/src/react/hooks/useWeb3AuthConnect.js

@@ -12,10 +12,14 @@ const useWeb3AuthConnect = () => {
   const [error, setError] = react.useState(null);
   const [connectorName, setConnectorName] = react.useState(null);
   react.useEffect(() => {
+    if (!web3Auth) return;
     if (!isConnected && connectorName) {
       setConnectorName(null);
     }
-  }, [isConnected, connectorName]);
+    if (isConnected && !connectorName) {
+      setConnectorName(web3Auth.connectedConnectorName);
+    }
+  }, [isConnected, connectorName, web3Auth]);
   const connect = react.useCallback(async () => {
     setLoading(true);
     setError(null);

package/dist/lib.cjs/packages/modal/src/react/solana/hooks/useSignAndSendTransaction.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var noModal = require('@web3auth/no-modal');
 var react = require('react');
 var useSolanaWallet = require('./useSolanaWallet.js');
 
@@ -14,7 +15,7 @@ const useSignAndSendTransaction = () => {
     setLoading(true);
     setError(null);
     try {
-      if (!solanaWallet) throw new Error("Solana wallet not found");
+      if (!solanaWallet) throw noModal.WalletInitializationError.notReady();
       const signature = await solanaWallet.signAndSendTransaction(transaction);
       setData(signature);
       return signature;

package/dist/lib.cjs/packages/modal/src/react/solana/hooks/useSignMessage.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var noModal = require('@web3auth/no-modal');
 var react = require('react');
 var useSolanaWallet = require('./useSolanaWallet.js');
 
@@ -15,7 +16,7 @@ const useSignMessage = () => {
     setLoading(true);
     setError(null);
     try {
-      if (!solanaWallet) throw new Error("Solana wallet not found");
+      if (!solanaWallet) throw noModal.WalletInitializationError.notReady();
       const signature = await solanaWallet.signMessage(message, from !== null && from !== void 0 ? from : accounts === null || accounts === void 0 ? void 0 : accounts[0]);
       setData(signature);
       return signature;

package/dist/lib.cjs/packages/modal/src/react/solana/hooks/useSignTransaction.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var noModal = require('@web3auth/no-modal');
 var react = require('react');
 var useSolanaWallet = require('./useSolanaWallet.js');
 
@@ -14,6 +15,7 @@ const useSignTransaction = () => {
     setLoading(true);
     setError(null);
     try {
+      if (!solanaWallet) throw noModal.WalletInitializationError.notReady();
       const signedTransaction = await solanaWallet.signTransaction(transaction);
       setData(signedTransaction);
       return signedTransaction;

package/dist/lib.cjs/packages/modal/src/react/solana/hooks/useSolanaWallet.js

@@ -1,31 +1,38 @@
 'use strict';
 
+var web3_js = require('@solana/web3.js');
 var noModal = require('@web3auth/no-modal');
 var react = require('react');
 var useWeb3Auth = require('../../hooks/useWeb3Auth.js');
 
 const useSolanaWallet = () => {
   const {
-    provider
+    provider,
+    web3Auth
   } = useWeb3Auth.useWeb3Auth();
   const [accounts, setAccounts] = react.useState(null);
   const solanaWallet = react.useMemo(() => {
     if (!provider) return null;
     return new noModal.SolanaWallet(provider);
   }, [provider]);
+  const connection = react.useMemo(() => {
+    if (!web3Auth || !provider) return null;
+    return new web3_js.Connection(web3Auth.currentChain.rpcTarget);
+  }, [web3Auth, provider]);
   react.useEffect(() => {
-    const fetchAccounts = async () => {
+    const init = async () => {
       if (!solanaWallet) return;
       const accounts = await solanaWallet.requestAccounts();
       if ((accounts === null || accounts === void 0 ? void 0 : accounts.length) > 0) {
         setAccounts(accounts);
       }
     };
-    if (solanaWallet) fetchAccounts();
-  }, [solanaWallet]);
+    if (solanaWallet) init();
+  }, [solanaWallet, web3Auth]);
   return {
     solanaWallet,
-    accounts
+    accounts,
+    connection
   };
 };
 

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

@@ -8,13 +8,13 @@ var viem = require('viem');
 var wagmi = require('wagmi');
 var connectors = require('wagmi/connectors');
 require('@babel/runtime/helpers/defineProperty');
+require('@web3auth/auth');
 require('deepmerge');
 require('../../config.js');
 require('../../ui/config.js');
 require('../../ui/interfaces.js');
 require('react/jsx-runtime');
 require('../../ui/css/index.css.js');
-require('@web3auth/auth');
 require('react-dom/client');
 require('@toruslabs/http-helpers');
 require('clsx');
@@ -100,6 +100,7 @@ function Web3AuthWagmiProvider({
       if (isConnected && provider) {
         const connector = await setupConnector(provider, wagmiConfig);
         if (!connector) {
+          noModal.log.error("Failed to setup react wagmi connector");
           throw new Error("Failed to setup connector");
         }
         await connectWeb3AuthWithWagmi(connector, wagmiConfig);

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

@@ -18,6 +18,7 @@ function ConnectWallet(props) {
     isDark,
     config,
     walletConnectUri,
+    metamaskConnectUri,
     walletRegistry,
     allExternalButtons,
     customConnectorButtons,
@@ -31,9 +32,7 @@ function ConnectWallet(props) {
   } = props;
   const {
     bodyState,
-    setBodyState,
-    toast,
-    setToast
+    setBodyState
   } = react.useContext(RootContext.RootContext);
   const [currentPage, setCurrentPage] = react.useState(constants.CONNECT_WALLET_PAGES.CONNECT_WALLET);
   const [selectedWallet, setSelectedWallet] = react.useState(false);
@@ -68,7 +67,7 @@ function ConnectWallet(props) {
   const defaultButtonKeys = react.useMemo(() => new Set(Object.keys(walletRegistry.default)), [walletRegistry]);
   const defaultButtons = react.useMemo(() => {
     // display order: default injected buttons > custom adapter buttons > default non-injected buttons
-    const buttons = [...allExternalButtons.filter(button => button.hasInjectedWallet && defaultButtonKeys.has(button.name)), ...customConnectorButtons, ...allExternalButtons.filter(button => !button.hasInjectedWallet && defaultButtonKeys.has(button.name))];
+    const buttons = [...allExternalButtons.filter(button => button.hasInjectedWallet && defaultButtonKeys.has(button.name)), ...customConnectorButtons, ...allExternalButtons.filter(button => !button.hasInjectedWallet && defaultButtonKeys.has(button.name))].sort((a, _) => a.name === noModal.WALLET_CONNECTORS.METAMASK ? -1 : 1);
     const buttonSet = new Set();
     return buttons.filter(button => {
       if (buttonSet.has(button.name)) return false;
@@ -104,7 +103,7 @@ function ConnectWallet(props) {
   };
   const filteredButtons = react.useMemo(() => {
     if (walletDiscoverySupported) {
-      return [...allUniqueButtons.filter(button => button.hasInjectedWallet), ...allUniqueButtons.filter(button => !button.hasInjectedWallet)].filter(button => selectedChain === "all" || button.chainNamespaces.includes(selectedChain)).filter(button => button.name.toLowerCase().includes(walletSearch.toLowerCase()));
+      return [...allUniqueButtons.filter(button => button.hasInjectedWallet), ...allUniqueButtons.filter(button => !button.hasInjectedWallet)].sort((a, _) => a.name === noModal.WALLET_CONNECTORS.METAMASK ? -1 : 1).filter(button => selectedChain === "all" || button.chainNamespaces.includes(selectedChain)).filter(button => button.name.toLowerCase().includes(walletSearch.toLowerCase()));
     }
     return installedWalletButtons;
   }, [walletDiscoverySupported, installedWalletButtons, walletSearch, allUniqueButtons, selectedChain]);
@@ -125,8 +124,10 @@ function ConnectWallet(props) {
     const isChainNamespaceSelectorRequired = button.hasInjectedWallet && ((_button$chainNamespac2 = button.chainNamespaces) === null || _button$chainNamespac2 === void 0 ? void 0 : _button$chainNamespac2.length) > 1;
     if (isChainNamespaceSelectorRequired) {
       setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
-        showMultiChainSelector: true,
-        walletDetails: button
+        multiChainSelector: {
+          show: true,
+          wallet: button
+        }
       }));
       return;
     }
@@ -145,14 +146,23 @@ function ConnectWallet(props) {
       handleWalletDetailsHeight();
     } else {
       setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
-        showWalletDetails: true,
-        walletDetails: button
+        installLinks: {
+          show: true,
+          wallet: button
+        }
       }));
     }
   };
   const handleMoreWallets = () => {
     setIsShowAllWallets(true);
   };
+  const qrCodeValue = react.useMemo(() => {
+    if (!selectedWallet) return null;
+    if (selectedButton.name === noModal.WALLET_CONNECTORS.METAMASK && !selectedButton.hasInjectedWallet) {
+      return metamaskConnectUri;
+    }
+    return walletConnectUri;
+  }, [metamaskConnectUri, selectedButton, selectedWallet, walletConnectUri]);
   return jsxRuntime.jsxs("div", {
     className: "w3a--relative w3a--flex w3a--flex-1 w3a--flex-col w3a--gap-y-4",
     children: [jsxRuntime.jsx(ConnectWalletHeader, {
@@ -160,15 +170,11 @@ function ConnectWallet(props) {
       currentPage: currentPage,
       selectedButton: selectedButton
     }), selectedWallet ? jsxRuntime.jsx(ConnectWalletQrCode, {
-      toast: toast,
-      setToast: setToast,
-      walletConnectUri: walletConnectUri,
+      qrCodeValue: qrCodeValue,
       isDark: isDark,
       selectedButton: selectedButton,
-      bodyState: bodyState,
       primaryColor: (_selectedButton$walle = selectedButton.walletRegistryItem) === null || _selectedButton$walle === void 0 ? void 0 : _selectedButton$walle.primaryColor,
-      logoImage: `https://images.web3auth.io/login-${selectedButton.name}.${selectedButton.imgExtension}`,
-      setBodyState: setBodyState
+      logoImage: `https://images.web3auth.io/login-${selectedButton.name}.${selectedButton.imgExtension}`
     }) : jsxRuntime.jsxs("div", {
       className: "w3a--flex w3a--flex-col w3a--gap-y-2",
       children: [jsxRuntime.jsx(ConnectWalletChainFilter, {

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

@@ -7,6 +7,7 @@ var react = require('react');
 var reactI18next = require('react-i18next');
 var reactQrcodeLogo = require('react-qrcode-logo');
 var constants = require('../../../constants.js');
+var RootContext = require('../../../context/RootContext.js');
 var localeImport = require('../../../localeImport.js');
 var Image = require('../../Image/Image.js');
 
@@ -16,11 +17,13 @@ function ConnectWalletQrCode(props) {
     i18n: localeImport
   });
   const {
-    walletConnectUri,
+    bodyState,
+    setBodyState
+  } = react.useContext(RootContext.RootContext);
+  const {
+    qrCodeValue,
     isDark,
     selectedButton,
-    setBodyState,
-    bodyState,
     logoImage,
     primaryColor
   } = props;
@@ -35,7 +38,7 @@ function ConnectWalletQrCode(props) {
   const qrColor = primaryColor && primaryColor.toLowerCase() === "#ffffff" ? "#000000" : primaryColor;
   return jsxRuntime.jsxs("div", {
     className: "w3a--contents",
-    children: [walletConnectUri ? jsxRuntime.jsxs("div", {
+    children: [qrCodeValue ? jsxRuntime.jsxs("div", {
       className: "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4 w3a--rounded-2xl w3a--border w3a--border-app-gray-200 w3a--p-4 dark:w3a--border-app-gray-700",
       children: [jsxRuntime.jsx("div", {
         className: "w3a--relative w3a--flex w3a--size-[300px] w3a--items-center w3a--justify-center w3a--rounded-2xl",
@@ -45,7 +48,7 @@ function ConnectWalletQrCode(props) {
           qrStyle: "dots",
           removeQrCodeBehindLogo: true,
           logoImage: logoImage || constants.WALLET_CONNECT_LOGO,
-          value: walletConnectUri,
+          value: qrCodeValue,
           logoHeight: 32,
           logoWidth: 32,
           logoPadding: 10,
@@ -80,8 +83,10 @@ function ConnectWalletQrCode(props) {
         className: "w3a--appearance-none w3a--rounded-full w3a--border w3a--border-app-gray-200 w3a--bg-transparent w3a--px-5 w3a--py-2 w3a--text-base w3a--font-normal w3a--text-app-gray-700 w3a--transition-all w3a--duration-150 hover:w3a--border-transparent hover:w3a--shadow-light active:w3a--scale-95 dark:w3a--border-app-gray-700 dark:w3a--text-app-gray-300 dark:hover:w3a--border-transparent dark:hover:w3a--shadow-dark",
         onClick: () => {
           setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
-            showWalletDetails: true,
-            walletDetails: selectedButton
+            installLinks: {
+              show: true,
+              wallet: selectedButton
+            }
           }));
         },
         children: t("modal.external.get-wallet")

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

@@ -53,6 +53,7 @@ function Login(props) {
     setBodyState
   } = react.useContext(RootContext.RootContext);
   const [countryCode, setCountryCode] = react.useState("");
+  const [countryFlag, setCountryFlag] = react.useState("");
   const [passwordlessErrorMessage, setPasswordlessErrorMessage] = react.useState("");
   const [otpErrorMessage, setOtpErrorMessage] = react.useState("");
   const [expand, setExpand] = react.useState(false);
@@ -214,8 +215,8 @@ function Login(props) {
     if (isSmsPasswordLessLoginVisible) {
       const number = loginHint.startsWith("+") ? loginHint : `${countryCode}${loginHint}`;
       const result = await utils.validatePhoneNumber(number);
-      if (result) {
-        const finalLoginHint = typeof result === "string" ? result : number;
+      if (result.success) {
+        const finalLoginHint = typeof result.parsed_number === "string" ? result.parsed_number : number;
         const connectorConfig = socialLoginsConfig.loginMethods[auth.AUTH_CONNECTION.SMS_PASSWORDLESS];
         if (connectorConfig.isDefault) {
           return handleSocialLoginClick({
@@ -230,6 +231,7 @@ function Login(props) {
             }
           });
         } else {
+          setCountryFlag(result.country_flag);
           return handleCustomLogin(auth.AUTH_CONNECTION.SMS_PASSWORDLESS, finalLoginHint);
         }
       }
@@ -302,11 +304,23 @@ function Login(props) {
   };
   const handleInstalledWalletClick = wallet => {
     var _wallet$chainNamespac;
+    // for non-injected Metamask, show QR code to connect
+    if (wallet.name === noModal.WALLET_CONNECTORS.METAMASK && !wallet.hasInjectedWallet) {
+      setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
+        metamaskQrCode: {
+          show: true,
+          wallet: wallet
+        }
+      }));
+      return;
+    }
     // when having multiple namespaces, ask user to select one
     if (((_wallet$chainNamespac = wallet.chainNamespaces) === null || _wallet$chainNamespac === void 0 ? void 0 : _wallet$chainNamespac.length) > 1) {
       setBodyState(_objectSpread(_objectSpread({}, bodyState), {}, {
-        showMultiChainSelector: true,
-        walletDetails: wallet
+        multiChainSelector: {
+          show: true,
+          wallet: wallet
+        }
       }));
     } else {
       handleExternalWalletClick({
@@ -326,7 +340,8 @@ function Login(props) {
       setShowOtpFlow: setShowOtpFlow,
       authConnection: authConnection,
       handleOtpComplete: handleOtpComplete,
-      errorMessage: otpErrorMessage
+      errorMessage: otpErrorMessage,
+      countryFlag: countryFlag
     });
   }
   const socialLoginSection = (otherRow = []) => {

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

@@ -20,7 +20,8 @@ function OtpInput(props) {
     authConnection,
     loginHint = "",
     errorMessage,
-    otpLoading
+    otpLoading,
+    countryFlag
   } = props;
   const isMobileOtp = react.useMemo(() => authConnection === auth.AUTH_CONNECTION.SMS_PASSWORDLESS, [authConnection]);
   const [t] = reactI18next.useTranslation(undefined, {
@@ -30,8 +31,8 @@ function OtpInput(props) {
     if (authConnection === auth.AUTH_CONNECTION.EMAIL_PASSWORDLESS) return loginHint;
     const [countryCode, number] = loginHint.includes("-") ? loginHint.split("-") : ["", loginHint];
     const masked = `${number}`.slice(-Math.floor(number.length / 2)).padStart(`${number}`.length, "*");
-    return `${countryCode} ${masked}`;
-  }, [loginHint, authConnection]);
+    return `${countryFlag} ${countryCode} ${masked}`;
+  }, [loginHint, authConnection, countryFlag]);
   return jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [jsxRuntime.jsx("div", {
       className: "w3a--mr-auto w3a--flex w3a--w-full w3a--items-start w3a--justify-start",
@@ -59,17 +60,17 @@ function OtpInput(props) {
         alt: "otp",
         className: "w3a--size-auto"
       }), jsxRuntime.jsxs("div", {
-        className: "-w3a--mt-6 w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
+        className: "w3a--mx-auto -w3a--mt-6 w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-2",
         children: [jsxRuntime.jsx("p", {
           className: "w3a--text-lg w3a--font-bold w3a--text-app-gray-900 dark:w3a--text-app-white",
           children: isMobileOtp ? t("modal.otp.mobile-title") : t("modal.otp.email-title")
         }), jsxRuntime.jsxs("div", {
-          className: "w3a--flex w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-1",
+          className: "w3a--mx-auto w3a--flex w3a--w-full w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-1",
           children: [jsxRuntime.jsx("p", {
-            className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
+            className: "w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
             children: isMobileOtp ? t("modal.otp.mobile-subtext") : t("modal.otp.email-subtext")
           }), jsxRuntime.jsx("p", {
-            className: "w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
+            className: "w3a--text-center w3a--text-sm w3a--font-normal w3a--text-app-gray-500 dark:w3a--text-app-gray-300",
             children: isMobileOtp ? parsedLoginHint : t("modal.otp.email-subtext-example", {
               email: parsedLoginHint
             })
@@ -98,7 +99,8 @@ function LoginOtp(props) {
     handleOtpComplete,
     authConnection,
     loginHint,
-    errorMessage
+    errorMessage,
+    countryFlag
   } = props;
   return jsxRuntime.jsx("div", {
     className: "w3a--flex w3a--size-full w3a--flex-1 w3a--flex-col w3a--items-center w3a--justify-center w3a--gap-y-4",
@@ -108,7 +110,8 @@ function LoginOtp(props) {
       handleOtpComplete: handleOtpComplete,
       authConnection: authConnection,
       loginHint: loginHint,
-      otpLoading: otpLoading
+      otpLoading: otpLoading,
+      countryFlag: countryFlag
     })
   });
 }