@getpara/react-sdk-lite 2.0.0-alpha.33

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

@@ -0,0 +1,354 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { safeStyled } from "@getpara/react-common";
+import { IFrameSteps, ModalStep } from "../../utils/steps.js";
+import { CpslAlert, CpslIcon } from "@getpara/react-components";
+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 { BODY_MOTION_VARIANTS, BODY_TRANSITION, MOBILE_SIZE } from "../../constants/constants.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 { Hero } from "../Hero/Hero.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, useState } from "react";
+import { TelegramOAuthStep } from "../OAuth/TelegramOAuthStep.js";
+import { AwaitingPasswordStep } from "../AwaitingPasswordStep/AwaitingPasswordStep.js";
+import { IFrameStep } from "../IFrameStep/IFrameStep.js";
+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 { AwaitingIFrameStep } from "../AwaitingIFrameStep/AwaitingIFrameStep.js";
+const MIN_HEIGHT = {
+  [ModalStep.ADD_FUNDS_AWAITING]: "680px"
+};
+const PADDING_TOP = {
+  [ModalStep.TELEGRAM_OAUTH]: "36px"
+};
+const PADDING_BOTTOM = {
+  [ModalStep.TELEGRAM_OAUTH]: "16px"
+};
+const PADDING_X = {
+  [ModalStep.ACCOUNT_PROFILE]: "32px"
+};
+const Body = ({
+  oAuthMethods,
+  twoFactorAuthEnabled,
+  disableEmailLogin,
+  disablePhoneLogin,
+  isGuestModeEnabled = false,
+  onClose
+}) => {
+  const currentStep = useModalStore((state) => state.step);
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const stepDirection = useModalStore((state) => state.stepDirection);
+  const setStepDirection = useModalStore((state) => state.setStepDirection);
+  const accountAddFundTab = useModalStore((state) => state.accountAddFundTab);
+  const setAccountAddFundTab = useModalStore((state) => state.setAccountAddFundTab);
+  const embeddedModal = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.embeddedModal;
+  });
+  const appName = useStore((state) => state.appName);
+  const [isTestModeAlert, setIsTestModeAlert] = useState(onRampConfig == null ? void 0 : onRampConfig.testMode);
+  const Content = () => {
+    switch (currentStep) {
+      case ModalStep.AUTH_MAIN: {
+        return /* @__PURE__ */ jsx(
+          AuthMainStep,
+          {
+            oAuthMethods,
+            disableEmailLogin,
+            disablePhoneLogin,
+            isGuestModeEnabled
+          }
+        );
+      }
+      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: {
+        return /* @__PURE__ */ jsx(
+          AuthOptions,
+          {
+            oAuthMethods,
+            disableEmailLogin,
+            disablePhoneLogin,
+            isGuestModeEnabled
+          }
+        );
+      }
+      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, { onClose });
+      }
+      case ModalStep.ACCOUNT_PROFILE: {
+        return /* @__PURE__ */ jsx(AccountProfile, {});
+      }
+      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.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, {});
+      }
+      case ModalStep.AWAITING_IFRAME: {
+        return /* @__PURE__ */ jsx(AwaitingIFrameStep, {});
+      }
+      default: {
+        if (IFrameSteps.includes(currentStep)) {
+          return null;
+        }
+      }
+    }
+  };
+  useEffect(() => {
+    if (!isTestModeAlert && (onRampConfig == null ? void 0 : onRampConfig.testMode)) {
+      setIsTestModeAlert(true);
+    }
+  }, [onRampConfig == null ? void 0 : onRampConfig.testMode]);
+  useEffect(() => {
+    switch (currentStep) {
+      case ModalStep.ADD_FUNDS_BUY:
+        setAccountAddFundTab(EnabledFlow.BUY);
+        break;
+      case ModalStep.ADD_FUNDS_RECEIVE:
+        setAccountAddFundTab(EnabledFlow.RECEIVE);
+        break;
+      case ModalStep.ADD_FUNDS_WITHDRAW:
+        setAccountAddFundTab(EnabledFlow.WITHDRAW);
+        break;
+      default:
+        break;
+    }
+  }, [currentStep]);
+  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, { children: [
+      /* @__PURE__ */ jsx(
+        AnimatePresence,
+        {
+          mode: "popLayout",
+          initial: false,
+          onExitComplete: () => {
+            setStepDirection(1);
+          },
+          custom: stepDirection,
+          children: /* @__PURE__ */ jsxs(
+            BodyContainer,
+            {
+              custom: stepDirection,
+              variants: BODY_MOTION_VARIANTS,
+              initial: "enter",
+              animate: "center",
+              exit: "exit",
+              transition: BODY_TRANSITION,
+              children: [
+                /* @__PURE__ */ jsx(Hero, {}),
+                /* @__PURE__ */ jsxs(
+                  InnerContainer,
+                  {
+                    $embeddedModal: !!embeddedModal,
+                    $step: currentStep,
+                    $isIFrameStep: IFrameSteps.includes(currentStep),
+                    children: [
+                      /* @__PURE__ */ jsx(NetworkSpeedBanner, { fontSize: "12px", iconSize: "16px" }),
+                      Content(),
+                      (onRampConfig == null ? void 0 : onRampConfig.testMode) && [
+                        ModalStep.ADD_FUNDS_BUY,
+                        ModalStep.ADD_FUNDS_WITHDRAW,
+                        ModalStep.ADD_FUNDS_AWAITING,
+                        ModalStep.ADD_FUNDS_FAILURE,
+                        ModalStep.ADD_FUNDS_SUCCESS
+                      ].includes(currentStep) && isTestModeAlert && accountAddFundTab !== EnabledFlow.RECEIVE && /* @__PURE__ */ jsx(TestModeAlert, { children: /* @__PURE__ */ jsxs("div", { style: { fontSize: "14px" }, children: [
+                        "This Para Modal is configured to run on-ramp services in ",
+                        /* @__PURE__ */ jsx("b", { children: "test mode" }),
+                        " only, for development purposes. If you are a user of ",
+                        appName,
+                        ", please contact support.",
+                        /* @__PURE__ */ jsx(CloseButton, { onClick: () => setIsTestModeAlert(false), children: /* @__PURE__ */ jsx(CloseX, { icon: "x" }) })
+                      ] }) })
+                    ]
+                  }
+                )
+              ]
+            },
+            ["ADD_FUNDS_BUY", "ADD_FUNDS_RECEIVE", "ADD_FUNDS_WITHDRAW"].includes(currentStep) ? "ADD_FUNDS" : currentStep
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(IFrameStep, {})
+    ] })
+  ] });
+};
+const Container = safeStyled.div`
+  position: relative;
+`;
+const AnimatedWrapper = safeStyled(AnimatedHeightWrapper)`
+  margin-top: -16px;
+`;
+const BodyContainer = safeStyled(motion.div)`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  will-change: auto !important;
+`;
+const InnerContainer = safeStyled.div`
+  z-index: 1;
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 24px;
+  padding: ${({ $embeddedModal, $step, $isIFrameStep }) => {
+  var _a, _b, _c;
+  return $isIFrameStep ? "0px" : $embeddedModal ? "12px 0px 0px" : `${(_a = PADDING_TOP[$step]) != null ? _a : "72px"} ${(_b = PADDING_X[$step]) != null ? _b : "72px"} ${(_c = PADDING_BOTTOM[$step]) != null ? _c : "32px"}`;
+}};
+  min-height: ${({ $step }) => {
+  var _a;
+  return (_a = MIN_HEIGHT[$step]) != null ? _a : "auto";
+}};
+  height: ${({ $step }) => {
+  var _a;
+  return (_a = MIN_HEIGHT[$step]) != null ? _a : "auto";
+}};
+
+  @media (max-width: ${MOBILE_SIZE}px) {
+    padding: ${({ $embeddedModal, $step, $isIFrameStep }) => {
+  var _a;
+  return $isIFrameStep ? "0px" : $embeddedModal ? "12px 0px 0px" : `${(_a = PADDING_TOP[$step]) != null ? _a : "72px"} 16px 0px`;
+}};
+  }
+
+  cpsl-auth-modal.force-mobile-media & {
+    padding: 72px 16px 0px;
+  }
+`;
+const TestModeAlert = safeStyled(CpslAlert)`
+  --container-padding-end: 40px;
+  position: absolute;
+  bottom: 16px;
+  left: 16px;
+  right: 16px;
+  z-index: 1000;
+`;
+const CloseButton = safeStyled.button`
+  background-color: transparent;
+  border: none;
+  padding: 4px;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  right: 0;
+`;
+const CloseX = safeStyled(CpslIcon)`
+  --icon-color: var(--cpsl-color-foreground-0);
+`;
+export {
+  Body
+};

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

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

