@getpara/react-sdk-lite 2.12.0 → 2.13.0

package/dist/modal/components/{Setup2FAStep/Setup2FAStep.js → flows/auth/Setup2FA/Setup2FA.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   __async
-} from "../../../chunk-MMUBH76A.js";
+} from "../../../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   CpslButton,
@@ -13,23 +13,31 @@ import {
   CpslText
 } from "@getpara/react-components";
 import { useEffect, useRef, useState } from "react";
-import { useModalStore } from "../../stores/index.js";
-import { Heading, QRContainer, FilledDisabledInput, StepContainer, InnerStepContainer } from "../common.js";
-import { ModalStep } from "../../utils/steps.js";
+import { Heading, QRContainer, FilledDisabledInput, StepContainer, InnerStepContainer, HeroIcon } from "../../../common.js";
 import { safeStyled } from "@getpara/react-common";
 import { useCopyToClipboard } from "@getpara/react-common";
-import { useEnable2fa } from "../../../provider/index.js";
-const Setup2FAStep = ({ onClose }) => {
-  const isLogin = useModalStore((state) => state.isLogin());
-  const setStep = useModalStore((state) => state.setStep);
-  const twoFactorStatus = useModalStore((state) => state.twoFactorStatus);
+import { useEnable2fa } from "../../../../../provider/index.js";
+import { useStore } from "../../../../../provider/stores/useStore.js";
+const Setup2FA = ({ onClose }) => {
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
   const { enable2fa, isPending } = useEnable2fa();
-  const isVerifying = useModalStore((state) => state.step === ModalStep.VERIFY_2FA);
   const [copied, copy] = useCopyToClipboard();
+  const bareModal = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.bareModal;
+  });
+  const setShowPostAuthFlow = useStore((state) => state.setShowPostAuthFlow);
+  const setTwoFactorAuthUri = useStore((state) => state.setTwoFactorAuthUri);
+  const twoFactorAuthUri = useStore((state) => state.twoFactorAuthUri);
   const inputRef = useRef(null);
   const [code, setCode] = useState("");
   const [codeError, setCodeError] = useState("");
-  const params = (twoFactorStatus == null ? void 0 : twoFactorStatus.uri) ? new URL(twoFactorStatus.uri).searchParams : void 0;
+  const [isVerifying, setIsVerifying] = useState(false);
+  const [isDone, setIsDone] = useState(false);
+  const params = twoFactorAuthUri ? new URL(twoFactorAuthUri).searchParams : void 0;
   const secret = params == null ? void 0 : params.get("secret");
   useEffect(() => {
     const timerId = setTimeout(() => {
@@ -46,14 +54,15 @@ const Setup2FAStep = ({ onClose }) => {
     }
   }, [code]);
   const handleNext = () => {
-    setStep(ModalStep.VERIFY_2FA);
+    setIsVerifying(true);
   };
-  const handleSkip = () => {
-    if (isLogin) {
-      setStep(ModalStep.LOGIN_DONE);
+  const handleComplete = () => {
+    if (bareModal) {
+      setShowPostAuthFlow(false);
     } else {
       onClose();
     }
+    setTwoFactorAuthUri(null);
   };
   const handleCodeInput = (e) => {
     if (codeError) {
@@ -67,7 +76,7 @@ const Setup2FAStep = ({ onClose }) => {
         { verificationCode: code },
         {
           onSuccess: () => {
-            setStep(ModalStep.TWO_FACTOR_DONE);
+            setIsDone(true);
           },
           onError: () => {
             setCodeError("Incorrect Code");
@@ -83,6 +92,20 @@ const Setup2FAStep = ({ onClose }) => {
       copy(secret);
     }
   };
+  if (isDone) {
+    return /* @__PURE__ */ jsxs(StepContainer, { children: [
+      /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
+      /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+        /* @__PURE__ */ jsx(Heading, { variant: "headingXS", children: "Success" }),
+        /* @__PURE__ */ jsxs(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: [
+          "Your ",
+          hideWallets ? "account" : "wallet",
+          " is now protected by 2FA"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handleComplete, children: "Done" })
+    ] });
+  }
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
       /* @__PURE__ */ jsx(Heading, { children: "Turn on two-factor authentication" }),
@@ -112,14 +135,14 @@ const Setup2FAStep = ({ onClose }) => {
       }
     ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan with your preferred authenticator app" }),
-      /* @__PURE__ */ jsx(QRContainer, { children: !(twoFactorStatus == null ? void 0 : twoFactorStatus.uri) ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: twoFactorStatus.uri, "data-testid": "para-2fa-qr" }) })
+      /* @__PURE__ */ jsx(QRContainer, { children: !twoFactorAuthUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: twoFactorAuthUri, "data-testid": "para-2fa-qr" }) })
     ] }) }),
     !isVerifying && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslDivider, { children: "or enter the code manually" }) }),
       /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(FilledDisabledInput, { disabled: true, value: secret != null ? secret : "", noAutoDisable: true, "data-testid": "para-2fa-secret", children: /* @__PURE__ */ jsx(CpslButton, { slot: "end", variant: "ghost", onClick: handleCopy, "data-testid": "para-2fa-copy", children: /* @__PURE__ */ jsx(CpslIcon, { icon: copied ? "check" : "copy" }) }) }) }),
       /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
         /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handleNext, "data-testid": "para-2fa-continue", children: "Continue" }),
