@getpara/react-sdk 2.0.0-alpha.32 → 2.0.0-alpha.34

package/dist/modal/components/AwaitingWalletCreationStep/AwaitingWalletCreationStep.js

@@ -1,49 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { CpslIcon, CpslInfoBox, CpslText } from "@getpara/react-components";
-import { InfoBoxContent, InfoBoxHeader, StepContainer } from "../common.js";
-import { useEffect, useRef, useState } from "react";
-import { Waiting } from "../Waiting/Waiting.js";
-import { useStore } from "../../../provider/stores/useStore.js";
-import { useAccount } from "../../../provider/index.js";
-const AwaitingWalletCreationStep = ({ isGuestMode = false }) => {
-  const hideWallets = useStore((state) => {
-    var _a;
-    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
-  });
-  const [showInfoBox, setShowInfoBox] = useState(false);
-  const showInfoBoxTimeout = useRef();
-  const { embedded } = useAccount();
-  useEffect(() => {
-    if (typeof window !== "undefined") {
-      showInfoBoxTimeout.current = window.setTimeout(() => {
-        setShowInfoBox(true);
-      }, 4e3);
-    }
-    return () => clearTimeout(showInfoBoxTimeout.current);
-  }, []);
-  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
-    /* @__PURE__ */ jsx(
-      Waiting,
-      {
-        heading: isGuestMode ? "Creating Guest Account" : (embedded == null ? void 0 : embedded.isGuestMode) ? hideWallets ? "Linking Guest Account" : "Linking Guest Wallet" : hideWallets ? "Creating Your Account" : "Creating Your Wallet",
-        subheading: "This should only take a couple of seconds."
-      }
-    ),
-    showInfoBox && /* @__PURE__ */ jsx(CpslInfoBox, { children: /* @__PURE__ */ jsxs(InfoBoxContent, { children: [
-      /* @__PURE__ */ jsxs(InfoBoxHeader, { children: [
-        /* @__PURE__ */ jsx(CpslIcon, { icon: "clock" }),
-        /* @__PURE__ */ jsx(CpslText, { weight: "medium", children: "Hang on" })
-      ] }),
-      /* @__PURE__ */ jsxs(CpslText, { variant: "bodyS", weight: "medium", color: "secondary", children: [
-        "Creating your ",
-        hideWallets ? "account" : "wallet",
-        " is taking a little longer than expected, but we're working on it!"
-      ] })
-    ] }) })
-  ] });
-};
-export {
-  AwaitingWalletCreationStep
-};

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

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

package/dist/modal/components/BiometricCreationStep/BiometricCreationStep.js

@@ -1,62 +0,0 @@
-"use client";
-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 { useCopyToClipboard, UserIdentifier } from "@getpara/react-common";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
-import { AuthMethod } from "@getpara/web-sdk";
-import { useStore } from "../../../provider/stores/useStore.js";
-const BiometricCreationStep = () => {
-  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 [isCopied, copy] = useCopyToClipboard();
-  const handleCopy = () => {
-    if (signupState == null ? void 0 : signupState.passkeyUrl) {
-      copy(signupState.passkeyUrl);
-    }
-  };
-  const onClick = (method) => () => {
-    presentSignupUi(method, signupState);
-  };
-  const isBoth = !!(signupState == null ? void 0 : signupState.passkeyUrl) && !!(signupState == null ? void 0 : signupState.passwordUrl);
-  if (!signupState) {
-    return null;
-  }
-  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
-    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: para.isExternalWalletAuth ? `Finish setup for your${appName ? ` ${appName}` : ""} wallet` : isBoth ? "Secure Your Account" : "Create Passkey" }),
-      /* @__PURE__ */ jsx(UserIdentifier, { authInfo }),
-      /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: isBoth ? "Choose a 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), 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 }) }),
-        /* @__PURE__ */ jsxs(CpslButton, { size: "small", variant: "ghost", onClick: handleCopy, children: [
-          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: isCopied ? "check" : "copy" }),
-          isCopied ? "Copied" : "Copy Link"
-        ] })
-      ] }),
-      isBoth && /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(CpslDivider, { children: "or" }),
-        /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: onClick(AuthMethod.PASSWORD), disabled: !!authStepRoute, children: [
-          /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "passcode" }),
-          "Choose Password"
-        ] })
-      ] })
-    ] })
-  ] });
-};
-export {
-  BiometricCreationStep
-};

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

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

