@getpara/react-sdk-lite 2.0.0-dev.7 → 2.0.0

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

@@ -4,7 +4,7 @@ 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 { getExternalWalletIcon, safeStyled, useCopyToClipboard } from "@getpara/react-common";
+import { getExternalWalletIcon, MOBILE_SIZE, safeStyled, useCopyToClipboard } from "@getpara/react-common";
 import { useAccount, useWallet, useWalletState } from "../../../provider/index.js";
 import { CpslButton, CpslIcon, CpslSelect, CpslSelectItem, CpslText } from "@getpara/react-components";
 import { truncateAddress } from "@getpara/web-sdk";
@@ -62,7 +62,7 @@ const Wallet = ({
     )
   ] });
 };
-const WalletSelect = () => {
+const AccountWalletSelect = () => {
   var _a, _b, _c;
   const containerRef = useRef(null);
   const { dropdownMaxHeight, dropdownWidth, mobileAnchor, resize } = useDropdownPosition(containerRef);
@@ -92,7 +92,7 @@ const WalletSelect = () => {
       anchorElId: "addressInputContainer",
       dropdownMaxHeight,
       $width: dropdownWidth != null ? dropdownWidth : 0,
-      $top: (mobileAnchor != null ? mobileAnchor : 0) + 16 + 1,
+      $top: (mobileAnchor != null ? mobileAnchor : 0) + 184 + 1,
       selectedItemVariant: "bodyXS",
       icon: isMultiWallet ? "chevronUp" : null,
       disabled: !isMultiWallet,
@@ -108,6 +108,7 @@ const WalletSelect = () => {
   ) }) });
 };
 const Container = safeStyled.div`
+  flex: 0;
   display: flex;
   flex-direction: column;
   gap: 8px;
@@ -145,6 +146,18 @@ const Select = safeStyled(CpslSelect)`
     min-width: ${({ $width }) => `${$width - 2}px`};
   }
 
+  &::part(popover) {
+      /* Have to adjust the top of the popover here since we're using a transform on the modal which causes fixed position items to not be relative to the viewport */
+      @media (max-width: ${MOBILE_SIZE}px) {
+        top: ${({ $top }) => $top ? `${$top}px` : "0px"};
+        bottom: 16px;
+      }
+      cpsl-auth-modal.force-mobile-media & {
+        top: ${({ $top }) => $top ? `${$top}px` : "0px"};
+        bottom: 16px;
+      }
+    }
+
   &::part(icon) {
     --icon-color: var(--cpsl-color-text-primary);
   }
@@ -170,7 +183,8 @@ const SelectContainer = safeStyled.div`
   border-radius: var(--cpsl-border-radius-tile-button);
   background-color: transparent;
 `;
