@getpara/react-sdk-lite 2.12.0 → 2.13.0

package/dist/modal/components/Header/hooks/useStepTitle.js

@@ -1,12 +1,10 @@
 "use client";
 import "../../../../chunk-MMUBH76A.js";
-import { useMemo } from "react";
-import { useModalStore } from "../../../stores/modal/useModalStore.js";
-import { ModalStep } from "../../../utils/steps.js";
-import { useExternalWallets } from "../../../../provider/providers/ExternalWalletProvider.js";
+import { useMemo, useRef } from "react";
 import { useStore } from "../../../../provider/stores/useStore.js";
 import { useAccountLinking } from "../../../../provider/providers/AccountLinkProvider.js";
 import { useWallet } from "../../../../provider/index.js";
+import { useAuthView } from "../../../hooks/useAuthView.js";
 const signUpOrLogInTitle = "Sign Up or Login";
 const connectWalletTitle = "Connect Wallet";
 const useStepTitle = () => {
@@ -19,11 +17,16 @@ const useStepTitle = () => {
     var _a2;
     return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
   });
-  const isLogin = useModalStore((state) => state.isLogin());
-  const currentStep = useModalStore((state) => state.step);
-  const authLayout = useModalStore((state) => state.authLayout) || [];
-  const profileWallet = useModalStore((state) => state.profileWallet);
+  const authLayout = useStore((state) => state.authLayout) || [];
+  const profileWallet = useStore((state) => state.profileWallet);
+  const accountView = useStore((state) => state.accountView);
+  const isLogin = useStore((state) => {
+    var _a2, _b2;
+    return ((_b2 = (_a2 = state.paraState) == null ? void 0 : _a2.authStateInfo) == null ? void 0 : _b2.isNewUser) === false;
+  });
   const { data: activeWallet } = useWallet();
