@getpara/react-sdk-lite 2.12.0 → 2.13.0

package/dist/modal/components/{AuthMainStep/AuthMainStepContent.js → flows/auth/AuthMain/AuthMainContent.js}

@@ -1,31 +1,32 @@
 "use client";
-import "../../../chunk-MMUBH76A.js";
+import {
+  __async
+} from "../../../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment2, useMemo } from "react";
 import { CpslButton, CpslDivider, CpslIcon, CpslIconGroup } from "@getpara/react-components";
 import { ACCOUNT_TYPES, safeStyled } from "@getpara/react-common";
-import { ExternalWallets } from "../ExternalWallets/ExternalWallets.js";
-import { useModalStore } from "../../stores/index.js";
-import { ModalStep } from "../../utils/steps.js";
-import { AuthLayout } from "../../types/modalProps.js";
-import { AuthOptions } from "../AuthOptions/AuthOptions.js";
-import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
-import { useStore } from "../../../provider/stores/useStore.js";
-import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
-import { useAccount, useParaStatus } from "../../../provider/index.js";
-import { connectWalletTitle, signUpOrLogInTitle } from "../Header/hooks/useStepTitle.js";
-const AuthMainStepContent = ({
+import { AuthLayout } from "../../../../types/modalProps.js";
+import { useExternalWallets } from "../../../../../provider/providers/ExternalWalletProvider.js";
+import { useStore } from "../../../../../provider/stores/useStore.js";
+import { useAccount, useParaStatus } from "../../../../../provider/index.js";
+import { connectWalletTitle, signUpOrLogInTitle } from "../../../Header/hooks/useStepTitle.js";
+import { useAuth } from "../../../../../provider/providers/AuthProvider/AuthProvider.js";
+import { AuthOptions } from "../../../shared/AuthOptions.js";
+import { ExternalWallets } from "../../../shared/ExternalWallets.js";
+const AuthMainContent = ({
   oAuthMethods,
   disableEmailLogin,
   disablePhoneLogin,
-  isGuestModeEnabled = false
+  isGuestModeEnabled
 }) => {
+  const { createGuestWallets } = useAuth();
   const { wallets, connectFarcasterMiniApp } = useExternalWallets();
-  const { createGuestWallets } = useAuthActions();
   const { isFarcasterMiniApp } = useParaStatus();
   const { embedded } = useAccount();
-  const authLayout = useModalStore((state) => state.authLayout);
-  const setStep = useModalStore((state) => state.setStep);
+  const authLayout = useStore((state) => state.authLayout);
+  const selectedAuthView = useStore((state) => state.selectedAuthView);
+  const setSelectedAuthView = useStore((state) => state.setSelectedAuthView);
   const oAuthLogoVariant = useStore((state) => state.oAuthLogoVariant);
   const isDark = useStore((state) => {
     var _a, _b;
@@ -34,13 +35,28 @@ const AuthMainStepContent = ({
   const isGuestMode = (embedded == null ? void 0 : embedded.isConnected) && embedded.isGuestMode;
   const useBrandedLogos = oAuthLogoVariant === "default";
   const useDarkLogos = useBrandedLogos ? isDark : oAuthLogoVariant !== "dark";
+  const isMainStep = selectedAuthView === "AUTH_MAIN";
   const handleCondensedAuthClick = () => {
-    setStep(ModalStep.AUTH_MORE);
+    setSelectedAuthView("AUTH_ALL_OPTIONS");
   };
   const handleCondensedExternalClick = () => {
-    setStep(ModalStep.EX_WALLET_MORE);
+    setSelectedAuthView("AUTH_ALL_EXTERNAL_WALLETS");
   };
   const Content = useMemo(() => {
+    if (selectedAuthView === "AUTH_ALL_OPTIONS") {
+      return /* @__PURE__ */ jsx(
+        AuthOptions,
+        {
+          oAuthMethods,
+          disableEmailLogin,
+          disablePhoneLogin,
+          isGuestModeEnabled
+        }
+      );
+    }
+    if (selectedAuthView === "AUTH_ALL_EXTERNAL_WALLETS") {
+      return /* @__PURE__ */ jsx(ExternalWallets, {});
+    }
     const methods = [];
     if (isFarcasterMiniApp) {
       methods.push([
@@ -130,18 +146,27 @@ const AuthMainStepContent = ({
       reactNode,
       methods.length > 1 && index < methods.length - 1 && /* @__PURE__ */ jsx(CpslDivider, { children: "or" }, "or")
     ] }, key)) });
-  }, [isFarcasterMiniApp, oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, wallets, authLayout]);
+  }, [
+    isFarcasterMiniApp,
+    oAuthMethods,
+    disableEmailLogin,
+    disablePhoneLogin,
+    isGuestModeEnabled,
+    wallets,
+    authLayout,
+    selectedAuthView
+  ]);
   return /* @__PURE__ */ jsxs(Container, { "data-testid": "main-auth-step-content", children: [
     Content,
-    isGuestModeEnabled && !isGuestMode && !isFarcasterMiniApp && /* @__PURE__ */ jsx(
+    isMainStep && isGuestModeEnabled && !isGuestMode && !isFarcasterMiniApp && /* @__PURE__ */ jsx(
       GuestMode,
       {
         href: "#",
         $isDark: isDark,
-        onClick: (e) => {
+        onClick: (e) => __async(void 0, null, function* () {
           e.preventDefault();
-          createGuestWallets();
-        },
+          yield createGuestWallets();
+        }),
         "data-testid": "para-guest-continue",
         children: "Continue as Guest"
       }
@@ -196,5 +221,5 @@ const FarcasterButton = safeStyled(CpslButton)`
   --button-primary-active-color: white;
 `;
 export {
-  AuthMainStepContent
+  AuthMainContent
 };

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

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

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

@@ -0,0 +1,31 @@
+"use client";
+import "../../../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { useStore } from "../../../../../provider/stores/useStore.js";
+import { StepContainer } from "../../../common.js";
+import { Waiting } from "../../../Waiting/Waiting.js";
+import { useInternalClient } from "../../../../../provider/hooks/utils/useInternalClient.js";
+const AwaitingAccountSetup = () => {
+  var _a;
+  const para = useInternalClient();
+  const paraState = useStore((state) => state.paraState);
+  const isLogin = useStore((state) => {
+    var _a2, _b;
+    return ((_b = (_a2 = state.paraState) == null ? void 0 : _a2.authStateInfo) == null ? void 0 : _b.isNewUser) === false;
+  });
+  const refs = useStore((state) => state.refs);
+  const hideWallets = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
+  });
+  const isPopup = ((_a = refs.popupWindow.current) == null ? void 0 : _a.closed) === false;
+  if (!paraState || paraState.corePhase !== "wallet_flow") {
+    return null;
+  }
+  let headingText = para.isGuestMode ? hideWallets ? "Linking Guest Account..." : "Linking Guest Wallet..." : isLogin ? "Logging You In..." : paraState.authPhase === "guest_mode" ? "Creating Guest Account..." : "Creating Your Account...";
+  let subheadingText = isPopup ? "Follow the prompts presented by your browser." : "This should only take a couple of seconds.";
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsx(Waiting, { heading: headingText, subheading: subheadingText }) });
+};
+export {
+  AwaitingAccountSetup
+};

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

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

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

@@ -0,0 +1,21 @@
+"use client";
+import "../../../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { useStore } from "../../../../../provider/stores/useStore.js";
+import { Waiting } from "../../../Waiting/Waiting.js";
+const AwaitingBiometrics = () => {
+  const isLogin = useStore((state) => {
+    var _a, _b;
+    return ((_b = (_a = state.paraState) == null ? void 0 : _a.authStateInfo) == null ? void 0 : _b.isNewUser) === false;
+  });
+  return /* @__PURE__ */ jsx(
+    Waiting,
+    {
+      heading: isLogin ? "Waiting for Passkey" : "Creating Passkey",
+      subheading: "Follow the prompts presented by your browser."
+    }
+  );
+};
+export {
+  AwaitingBiometrics
+};

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

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

package/dist/modal/components/{AwaitingOAuthStep/AwaitingOAuthStep.js → flows/auth/AwaitingOAuth/AwaitingOAuth.js}

@@ -1,10 +1,10 @@
 "use client";
-import "../../../chunk-MMUBH76A.js";
+import "../../../../../chunk-MMUBH76A.js";
 import { jsx } from "react/jsx-runtime";
-import { Waiting } from "../Waiting/Waiting.js";
-const AwaitingOAuthStep = () => {
+import { Waiting } from "../../../Waiting/Waiting.js";
+const AwaitingOAuth = () => {
   return /* @__PURE__ */ jsx(Waiting, { heading: "Complete Login", subheading: "Follow the prompts presented by your browser." });
 };
 export {
-  AwaitingOAuthStep
+  AwaitingOAuth
 };

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

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

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

@@ -0,0 +1,22 @@
+"use client";
+import "../../../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { useStore } from "../../../../../provider/stores/useStore.js";
+import { Waiting } from "../../../Waiting/Waiting.js";
+const AwaitingPassword = () => {
+  const isLogin = useStore((state) => {
+    var _a, _b;
+    return ((_b = (_a = state.paraState) == null ? void 0 : _a.authStateInfo) == null ? void 0 : _b.isNewUser) === false;
+  });
+  const isPIN = useStore((state) => state.authMethod === "PIN");
+  return /* @__PURE__ */ jsx(
+    Waiting,
+    {
+      heading: isLogin ? `Waiting for ${isPIN ? "PIN" : "Password"}` : `Creating  ${isPIN ? "PIN" : "Password"}`,
+      subheading: "Follow the prompts presented by your browser."
+    }
+  );
+};
+export {
+  AwaitingPassword
+};

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

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

package/dist/modal/components/{BiometricCreationStep/BiometricCreationStep.js → flows/auth/BiometricCreation/BiometricCreation.js}

@@ -1,35 +1,38 @@
 "use client";
-import "../../../chunk-MMUBH76A.js";
+import "../../../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslButton, CpslDivider, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
-import { useModalStore } from "../../stores/index.js";
-import { InnerStepContainer, StepContainer, Heading, QRContainer } from "../common.js";
+import { InnerStepContainer, StepContainer, Heading, QRContainer } from "../../../common.js";
 import { useCopyToClipboard, UserIdentifier } from "@getpara/react-common";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { useInternalClient } from "../../../../../provider/hooks/utils/useInternalClient.js";
 import { AuthMethod } from "@getpara/web-sdk";
-import { useStore } from "../../../provider/stores/useStore.js";
-const BiometricCreationStep = () => {
+import { useStore } from "../../../../../provider/stores/useStore.js";
+import { useAuth } from "../../../../../provider/providers/AuthProvider/AuthProvider.js";
+const BiometricCreation = () => {
+  var _a, _b, _c, _d;
   const para = useInternalClient();
   const authInfo = para.authInfo;
   const appName = useStore((state) => state.appName);
-  const { presentSignupUi } = useAuthActions();
-  const signupState = useModalStore((state) => state.getSignupState());
-  const authStepRoute = useModalStore((state) => state.authStepRoute);
+  const authStateInfo = useStore((state) => {
+    var _a2;
+    return (_a2 = state.paraState) == null ? void 0 : _a2.authStateInfo;
+  });
+  const passkeyUrl = (_a = authStateInfo == null ? void 0 : authStateInfo.passkeyUrl) != null ? _a : null;
+  const passwordUrl = (_b = authStateInfo == null ? void 0 : authStateInfo.passwordUrl) != null ? _b : null;
+  const isPasskeySupported = (_c = authStateInfo == null ? void 0 : authStateInfo.isPasskeySupported) != null ? _c : false;
+  const pinUrl = (_d = authStateInfo == null ? void 0 : authStateInfo.pinUrl) != null ? _d : null;
+  const { openBiometricUrl } = useAuth();
   const [isCopied, copy] = useCopyToClipboard();
   const handleCopy = () => {
-    if (signupState == null ? void 0 : signupState.passkeyUrl) {
-      copy(signupState.passkeyUrl);
+    if (passkeyUrl) {
+      copy(passkeyUrl);
     }
   };
   const onClick = (method) => () => {
-    presentSignupUi(method, signupState);
+    openBiometricUrl(method);
   };
-  const isBoth = !!(signupState == null ? void 0 : signupState.passkeyUrl) && (!!(signupState == null ? void 0 : signupState.passwordUrl) || !!(signupState == null ? void 0 : signupState.pinUrl));
-  const isPIN = !!(signupState == null ? void 0 : signupState.pinUrl);
-  if (!signupState) {
-    return null;
-  }
+  const isBoth = !!passkeyUrl && (!!passwordUrl || !!pinUrl);
+  const isPIN = !!pinUrl;
   return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
       /* @__PURE__ */ jsx(Heading, { children: para.isExternalWalletAuth ? `Finish setup for your${appName ? ` ${appName}` : ""} wallet` : isBoth ? "Secure Your Account" : "Create Passkey" }),
@@ -37,12 +40,12 @@ const BiometricCreationStep = () => {
       /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: isBoth ? `Choose a ${isPIN ? "PIN" : "password"} or set up a passkey` : "Your Passkey keeps your account safe." })
     ] }),
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      (signupState == null ? void 0 : signupState.isPasskeySupported) ? /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: onClick(AuthMethod.PASSKEY), "data-testid": "para-create-passkey", children: [
+      isPasskeySupported ? /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: onClick(AuthMethod.PASSKEY), "data-testid": "para-create-passkey", children: [
         /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "key" }),
         isBoth ? "Create Passkey" : "Create"
       ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device" }),
-        /* @__PURE__ */ jsx(QRContainer, { children: !(signupState == null ? void 0 : signupState.passkeyUrl) ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: signupState.passkeyUrl, "data-testid": "para-passkey-qr" }) }),
+        /* @__PURE__ */ jsx(QRContainer, { children: !passkeyUrl ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: passkeyUrl, "data-testid": "para-passkey-qr" }) }),
         /* @__PURE__ */ jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, "data-testid": "para-passkey-copy-link", children: [
           /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
           isCopied ? "Copied" : "Copy Link"
@@ -55,7 +58,7 @@ const BiometricCreationStep = () => {
           {
             fullWidth: true,
             onClick: onClick(isPIN ? AuthMethod.PIN : AuthMethod.PASSWORD),
-            disabled: !!authStepRoute,
+            disabled: !(isPIN ? pinUrl : passwordUrl),
             "data-testid": "para-choose-password",
             children: [
               /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "passcode" }),
@@ -69,5 +72,5 @@ const BiometricCreationStep = () => {
   ] });
 };
 export {
-  BiometricCreationStep
+  BiometricCreation
 };

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

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

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