-const WalletIcon = safeStyled(CpslIcon)`  --icon-border: 1px solid var(--cpsl-color-background-8);
+const WalletIcon = safeStyled(CpslIcon)`
+  --icon-border: 1px solid var(--cpsl-color-background-8);
   --icon-background: var(--cpsl-color-background-0);
   --icon-border-radius: 4px;
 `;
@@ -181,8 +195,8 @@ const CopyButton = safeStyled(CpslButton)`
   }
 `;
 export {
+  AccountWalletSelect,
   Select,
   SelectContainer,
-  SelectItem,
-  WalletSelect
+  SelectItem
 };

package/dist/modal/components/AddFunds/AddFunds.js

@@ -17,6 +17,7 @@ import { AnimatePresence } from "framer-motion";
 import { AddFundsSettings } from "./AddFundsSettings.js";
 import { WalletSelectOld } from "../WalletSelectOld/WalletSelectOld.js";
 const AddFunds = () => {
+  var _a;
   const step = useModalStore((state) => state.step);
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const onRampStep = useModalStore((state) => state.onRampStep);
@@ -29,7 +30,7 @@ const AddFunds = () => {
   const tabs = TABS.filter(
     ([enabledFlow, key]) => !!(onRampConfig == null ? void 0 : onRampConfig[key]) && (!isGuestMode || enabledFlow === EnabledFlow.RECEIVE)
   );
-  const tab = storedTab != null ? storedTab : tabs[0][0];
+  const tab = storedTab != null ? storedTab : (_a = tabs[0]) == null ? void 0 : _a[0];
   const isMultiFlow = (tab === EnabledFlow.BUY || tab === EnabledFlow.RECEIVE) && (onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) && (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled);
   const onSetTab = (event) => {
     setModalStep(getAddFundsStep(event.detail.tab));
@@ -52,7 +53,7 @@ const AddFunds = () => {
   useEffect(() => {
     setOnRampPurchase(void 0);
   }, []);
-  if (!onRampConfig || !activeWallet) {
+  if (!onRampConfig || !activeWallet || !tab) {
     return /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, {}) });
   }
   return /* @__PURE__ */ jsxs(StepContainer, { children: [

package/dist/modal/components/AddFunds/AddFundsAsset.js

@@ -6,20 +6,20 @@ import {
 } from "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as comp from "@getpara/react-components";
-import { getOnRampNetworks } from "@getpara/web-sdk";
-import { safeStyled } from "@getpara/react-common";
-import { getAssetCode, getAssetName, ON_RAMP_ASSETS } from "../../constants/constants.js";
+import { formatCurrency, getOnRampNetworks } from "@getpara/web-sdk";
+import { safeStyled, getAssetCode, getAssetName, ON_RAMP_ASSETS } from "@getpara/react-common";
 import { useModalStore } from "../../stores/index.js";
 import { useState } from "react";
 import { useAddFunds } from "./AddFundsContext.js";
 import { useWallet } from "../../../provider/hooks/queries/useWallet.js";
-import { AssetIcon, GradientScroll } from "../common.js";
+import { AssetIcon, contentMotionProps, GradientScroll } from "../common.js";
 import { AnimatePresence, motion } from "framer-motion";
-import { contentMotionProps } from "./common.js";
+import { useAssets } from "../../../provider/providers/AssetsProvider.js";
 function AddFundsAsset() {
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const { assets, setAsset, network, setNetwork } = useAddFunds();
   const { data: activeWallet } = useWallet();
+  const { assetMetadata } = useAssets();
   const [searchStr, setSearchStr] = useState("");
   const onSelect = (_asset) => __async(this, null, function* () {
     yield setAsset(_asset);
@@ -59,7 +59,8 @@ function AddFundsAsset() {
           /* @__PURE__ */ jsxs(Info, { children: [
             /* @__PURE__ */ jsx(Code, { color: "contrast", variant: "bodyL", children: ON_RAMP_ASSETS[asset].code }),
             /* @__PURE__ */ jsx(Name, { color: "contrast", variant: "bodyS", children: ON_RAMP_ASSETS[asset].name })
-          ] })
+          ] }),
+          (assetMetadata == null ? void 0 : assetMetadata[asset]) && /* @__PURE__ */ jsx(comp.CpslText, { variant: "bodyM", children: formatCurrency(assetMetadata[asset].price) })
         ] }, asset)
       },
       asset

package/dist/modal/components/AddFunds/AddFundsContext.d.ts

@@ -1,6 +1,6 @@
 import { Dispatch, PropsWithChildren, ReactNode, SetStateAction } from 'react';
 import { useWallet } from '../../../provider/hooks/index.js';
-import { EnabledFlow, Network, OnRampAsset, OnRampConfig, OnRampProvider } from '@getpara/web-sdk';
+import { EnabledFlow, TNetwork, TOnRampAsset, OnRampConfig, OnRampProvider } from '@getpara/web-sdk';
 import { IconType } from '@getpara/react-components';
 export type Tab = EnabledFlow;
 export declare const TABS: [
@@ -10,14 +10,14 @@ export declare const TABS: [
     ReactNode
 ][];
 type Value = {
-    network: Network | undefined;
+    network: TNetwork | undefined;
     setNetwork: Dispatch<SetStateAction<Value['network']>>;
-    asset: OnRampAsset | undefined;
+    asset: TOnRampAsset | undefined;
     setAsset: Dispatch<SetStateAction<Value['asset']>>;
     fiatQuantity: string | undefined;
     setFiatQuantity: Dispatch<SetStateAction<Value['fiatQuantity']>>;
-    networks: Network[];
-    assets: OnRampAsset[];
+    networks: TNetwork[];
+    assets: TOnRampAsset[];
     isProviderAllowed: Partial<Record<OnRampProvider, boolean>>;
     tab: Tab;
     activeWallet: ReturnType<typeof useWallet>['data'];

package/dist/modal/components/AddFunds/AddFundsProvider.js

@@ -6,7 +6,7 @@ import {
 } from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { safeStyled } from "@getpara/react-common";
-import { Heading, InnerStepContainer } from "../common.js";
+import { contentMotionProps, Heading, InnerStepContainer } from "../common.js";
 import { CpslText } from "@getpara/react-components";
 import { useAddFunds } from "./AddFundsContext.js";
 import { useModalStore } from "../../stores/index.js";
@@ -15,7 +15,6 @@ import { motion, AnimatePresence } from "framer-motion";
 import { OnRampProviderButton } from "../OnRampComponents/OnRampProviderButton.js";
 import { useWallet } from "../../../provider/index.js";
 import { EnabledFlow, OnRampPurchaseType } from "@getpara/web-sdk";
-import { contentMotionProps } from "./common.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 function AddFundsProvider() {
   const para = useInternalClient();

package/dist/modal/components/AddFunds/AddFundsSettings.js

@@ -6,14 +6,21 @@ import {
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from "react";
 import { useAddFunds } from "./AddFundsContext.js";
-import { CpslButton, CpslIcon, CpslInput, CpslRow, CpslText } from "@getpara/react-components";
-import { AssetIcon, HeaderSelect, HeaderSelectContainer, HeaderSelectItem, NetworkIcon } from "../common.js";
-import { getAssetCode, getNetworkName } from "../../constants/constants.js";
+import { CpslButton, CpslIcon, CpslRow, CpslText } from "@getpara/react-components";
+import {
+  AssetIcon,
+  contentMotionProps,
+  HeaderSelect,
+  HeaderSelectContainer,
+  HeaderSelectItem,
+  NetworkIcon
+} from "../common.js";
+import { QuantityInput } from "../QuantityInput.js";
 import { EnabledFlow, getOnRampNetworks, OnRampPurchaseType } from "@getpara/web-sdk";
 import { OnRampStep, useModalStore } from "../../stores/index.js";
 import { useStore } from "../../../provider/stores/useStore.js";
-import { safeStyled } from "@getpara/react-common";
-import { contentMotionProps, NoProviders } from "./common.js";
+import { safeStyled, getAssetCode, getNetworkName } from "@getpara/react-common";
+import { NoProviders } from "./common.js";
 import { AnimatePresence, motion, useIsPresent } from "framer-motion";
 import { AddFundsAsset } from "./AddFundsAsset.js";
 function NetworkPill({
@@ -118,40 +125,7 @@ function AddFundsSettings() {
         ) : network ? /* @__PURE__ */ jsx(NetworkPill, { network, start: NetworkLabel, fix: true }) : null })
       ] }),
       /* @__PURE__ */ jsxs(CpslRow, { col: true, gap: "16px", children: [
-        /* @__PURE__ */ jsx(
-          Input,
-          {
-            value: value || "",
-            fitContent: true,
-            autoselect: true,
-            onKeyDown: (e) => {
-              if (!/^(\d|\.)$/.test(e.key) && !["Delete", "Backspace", "Tab", "Shift"].includes(e.key)) {
-                e.preventDefault();
-              }
-            },
-            onChange: (e) => {
-              var _a;
-              const numericValue = (((_a = e.currentTarget) == null ? void 0 : _a.value) || "").replace(/[^0-9.]/g, "");
-              if (numericValue !== "") {
-                const formattedValue = parseFloat(numericValue).toFixed(2);
-                setValue(formattedValue);
-              } else {
-                setValue(null);
-              }
-            },
-            onBlur: (e) => {
-              const numericValue = (e.currentTarget.value || "").replace(/[^0-9.]/g, "");
-              if (numericValue === "") {
-                setValue(null);
-              } else {
-                setValue(parseFloat(numericValue).toFixed(2));
-              }
-            },
-            placeholder: "0",
-            children: /* @__PURE__ */ jsx(CurrencySign, { slot: "start", children: "$" })
-          },
-          value || ""
-        ),
+        /* @__PURE__ */ jsx(QuantityInput, { value, onChange: setValue, symbol: "$" }),
         /* @__PURE__ */ jsx(CpslRow, { style: { width: "100%" }, children: ["25", "50", "100"].map((quantity) => {
           return /* @__PURE__ */ jsxs(PresetButton, { fullWidth: true, variant: "secondary", onClick: () => setValue(`${quantity}.00`), children: [
             "$",
@@ -207,12 +181,6 @@ const Container = safeStyled(motion.div)`
 const AssetContainer = safeStyled(Container)`
   gap: 8px;
 `;
