@getpara/react-sdk-lite 2.11.0 → 2.13.0

package/dist/modal/components/Body/Body.js

@@ -2,57 +2,27 @@
 import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled, WarningBanner, BODY_MOTION_VARIANTS, BODY_TRANSITION, MOBILE_SIZE } from "@getpara/react-common";
-import { IFrameSteps, ModalStep } from "../../utils/steps.js";
-import { VerificationCodeStep } from "../VerificationCodeStep/VerificationCodeStep.js";
-import { useModalStore } from "../../stores/index.js";
-import { BiometricLoginStep } from "../BiometricLoginStep/BiometricLoginStep.js";
-import { Setup2FAStep } from "../Setup2FAStep/Setup2FAStep.js";
-import { LoginDoneStep } from "../LoginDoneStep/LoginDoneStep.js";
 import { EnabledFlow } from "@getpara/web-sdk";
-import { AwaitingBiometricsStep } from "../AwaitingBiometricsStep/AwaitingBiometricsStep.js";
-import { AwaitingWalletCreationStep } from "../AwaitingWalletCreationStep/AwaitingWalletCreationStep.js";
-import { WalletCreationDoneStep } from "../WalletCreationDoneStep/WalletCreationDoneStep.js";
-import { RecoverySecretStep } from "../RecoverySecretStep/RecoverySecretStep.js";
-import { TwoFactorDoneStep } from "../TwoFactorDoneStep/TwoFactorDoneStep.js";
-import { BiometricCreationStep } from "../BiometricCreationStep/BiometricCreationStep.js";
-import { AwaitingOAuthStep } from "../AwaitingOAuthStep/AwaitingOAuthStep.js";
-import { AddFundsAwaiting, AddFundsDone, AddFunds } from "../AddFunds/index.js";
-import { FarcasterOAuthStep } from "../OAuth/FarcasterOAuthStep.js";
 import { Header } from "../Header/Header.js";
-import { AuthMainStep } from "../AuthMainStep/AuthMainStep.js";
-import { Account } from "../Account/Account.js";
-import { AuthOptions } from "../AuthOptions/AuthOptions.js";
-import { ExternalWallets } from "../ExternalWallets/ExternalWallets.js";
-import { ExternalWalletStep } from "../ExternalWalletStep/ExternalWalletStep.js";
 import { AnimatedHeightWrapper } from "./AnimatedHeightWrapper.js";
-import { ChainSwitch } from "../ChainSwitch/ChainSwitch.js";
 import { motion, AnimatePresence } from "framer-motion";
 import { Controls } from "../Controls/Controls.js";
-import { useEffect } from "react";
-import { TelegramOAuthStep } from "../OAuth/TelegramOAuthStep.js";
-import { AwaitingPasswordStep } from "../AwaitingPasswordStep/AwaitingPasswordStep.js";
-import { IFrameStep } from "../IFrameStep/IFrameStep.js";
+import { memo, useEffect, useMemo, useRef } from "react";
 import { useStore } from "../../../provider/stores/useStore.js";
-import { ExternalWalletVerificationStep } from "../ExternalWalletVerificationStep/ExternalWalletVerificationStep.js";
 import { NetworkSpeedBanner } from "@getpara/react-common";
-import { AccountProfile } from "../Account/AccountProfile.js";
-import { AccountProfileLinkOptions } from "../Account/AccountProfileLinkOptions.js";
-import { AccountProfileLink } from "../Account/AccountProfileLink.js";
-import { AccountProfileUnlink } from "../Account/AccountProfileUnlink.js";
-import { ExternalWalletNetworkSelectStep } from "../ExternalWalletNetworkSelectStep/ExternalWalletNetworkSelectStep.js";
-import { AwaitingAccountStep } from "../AwaitingAccountStep/AwaitingAccountStep.js";
-import { SwitchWalletsStep } from "../SwitchWalletsStep/SwitchWalletsStep.js";
 import { Footer } from "../Footer/Footer.js";
 import { renderTextWithLinks } from "../../utils/renderTextWithLinks.js";