-        /* @__PURE__ */ jsx(SkipButton, { variant: "ghost", onClick: handleSkip, "data-testid": "para-2fa-skip", children: "Skip" })
+        /* @__PURE__ */ jsx(SkipButton, { variant: "ghost", onClick: handleComplete, "data-testid": "para-2fa-skip", children: "Skip" })
       ] })
     ] })
   ] });
@@ -132,5 +155,5 @@ const SkipButton = safeStyled(CpslButton)`
   text-decoration: underline;
 `;
 export {
-  Setup2FAStep
+  Setup2FA
 };

package/dist/modal/components/flows/auth/Verification/Verification.d.ts

@@ -0,0 +1 @@
+export declare const Verification: () => import("react/jsx-runtime").JSX.Element | null;

package/dist/modal/components/flows/auth/Verification/Verification.js

@@ -0,0 +1,36 @@
+"use client";
+import {
+  __async
+} from "../../../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { StepContainer } from "../../../common.js";
+import { useResendVerificationCode } from "../../../../../provider/index.js";
+import { useInternalClient } from "../../../../../provider/hooks/utils/useInternalClient.js";
+import { useVerifyNewAccount } from "../../../../../provider/index.js";
+import { VerificationCode } from "../../../shared/VerificationCode.js";
+const Verification = () => {
+  const { verifyNewAccount, status, error } = useVerifyNewAccount();
+  const { resendVerificationCodeAsync } = useResendVerificationCode();
+  const para = useInternalClient();
+  if (!para.authInfo) {
+    return null;
+  }
+  const handleSubmitCode = (code) => {
+    verifyNewAccount({ verificationCode: code });
+  };
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsx(
+    VerificationCode,
+    {
+      authInfo: para.authInfo,
+      onSubmit: handleSubmitCode,
+      onResend: () => __async(void 0, null, function* () {
+        yield resendVerificationCodeAsync({ type: "SIGNUP" });
+      }),
+      status,
+      error
+    }
+  ) });
+};
+export {
+  Verification
+};

package/dist/modal/components/flows/auth/WalletCreationDone/WalletCreationDone.d.ts

@@ -0,0 +1,6 @@
+interface WalletCreationDoneProps {
+    isTwoFactorAuthEnabled?: boolean;
+    onClose: () => void;
+}
+export declare const WalletCreationDone: ({ onClose }: WalletCreationDoneProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modal/components/{WalletCreationDoneStep/WalletCreationDoneStep.js → flows/auth/WalletCreationDone/WalletCreationDone.js}

@@ -1,20 +1,16 @@
 "use client";
 import {
   __async
-} from "../../../chunk-MMUBH76A.js";
+} from "../../../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslText } from "@getpara/react-components";
-import { StepContainer, InnerStepContainer, HeroIcon } from "../common.js";
-import { useModalStore } from "../../stores/index.js";
-import { ModalStep } from "../../utils/steps.js";
-import { WalletCard, WalletCards } from "../WalletCard/WalletCard.js";
+import { StepContainer, InnerStepContainer, HeroIcon } from "../../../common.js";
+import { WalletCard, WalletCards } from "../../../WalletCard/WalletCard.js";
 import { safeStyled } from "@getpara/react-common";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useStore } from "../../../provider/stores/useStore.js";