-const CurrencySign = safeStyled.div`
-  font-size: 72px;
-  color: var(--cpsl-color-text-primary);
-  position: relative;
-  right: -16px;
-`;
 const PresetButton = safeStyled(CpslButton)`
   --button-color: var(--cpsl-color-text-contrast);
   --button-font-size: 24px;
@@ -223,15 +191,6 @@ const PresetButton = safeStyled(CpslButton)`
   --button-secondary-hover-border-color: var(--cpsl-color-background-16);
   flex: 1;
 `;
-const Input = safeStyled(CpslInput)`
-  --container-background-color: transparent;
-  --container-height: 90px;
-  --container-border-width: 0;
-  --input-background-color: transparent;
-  --input-font-size: 72px;
-  --input-text-align: center;
-  --input-width: 100%;
-`;
 export {
   AddFundsSettings
 };

package/dist/modal/components/AddFunds/common.d.ts

@@ -1,17 +1,3 @@
-export declare const contentMotionProps: {
-    transition: {
-        duration: number;
-    };
-    initial: {
-        opacity: number;
-    };
-    animate: {
-        opacity: number;
-    };
-    exit: {
-        opacity: number;
-    };
-};
 export declare const NoProviders: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").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/AddFunds/common.js

@@ -2,12 +2,6 @@
 import "../../../chunk-MMUBH76A.js";
 import { CpslText } from "@getpara/react-components";
 import { safeStyled } from "@getpara/react-common";
-const contentMotionProps = {
-  transition: { duration: 0.2 },
-  initial: { opacity: 0 },
-  animate: { opacity: 1 },
-  exit: { opacity: 0 }
-};
 const NoProviders = safeStyled(CpslText)`
   width: 100%;
   text-align: center;