-import { AccountWallet } from "../Account/AccountWallet.js";
-import { AccountSend } from "../Account/AccountSend/index.js";
-import { AccountMonitorTx } from "../Account/AccountMonitorTx.js";
+import { AuthFlow } from "../flows/auth/AuthFlow/AuthFlow.js";
+import { IFrame } from "../shared/IFrame.js";
+import { AccountFlow } from "../flows/account/AccountFlow/AccountFlow.js";
+import { useAuthView } from "../../hooks/useAuthView.js";
+import { useLogout } from "../../../provider/index.js";
 const MIN_HEIGHT = {
-  [ModalStep.ADD_FUNDS_AWAITING]: "680px"
+  ACCOUNT_ADD_FUNDS_AWAITING: "680px"
 };
+const MemoizedIFrame = memo(IFrame);
 const Body = ({
   oAuthMethods,
-  twoFactorAuthEnabled,
   disableEmailLogin,
   disablePhoneLogin,
   isGuestModeEnabled = false,
@@ -60,40 +30,89 @@ const Body = ({
   onDisconnect,
   isDisconnecting
 }) => {
-  const currentStep = useModalStore((state) => state.step);
-  const stepDirection = useModalStore((state) => state.stepDirection);
-  const setStepDirection = useModalStore((state) => state.setStepDirection);
-  const setAccountAddFundTab = useModalStore((state) => state.setAccountAddFundTab);
-  const modalError = useModalStore((state) => state.modalError);
-  const setModalError = useModalStore((state) => state.setModalError);
+  const { authView } = useAuthView();
+  const { logout } = useLogout();
+  const accountView = useStore((state) => state.accountView);
+  const setAccountAddFundTab = useStore((state) => state.setAccountAddFundTab);
+  const modalError = useStore((state) => state.modalError);
+  const setModalError = useStore((state) => state.setModalError);
   const embeddedModal = useStore((state) => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.embeddedModal;
   });
-  const Content = () => {
-    switch (currentStep) {
-      case ModalStep.AUTH_MAIN: {
+  const paraState = useStore((state) => state.paraState);
+  const isUsingIFrame = useStore((state) => !!state.iFrameUrl);
+  const showPostAuthFlow = useStore((state) => state.showPostAuthFlow);
+  const isNavigatingBack = useStore((state) => state.isNavigatingBack);
+  const setIsNavigatingBack = useStore((state) => state.setIsNavigatingBack);
+  const screenKey = useMemo(() => {
+    if (["ACCOUNT_ADD_FUNDS_BUY", "ACCOUNT_ADD_FUNDS_RECEIVE", "ACCOUNT_ADD_FUNDS_WITHDRAW"].includes(accountView)) {
+      return "ACCOUNT_ADD_FUNDS";
+    }
+    if (["ACCOUNT_SEND", "ACCOUNT_SEND_ASSET", "ACCOUNT_SEND_NETWORK"].includes(accountView)) {
+      return "ACCOUNT_SEND";
+    }
+    return authView || accountView;
+  }, [authView, accountView]);
+  const prevIsUsingIFrameRef = useRef(isUsingIFrame);
+  const prevScreenKeyRef = useRef(screenKey);
+  const directionRef = useRef(1);
+  if (screenKey !== prevScreenKeyRef.current) {
+    const isBackward = (screenKey === "AUTH_MAIN" || screenKey === "ACCOUNT_MAIN") && prevScreenKeyRef.current !== "AUTH_MAIN" && prevScreenKeyRef.current !== "ACCOUNT_MAIN";
+    directionRef.current = isBackward ? -1 : 1;
+    prevScreenKeyRef.current = screenKey;
+  }
+  useEffect(() => {
+    prevIsUsingIFrameRef.current = isUsingIFrame;
+  }, [isUsingIFrame]);
+  useEffect(() => {
+    if ((paraState == null ? void 0 : paraState.corePhase) === "error") {
+      logout();
+    }
+  }, [paraState == null ? void 0 : paraState.corePhase]);
+  const Content = useMemo(() => {
+    if (isUsingIFrame || prevIsUsingIFrameRef.current && !isUsingIFrame && isNavigatingBack) {
+      return null;
+    }
+    if (isNavigatingBack) {
+      setIsNavigatingBack(false);
+    }
+    switch (paraState == null ? void 0 : paraState.corePhase) {
+      case "error":
+      case "auth_flow":
+      case "wallet_flow":
+      case "logging_out": {
         return /* @__PURE__ */ jsx(
-          AuthMainStep,
+          AuthFlow,
           {
             oAuthMethods,
             disableEmailLogin,
             disablePhoneLogin,
-            isGuestModeEnabled
+            isGuestModeEnabled,
+            onClose
           }
         );
       }
-      case ModalStep.EX_WALLET_MORE: {
-        return /* @__PURE__ */ jsx(ExternalWallets, {});
-      }
-      case ModalStep.AWAITING_GUEST_WALLET_CREATION: {
-        return /* @__PURE__ */ jsx(AwaitingWalletCreationStep, { isGuestMode: true });
-      }
-      case ModalStep.AUTH_MORE:
-      case ModalStep.AUTH_GUEST_SIGNUP: {
+      case "authenticated":
+      case "guest_mode": {
+        if (showPostAuthFlow) {
+          return /* @__PURE__ */ jsx(
+            AuthFlow,
+            {
+              oAuthMethods,
+              disableEmailLogin,
+              disablePhoneLogin,
+              isGuestModeEnabled,
+              onClose
+            }
+          );
+        }
         return /* @__PURE__ */ jsx(
-          AuthOptions,
+          AccountFlow,
           {
+            onDisconnect,
+            isDisconnecting,
+            onClose,
             oAuthMethods,
             disableEmailLogin,
             disablePhoneLogin,
@@ -101,196 +120,65 @@ const Body = ({
           }
         );
       }
-      case ModalStep.VERIFICATIONS: {
-        return /* @__PURE__ */ jsx(VerificationCodeStep, {});
-      }
-      case ModalStep.EXTERNAL_WALLET_VERIFICATION: {
-        return /* @__PURE__ */ jsx(ExternalWalletVerificationStep, {});
-      }
-      case ModalStep.BIOMETRIC_LOGIN: {
-        return /* @__PURE__ */ jsx(BiometricLoginStep, {});
-      }
-      case ModalStep.SETUP_2FA:
-      case ModalStep.VERIFY_2FA: {
-        return /* @__PURE__ */ jsx(Setup2FAStep, { onClose });
-      }
-      case ModalStep.LOGIN_DONE: {
-        return /* @__PURE__ */ jsx(LoginDoneStep, { onClose });
-      }
-      case ModalStep.AWAITING_BIOMETRIC_LOGIN:
-      case ModalStep.AWAITING_BIOMETRIC_CREATION: {
-        return /* @__PURE__ */ jsx(AwaitingBiometricsStep, {});
-      }
-      case ModalStep.AWAITING_PASSWORD_LOGIN:
-      case ModalStep.AWAITING_PASSWORD_CREATION: {
-        return /* @__PURE__ */ jsx(AwaitingPasswordStep, {});
-      }
-      case ModalStep.AWAITING_WALLET_CREATION: {
-        return /* @__PURE__ */ jsx(AwaitingWalletCreationStep, {});
-      }
-      case ModalStep.WALLET_CREATION_DONE: {
-        return /* @__PURE__ */ jsx(WalletCreationDoneStep, { twoFactorAuthEnabled, onClose });
-      }
-      case ModalStep.SECRET: {
-        return /* @__PURE__ */ jsx(RecoverySecretStep, {});
-      }
-      case ModalStep.TWO_FACTOR_DONE: {
-        return /* @__PURE__ */ jsx(TwoFactorDoneStep, { onClose });
-      }
-      case ModalStep.BIOMETRIC_CREATION: {
-        return /* @__PURE__ */ jsx(BiometricCreationStep, {});
-      }
-      case ModalStep.AWAITING_OAUTH: {
-        return /* @__PURE__ */ jsx(AwaitingOAuthStep, {});
-      }
-      case ModalStep.FARCASTER_OAUTH: {
-        return /* @__PURE__ */ jsx(FarcasterOAuthStep, {});
-      }
-      case ModalStep.TELEGRAM_OAUTH: {
-        return /* @__PURE__ */ jsx(TelegramOAuthStep, {});
-      }
-      case ModalStep.ADD_FUNDS_BUY:
-      case ModalStep.ADD_FUNDS_RECEIVE:
-      case ModalStep.ADD_FUNDS_WITHDRAW: {
-        return /* @__PURE__ */ jsx(AddFunds, { "data-testid": "add-funds" });
-      }
-      case ModalStep.ADD_FUNDS_AWAITING: {
-        return /* @__PURE__ */ jsx(AddFundsAwaiting, {});
-      }
-      case ModalStep.ADD_FUNDS_SUCCESS: {
-        return /* @__PURE__ */ jsx(AddFundsDone, { isSuccess: true, onClose });
-      }
-      case ModalStep.ADD_FUNDS_FAILURE: {
-        return /* @__PURE__ */ jsx(AddFundsDone, { onClose });
-      }
-      case ModalStep.ACCOUNT_MAIN: {
-        return /* @__PURE__ */ jsx(Account, {});
-      }
-      case ModalStep.ACCOUNT_PROFILE: {
-        return /* @__PURE__ */ jsx(AccountProfile, { onDisconnect, isDisconnecting });
-      }
-      case ModalStep.ACCOUNT_PROFILE_LIST: {
-        return /* @__PURE__ */ jsx(AccountProfileLinkOptions, {});
-      }
-      case ModalStep.ACCOUNT_PROFILE_ADD: {
-        return /* @__PURE__ */ jsx(AccountProfileLink, {});
-      }
-      case ModalStep.ACCOUNT_PROFILE_REMOVE: {
-        return /* @__PURE__ */ jsx(AccountProfileUnlink, {});
-      }
-      case ModalStep.ACCOUNT_WALLET: {
-        return /* @__PURE__ */ jsx(AccountWallet, {});
-      }
-      case ModalStep.EX_WALLET_SELECTED: {
-        return /* @__PURE__ */ jsx(ExternalWalletStep, {});
-      }
-      case ModalStep.CHAIN_SWITCH: {
-        return /* @__PURE__ */ jsx(ChainSwitch, {});
-      }
-      case ModalStep.EX_WALLET_NETWORK_SELECT: {
-        return /* @__PURE__ */ jsx(ExternalWalletNetworkSelectStep, { type: "CONNECT" });
-      }
-      case ModalStep.ADD_EX_WALLET_NETWORK_SELECT: {
-        return /* @__PURE__ */ jsx(ExternalWalletNetworkSelectStep, { type: "ADD_EXTERNAL" });
-      }
-      case ModalStep.LINK_EX_WALLET_NETWORK_SELECT: {
-        return /* @__PURE__ */ jsx(ExternalWalletNetworkSelectStep, { type: "ACCOUNT_LINKING" });
-      }
-      case ModalStep.ADD_EX_WALLET_MORE: {
-        return /* @__PURE__ */ jsx(ExternalWallets, { isAddingWallets: true });
-      }
-      case ModalStep.ADD_EX_WALLET_SELECTED: {
-        return /* @__PURE__ */ jsx(ExternalWalletStep, { isAddingWallets: true });
-      }
-      case ModalStep.ADD_EX_WALLET_NETWORK_SELECT: {
-        return /* @__PURE__ */ jsx(ExternalWalletNetworkSelectStep, { type: "ADD_EXTERNAL" });
-      }
-      case ModalStep.AWAITING_ACCOUNT: {
-        return /* @__PURE__ */ jsx(AwaitingAccountStep, {});
-      }
-      case ModalStep.SWITCH_WALLETS: {
-        return /* @__PURE__ */ jsx(SwitchWalletsStep, {});
-      }
-      case ModalStep.ACCOUNT_SEND: {
-        return /* @__PURE__ */ jsx(AccountSend, { step: "SEND_FORM" });
-      }
-      case ModalStep.ACCOUNT_SEND_ASSET: {
-        return /* @__PURE__ */ jsx(AccountSend, { step: "SEND_ASSET" });
-      }
-      case ModalStep.ACCOUNT_SEND_NETWORK: {
-        return /* @__PURE__ */ jsx(AccountSend, { step: "SEND_NETWORK" });
-      }
-      case ModalStep.ACCOUNT_MONITOR_TX: {
-        return /* @__PURE__ */ jsx(AccountMonitorTx, {});
-      }
-      default: {
-        if (IFrameSteps.includes(currentStep)) {
-          return null;
-        }
-      }
+      default:
+        console.warn(`No component found for phase: ${paraState == null ? void 0 : paraState.corePhase}`);
+        return null;
     }
-  };
+  }, [
+    isUsingIFrame,
+    isNavigatingBack,
+    showPostAuthFlow,
+    paraState,
+    oAuthMethods,
+    disableEmailLogin,
+    disablePhoneLogin,
+    isGuestModeEnabled,
+    onClose,
+    onDisconnect,
+    isDisconnecting
+  ]);
   useEffect(() => {
-    switch (currentStep) {
-      case ModalStep.ADD_FUNDS_BUY:
+    switch (accountView) {
+      case "ACCOUNT_ADD_FUNDS_BUY":
         setAccountAddFundTab(EnabledFlow.BUY);
         break;
-      case ModalStep.ADD_FUNDS_RECEIVE:
+      case "ACCOUNT_ADD_FUNDS_RECEIVE":
         setAccountAddFundTab(EnabledFlow.RECEIVE);
         break;
-      case ModalStep.ADD_FUNDS_WITHDRAW:
+      case "ACCOUNT_ADD_FUNDS_WITHDRAW":
         setAccountAddFundTab(EnabledFlow.WITHDRAW);
         break;
       default:
         break;
     }
-  }, [currentStep]);
+  }, [accountView]);
   return /* @__PURE__ */ jsxs(Container, { slot: "body", "data-testid": "modal-content", children: [
     !embeddedModal && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Controls, { onClose }),
       /* @__PURE__ */ jsx(Header, {})
     ] }),
-    /* @__PURE__ */ jsxs(AnimatedWrapper, { noAnimate: IFrameSteps.includes(currentStep), children: [
-      /* @__PURE__ */ jsx(
-        AnimatePresence,
+    /* @__PURE__ */ jsxs(AnimatedWrapper, { noAnimate: isUsingIFrame, children: [
+      /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: directionRef.current, children: /* @__PURE__ */ jsxs(
+        BodyContainer,
         {
-          mode: "popLayout",
-          initial: false,
-          onExitComplete: () => {
-            setStepDirection(1);
-          },
-          custom: stepDirection,
-          children: /* @__PURE__ */ jsxs(
-            BodyContainer,
-            {
-              "data-step": currentStep.toLowerCase().replace(/_/g, "-"),
-              custom: stepDirection,
-              variants: BODY_MOTION_VARIANTS,
-              initial: "enter",
-              animate: "center",
-              exit: "exit",
-              transition: BODY_TRANSITION,
-              children: [
-                /* @__PURE__ */ jsxs(
-                  InnerContainer,
-                  {
-                    $embeddedModal: !!embeddedModal,
-                    $step: currentStep,
-                    $isIFrameStep: IFrameSteps.includes(currentStep),
-                    children: [
-                      !IFrameSteps.includes(currentStep) && /* @__PURE__ */ jsx(NetworkSpeedBanner, { fontSize: "12px", iconSize: "16px" }),
-                      Content()
-                    ]
-                  }
-                ),
-                modalError && /* @__PURE__ */ jsx(WarningBanner, { onClose: () => setModalError(void 0), children: renderTextWithLinks(modalError) })
-              ]
-            },
-            ["ADD_FUNDS_BUY", "ADD_FUNDS_RECEIVE", "ADD_FUNDS_WITHDRAW"].includes(currentStep) ? "ADD_FUNDS" : ["ACCOUNT_SEND", "ACCOUNT_SEND_ASSET", "ACCOUNT_SEND_NETWORK"].includes(currentStep) ? "ACCOUNT_SEND" : currentStep
-          )
-        }
-      ),
-      /* @__PURE__ */ jsx(IFrameStep, {}),
+          custom: directionRef.current,
+          "data-step": (authView || accountView).toLowerCase().replace(/_/g, "-"),
+          variants: BODY_MOTION_VARIANTS,
+          initial: "enter",
+          animate: "center",
+          exit: "exit",
+          transition: BODY_TRANSITION,
+          children: [
+            /* @__PURE__ */ jsxs(InnerContainer, { $embeddedModal: !!embeddedModal, $step: accountView, $isIFrameStep: isUsingIFrame, children: [
+              !isUsingIFrame && /* @__PURE__ */ jsx(NetworkSpeedBanner, { fontSize: "12px", iconSize: "16px" }),
+              Content
+            ] }),
+            modalError && /* @__PURE__ */ jsx(WarningBanner, { onClose: () => setModalError(void 0), children: renderTextWithLinks(modalError) })
+          ]
+        },
+        screenKey
+      ) }),
+      /* @__PURE__ */ jsx(MemoizedIFrame, {}),
       /* @__PURE__ */ jsx(Footer, {})
     ] })
   ] });

package/dist/modal/components/Controls/ChainSelect.js

@@ -6,10 +6,10 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { CpslText } from "@getpara/react-components";
 import { getNetworkFromChainId, getNetworkName, safeStyled } from "@getpara/react-common";
 import { useEffect, useRef } from "react";
-import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
 import { useWallet } from "../../../provider/index.js";
 import { HeaderSelect, HeaderSelectContainer, HeaderSelectItem, NetworkIcon } from "../common.js";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { useDropdownPosition } from "../../hooks/useDropdownPosition.js";
 const Chain = ({
   chain: { id, name },
   slot,
@@ -48,7 +48,7 @@ const ChainSelect = () => {
     return null;
   }
   const chainIdToUse = chainIdSwitchingTo != null ? chainIdSwitchingTo : chainId;
-  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(HeaderSelectContainer, { ref: containerRef, id: "inputContainer", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(HeaderSelectContainer, { ref: containerRef, children: /* @__PURE__ */ jsxs(
     HeaderSelect,
     {
       selectedValue: (_a = chainIdToUse == null ? void 0 : chainIdToUse.toString()) != null ? _a : "",
@@ -57,10 +57,9 @@ const ChainSelect = () => {
       },
       showFormattedSelectedItem: true,
       placeholder: "Choose chain...",
-      anchorElId: "inputContainer",
       dropdownMaxHeight,
       $width: dropdownWidth != null ? dropdownWidth : 0,
-      $top: (mobileAnchor != null ? mobileAnchor : 0) + 16 + 1,
+      $top: mobileAnchor != null ? mobileAnchor : void 0,
       autoWidth: true,
       alignCenter: true,
       selectedItemVariant: "bodyXS",

package/dist/modal/components/Controls/Controls.js

@@ -3,7 +3,6 @@ import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { CpslIcon } from "@getpara/react-components";
 import { safeStyled } from "@getpara/react-common";
-import { useModalStore } from "../../stores/index.js";
 import { useGoBack } from "../../hooks/useGoBack.js";
 import { ChainSelect } from "./ChainSelect.js";
 import { HeaderButton } from "@getpara/react-common";
@@ -14,8 +13,7 @@ const Controls = ({ onClose }) => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.bareModal;
   });
-  const hasPreviousStep = useModalStore((state) => state.hasPreviousStep());
-  const goBack = useGoBack();
+  const { goBack, canGoBack } = useGoBack();
   const { isControls } = useStepTitle();
   const handleBackClick = () => {
     goBack();
@@ -26,7 +24,7 @@ const Controls = ({ onClose }) => {
       {
         variant: "ghost",
         style: {
-          visibility: hasPreviousStep ? "visible" : "hidden"
+          visibility: canGoBack ? "visible" : "hidden"
         },
         onClick: handleBackClick,
         "data-testid": "modal-back-button",

package/dist/modal/components/Footer/Footer.js

@@ -3,19 +3,10 @@ import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled, PARA_TERMS_AND_CONDITIONS } from "@getpara/react-common";
 import { CpslIcon, CpslText } from "@getpara/react-components";
-import { useModalStore } from "../../stores/index.js";
-import { ModalStep } from "../../utils/steps.js";
-import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
+import { useAuthView } from "../../hooks/useAuthView.js";
 const Footer = () => {
-  const currentStep = useModalStore((state) => state.step);
-  const { accountLinkInProgress } = useAccountLinking();
-  const showFooter = !accountLinkInProgress && [
-    ModalStep.AUTH_MAIN,
-    ModalStep.AUTH_MORE,
-    ModalStep.EX_WALLET_NETWORK_SELECT,
-    ModalStep.EX_WALLET_MORE,
-    ModalStep.EX_WALLET_SELECTED
-  ].includes(currentStep);
+  const { authView } = useAuthView();
+  const showFooter = authView === "AUTH_MAIN" || authView === "AUTH_ALL_OPTIONS" || authView === "AUTH_ALL_EXTERNAL_WALLETS";
   if (!showFooter) {
     return null;
   }

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

@@ -5,22 +5,23 @@ import { getAuthDisplay, safeStyled, BODY_MOTION_VARIANTS, BODY_TRANSITION } fro
 import { useStepTitle } from "./hooks/useStepTitle.js";
 import { CenteredText } from "../common.js";
 import { AnimatePresence, motion } from "framer-motion";
-import { useModalStore } from "../../stores/index.js";
 import { useAccount } from "../../../provider/index.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { CpslIcon, CpslText } from "@getpara/react-components";
-import { ModalStep } from "../../utils/steps.js";
 import { useMemo } from "react";
-const StepTitle = () => {
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useAuthView } from "../../hooks/useAuthView.js";
+const StepTitle = ({ title }) => {
   const para = useInternalClient();
-  const currentStep = useModalStore((state) => state.step);
-  const { title, isTitleDisplayed } = useStepTitle();
+  const accountView = useStore((state) => state.accountView);
+  const { authView } = useAuthView();
+  const { isTitleDisplayed } = useStepTitle();
   const { isConnected, connectionType } = useAccount();
   const content = useMemo(() => {
     if (!isTitleDisplayed) {
       return null;
     }
-    if ((para == null ? void 0 : para.authInfo) && connectionType !== "external" && currentStep === ModalStep.ACCOUNT_MAIN) {
+    if (!authView && (para == null ? void 0 : para.authInfo) && isConnected && connectionType !== "external" && accountView === "ACCOUNT_MAIN") {
       const { name, icon, src } = getAuthDisplay(para.authInfo);
       return /* @__PURE__ */ jsxs(AuthDisplay, { children: [
         /* @__PURE__ */ jsx(CpslIcon, { src, icon, size: "14px", rounded: !!src }),
@@ -28,18 +29,16 @@ const StepTitle = () => {
       ] });
     }
     return /* @__PURE__ */ jsx(CenteredText, { weight: "semiBold", color: "secondary", children: title });
-  }, [isTitleDisplayed, para, currentStep, isConnected, connectionType, title]);
+  }, [isTitleDisplayed, para, accountView, isConnected, connectionType, title, authView]);
   return /* @__PURE__ */ jsx("div", { style: { height: "100%", width: "100%" }, children: content });
 };
 const Header = () => {
-  const { isControls } = useStepTitle();
-  const stepDirection = useModalStore((state) => state.stepDirection);
-  const currentStep = useModalStore((state) => state.step);
-  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: stepDirection, children: /* @__PURE__ */ jsx(
+  const { isControls, title } = useStepTitle();
+  const accountView = useStore((state) => state.accountView);
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
     Container,
     {
       $isVisible: !isControls,
-      custom: stepDirection,
       variants: BODY_MOTION_VARIANTS,
       initial: "enter",
       animate: "center",
@@ -47,9 +46,9 @@ const Header = () => {
       transition: BODY_TRANSITION,
       slot: "header",
       id: "header",
-      children: /* @__PURE__ */ jsx(StepTitle, {})
+      children: /* @__PURE__ */ jsx(StepTitle, { title })
     },
-    ["ADD_FUNDS_BUY", "ADD_FUNDS_RECEIVE", "ADD_FUNDS_WITHDRAW"].includes(currentStep) ? "ADD_FUNDS" : currentStep
+    ["ADD_FUNDS_BUY", "ADD_FUNDS_RECEIVE", "ADD_FUNDS_WITHDRAW"].includes(accountView) ? "ADD_FUNDS" : title
   ) });
 };
 const Container = safeStyled(motion.div)`

package/dist/modal/components/Header/hooks/useStepTitle.d.ts

@@ -1,7 +1,7 @@
 export declare const signUpOrLogInTitle = "Sign Up or Login";
 export declare const connectWalletTitle = "Connect Wallet";
 export declare const useStepTitle: () => {
-    title: any;
+    title: string | null;
     isTitleDisplayed: boolean;
     isControls: boolean | undefined;
 };