@@ -0,0 +1,72 @@
+"use client";
+import "../../../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslDivider, CpslIcon } from "@getpara/react-components";
+import { Heading, StepContainer, InnerStepContainer } from "../../../common.js";
+import { safeStyled } from "@getpara/react-common";
+import { AuthMethod } from "@getpara/web-sdk";
+import { KnownDevices, UserIdentifier } from "@getpara/react-common";
+import { useInternalClient } from "../../../../../provider/hooks/utils/useInternalClient.js";
+import { useAuth } from "../../../../../provider/providers/AuthProvider/AuthProvider.js";
+import { useFormattedBiometricHints } from "../../../../../provider/hooks/utils/useFormattedBiometricHints.js";
+import { useStore } from "../../../../../provider/stores/useStore.js";
+const BiometricLogin = () => {
+  var _a, _b, _c, _d, _e, _f;
+  const para = useInternalClient();
+  const { openBiometricUrl } = useAuth();
+  const authStateInfo = useStore((state) => {
+    var _a2;
+    return (_a2 = state.paraState) == null ? void 0 : _a2.authStateInfo;
+  });
+  const passkeyUrl = (_a = authStateInfo == null ? void 0 : authStateInfo.passkeyUrl) != null ? _a : null;
+  const passwordUrl = (_b = authStateInfo == null ? void 0 : authStateInfo.passwordUrl) != null ? _b : null;
+  const pinUrl = (_c = authStateInfo == null ? void 0 : authStateInfo.pinUrl) != null ? _c : null;
+  const passkeyKnownDeviceUrl = (_d = authStateInfo == null ? void 0 : authStateInfo.passkeyKnownDeviceUrl) != null ? _d : null;
+  const isPasskeySupported = (_e = authStateInfo == null ? void 0 : authStateInfo.isPasskeySupported) != null ? _e : false;
+  const { data: biometricHints } = useFormattedBiometricHints();
+  const { isOnKnownDevice = false, formattedHints } = biometricHints || {};
+  const isPasskey = !!passkeyUrl, isPassword = !!passwordUrl, isPIN = !!pinUrl, isNeither = !isPasskey && !isPassword, hasHints = (_f = formattedHints == null ? void 0 : formattedHints.length) != null ? _f : 0 > 0, isPasskeyOnKnownDevice = isPasskeySupported && isOnKnownDevice, isPasskeyUnavailable = hasHints && !isOnKnownDevice || !isPasskeySupported || isNeither, displayKnownDevices = isPasskeyUnavailable && !!biometricHints && (hasHints || !!passkeyKnownDeviceUrl), displayWelcomeBack = isPasskeyOnKnownDevice || isPassword || isPIN;
+  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      displayWelcomeBack && /* @__PURE__ */ jsx(Heading, { children: "Welcome back," }),
+      /* @__PURE__ */ jsx(UserIdentifier, { authInfo: para.authInfo })
+    ] }),
+    /* @__PURE__ */ jsxs(MainContainer, { children: [
+      (isPassword || isPIN) && /* @__PURE__ */ jsxs(
+        CpslButton,
+        {
+          fullWidth: true,
+          onClick: () => openBiometricUrl(isPIN ? AuthMethod.PIN : AuthMethod.PASSWORD),
+          "data-testid": "para-login-password",
+          children: [
+            /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "passcode" }),
+            isPIN && isPassword ? "Login" : isPIN ? "Login with PIN" : "Login with Password"
+          ]
+        }
+      ),
+      isPasskey && /* @__PURE__ */ jsxs(Fragment, { children: [
+        displayKnownDevices && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            KnownDevices,
+            {
+              hints: biometricHints,
+              link: passkeyKnownDeviceUrl != null ? passkeyKnownDeviceUrl : void 0,
+              "data-testid": "para-known-devices"
+            }
+          ),
+          /* @__PURE__ */ jsx(CpslDivider, { children: "or" })
+        ] }),
+        /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: () => openBiometricUrl(AuthMethod.PASSKEY), "data-testid": "para-login-passkey", children: isPasskeyUnavailable ? "Continue anyway" : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "key" }),
+          "Login with Passkey"
+        ] }) })
+      ] })
+    ] })
+  ] });
+};
+const MainContainer = safeStyled(InnerStepContainer)`
+  gap: 16px;
+`;
+export {
+  BiometricLogin
+};

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