-import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
-import { useEffect, useState } from "react";
-const WalletCreationDoneStep = ({ twoFactorAuthEnabled, onClose }) => {
-  const { isSetup2faPending } = useAuthActions();
+import { useInternalClient } from "../../../../../provider/hooks/utils/useInternalClient.js";
+import { useStore } from "../../../../../provider/stores/useStore.js";
+import { useState } from "react";
+const WalletCreationDone = ({ onClose }) => {
   const hideWallets = useStore((state) => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
@@ -23,47 +19,24 @@ const WalletCreationDoneStep = ({ twoFactorAuthEnabled, onClose }) => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.bareModal;
   });
-  const setStep = useModalStore((state) => state.setStep);
-  const setFlow = useModalStore((state) => state.setFlow);
-  const isLogin = useModalStore((state) => state.isLogin());
-  const twoFactorStatus = useModalStore((state) => state.twoFactorStatus);
-  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const onRampConfig = useStore((state) => state.onRampConfig);
+  const twoFactorAuthUri = useStore((state) => state.twoFactorAuthUri);
+  const setHasCreatedWallets = useStore((state) => state.setHasCreatedWallets);
+  const setShowPostAuthFlow = useStore((state) => state.setShowPostAuthFlow);
   const para = useInternalClient();
-  const [isWaiting, setIsWaiting] = useState(false);
+  const [isWaiting] = useState(false);
+  const isTwoFactorAuthEnabled = !!twoFactorAuthUri;
   const isOnRampConfigured = (onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) || (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled) || (onRampConfig == null ? void 0 : onRampConfig.isWithdrawEnabled);
-  const onBypass2fa = () => {
-    if (isLogin) {
-      setStep(ModalStep.LOGIN_DONE);
-    } else {
+  const handleNext = () => __async(void 0, null, function* () {
+    if (!isTwoFactorAuthEnabled) {
       if (bareModal) {
-        setFlow("account");
-        setStep(ModalStep.ACCOUNT_MAIN);
+        setShowPostAuthFlow(false);
       } else {
         onClose();
       }
     }
-  };
-  const handleNext = () => __async(void 0, null, function* () {
-    if (!twoFactorAuthEnabled) {
-      onBypass2fa();
-    }
-    if (!twoFactorStatus) {
-      if (isSetup2faPending) {
-        setIsWaiting(true);
-      }
-    } else {
-      if (twoFactorStatus.isSetup) {
-        onBypass2fa();
-      } else {
-        setStep(ModalStep.SETUP_2FA);
-      }
-    }
+    setHasCreatedWallets(false);
   });
-  useEffect(() => {
-    if (isWaiting && !!twoFactorStatus) {
-      setStep(ModalStep.SETUP_2FA);
-    }
-  }, [isWaiting, twoFactorStatus]);
   return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
     /* @__PURE__ */ jsx(CardContainer, { children: hideWallets ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
@@ -71,7 +44,7 @@ const WalletCreationDoneStep = ({ twoFactorAuthEnabled, onClose }) => {
     ] }) : /* @__PURE__ */ jsx(WalletCards, { "data-testid": "para-wallet-card", children: para.currentWalletIdsArray.map(([id, type]) => {
       return /* @__PURE__ */ jsx(WalletCard, { id, type, showAddFunds: isOnRampConfigured }, id);
     }) }) }),
-    /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handleNext, disabled: isWaiting, "data-testid": "para-done-button", children: twoFactorAuthEnabled ? "Continue" : "Done" }) })
+    /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handleNext, disabled: isWaiting, "data-testid": "para-done-button", children: isTwoFactorAuthEnabled ? "Continue" : "Done" }) })
   ] });
 };
 const CardContainer = safeStyled(InnerStepContainer)`
@@ -79,5 +52,5 @@ const CardContainer = safeStyled(InnerStepContainer)`
   justify-content: center;
 `;
 export {
-  WalletCreationDoneStep
+  WalletCreationDone
 };

package/dist/modal/components/{AuthOptions → shared}/AuthOptions.d.ts

@@ -1,9 +1,9 @@
-import { TOAuthMethod } from '@getpara/web-sdk';
+import { TOAuthMethod } from '@getpara/user-management-client';
 interface AuthOptionsProps {
     oAuthMethods?: TOAuthMethod[];
     disableEmailLogin: boolean;
     disablePhoneLogin: boolean;
-    isGuestModeEnabled: boolean;
+    isGuestModeEnabled?: boolean;
 }
 export declare const AuthOptions: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, }: AuthOptionsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modal/components/{AuthOptions → shared}/AuthOptions.js

@@ -3,31 +3,34 @@ import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { safeStyled } from "@getpara/react-common";
-import { OAuth } from "../OAuth/OAuth.js";
-import { AuthInput } from "../AuthInput/AuthInput.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
-import { useModalStore } from "../../stores/index.js";
 import { CpslIcon, CpslText } from "@getpara/react-components";
-import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useStore } from "../../../provider/stores/useStore.js";
 import { isEmail, isPhone } from "@getpara/user-management-client";
+import { OAuth } from "../flows/auth/OAuth/OAuth.js";
+import { EmailOrPhoneInput } from "./EmailOrPhone/EmailOrPhoneInput.js";
+import { useAuth } from "../../../provider/providers/AuthProvider/AuthProvider.js";
 const AuthOptions = ({
   oAuthMethods,
   disableEmailLogin,
   disablePhoneLogin,
-  isGuestModeEnabled = false
+  isGuestModeEnabled
 }) => {
-  var _a, _b;
+  const {
+    authenticateWithEmailOrPhone: { authenticate, isAuthenticating }
+  } = useAuth();
   const para = useInternalClient();
   const defaultAuthIdentifier = useStore((state) => {
-    var _a2;
-    return (_a2 = state.modalConfig) == null ? void 0 : _a2.defaultAuthIdentifier;
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.defaultAuthIdentifier;
   });
-  const { signUpOrLogIn, isSignUpOrLogInPending } = useAuthActions();
   const { wallets } = useExternalWallets();
-  const guestAddFundsTab = useModalStore((state) => state.guestAddFundsTab);
-  const defaultAuth = defaultAuthIdentifier ? /^\+\d+$/.test(defaultAuthIdentifier) ? { phone: defaultAuthIdentifier } : { email: defaultAuthIdentifier } : para.authInfo && (isEmail((_a = para.authInfo) == null ? void 0 : _a.auth) || isPhone((_b = para.authInfo) == null ? void 0 : _b.auth)) ? para.authInfo.auth : void 0;
+  const guestAddFundsTab = useStore((state) => state.guestAddFundsTab);
+  const defaultAuth = useMemo(() => {
+    var _a, _b;
+    return defaultAuthIdentifier ? /^\+\d+$/.test(defaultAuthIdentifier) ? { phone: defaultAuthIdentifier } : { email: defaultAuthIdentifier } : para.authInfo && (isEmail((_a = para.authInfo) == null ? void 0 : _a.auth) || isPhone((_b = para.authInfo) == null ? void 0 : _b.auth)) ? para.authInfo.auth : void 0;
+  }, [defaultAuthIdentifier, para.authInfo]);
   const Content = useMemo(() => {
     const Methods = [];
     if (!!(oAuthMethods == null ? void 0 : oAuthMethods.length)) {
@@ -36,21 +39,21 @@ const AuthOptions = ({
     if (!disableEmailLogin || !disablePhoneLogin) {
       Methods.push(
         /* @__PURE__ */ jsx(
-          AuthInput,
+          EmailOrPhoneInput,
           {
             sticky: true,
             defaultAuth,
             disableEmailLogin,
             disablePhoneLogin,
-            onSubmit: signUpOrLogIn,
-            isSubmitting: isSignUpOrLogInPending
+            onSubmit: authenticate,
+            isSubmitting: isAuthenticating
           },
           "input"
         )
       );
     }
     return /* @__PURE__ */ jsx(Fragment, { children: Methods });
-  }, [oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, wallets, defaultAuth]);
+  }, [oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, wallets, isAuthenticating, defaultAuth]);
   return /* @__PURE__ */ jsxs(Container, { children: [
     guestAddFundsTab && /* @__PURE__ */ jsxs(CompleteAccountSetup, { children: [
       /* @__PURE__ */ jsx(CompleteAccountIcon, { icon: "stars02", size: "16px" }),

package/dist/modal/components/{ExternalWalletStep/ExternalWalletStep.d.ts → shared/ConnectExternalWallet/ConnectExternalWallet.d.ts}

@@ -6,6 +6,6 @@ export declare const ExternalWalletMobileConnect: ({ wallet, onConnectWc, onRetr
     onRetryClick?: () => Promise<void>;
     isSelfFetching?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
-export declare const ExternalWalletStep: ({ isAddingWallets }: {
+export declare const ConnectExternalWallet: ({ isAddingWallets }: {
     isAddingWallets?: boolean;
 }) => import("react/jsx-runtime").JSX.Element | null;

package/dist/modal/components/{ExternalWalletStep/ExternalWalletStep.js → shared/ConnectExternalWallet/ConnectExternalWallet.js}

@@ -1,18 +1,16 @@
 "use client";
 import {
   __async
-} from "../../../chunk-MMUBH76A.js";
+} from "../../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
-import { CenteredText, HeroAccountTypeIcon, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
-import { useCallback, useEffect, useMemo } from "react";
-import { useModalStore } from "../../stores/index.js";
+import { CenteredText, HeroAccountTypeIcon, InnerStepContainer, QRContainer, StepContainer } from "../../common.js";
+import { useCallback, useMemo } from "react";
 import { HeroSpinner, openMobileUrl, safeStyled } from "@getpara/react-common";
 import { useCopyToClipboard } from "@getpara/react-common";
-import { ModalStep } from "../../utils/steps.js";
 import { isMobile, isTablet } from "@getpara/web-sdk";
-import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
-import { useStore } from "../../../provider/stores/useStore.js";
+import { useExternalWallets } from "../../../../provider/providers/ExternalWalletProvider.js";
+import { useStore } from "../../../../provider/stores/useStore.js";
 const isSolanaWalletInAppBrowser = (wallet) => {
   var _a;
   switch (wallet) {
@@ -34,7 +32,7 @@ const ExternalWalletMobileConnect = ({
   onRetryClick
 }) => {
   var _a, _b;
-  const externalWalletError = useModalStore((state) => state.externalWalletError);
+  const externalWalletError = useStore((state) => state.externalWalletError);
   const [isCopied, copy] = useCopyToClipboard();
   const appName = useStore((state) => state.appName);
   const isWalletConnect = wallet.id === "WalletConnect";
@@ -113,10 +111,9 @@ const ExternalWalletMobileConnect = ({
     /* @__PURE__ */ jsx(InnerStepContainer, { children: isWalletConnect ? /* @__PURE__ */ jsx(Fragment, { children: GetWalletButton }) : /* @__PURE__ */ jsx(Link, { href: (_b = wallet.downloadUrl) != null ? _b : "", target: "_blank", children: GetWalletButton }) })
   ] });
 };
-const ExternalWalletStep = ({ isAddingWallets = false }) => {
-  const externalWalletError = useModalStore((state) => state.externalWalletError);
-  const step = useModalStore((state) => state.step);
-  const setStep = useModalStore((state) => state.setStep);
+const ConnectExternalWallet = ({ isAddingWallets = false }) => {
+  var _a;
+  const { error } = (_a = useStore((state) => state.paraState)) != null ? _a : {};
   const { connectExternalWallet, addAdditionalExternalWallet, wallet, qrUri, walletDisplayHelpers } = useExternalWallets();
   const handleConnect = useCallback(
     (wallet2, isWc = false, isRetryConnection = false) => __async(void 0, null, function* () {
@@ -134,7 +131,7 @@ const ExternalWalletStep = ({ isAddingWallets = false }) => {
     }
   });
   const Content = useMemo(() => {
-    var _a;
+    var _a2;
     if (!wallet) {
       return null;
     }
@@ -151,21 +148,21 @@ Please choose another wallet or continue on desktop.` }) });
     }
     if (showExtension) {
       const isInstalled = wallet.installed;
-      const isError = !isInstalled || (externalWalletError == null ? void 0 : externalWalletError.length);
+      const isError = !isInstalled || !!error;
       return /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
         /* @__PURE__ */ jsx(
           HeroSpinner,
           {
             icon: /* @__PURE__ */ jsx(HeroAccountTypeIcon, { accountType: wallet.internalId, src: wallet ? wallet.iconUrl : void 0 }),
             status: isError ? "error" : "pending",
-            text: isError ? isInstalled ? externalWalletError == null ? void 0 : externalWalletError[0] : `${wallet.name} not detected` : `Confirm connection request in the ${wallet.name} browser extension.`
+            text: isError ? isInstalled ? error == null ? void 0 : error.message : `${wallet.name} not detected` : `Confirm connection request in the ${wallet.name} browser extension.`
           }
         ),
         isError && /* @__PURE__ */ jsxs(
           CpslButton,
           {
             as: isInstalled ? "button" : "a",
-            href: (_a = wallet.downloadUrl) != null ? _a : "",
+            href: (_a2 = wallet.downloadUrl) != null ? _a2 : "",
             target: "_blank",
             variant: "secondary",
             onClick: handleTryAgainClick,
@@ -193,24 +190,7 @@ Please choose another wallet or continue on desktop.` }) });
         }
       );
     }
-  }, [
-    wallet,
-    walletDisplayHelpers,
-    externalWalletError,
-    qrUri,
-    isAddingWallets,
-    addAdditionalExternalWallet,
-    connectExternalWallet
-  ]);
-  useEffect(() => {
-    if (!wallet) {
-      if (step === ModalStep.ADD_EX_WALLET_SELECTED) {
-        setStep(ModalStep.ADD_EX_WALLET_MORE);
-      } else {
-        setStep(ModalStep.AUTH_MAIN);
-      }
-    }
-  }, [wallet, step]);
+  }, [wallet, walletDisplayHelpers, error, qrUri, isAddingWallets, addAdditionalExternalWallet, connectExternalWallet]);
   if (!wallet) {
     return null;
   }
@@ -241,6 +221,6 @@ const Link = safeStyled.a`
   text-decoration: none;
 `;
 export {
-  ExternalWalletMobileConnect,
-  ExternalWalletStep
+  ConnectExternalWallet,
+  ExternalWalletMobileConnect
 };

package/dist/modal/components/{ExternalWalletStep → shared/ConnectExternalWallet}/config.js

@@ -1,5 +1,5 @@
 "use client";
-import "../../../chunk-MMUBH76A.js";
+import "../../../../chunk-MMUBH76A.js";
 var TabValue = /* @__PURE__ */ ((TabValue2) => {
   TabValue2["extension"] = "extension";
   TabValue2["mobile"] = "mobile";

package/dist/modal/components/{AuthInput/AuthInput.d.ts → shared/EmailOrPhone/EmailOrPhoneInput.d.ts}

@@ -5,16 +5,16 @@ type ChildProps = {
     isSubmitting: boolean;
     onSubmit: () => void;
 };
-type AuthInputProps = {
+type EmailOrPhoneInputProps = {
     defaultAuth?: Auth<'email' | 'phone'>;
-    onSubmit: (_: Auth<'email' | 'phone'>) => void;
-    isSubmitting: boolean;
     disableEmailLogin?: boolean;
     disablePhoneLogin?: boolean;
     disableSubmitButton?: boolean;
     children?: (_: ChildProps) => ReactNode;
     error?: string | null;
     sticky?: boolean;
+    onSubmit: (auth: Auth<'email' | 'phone'>) => void;
+    isSubmitting: boolean;
 };
-export declare const AuthInput: ({ defaultAuth, disableEmailLogin, disablePhoneLogin, onSubmit: _onSubmit, isSubmitting, disableSubmitButton, children: Children, error: propsError, sticky, }: AuthInputProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const EmailOrPhoneInput: ({ defaultAuth, disableEmailLogin, disablePhoneLogin, disableSubmitButton, children: Children, error: propsError, sticky, onSubmit: propsOnSubmit, isSubmitting, }: EmailOrPhoneInputProps) => import("react/jsx-runtime").JSX.Element | null;
 export {};

package/dist/modal/components/{AuthInput/AuthInput.js → shared/EmailOrPhone/EmailOrPhoneInput.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   __async
-} from "../../../chunk-MMUBH76A.js";
+} from "../../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import {
   CpslButton,
@@ -14,23 +14,23 @@ import {
 } from "@getpara/react-components";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { safeStyled, MOBILE_SIZE } from "@getpara/react-common";
-import countryCodes from "../../utils/countryCodes.js";
-import { useDropdownPosition } from "./hooks/useDropdownPosition.js";
+import countryCodes from "../../../utils/countryCodes.js";
+import { useDropdownPosition } from "../../../hooks/useDropdownPosition.js";
 import { defaultPhoneMask, phoneMasks } from "./phoneMasks.js";
 import { extractAuthInfo } from "@getpara/user-management-client";
 import parsePhoneNumberFromString from "libphonenumber-js";
-import { isCcMatch, validateInput } from "../../utils/authInputHelpers.js";
+import { isCcMatch, validateInput } from "../../../utils/authInputHelpers.js";
 const DEFAULT_COUNTRY = { label: "United States", value: "+1", selectedLabel: "US", icon: "US" };
-const AuthInput = ({
+const EmailOrPhoneInput = ({
   defaultAuth,
   disableEmailLogin,
   disablePhoneLogin,
-  onSubmit: _onSubmit,
-  isSubmitting,
   disableSubmitButton,
   children: Children,
   error: propsError,
-  sticky = false
+  sticky = false,
+  onSubmit: propsOnSubmit,
+  isSubmitting
 }) => {
   var _a, _b, _c;
   const inputRef = useRef(null);
@@ -113,7 +113,7 @@ const AuthInput = ({
     setError(void 0);
     try {
       const auth = validateInput(identifier, countryCode, identifierType);
-      _onSubmit(auth);
+      propsOnSubmit(auth);
     } catch (err) {
       setError(err.message);
     }
@@ -135,6 +135,10 @@ const AuthInput = ({
       setIsPending(isSubmitting);
     }
   }, [error]);
+  useEffect(() => {
+    var _a2;
+    (_a2 = inputRef.current) == null ? void 0 : _a2.setFocus();
+  }, []);
   if (disableEmailLogin && disablePhoneLogin) {
     return null;
   }
@@ -284,5 +288,5 @@ const ChildContainer = safeStyled.div`
   width: 100%;
 `;
 export {
-  AuthInput
+  EmailOrPhoneInput
 };

package/dist/modal/components/{AuthInput → shared/EmailOrPhone}/phoneMasks.js

@@ -1,5 +1,5 @@
 "use client";
-import "../../../chunk-MMUBH76A.js";
+import "../../../../chunk-MMUBH76A.js";
 const defaultPhoneMask = "#################";
 const phoneMasks = {
   AF: "### ### ####",

package/dist/modal/components/{ExternalWalletNetworkSelectStep/ExternalWalletNetworkSelectStep.d.ts → shared/ExternalWalletNetworkSelect.d.ts}

@@ -1,5 +1,5 @@
 type ExternalWalletNetworkSelectStepType = 'CONNECT' | 'ADD_EXTERNAL' | 'ACCOUNT_LINKING';
-export declare const ExternalWalletNetworkSelectStep: ({ type }: {
+export declare const ExternalWalletNetworkSelect: ({ type }: {
     type?: ExternalWalletNetworkSelectStepType;
 }) => import("react/jsx-runtime").JSX.Element | null;
 export {};