+  const { authView } = useAuthView();
+  const lastTitleRef = useRef(null);
   const [isAuthFirst, isAuthCondensed, isExternalFirst, isExternalCondensed, isBothCondensed] = [
     (_a = authLayout[0]) == null ? void 0 : _a.includes("AUTH"),
     authLayout.includes("AUTH:CONDENSED"),
@@ -32,76 +35,90 @@ const useStepTitle = () => {
     authLayout.includes("AUTH:CONDENSED") && authLayout.includes("EXTERNAL:CONDENSED")
   ];
   const authStepTitle = isBothCondensed ? null : isAuthFirst && !isAuthCondensed ? signUpOrLogInTitle : isExternalFirst && !isExternalCondensed ? connectWalletTitle : "";
-  const { chainId } = useExternalWallets();
   const { isEnabled: isAccountLinkingEnabled } = useAccountLinking();
-  const titles = useMemo(
-    () => {
-      var _a2;
-      return {
-        [ModalStep.AUTH_MAIN]: authStepTitle,
-        [ModalStep.AUTH_MORE]: signUpOrLogInTitle,
-        [ModalStep.AUTH_GUEST_SIGNUP]: "Complete Account Setup",
-        [ModalStep.EX_WALLET_MORE]: connectWalletTitle,
-        [ModalStep.ADD_EX_WALLET_MORE]: "Add Wallet",
-        [ModalStep.VERIFICATIONS]: "Sign Up",
-        [ModalStep.AWAITING_OAUTH]: signUpOrLogInTitle,
-        [ModalStep.FARCASTER_OAUTH]: signUpOrLogInTitle,
-        [ModalStep.TELEGRAM_OAUTH]: signUpOrLogInTitle,
-        [ModalStep.BIOMETRIC_CREATION]: "Sign Up",
-        [ModalStep.PASSWORD_CREATION]: "Sign Up",
-        [ModalStep.AWAITING_BIOMETRIC_CREATION]: "Sign Up",
-        [ModalStep.AWAITING_WALLET_CREATION]: isLogin ? "Login" : "Sign Up",
-        [ModalStep.AWAITING_PASSWORD_CREATION]: "Sign Up",
-        [ModalStep.WALLET_CREATION_DONE]: hideWallets ? "Account Created" : "Wallet Created",
-        [ModalStep.SECRET]: isLogin ? "Login" : "Sign Up",
-        [ModalStep.BIOMETRIC_LOGIN]: "Login",
-        [ModalStep.EMBEDDED_PASSWORD_LOGIN]: "Login",
-        [ModalStep.AWAITING_PASSWORD_LOGIN]: "Login",
-        [ModalStep.AWAITING_BIOMETRIC_LOGIN]: "Login",
-        [ModalStep.LOGIN_DONE]: "",
-        [ModalStep.SETUP_2FA]: "2FA",
-        [ModalStep.VERIFY_2FA]: "2FA",
-        [ModalStep.TWO_FACTOR_DONE]: "2FA",
-        [ModalStep.ADD_FUNDS_BUY]: "Add Funds",
-        [ModalStep.ADD_FUNDS_RECEIVE]: "Add Funds",
-        [ModalStep.ADD_FUNDS_WITHDRAW]: "Withdraw",
-        [ModalStep.ADD_FUNDS_AWAITING]: "Add Funds",
-        [ModalStep.ADD_FUNDS_SUCCESS]: "Add Funds",
-        [ModalStep.ADD_FUNDS_FAILURE]: "Add Funds",
-        [ModalStep.ACCOUNT_MAIN]: "",
-        [ModalStep.CHAIN_SWITCH]: "",
-        [ModalStep.ACCOUNT_PROFILE]: isAccountLinkingEnabled ? "Profile" : "Settings",
-        [ModalStep.ACCOUNT_PROFILE_LIST]: "Link Account",
-        [ModalStep.ACCOUNT_PROFILE_ADD]: "Link Account",
-        [ModalStep.ACCOUNT_PROFILE_REMOVE]: "Unlink Account",
-        [ModalStep.EX_WALLET_SELECTED]: "Connect Wallet",
-        [ModalStep.EX_WALLET_NETWORK_SELECT]: "Select Network",
-        [ModalStep.ADD_EX_WALLET_NETWORK_SELECT]: "Select Network",
-        [ModalStep.LINK_EX_WALLET_NETWORK_SELECT]: "Select Network",
-        [ModalStep.ADD_EX_WALLET_SELECTED]: "Add Wallet",
-        [ModalStep.EXTERNAL_WALLET_VERIFICATION]: "Verify Wallet",
-        [ModalStep.AWAITING_ACCOUNT]: isLogin ? "Login" : "Sign Up",
-        [ModalStep.ACCOUNT_WALLET]: (_a2 = profileWallet == null ? void 0 : profileWallet.displayName) != null ? _a2 : "Wallet Settings",
-        [ModalStep.ACCOUNT_SEND]: "Send",
-        [ModalStep.ACCOUNT_SEND_ASSET]: "Send",
-        [ModalStep.ACCOUNT_SEND_NETWORK]: "Send"
-      };
-    },
-    [isLogin, chainId, hideWallets, authStepTitle]
-  );
   const title = useMemo(() => {
     var _a2;
-    if (((_a2 = titles[currentStep]) == null ? void 0 : _a2.length) > 0) {
-      return titles[currentStep];
+    if (authView) {
+      switch (authView) {
+        case "AUTH_MAIN":
+          return authStepTitle;
+        case "AUTH_ALL_EXTERNAL_WALLETS":
+        case "AUTH_ALL_OPTIONS":
+        case "AUTH_OAUTH_CONNECT":
+          return signUpOrLogInTitle;
+        case "AUTH_VERIFY_ACCOUNT":
+          return "Sign Up";
+        case "AUTH_EXTERNAL_WALLET_NETWORK_SELECT":
+        case "AUTH_EXTERNAL_WALLET_CONNECT":
+          return connectWalletTitle;
+        case "AUTH_EXTERNAL_WALLET_VERIFY":
+          return "Verify Wallet";
+        case "AUTH_BIOMETRIC_PASSKEY":
+        case "AUTH_BIOMETRIC_PASSWORD":
+        case "AUTH_BIOMETRIC_PIN":
+        case "AUTH_BIOMETRIC_SELECT":
+        case "AUTH_BASIC_LOGIN":
+        case "AUTH_CONNECTING":
+        case "AUTH_RECOVERY_SECRET":
+        case "AUTH_2FA_SETUP":
+        case "AUTH_CONNECTED":
+          return "";
+        case "AUTH_WALLETS_CREATED":
+          return hideWallets ? "Account Created" : "Wallet Created";
+        case "AUTH_GUEST_MODE_CONNECTING":
+          return "Creating Guest Account";
+        case "AUTH_ERROR":
+          return lastTitleRef.current;
+      }
+    }
+    switch (accountView) {
+      case "ACCOUNT_MAIN":
+      case "ACCOUNT_CHAIN_SWITCH":
+      case "ACCOUNT_SWITCH_WALLETS":
+      case "ACCOUNT_SWITCH_WALLETS_IFRAME":
+        return null;
+      case "ACCOUNT_GUEST_SIGNUP":
+        return "Complete Account Setup";
+      case "ACCOUNT_ADD_FUNDS_BUY":
+      case "ACCOUNT_ADD_FUNDS_RECEIVE":
+      case "ACCOUNT_ADD_FUNDS_AWAITING":
+      case "ACCOUNT_ADD_FUNDS_SUCCESS":
+      case "ACCOUNT_ADD_FUNDS_FAILURE":
+        return "Add Funds";
+      case "ACCOUNT_ADD_FUNDS_WITHDRAW":
+        return "Withdraw";
+      case "ACCOUNT_PROFILE":
+        return isAccountLinkingEnabled ? "Profile" : "Settings";
+      case "ACCOUNT_PROFILE_ADD":
+      case "ACCOUNT_PROFILE_LIST":
+        return "Link Account";
+      case "ACCOUNT_PROFILE_REMOVE":
+        return "Unlink Account";
+      case "ACCOUNT_WALLET":
+        return (_a2 = profileWallet == null ? void 0 : profileWallet.displayName) != null ? _a2 : "Wallet Settings";
+      case "ACCOUNT_ADD_EX_WALLET_MORE":
+        return "Add Wallet";
+      case "ACCOUNT_ADD_EX_WALLET_SELECTED":
+        return "Connect Wallet";
+      case "ACCOUNT_ADD_EX_WALLET_NETWORK_SELECT":
+      case "ACCOUNT_LINK_EX_WALLET_NETWORK_SELECT":
+        return "Select Network";
+      case "ACCOUNT_SEND":
+      case "ACCOUNT_SEND_ASSET":
+      case "ACCOUNT_SEND_NETWORK":
+        return "Send";
     }
     return null;
-  }, [currentStep, titles]);
+  }, [authView, isLogin, accountView, isAccountLinkingEnabled, profileWallet, authStepTitle, hideWallets]);
+  if (title && title !== lastTitleRef.current) {
+    lastTitleRef.current = title;
+  }
   const isControls = useMemo(() => {
-    return (activeWallet == null ? void 0 : activeWallet.isExternal) && (activeWallet == null ? void 0 : activeWallet.type) === "EVM" && [ModalStep.ACCOUNT_MAIN, ModalStep.CHAIN_SWITCH].includes(currentStep);
-  }, [activeWallet, currentStep]);
+    return !authView && (activeWallet == null ? void 0 : activeWallet.isExternal) && (activeWallet == null ? void 0 : activeWallet.type) === "EVM" && ["ACCOUNT_MAIN", "ACCOUNT_CHAIN_SWITCH"].includes(accountView);
+  }, [authView, activeWallet, accountView]);
   const isTitleDisplayed = useMemo(() => {
-    return !isControls && (currentStep !== ModalStep.AUTH_MAIN || !logo);
-  }, [isControls, currentStep, logo]);
+    return !isControls && (authView !== "AUTH_MAIN" || !logo);
+  }, [isControls, authView, logo]);
   return { title, isTitleDisplayed, isControls };
 };
 export {

package/dist/modal/components/ModalContent/ModalContent.d.ts

@@ -5,7 +5,7 @@ export type ModalContentHandle = {
      */
     handleModalClose: () => void;
 };
-export declare const ModalContent: import("react").ForwardRefExoticComponent<Omit<ParaModalProps, "onModalStepChange" | "isOpen" | "para" | "theme" | "branding" | "onExpandModalChange"> & {
+export declare const ModalContent: import("react").ForwardRefExoticComponent<Omit<ParaModalProps, "para" | "isOpen" | "theme" | "branding" | "onModalStepChange" | "onExpandModalChange"> & {
     onDisconnect: () => void;
     isDisconnecting: boolean;
 } & import("react").RefAttributes<ModalContentHandle>>;

package/dist/modal/components/ModalContent/ModalContent.js

@@ -6,15 +6,12 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useEffect, useImperativeHandle } from "react";
 import { EnabledFlow } from "@getpara/web-sdk";
-import { useModalStore } from "../../stores/index.js";
-import { ModalStep } from "../../utils/steps.js";
 import { Body } from "../Body/Body.js";
 import { Footer } from "../Footer/Footer.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { useStore } from "../../../provider/stores/useStore.js";
 const ModalContent = forwardRef(
   ({
-    twoFactorAuthEnabled = false,
     oAuthMethods,
     disableEmailLogin,
     disablePhoneLogin,
@@ -25,12 +22,11 @@ const ModalContent = forwardRef(
     onRampTestMode
   }, ref) => {
     const para = useInternalClient();
-    const refs = useModalStore((state) => state.refs);
-    const onRampConfig = useModalStore((state) => state.onRampConfig);
-    const setOnRampConfig = useModalStore((state) => state.setOnRampConfig);
-    const accountAddFundTab = useModalStore((state) => state.accountAddFundTab);
-    const setAccountAddFundTab = useModalStore((state) => state.setAccountAddFundTab);
-    const { disconnectExternalWallet } = useExternalWallets();
+    const refs = useStore((state) => state.refs);
+    const onRampConfig = useStore((state) => state.onRampConfig);
+    const setOnRampConfig = useStore((state) => state.setOnRampConfig);
+    const accountAddFundTab = useStore((state) => state.accountAddFundTab);
+    const setAccountAddFundTab = useStore((state) => state.setAccountAddFundTab);
     useImperativeHandle(ref, () => {
       return {
         handleModalClose() {
@@ -40,9 +36,6 @@ const ModalContent = forwardRef(
     }, []);
     const handleClose = () => {
       onClose == null ? void 0 : onClose();
-      if (refs.currentStep.current === ModalStep.EXTERNAL_WALLET_VERIFICATION && para.isExternalWalletAuth) {
-        disconnectExternalWallet();
-      }
     };
     useEffect(() => {
       if (!onRampConfig) {
@@ -74,7 +67,6 @@ const ModalContent = forwardRef(
         Body,
         {
           oAuthMethods,
-          twoFactorAuthEnabled,
           disableEmailLogin: !!disableEmailLogin,
           disablePhoneLogin: !!disablePhoneLogin,
           isGuestModeEnabled,

package/dist/modal/components/OnRampComponents/AddingFunds.js

@@ -4,10 +4,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { OnRampPurchaseStatus } from "@getpara/web-sdk";
 import { SpinnerContainer } from "../common.js";
 import { ON_RAMP_PROVIDERS } from "@getpara/react-common";
-import { useModalStore } from "../../stores/index.js";
+import { useStore } from "../../../provider/stores/useStore.js";
 import { CpslSpinner, CpslText } from "@getpara/react-components";
 const AddingFunds = () => {
-  const onRampPurchase = useModalStore((state) => state.onRampPurchase);
+  const onRampPurchase = useStore((state) => state.onRampPurchase);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) }),
     /* @__PURE__ */ jsxs(CpslText, { children: [

package/dist/modal/components/WalletCard/WalletCard.js

@@ -1,11 +1,11 @@
 "use client";
-import "../../../chunk-MMUBH76A.js";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled, WalletTypeIcon } from "@getpara/react-common";
-import { useModalStore } from "../../stores/index.js";
 import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
 import { truncateAddress } from "@getpara/web-sdk";
-import { ModalStep } from "../../utils/steps.js";
 import { useWalletState } from "../../../provider/index.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useStore } from "../../../provider/stores/useStore.js";
@@ -72,16 +72,16 @@ const WalletCard = ({ id, type, showAddFunds }) => {
   );
 };
 const SharedWalletCard = ({ address, name, showAddFunds, id, type, Icon }) => {
-  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const onRampConfig = useStore((state) => state.onRampConfig);
   const { setSelectedWallet } = useWalletState();
-  const setStep = useModalStore((state) => state.setStep);
+  const setAccountView = useStore((state) => state.setAccountView);
   const isAddFundsEnabled = (onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) || (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled);
-  const handleAddFundsClick = () => {
+  const handleAddFundsClick = () => __async(void 0, null, function* () {
     if (id && type) {
-      setSelectedWallet({ id, type });
-      isAddFundsEnabled && setStep(onRampConfig.isBuyEnabled ? ModalStep.ADD_FUNDS_BUY : ModalStep.ADD_FUNDS_RECEIVE);
+      yield setSelectedWallet({ id, type });
+      isAddFundsEnabled && setAccountView(onRampConfig.isBuyEnabled ? "ACCOUNT_ADD_FUNDS_BUY" : "ACCOUNT_ADD_FUNDS_RECEIVE");
     }
-  };
+  });
   return /* @__PURE__ */ jsxs(Container, { children: [
     /* @__PURE__ */ jsxs(InnerContainer, { children: [
       Icon,

package/dist/modal/components/WalletSelectOld/WalletSelectOld.js

@@ -1,12 +1,14 @@
 "use client";
-import "../../../chunk-MMUBH76A.js";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from "react";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
 import { safeStyled, useCopyToClipboard, WalletTypeIcon as WalletTypeIconBase } from "@getpara/react-common";
 import { useAccount, useWallet, useWalletState } from "../../../provider/index.js";
 import { CpslButton, CpslIcon, CpslSelect, CpslSelectItem, CpslText } from "@getpara/react-components";
+import { useDropdownPosition } from "../../hooks/useDropdownPosition.js";
 import { getMobilePopoverPositionCSS } from "../common.js";
 const getValue = (id, type) => {
   return id && type ? `${id}~${type}` : void 0;
@@ -74,10 +76,10 @@ const WalletSelectOld = ({
       Select,
       {
         selectedValue: getValue(activeWallet == null ? void 0 : activeWallet.id, activeWallet == null ? void 0 : activeWallet.type),
-        onCpslSelectValueChange: (e) => {
+        onCpslSelectValueChange: (e) => __async(void 0, null, function* () {
           const [id, type] = e.detail.split("~");
-          setSelectedWallet({ id, type });
-        },
+          yield setSelectedWallet({ id, type });
+        }),
         showFormattedSelectedItem: true,
         placeholder: "Choose wallet...",
         dropdownMaxHeight,

package/dist/modal/components/{Account → flows/account/Account}/Account.js

@@ -1,24 +1,27 @@
 "use client";
-import "../../../chunk-MMUBH76A.js";
+import {
+  __async
+} from "../../../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled } from "@getpara/react-common";
-import { ExplorerLink, InnerStepContainer, StepContainer } from "../common.js";
+import { ExplorerLink, InnerStepContainer, StepContainer } from "../../../common.js";
 import { CpslButton, CpslIcon, CpslSpinner, CpslText, CpslTileButton } from "@getpara/react-components";
-import { OnRampStep, useModalStore, useModalSessionStore } from "../../stores/index.js";
+import { useStore } from "../../../../../provider/stores/useStore.js";
 import { useEffect, useMemo } from "react";
-import { ModalStep } from "../../utils/steps.js";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useAccount, useWalletState } from "../../../provider/index.js";
+import { useInternalClient } from "../../../../../provider/hooks/utils/useInternalClient.js";
+import { useAccount, useWalletState } from "../../../../../provider/index.js";
 import { EnabledFlow } from "@getpara/web-sdk";
-import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
-import { useAssets } from "../../../provider/providers/AssetsProvider.js";
-import { AccountHeader } from "./AccountHeader.js";
+import { useAccountLinking } from "../../../../../provider/providers/AccountLinkProvider.js";
+import { useAssets } from "../../../../../provider/providers/AssetsProvider.js";
+import { Header } from "./Header.js";
+import { useModalSessionStore } from "../../../../stores/index.js";
 import { AnimatePresence, motion } from "framer-motion";
+import { OnRampStep } from "../../../../../provider/stores/types.js";
 const Account = () => {
-  const onRampConfig = useModalStore((state) => state.onRampConfig);
-  const setStep = useModalStore((state) => state.setStep);
-  const setGuestAddFundsTab = useModalStore((state) => state.setGuestAddFundsTab);
-  const setOnRampStep = useModalStore((state) => state.setOnRampStep);
+  const onRampConfig = useStore((state) => state.onRampConfig);
+  const setAccountView = useStore((state) => state.setAccountView);
+  const setGuestAddFundsTab = useStore((state) => state.setGuestAddFundsTab);
+  const setOnRampStep = useStore((state) => state.setOnRampStep);
   const sendTx = useModalSessionStore((state) => state.sendTx);
   const sendTxStatus = useModalSessionStore((state) => {
     var _a, _b, _c;
@@ -76,7 +79,7 @@ const Account = () => {
             AnimatedMonitorButton,
             {
               onClick: () => {
-                setStep(ModalStep.ACCOUNT_MONITOR_TX);
+                setAccountView("ACCOUNT_MONITOR_TX");
               },
               children: [
                 /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "4px", color }, children: [
@@ -106,52 +109,52 @@ const Account = () => {
       );
     }
     return null;
-  }, [sendTx, sendTxStatus, sendTxResult, setStep]);
+  }, [sendTx, sendTxStatus, sendTxResult, setAccountView]);
   const transactionMonitor = /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: transactionMonitorContent });
   const isGuestMode = embedded.isConnected && embedded.isGuestMode;
   const cantBuyAndWithdraw = (para.externalWalletConnectionType === "CONNECTION_ONLY" || para.externalWalletConnectionType === "VERIFICATION") && !para.userId;
   const isOnRampLoaded = !!onRampConfig;
-  const handleSendClick = () => {
+  const handleSendClick = () => __async(void 0, null, function* () {
     var _a, _b;
     if ((selectedWallet == null ? void 0 : selectedWallet.type) === "COSMOS" || ((_a = embedded.wallets) == null ? void 0 : _a.some((w) => w.id === (selectedWallet == null ? void 0 : selectedWallet.id) && w.isExternal))) {
       const validWallet = (_b = embedded.wallets) == null ? void 0 : _b.find(({ type, isExternal }) => type !== "COSMOS" && !isExternal);
       if (!validWallet) {
         return;
       }
-      setSelectedWallet({ id: validWallet.id, type: validWallet.type });
+      yield setSelectedWallet({ id: validWallet.id, type: validWallet.type });
     }
-    setStep(ModalStep.ACCOUNT_SEND);
-  };
+    setAccountView("ACCOUNT_SEND");
+  });
   const handleBuyClick = () => {
     if (isGuestMode) {
       if (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled) {
-        setStep(ModalStep.ADD_FUNDS_RECEIVE);
+        setAccountView("ACCOUNT_ADD_FUNDS_RECEIVE");
       } else {
         setGuestAddFundsTab(EnabledFlow.BUY);
-        setStep(ModalStep.AUTH_GUEST_SIGNUP);
+        setAccountView("ACCOUNT_GUEST_SIGNUP");
       }
     } else if ((onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) || (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled)) {
       setOnRampStep(OnRampStep.SETTINGS);
-      setStep((onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) ? ModalStep.ADD_FUNDS_BUY : ModalStep.ADD_FUNDS_RECEIVE);
+      setAccountView((onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) ? "ACCOUNT_ADD_FUNDS_BUY" : "ACCOUNT_ADD_FUNDS_RECEIVE");
     }
   };
   const handleSellClick = () => {
     if (isGuestMode) {
       setGuestAddFundsTab(EnabledFlow.WITHDRAW);
-      setStep(ModalStep.AUTH_GUEST_SIGNUP);
+      setAccountView("ACCOUNT_GUEST_SIGNUP");
     } else {
       setOnRampStep(OnRampStep.SETTINGS);
-      setStep(ModalStep.ADD_FUNDS_WITHDRAW);
+      setAccountView("ACCOUNT_ADD_FUNDS_WITHDRAW");
     }
   };
   const handleProfileClick = () => {
-    setStep(ModalStep.ACCOUNT_PROFILE);
+    setAccountView("ACCOUNT_PROFILE");
   };
   useEffect(() => {
     setGuestAddFundsTab();
   }, []);
   return /* @__PURE__ */ jsx(StepContainer, { $wide: true, "data-testid": "para-account-main", children: /* @__PURE__ */ jsxs($InnerStepContainer, { children: [
-    /* @__PURE__ */ jsx(AccountHeader, { withBalance: true }),
+    /* @__PURE__ */ jsx(Header, { withBalance: true }),
     /* @__PURE__ */ jsxs(LowerContainer, { children: [
       isGuestMode && /* @__PURE__ */ jsxs(Fragment, { children: [
         profileBalance && profileBalance.value && profileBalance.value.value > 0 && /* @__PURE__ */ jsxs(Alert, { "data-testid": "para-guest-warning", children: [
@@ -164,7 +167,7 @@ const Account = () => {
             fullWidth: true,
             variant: "primary",
             onClick: () => {
-              setStep(ModalStep.AUTH_GUEST_SIGNUP);
+              setAccountView("ACCOUNT_GUEST_SIGNUP");
             },
             "data-testid": "para-complete-setup",
             children: [

package/dist/modal/components/{Account/AccountHeader.d.ts → flows/account/Account/Header.d.ts}

@@ -1,3 +1,3 @@
-export declare const AccountHeader: ({ withBalance }?: {
+export declare const Header: ({ withBalance }?: {
     withBalance?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/modal/components/{Account/AccountHeader.js → flows/account/Account/Header.js}

@@ -1,15 +1,15 @@
 "use client";
-import "../../../chunk-MMUBH76A.js";
+import "../../../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getExternalWalletIcon, safeStyled } from "@getpara/react-common";
 import { CpslIcon, CpslText } from "@getpara/react-components";
 import { useMemo } from "react";
 import { truncateAddress } from "@getpara/web-sdk";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useAssets } from "../../../provider/providers/AssetsProvider.js";
-import { useAccount, useWallet } from "../../../provider/index.js";
-import { AccountWalletSelect } from "./AccountWalletSelect.js";
-const AccountHeader = ({ withBalance = false } = {}) => {
+import { useInternalClient } from "../../../../../provider/hooks/utils/useInternalClient.js";
+import { useAssets } from "../../../../../provider/providers/AssetsProvider.js";
+import { useAccount, useWallet } from "../../../../../provider/index.js";
+import { WalletSelect } from "./WalletSelect.js";
+const Header = ({ withBalance = false } = {}) => {
   const para = useInternalClient();
   const { connectionType } = useAccount();
   const { profileBalance, totalBalance } = useAssets();
@@ -44,7 +44,7 @@ const AccountHeader = ({ withBalance = false } = {}) => {
         src
       }
     ),
-    connectionType === "both" ? /* @__PURE__ */ jsx(AccountWalletSelect, {}) : /* @__PURE__ */ jsx(StyledName, { variant: "headingXS", weight: "semiBold", color: "contrast", children: name }),
+    connectionType === "both" ? /* @__PURE__ */ jsx(WalletSelect, {}) : /* @__PURE__ */ jsx(StyledName, { variant: "headingXS", weight: "semiBold", color: "contrast", children: name }),
     withBalance && typeof totalBalance === "string" && totalBalance !== "" && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", weight: "medium", style: { visibility: profileBalance ? "visible" : "hidden" }, children: totalBalance })
   ] });
 };
@@ -59,5 +59,5 @@ const StyledName = safeStyled(CpslText)`
   text-align: center;
 `;
 export {
-  AccountHeader
+  Header
 };

package/dist/modal/components/{Account/AccountWalletSelect.d.ts → flows/account/Account/WalletSelect.d.ts}

@@ -1,4 +1,4 @@
-export declare const AccountWalletSelect: () => import("react/jsx-runtime").JSX.Element;
+export declare const WalletSelect: () => import("react/jsx-runtime").JSX.Element;
 export declare const Select: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
     ref?: ((instance: any) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<any> | null | undefined;
 }, {

package/dist/modal/components/{Account/AccountWalletSelect.js → flows/account/Account/WalletSelect.js}

@@ -1,14 +1,16 @@
 "use client";
-import "../../../chunk-MMUBH76A.js";
+import {
+  __async
+} from "../../../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef } from "react";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
+import { useInternalClient } from "../../../../../provider/hooks/utils/useInternalClient.js";
 import { getExternalWalletIcon, safeStyled, useCopyToClipboard } from "@getpara/react-common";
-import { useAccount, useWallet, useWalletState } from "../../../provider/index.js";
+import { useAccount, useWallet, useWalletState } from "../../../../../provider/index.js";
 import { CpslButton, CpslIcon, CpslSelect, CpslSelectItem, CpslText } from "@getpara/react-components";
 import { truncateAddress } from "@getpara/web-sdk";
-import { getMobilePopoverPositionCSS } from "../common.js";
+import { useDropdownPosition } from "../../../../hooks/useDropdownPosition.js";
+import { getMobilePopoverPositionCSS } from "../../../common.js";
 const getValue = (id, type) => {
   return id && type ? `${id}~${type}` : void 0;
 };
@@ -63,7 +65,7 @@ const Wallet = ({
     )
   ] });
 };
-const AccountWalletSelect = () => {
+const WalletSelect = () => {
   var _a, _b, _c;
   const containerRef = useRef(null);
   const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
@@ -84,10 +86,10 @@ const AccountWalletSelect = () => {
     Select,
     {
       selectedValue: getValue(activeWallet == null ? void 0 : activeWallet.id, activeWallet == null ? void 0 : activeWallet.type),
-      onCpslSelectValueChange: (e) => {
+      onCpslSelectValueChange: (e) => __async(void 0, null, function* () {
         const [id, type] = e.detail.split("~");
-        setSelectedWallet({ id, type });
-      },
+        yield setSelectedWallet({ id, type });
+      }),
       showFormattedSelectedItem: true,
       placeholder: "Choose wallet...",
       dropdownMaxHeight,
@@ -188,8 +190,8 @@ const CopyButton = safeStyled(CpslButton)`
   }
 `;
 export {
-  AccountWalletSelect,
   Select,
   SelectContainer,
-  SelectItem
+  SelectItem,
+  WalletSelect
 };

package/dist/modal/components/flows/account/AccountFlow/AccountFlow.d.ts

@@ -0,0 +1,12 @@
+import { TOAuthMethod } from '@getpara/web-sdk';
+interface AccountFlowProps {
+    onClose: () => void;
+    onDisconnect: () => void;
+    isDisconnecting: boolean;
+    oAuthMethods?: TOAuthMethod[];
+    disableEmailLogin: boolean;
+    disablePhoneLogin: boolean;
+    isGuestModeEnabled?: boolean;
+}
+export declare const AccountFlow: (props: AccountFlowProps) => import("react/jsx-runtime").JSX.Element;
+export {};