@@ -19,6 +13,5 @@ const NoProviders = safeStyled(CpslText)`
   transition: visibility 0.2s;
 `;
 export {
-  NoProviders,
-  contentMotionProps
+  NoProviders
 };

package/dist/modal/components/AuthInput/AuthInput.js

@@ -13,9 +13,8 @@ import {
   CpslText
 } from "@getpara/react-components";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { safeStyled } from "@getpara/react-common";
+import { safeStyled, MOBILE_SIZE } from "@getpara/react-common";
 import countryCodes from "../../utils/countryCodes.js";
-import { MOBILE_SIZE } from "../../constants/constants.js";
 import { useDropdownPosition } from "./hooks/useDropdownPosition.js";
 import { defaultPhoneMask, phoneMasks } from "./phoneMasks.js";
 import { extractAuthInfo } from "@getpara/user-management-client";
@@ -230,6 +229,7 @@ const CountryCodeSelect = safeStyled(CpslSelect)`
   --container-gap: 4px;
   --container-background-color: transparent;
   --container-box-shadow: none;
+  --dropdown-background-color: var(--cpsl-color-background-4);
 
   &::part(dropdown) {
     width: ${({ $width }) => `${$width - 2}px`};

package/dist/modal/components/AwaitingAccountStep/AwaitingAccountStep.js

@@ -4,9 +4,10 @@ import { jsx } from "react/jsx-runtime";
 import { useModalStore } from "../../stores/index.js";
 import { Waiting } from "../Waiting/Waiting.js";
 const AwaitingAccountStep = () => {
+  var _a;
   const isLogin = useModalStore((state) => state.isLogin());
-  const verifyState = useModalStore((state) => state.getVerifyState());
-  const isSLOPopup = !!(verifyState == null ? void 0 : verifyState.isWalletSelectionNeeded);
+  const refs = useModalStore((state) => state.refs);
+  const isSLOPopup = ((_a = refs.popupWindow.current) == null ? void 0 : _a.closed) === false;
   return /* @__PURE__ */ jsx(
     Waiting,
     {

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

@@ -1,9 +1,7 @@
 "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 { jsx } from "react/jsx-runtime";
+import { StepContainer } from "../common.js";
 import { Waiting } from "../Waiting/Waiting.js";
 import { useStore } from "../../../provider/stores/useStore.js";
 import { useAccount } from "../../../provider/index.js";
@@ -12,37 +10,14 @@ const AwaitingWalletCreationStep = ({ isGuestMode = false }) => {
     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 /* @__PURE__ */ jsx(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."
     }
-    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/BiometricLoginStep/BiometricLoginStep.js

@@ -26,7 +26,10 @@ const BiometricLoginStep = () => {
       /* @__PURE__ */ jsx(UserIdentifier, { authInfo: para.authInfo })
     ] }),
     /* @__PURE__ */ jsxs(MainContainer, { children: [
-      (isPassword || isPIN) && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: () => presentLoginUi(isPIN ? AuthMethod.PIN : AuthMethod.PASSWORD, loginState), children: "Login" }),
+      (isPassword || isPIN) && /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: () => presentLoginUi(isPIN ? AuthMethod.PIN : AuthMethod.PASSWORD, loginState), children: [
+        /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "passcode" }),
+        isPIN && isPassword ? "Login" : isPIN ? "Login with PIN" : "Login with Password"
+      ] }),
       isPasskey && /* @__PURE__ */ jsxs(Fragment, { children: [
         displayKnownDevices && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(KnownDevices, { hints: biometricHints, link: passkeyKnownDeviceUrl }),
@@ -34,7 +37,7 @@ const BiometricLoginStep = () => {
         ] }),
         /* @__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"
+          "Login with Passkey"
         ] }) })
       ] })
     ] })

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

@@ -1,7 +1,7 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { safeStyled } from "@getpara/react-common";
+import { safeStyled, WarningBanner, BODY_MOTION_VARIANTS, BODY_TRANSITION, MOBILE_SIZE } from "@getpara/react-common";
 import { IFrameSteps, ModalStep } from "../../utils/steps.js";
 import { CpslAlert, CpslIcon } from "@getpara/react-components";
 import { VerificationCodeStep } from "../VerificationCodeStep/VerificationCodeStep.js";
@@ -21,7 +21,6 @@ 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";
@@ -43,13 +42,14 @@ 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";
 const MIN_HEIGHT = {
   [ModalStep.ADD_FUNDS_AWAITING]: "680px"
 };
-const PADDING_TOP = {
-  [ModalStep.TELEGRAM_OAUTH]: "36px"
-};
 const Body = ({
   oAuthMethods,
   twoFactorAuthEnabled,
@@ -66,6 +66,8 @@ const Body = ({
   const setStepDirection = useModalStore((state) => state.setStepDirection);
   const accountAddFundTab = useModalStore((state) => state.accountAddFundTab);
   const setAccountAddFundTab = useModalStore((state) => state.setAccountAddFundTab);
+  const modalError = useModalStore((state) => state.modalError);
+  const setModalError = useModalStore((state) => state.setModalError);
   const embeddedModal = useStore((state) => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.embeddedModal;
@@ -180,6 +182,9 @@ const Body = ({
       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, {});
       }
@@ -187,11 +192,38 @@ const Body = ({
         return /* @__PURE__ */ jsx(ChainSwitch, {});
       }
       case ModalStep.EX_WALLET_NETWORK_SELECT: {
-        return /* @__PURE__ */ jsx(ExternalWalletNetworkSelectStep, {});
+        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" });
+      }
       default: {
         if (IFrameSteps.includes(currentStep)) {
           return null;
@@ -234,7 +266,7 @@ const Body = ({
             setStepDirection(1);
           },
           custom: stepDirection,
-          children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsxs(
             BodyContainer,
             {
               custom: stepDirection,
@@ -243,34 +275,37 @@ const Body = ({
               animate: "center",
               exit: "exit",
               transition: BODY_TRANSITION,
-              children: /* @__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" }) })
-                    ] }) })
-                  ]
-                }
-              )
+              children: [
+                /* @__PURE__ */ jsxs(
+                  InnerContainer,
+                  {
+                    $embeddedModal: !!embeddedModal,
+                    $step: currentStep,
+                    $isIFrameStep: IFrameSteps.includes(currentStep),
+                    children: [
+                      !IFrameSteps.includes(currentStep) && /* @__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" }) })
+                      ] }) })
+                    ]
+                  }
+                ),
+                modalError && /* @__PURE__ */ jsx(WarningBanner, { onClose: () => setModalError(void 0), children: renderTextWithLinks(modalError) })
+              ]
             },
-            ["ADD_FUNDS_BUY", "ADD_FUNDS_RECEIVE", "ADD_FUNDS_WITHDRAW"].includes(currentStep) ? "ADD_FUNDS" : currentStep
+            ["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
           )
         }
       ),
@@ -291,7 +326,7 @@ const BodyContainer = safeStyled(motion.div)`
   position: relative;
   display: flex;
   flex-direction: column;
-  gap: 24px;
+  gap: 12px;
   will-change: auto !important;
 `;
 const InnerContainer = safeStyled.div`
@@ -312,14 +347,7 @@ const InnerContainer = safeStyled.div`
 }};
 
   @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;
+    padding: ${({ $embeddedModal, $isIFrameStep }) => $isIFrameStep ? "0px" : $embeddedModal ? "12px 0px 0px" : "0px"};
   }
 `;
 const TestModeAlert = safeStyled(CpslAlert)`
@@ -333,14 +361,19 @@ const TestModeAlert = safeStyled(CpslAlert)`
 const CloseButton = safeStyled.button`
   background-color: transparent;
   border: none;
-  padding: 4px;
+  padding: 0;
   cursor: pointer;
-  position: absolute;
-  top: 0;
-  right: 0;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
 `;
 const CloseX = safeStyled(CpslIcon)`
-  --icon-color: var(--cpsl-color-foreground-0);
+  --icon-color: var(--cpsl-color-utility-yellow-dark, #92400e);
+  --height: 18px;
+  --width: 18px;
 `;
 export {
   Body