package/dist/modal/components/ChainSwitch/ChainSwitch.js

@@ -0,0 +1,95 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
+import { CenteredText, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
+import { useEffect, useMemo } from "react";
+import { useModalStore } from "../../stores/index.js";
+import { safeStyled } from "@getpara/react-common";
+import { useCopyToClipboard } from "@getpara/react-common";
+import { ModalStep } from "../../utils/steps.js";
+import { routeMobileExternalWallet } from "../../utils/routeMobileExternalWallet.js";
+import { NETWORK_NOT_SUPPORTED_ERROR } from "../../constants/constants.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+const ChainSwitch = () => {
+  const [isCopied, copy] = useCopyToClipboard();
+  const externalWalletError = useModalStore((state) => state.externalWalletError);
+  const setStep = useModalStore((state) => state.setStep);
+  const setStepDirection = useModalStore((state) => state.setStepDirection);
+  const { switchChain, wallet, qrUri, chainIdSwitchingTo, walletDisplayHelpers } = useExternalWallets();
+  useEffect(() => {
+    if ((wallet == null ? void 0 : wallet.type) === "COSMOS") {
+      routeMobileExternalWallet(qrUri);
+    }
+  }, [qrUri, wallet]);
+  useEffect(() => {
+    if (!wallet) {
+      setStepDirection(-1);
+      setStep(ModalStep.ACCOUNT_MAIN);
+    }
+  }, [wallet]);
+  const handleTryAgainClick = () => __async(void 0, null, function* () {
+    if (chainIdSwitchingTo) {
+      yield switchChain(chainIdSwitchingTo);
+    }
+  });
+  const handleCopy = () => {
+    if (qrUri) {
+      copy(qrUri);
+    }
+  };
+  const Content = useMemo(() => {
+    var _a;
+    if (!wallet) {
+      return null;
+    }
+    const { isCosmosMobileWallet } = walletDisplayHelpers;
+    if (isCosmosMobileWallet) {
+      return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+        /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", children: "Scan with your mobile device to switch networks" }),
+        /* @__PURE__ */ jsx(QRContainer, { children: !qrUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: qrUri, imageSrc: wallet.iconUrl }) }),
+        /* @__PURE__ */ jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, children: [
+          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
+          isCopied ? "Copied" : "Copy Link"
+        ] })
+      ] }) });
+    }
+    return /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      !(externalWalletError == null ? void 0 : externalWalletError.length) ? /* @__PURE__ */ jsx(CenteredText, { color: "contrast", weight: "semiBold", children: `Confirm the request to change networks in your ${wallet.name} wallet.` }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(ErrorContainer, { children: [
+          /* @__PURE__ */ jsx(ErrorIcon, { icon: "alertCircle" }),
+          /* @__PURE__ */ jsx(CenteredText, { weight: "semiBold", color: "error", children: externalWalletError[0] })
+        ] }),
+        externalWalletError[1] && /* @__PURE__ */ jsx(CenteredText, { color: "secondary", weight: "medium", children: externalWalletError[1] })
+      ] }),
+      ((_a = externalWalletError == null ? void 0 : externalWalletError[0]) == null ? void 0 : _a.toLowerCase()) !== NETWORK_NOT_SUPPORTED_ERROR && /* @__PURE__ */ jsxs(CpslButton, { variant: "secondary", onClick: handleTryAgainClick, children: [
+        /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "refresh" }),
+        "Try Again"
+      ] })
+    ] });
+  }, [wallet, walletDisplayHelpers, externalWalletError, qrUri]);
+  if (!wallet) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Container, { children: Content });
+};
+const Container = safeStyled(StepContainer)`
+  flex: 1;
+  justify-content: space-between;
+`;
+const ErrorContainer = safeStyled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+`;
+const ErrorIcon = safeStyled(CpslIcon)`
+  --height: 16px;
+  --width: 16px;
+  --icon-color: var(--cpsl-color-text-error);
+`;
+export {
+  ChainSwitch
+};

package/dist/modal/components/ChainSwitch/config.d.ts

@@ -0,0 +1,7 @@
+import { Tab } from '../../types/commonTypes.js';
+export declare enum TabValue {
+    extension = "extension",
+    mobile = "mobile",
+    web = "web"
+}
+export declare const TABS: Record<'extension' | 'mobile' | 'web', Tab<TabValue>>;

package/dist/modal/components/ChainSwitch/config.js

@@ -0,0 +1,17 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+var TabValue = /* @__PURE__ */ ((TabValue2) => {
+  TabValue2["extension"] = "extension";
+  TabValue2["mobile"] = "mobile";
+  TabValue2["web"] = "web";
+  return TabValue2;
+})(TabValue || {});
+const TABS = {
+  extension: { label: "Extension", value: "extension" /* extension */, icon: "puzzlePiece" },
+  mobile: { label: "Mobile", value: "mobile" /* mobile */, icon: "phone" },
+  web: { label: "Web", value: "web" /* web */, icon: "globe" }
+};
+export {
+  TABS,
+  TabValue
+};

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

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

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

@@ -0,0 +1,78 @@
+"use client";
+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 { AccountSelect, ChainSelect } from "./Selects.js";
+import { ModalStep } from "../../utils/steps.js";
+import { HeaderButton } from "@getpara/react-common";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useAccount } from "../../../provider/index.js";
+const Controls = ({ onClose }) => {
+  const bareModal = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.bareModal;
+  });
+  const hasPreviousStep = useModalStore((state) => state.hasPreviousStep());
+  const step = useModalStore((state) => state.step);
+  const goBack = useGoBack();
+  const { isConnected } = useAccount();
+  const shouldShowSelects = [
+    ModalStep.ACCOUNT_MAIN,
+    ModalStep.CHAIN_SWITCH,
+    ModalStep.ADD_FUNDS_BUY,
+    ModalStep.ADD_FUNDS_RECEIVE,
+    ModalStep.ADD_FUNDS_WITHDRAW
+  ].includes(step);
+  const handleBackClick = () => {
+    goBack();
+  };
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(
+      BackButton,
+      {
+        variant: "ghost",
+        style: {
+          visibility: hasPreviousStep ? "visible" : "hidden"
+        },
+        onClick: handleBackClick,
+        children: /* @__PURE__ */ jsx(CpslIcon, { icon: "arrow" })
+      }
+    ),
+    /* @__PURE__ */ jsx(MiddleContainer, { children: shouldShowSelects && isConnected && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ChainSelect, {}),
+      /* @__PURE__ */ jsx(AccountSelect, {})
+    ] }) }),
+    /* @__PURE__ */ jsx(CloseButton, { bareModal, variant: "ghost", onClick: onClose, children: /* @__PURE__ */ jsx(CpslIcon, { icon: "close" }) })
+  ] });
+};
+const Container = safeStyled.div`
+  position: absolute;
+  width: 100%;
+  top: 16px;
+
+  z-index: 3;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+`;
+const MiddleContainer = safeStyled.div`
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+`;
+const CloseButton = safeStyled(HeaderButton)`
+  transform: rotate(180deg);
+  visibility: ${({ bareModal }) => bareModal ? "hidden" : "visible"};
+`;
+const BackButton = safeStyled(HeaderButton)`
+  transform: rotate(180deg);
+`;
+export {
+  Controls
+};

package/dist/modal/components/Controls/Selects.d.ts

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