@@ -0,0 +1,5 @@
+interface LoginDoneProps {
+    onClose: () => void;
+}
+export declare const LoginDone: ({ onClose }: LoginDoneProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modal/components/{LoginDoneStep/LoginDoneStep.js → flows/auth/LoginDone/LoginDone.js}

@@ -1,25 +1,22 @@
 "use client";
-import "../../../chunk-MMUBH76A.js";
+import "../../../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo } from "react";
-import { Heading, HeroIcon, StepContainer } from "../common.js";
-import { ExternalWalletCard, WalletCard, WalletCards } from "../WalletCard/WalletCard.js";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useStore } from "../../../provider/stores/useStore.js";
-import { useModalStore } from "../../stores/index.js";
-import { ModalStep } from "../../utils/steps.js";
-const LoginDoneStep = ({ onClose }) => {
+import { Heading, HeroIcon, StepContainer } from "../../../common.js";
+import { ExternalWalletCard, WalletCard, WalletCards } from "../../../WalletCard/WalletCard.js";
+import { useInternalClient } from "../../../../../provider/hooks/utils/useInternalClient.js";
+import { useStore } from "../../../../../provider/stores/useStore.js";
+const LoginDone = ({ onClose }) => {
   const para = useInternalClient();
   const bareModal = useStore((state) => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.bareModal;
   });
-  const setStep = useModalStore((state) => state.setStep);
-  const setFlow = useModalStore((state) => state.setFlow);
   const hideWallets = useStore((state) => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
   });