package/dist/modal/components/BiometricLoginStep/BiometricLoginStep.js

@@ -1,48 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CpslButton, CpslDivider, CpslIcon } from "@getpara/react-components";
-import { useModalStore } from "../../stores/index.js";
-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 { useAuthActions } from "../../../provider/providers/AuthProvider.js";
-const BiometricLoginStep = () => {
-  var _a;
-  const loginState = useModalStore((state) => state.getLoginState());
-  const para = useInternalClient();
-  const { biometricHints, presentLoginUi } = useAuthActions();
-  if (!loginState) {
-    return null;
-  }
-  const { passkeyUrl, passkeyKnownDeviceUrl, passwordUrl, isPasskeySupported } = loginState;
-  const { isOnKnownDevice = false, formattedHints } = biometricHints || {};
-  const isPasskey = !!passkeyUrl, isPassword = !!passwordUrl, isNeither = !isPasskey && !isPassword, hasHints = (_a = formattedHints == null ? void 0 : formattedHints.length) != null ? _a : 0 > 0, isPasskeyOnKnownDevice = isPasskeySupported && isOnKnownDevice, isPasskeyUnavailable = hasHints && !isOnKnownDevice || !isPasskeySupported || isNeither, displayKnownDevices = isPasskeyUnavailable && !!biometricHints && (hasHints || !!passkeyKnownDeviceUrl), displayWelcomeBack = isPasskeyOnKnownDevice || isPassword;
-  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
-    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      displayWelcomeBack && /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Welcome back," }),
-      /* @__PURE__ */ jsx(UserIdentifier, { authInfo: para.authInfo })
-    ] }),
-    /* @__PURE__ */ jsxs(MainContainer, { children: [
-      isPassword && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: () => presentLoginUi(AuthMethod.PASSWORD, loginState), children: "Login" }),
-      isPasskey && /* @__PURE__ */ jsxs(Fragment, { children: [
-        displayKnownDevices && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(KnownDevices, { hints: biometricHints, link: passkeyKnownDeviceUrl }),
-          /* @__PURE__ */ jsx(CpslDivider, { children: "or" })
-        ] }),
-        /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: () => presentLoginUi(AuthMethod.PASSKEY, loginState), 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 {
-  BiometricLoginStep
-};

package/dist/modal/components/Body/AnimatedHeightWrapper.d.ts

@@ -1,6 +0,0 @@
-import React, { PropsWithChildren } from 'react';
-interface AnimatedHeightWrapperProps extends PropsWithChildren {
-    className?: string;
-}
-export declare const AnimatedHeightWrapper: React.FC<AnimatedHeightWrapperProps>;
-export {};

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

@@ -1,29 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { jsx } from "react/jsx-runtime";
-import { motion } from "framer-motion";
-import { useEffect, useRef, useState } from "react";
-import { safeStyled } from "@getpara/react-common";
-const AnimatedHeightWrapper = ({ children, className }) => {
-  const containerRef = useRef(null);
-  const [height, setHeight] = useState("auto");
-  useEffect(() => {
-    if (containerRef.current) {
-      const resizeObserver = new ResizeObserver((entries) => {
-        const observedHeight = entries[0].contentRect.height;
-        setHeight(observedHeight);
-      });
-      resizeObserver.observe(containerRef.current);
-      return () => {
-        resizeObserver.disconnect();
-      };
-    }
-  }, []);
-  return /* @__PURE__ */ jsx(Container, { className, style: { height }, animate: { height }, transition: { duration: 0.2 }, children: /* @__PURE__ */ jsx("div", { ref: containerRef, children }) });
-};
-const Container = safeStyled(motion.div)`
-  overflow: hidden;
-`;
-export {
-  AnimatedHeightWrapper
-};

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

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

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

@@ -1,354 +0,0 @@
-"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

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

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

@@ -1,95 +0,0 @@
-"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
-};