+  const setShowPostAuthFlow = useStore((state) => state.setShowPostAuthFlow);
   const content = useMemo(() => {
     var _a, _b;
     if (para.externalWalletConnectionType === "CONNECTION_ONLY" || para.externalWalletConnectionType === "VERIFICATION") {
@@ -32,8 +29,7 @@ const LoginDoneStep = ({ onClose }) => {
   useEffect(() => {
     const timerId = setTimeout(() => {
       if (bareModal) {
-        setFlow("account");
-        setStep(ModalStep.ACCOUNT_MAIN);
+        setShowPostAuthFlow(false);
       } else {
         onClose();
       }
@@ -49,5 +45,5 @@ const LoginDoneStep = ({ onClose }) => {
   ] });
 };
 export {
-  LoginDoneStep
+  LoginDone
 };

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

@@ -1,44 +1,36 @@
 "use client";
 import {
   __async
-} from "../../../chunk-MMUBH76A.js";
+} from "../../../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ACCOUNT_TYPES, safeStyled } from "@getpara/react-common";
-import { useModalStore } from "../../stores/index.js";
-import { ModalStep } from "../../utils/steps.js";
-import { getTileButtonFlex } from "../../utils/getTileButtonFlex.js";
-import { StyledCpslTileButton } from "../common.js";
-import { useStore } from "../../../provider/stores/useStore.js";
-import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { getTileButtonFlex } from "../../../../utils/getTileButtonFlex.js";
+import { StyledCpslTileButton } from "../../../common.js";
+import { useStore } from "../../../../../provider/stores/useStore.js";
+import { useAuth } from "../../../../../provider/providers/AuthProvider/AuthProvider.js";
 const HAS_MORE_LENGTH = 3;
 const OAuth = ({ methods }) => {
+  const {
+    authenticateWithOAuth: { authenticate }
+  } = useAuth();
+  const setSelectedAuthView = useStore((state) => state.setSelectedAuthView);
+  const selectedAuthView = useStore((state) => state.selectedAuthView);
+  const accountView = useStore((state) => state.accountView);
   const oAuthLogoVariant = useStore((state) => state.oAuthLogoVariant);
   const isDark = useStore((state) => state.isDarkTheme);
-  const setStep = useModalStore((state) => state.setStep);
-  const showAll = useModalStore((state) => state.step === ModalStep.AUTH_MORE || state.step === ModalStep.AUTH_GUEST_SIGNUP);
-  const { verifyOAuth } = useAuthActions();
+  const showAll = selectedAuthView === "AUTH_ALL_OPTIONS" || accountView === "ACCOUNT_GUEST_SIGNUP";
   const hasMore = methods.length > HAS_MORE_LENGTH;
   const methodsToShow = showAll || !hasMore ? methods : methods.slice(0, HAS_MORE_LENGTH - 1);
   const handleShowAll = () => {
-    setStep(ModalStep.AUTH_MORE);
+    setSelectedAuthView("AUTH_ALL_OPTIONS");
   };
   const handleMethodClick = (method) => () => __async(void 0, null, function* () {
-    switch (method) {
-      case "FARCASTER":
-        setStep(ModalStep.FARCASTER_OAUTH);
-        break;
-      case "TELEGRAM":
-        setStep(ModalStep.TELEGRAM_OAUTH);
-        break;
-      default:
-        verifyOAuth(method);
-        break;
-    }
+    yield authenticate(method);
   });
   const useBrandedLogos = oAuthLogoVariant === "default";
   const useDarkLogos = useBrandedLogos ? isDark : oAuthLogoVariant !== "dark";
   const showMoreButton = !showAll && hasMore;
-  return /* @__PURE__ */ jsxs(OAuthContainer, { "data-testid": "para-oauth-methods", children: [
+  return /* @__PURE__ */ jsxs(OAuthContainer, { children: [
     methodsToShow.map((method, index) => /* @__PURE__ */ jsx(
       OAuthButton,
       {

package/dist/modal/components/{RecoverySecretStep → flows/auth/RecoverySecretStep}/RecoverySecretStep.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, CpslText } from "@getpara/react-components";
-import { useModalStore } from "../../stores/index.js";
-import { ModalStep } from "../../utils/steps.js";
-import { Heading, InnerStepContainer, StepContainer, StyledCpslTileButton } from "../common.js";
+import { Heading, InnerStepContainer, StepContainer, StyledCpslTileButton } from "../../../common.js";
 import { safeStyled } from "@getpara/react-common";
 import { useCopyToClipboard } from "@getpara/react-common";
-import { getMailtoLink } from "../../utils/getMailtoLink.js";
+import { getMailtoLink } from "../../../../utils/getMailtoLink.js";
 import { useState } from "react";
-import { useStore } from "../../../provider/stores/useStore.js";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useStore } from "../../../../../provider/stores/useStore.js";
+import { useInternalClient } from "../../../../../provider/hooks/utils/useInternalClient.js";
 const SaveRecoverySecret = ({
   email,
   value,
@@ -55,12 +53,12 @@ const RecoverySecretStep = () => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
   });
-  const setStep = useModalStore((state) => state.setStep);
   const authInfo = para.authInfo;
-  const recoveryShare = useModalStore((state) => state.recoveryShare);
-  const backupDecryptionKey = JSON.parse(recoveryShare || "{}").backupDecryptionKey;
+  const recoverySecret = useStore((state) => state.recoverySecret);
+  const setRecoverySecret = useStore((state) => state.setRecoverySecret);
+  const backupDecryptionKey = JSON.parse(recoverySecret || "{}").backupDecryptionKey;
   const onComplete = () => __async(void 0, null, function* () {
-    setStep(ModalStep.WALLET_CREATION_DONE);
+    setRecoverySecret(null);
   });
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [

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

@@ -0,0 +1,5 @@
+interface Setup2FAProps {
+    onClose: () => void;
+}
+export declare const Setup2FA: ({ onClose }: Setup2FAProps) => import("react/jsx-runtime").JSX.Element;
+export {};