@getpara/react-sdk-lite 2.0.0-alpha.38 → 2.0.0-alpha.40

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

@@ -10,20 +10,17 @@ import { getOnRampNetworks } from "@getpara/web-sdk";
 import { safeStyled } from "@getpara/react-common";
 import { getAssetCode, getAssetName, ON_RAMP_ASSETS } from "../../constants/constants.js";
 import { useModalStore } from "../../stores/index.js";
-import { useRef, useState } from "react";
+import { useState } from "react";
 import { useAddFunds } from "./AddFundsContext.js";
 import { useWallet } from "../../../provider/hooks/queries/useWallet.js";
-import { AssetIcon } from "../common.js";
+import { AssetIcon, GradientScroll } from "../common.js";
 import { AnimatePresence, motion } from "framer-motion";
 import { contentMotionProps } from "./common.js";
 function AddFundsAsset() {
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const { assets, setAsset, network, setNetwork } = useAddFunds();
   const { data: activeWallet } = useWallet();
-  const [isAtBottom, setIsAtBottom] = useState(false);
-  const [isAtTop, setIsAtTop] = useState(true);
   const [searchStr, setSearchStr] = useState("");
-  const ref = useRef(null);
   const onSelect = (_asset) => __async(this, null, function* () {
     yield setAsset(_asset);
     if (!network && !!onRampConfig && !!activeWallet) {
@@ -35,21 +32,6 @@ function AddFundsAsset() {
       );
     }
   });
-  const onScroll = () => {
-    if (ref.current) {
-      const { scrollTop, scrollHeight, clientHeight } = ref.current;
-      if (scrollTop + clientHeight >= scrollHeight - 30) {
-        setIsAtBottom(true);
-      } else {
-        setIsAtBottom(false);
-      }
-      if (scrollTop < 30) {
-        setIsAtTop(true);
-      } else {
-        setIsAtTop(false);
-      }
-    }
-  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: assets.length >= 4 && /* @__PURE__ */ jsx(motion.div, __spreadProps(__spreadValues({}, contentMotionProps), { children: /* @__PURE__ */ jsx(
       SearchInput,
@@ -62,7 +44,7 @@ function AddFundsAsset() {
         children: /* @__PURE__ */ jsx(comp.CpslIcon, { icon: "search", slot: "start" })
       }
     ) })) }),
-    /* @__PURE__ */ jsx(ScrollContainer, { isAtBottom, isAtTop, ref, onScroll, children: /* @__PURE__ */ jsx(AssetList, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: assets.filter((asset) => {
+    /* @__PURE__ */ jsx(GradientScroll, { height: "calc(100% - 56px)", gap: "8px", children: /* @__PURE__ */ jsx(AssetList, { children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "sync", children: assets.filter((asset) => {
       return searchStr === "" || getAssetCode(asset).toLowerCase().startsWith(searchStr.toLowerCase()) || getAssetName(asset).toLowerCase().startsWith(searchStr.toLowerCase());
     }).map((asset) => /* @__PURE__ */ jsx(
       motion.li,
@@ -75,8 +57,8 @@ function AddFundsAsset() {
         children: /* @__PURE__ */ jsxs(AssetButton, { fullWidth: true, variant: "secondary", onClick: () => onSelect(asset), children: [
           /* @__PURE__ */ jsx(AssetIcon, { asset, size: "48px" }),
           /* @__PURE__ */ jsxs(Info, { children: [
-            /* @__PURE__ */ jsx(Code, { variant: "bodyL", children: ON_RAMP_ASSETS[asset].code }),
-            /* @__PURE__ */ jsx(Name, { variant: "bodyS", children: ON_RAMP_ASSETS[asset].name })
+            /* @__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 })
           ] })
         ] }, asset)
       },
@@ -84,15 +66,6 @@ function AddFundsAsset() {
     )) }) }) })
   ] });
 }
-const ScrollContainer = safeStyled.div`
-  height: calc(100% - 56px);
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  overflow-y: auto;
-  mask-image: ${({ isAtBottom, isAtTop }) => !isAtBottom && !isAtTop ? "linear-gradient(to bottom, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%)" : !isAtBottom ? "linear-gradient(to bottom, black calc(100% - 24px), transparent 100%)" : !isAtTop ? "linear-gradient(to top, black calc(100% - 24px), transparent 100%)" : "none"};
-`;
 const AssetList = safeStyled.ul`
   display: flex;
   flex-direction: column;

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

@@ -29,7 +29,7 @@ const AddFundsDone = ({ isSuccess, onClose }) => {
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
     /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: heading }),
+      /* @__PURE__ */ jsx(Heading, { children: heading }),
       /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", children: text })
     ] }),
     /* @__PURE__ */ jsx(

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

@@ -28,7 +28,7 @@ function AddFundsProvider() {
   const { asset, network, fiatQuantity, isProviderAllowed, tab } = useAddFunds();
   const { data: activeWallet } = useWallet();
   return /* @__PURE__ */ jsxs(Container, __spreadProps(__spreadValues({}, contentMotionProps), { children: [
-    /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Choose Provider" }),
+    /* @__PURE__ */ jsx(Heading, { children: "Choose Provider" }),
     /* @__PURE__ */ jsxs($InnerStepContainer, { children: [
       /* @__PURE__ */ jsxs(NoProviders, { isHidden: Object.values(isProviderAllowed).some((v) => !!v), variant: "bodyM", children: [
         "No providers are available for this ",

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

@@ -1,20 +1,10 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import {
-  CpslButton,
-  CpslDivider,
-  CpslIcon,
-  CpslIdenticon,
-  CpslQrCode,
-  CpslSpinner,
-  CpslText
-} from "@getpara/react-components";
-import { CenteredText, FilledDisabledInput, InnerStepContainer, QRContainer } from "../common.js";
+import { CpslQrCode, CpslSpinner } from "@getpara/react-components";
+import { CenteredText, InnerStepContainer, QRContainer } from "../common.js";
 import { isMobile } from "@getpara/web-sdk";
 import { useModalStore } from "../../stores/index.js";
-import { useStore } from "../../../provider/stores/useStore.js";
-import { useCopyToClipboard } from "@getpara/react-common";
 import { useMemo } from "react";
 import { useWallet } from "../../../provider/hooks/index.js";
 import { useAddFunds } from "./AddFundsContext.js";
@@ -26,56 +16,21 @@ const GENERIC_WALLET = {
   COSMOS: "Cosmos networks"
 };
 function AddFundsReceive() {
-  const [isCopied, copy] = useCopyToClipboard();
   const { networks } = useAddFunds();
   const para = useInternalClient();
-  const appName = useStore((state) => state.appName);
-  const hideWallets = useStore((state) => {
-    var _a;
-    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
-  });
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const { data: activeWallet } = useWallet();
   const address = useMemo(
     () => activeWallet ? para.getDisplayAddress(activeWallet.id, { addressType: activeWallet.type }) : "",
     [para, activeWallet == null ? void 0 : activeWallet.id, activeWallet == null ? void 0 : activeWallet.type]
   );
-  const onCopy = () => {
-    copy(address);
-  };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    activeWallet && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsxs(
-      FilledDisabledInput,
-      {
-        noAutoDisable: true,
-        readonly: true,
-        placeholder: para.getDisplayAddress(activeWallet.id, {
-          truncate: true,
-          addressType: activeWallet.type,
-          targetLength: 16
-        }),
-        children: [
-          /* @__PURE__ */ jsx(CpslIdenticon, { slot: "start", size: "32px", hash: para.getIdenticonHash(activeWallet.id, activeWallet.type) }),
-          /* @__PURE__ */ jsx(CpslButton, { slot: "end", variant: "ghost", onClick: onCopy, children: /* @__PURE__ */ jsx(CpslIcon, { icon: isCopied ? "check" : "copy" }) })
-        ]
-      },
-      address
-    ) }),
-    !isMobile() && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(CpslDivider, { children: "or" }),
-      /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-        /* @__PURE__ */ jsx(QRContainer, { children: !address ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: address }, address) }),
-        /* @__PURE__ */ jsx(CpslText, { weight: "semiBold", color: "secondary", children: "Scan with your crypto wallet" })
-      ] })
-    ] }),
-    (activeWallet == null ? void 0 : activeWallet.type) && /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsxs(CenteredText, { weight: "semiBold", children: [
-        !!(onRampConfig == null ? void 0 : onRampConfig.allowedAssets) && networks.length > 0 || hideWallets ? appName != null ? appName : "This App" : "This Wallet",
-        " ",
-        "Only Supports:"
-      ] }),
-      /* @__PURE__ */ jsx(CenteredText, { weight: "medium", color: "secondary", children: !!(onRampConfig == null ? void 0 : onRampConfig.allowedAssets) && networks.length > 0 ? formatNetworkList(networks) : GENERIC_WALLET[activeWallet.type] })
-    ] })
+    !isMobile() && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(QRContainer, { children: !address ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: address }, address) }) }) }),
+    (activeWallet == null ? void 0 : activeWallet.type) && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsxs(CenteredText, { variant: "bodyS", weight: "semiBold", children: [
+      "Only send funds on",
+      " ",
+      !!(onRampConfig == null ? void 0 : onRampConfig.allowedAssets) && networks.length > 0 ? formatNetworkList(networks) : GENERIC_WALLET[activeWallet.type]
+    ] }) })
   ] });
 }
 export {

package/dist/modal/components/AuthMainStep/AuthMainStep.js

@@ -5,14 +5,13 @@ import { safeStyled } from "@getpara/react-common";
 import { AuthMainStepContent } from "./AuthMainStepContent.js";
 import { CenteredText } from "../common.js";
 import { useStore } from "../../../provider/stores/useStore.js";
-import { useModalStore } from "../../stores/index.js";
+import { useStepTitle } from "../Header/hooks/useStepTitle.js";
 const AuthMainStep = ({
   oAuthMethods,
   disableEmailLogin,
   disablePhoneLogin,
   isGuestModeEnabled = false
 }) => {
-  const authLayout = useModalStore((state) => state.authLayout);
   const embeddedModal = useStore((state) => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.embeddedModal;
@@ -22,11 +21,10 @@ const AuthMainStep = ({
     return (_a = state.modalConfig) == null ? void 0 : _a.logo;
   });
   const appName = useStore((state) => state.appName);
-  const firstLayoutType = authLayout == null ? void 0 : authLayout[0].split(":")[0];
-  const heading = firstLayoutType === "AUTH" ? "Sign Up or Login" : "Connect Wallet";
+  const { title, isTitleDisplayed } = useStepTitle();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     logo && /* @__PURE__ */ jsx(Logo, { src: logo, alt: `${appName ? `${appName} -` : ""}logo` }),
-    !embeddedModal && /* @__PURE__ */ jsx(CenteredText, { variant: logo ? "bodyM" : "headingS", weight: "semiBold", children: heading }),
+    !embeddedModal && !isTitleDisplayed && /* @__PURE__ */ jsx(CenteredText, { variant: logo ? "bodyM" : "headingS", weight: "semiBold", children: title }),
     /* @__PURE__ */ jsx(
       AuthMainStepContent,
       {

package/dist/modal/components/AuthMainStep/AuthMainStepContent.js

@@ -14,6 +14,7 @@ import { useExternalWallets } from "../../../provider/providers/ExternalWalletPr
 import { useStore } from "../../../provider/stores/useStore.js";
 import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
 import { useAccount, useParaStatus } from "../../../provider/index.js";
+import { connectWalletTitle, signUpOrLogInTitle } from "../Header/hooks/useStepTitle.js";
 const AuthMainStepContent = ({
   oAuthMethods,
   disableEmailLogin,
@@ -71,11 +72,11 @@ const AuthMainStepContent = ({
         }
         case AuthLayout.AUTH_CONDENSED: {
           const icons = [];
-          oAuthMethods == null ? void 0 : oAuthMethods.forEach((method) => icons.push(ACCOUNT_TYPES[method][useBrandedLogos ? "logoBranded" : "logo"]));
+          oAuthMethods == null ? void 0 : oAuthMethods.forEach((method) => icons.push(ACCOUNT_TYPES[method][useBrandedLogos ? "iconBranded" : "icon"]));
           methods.push([
             /* @__PURE__ */ jsxs(CondensedButton, { onClick: handleCondensedAuthClick, variant: "tertiary", fullWidth: true, children: [
               /* @__PURE__ */ jsx(IconGroupSpacer, { slot: "start", icons: [], $isDark: useDarkLogos }),
-              "Sign Up or Login",
+              signUpOrLogInTitle,
               /* @__PURE__ */ jsx(StyledIconGroup, { slot: "end", icons: icons.splice(0, 3), $isDark: useDarkLogos })
             ] }, "authCondensed"),
             layout
@@ -94,7 +95,7 @@ const AuthMainStepContent = ({
           methods.push([
             /* @__PURE__ */ jsxs(CondensedButton, { onClick: handleCondensedExternalClick, variant: "tertiary", fullWidth: true, children: [
               /* @__PURE__ */ jsx(IconGroupSpacer, { slot: "start", icons: [], $isDark: useDarkLogos }),
-              "Connect Wallet",
+              connectWalletTitle,
               /* @__PURE__ */ jsx(StyledIconGroup, { slot: "end", icons: icons.splice(0, 3), $isDark: useDarkLogos })
             ] }, "authCondensed"),
             layout

package/dist/modal/components/AwaitingPasswordStep/AwaitingPasswordStep.js

@@ -5,10 +5,13 @@ import { useModalStore } from "../../stores/index.js";
 import { Waiting } from "../Waiting/Waiting.js";
 const AwaitingPasswordStep = () => {
   const isLogin = useModalStore((state) => state.isLogin());
+  const signupState = useModalStore((state) => state.getSignupState());
+  const loginState = useModalStore((state) => state.getLoginState());
+  const isPIN = !!(signupState == null ? void 0 : signupState.pinUrl) || !!(loginState == null ? void 0 : loginState.pinUrl);
   return /* @__PURE__ */ jsx(
     Waiting,
     {
-      heading: isLogin ? "Waiting for Password" : "Creating Password",
+      heading: isLogin ? `Waiting for ${isPIN ? "PIN" : "Password"}` : `Creating  ${isPIN ? "PIN" : "Password"}`,
       subheading: "Follow the prompts presented by your browser."
     }
   );

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

@@ -25,15 +25,16 @@ const BiometricCreationStep = () => {
   const onClick = (method) => () => {
     presentSignupUi(method, signupState);
   };
-  const isBoth = !!(signupState == null ? void 0 : signupState.passkeyUrl) && !!(signupState == null ? void 0 : signupState.passwordUrl);
+  const isBoth = !!(signupState == null ? void 0 : signupState.passkeyUrl) && (!!(signupState == null ? void 0 : signupState.passwordUrl) || !!(signupState == null ? void 0 : signupState.pinUrl));
+  const isPIN = !!(signupState == null ? void 0 : signupState.pinUrl);
   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(Heading, { 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__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: isBoth ? `Choose a ${isPIN ? "PIN" : "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: [
@@ -49,9 +50,10 @@ const BiometricCreationStep = () => {
       ] }),
       isBoth && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(CpslDivider, { children: "or" }),
-        /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: onClick(AuthMethod.PASSWORD), disabled: !!authStepRoute, children: [
+        /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, onClick: onClick(isPIN ? AuthMethod.PIN : AuthMethod.PASSWORD), disabled: !!authStepRoute, children: [
           /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "passcode" }),
-          "Choose Password"
+          "Choose ",
+          isPIN ? "PIN" : "Password"
         ] })
       ] })
     ] })

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

@@ -17,16 +17,16 @@ const BiometricLoginStep = () => {
   if (!loginState) {
     return null;
   }
-  const { passkeyUrl, passkeyKnownDeviceUrl, passwordUrl, isPasskeySupported } = loginState;
+  const { passkeyUrl, pinUrl, 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;
+  const isPasskey = !!passkeyUrl, isPassword = !!passwordUrl, isPIN = !!pinUrl, 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 || isPIN;
   return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      displayWelcomeBack && /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Welcome back," }),
+      displayWelcomeBack && /* @__PURE__ */ jsx(Heading, { 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" }),
+      (isPassword || isPIN) && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: () => presentLoginUi(isPIN ? AuthMethod.PIN : AuthMethod.PASSWORD, loginState), children: "Login" }),
       isPasskey && /* @__PURE__ */ jsxs(Fragment, { children: [
         displayKnownDevices && /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(KnownDevices, { hints: biometricHints, link: passkeyKnownDeviceUrl }),

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

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

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

@@ -4,7 +4,7 @@ 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 AnimatedHeightWrapper = ({ children, className, noAnimate }) => {
   const containerRef = useRef(null);
   const [height, setHeight] = useState("auto");
   useEffect(() => {
@@ -19,7 +19,7 @@ const AnimatedHeightWrapper = ({ children, className }) => {
       };
     }
   }, []);
-  return /* @__PURE__ */ jsx(Container, { className, style: { height }, animate: { height }, transition: { duration: 0.2 }, children: /* @__PURE__ */ jsx("div", { ref: containerRef, children }) });
+  return /* @__PURE__ */ jsx(Container, { className, style: { height }, animate: { height }, transition: { duration: noAnimate ? 0 : 0.2 }, children: /* @__PURE__ */ jsx("div", { ref: containerRef, children }) });
 };
 const Container = safeStyled(motion.div)`
   overflow: hidden;

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

@@ -5,7 +5,9 @@ interface BodyProps {
     disableEmailLogin: boolean;
     disablePhoneLogin: boolean;
     isGuestModeEnabled?: boolean;
+    onDisconnect: () => void;
+    isDisconnecting: boolean;
     onClose: () => void;
 }
-export declare const Body: ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, onClose, }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Body: ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, onClose, onDisconnect, isDisconnecting, }: BodyProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -26,7 +26,6 @@ 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";
@@ -44,25 +43,22 @@ import { AccountProfileLink } from "../Account/AccountProfileLink.js";
 import { AccountProfileUnlink } from "../Account/AccountProfileUnlink.js";
 import { ExternalWalletNetworkSelectStep } from "../ExternalWalletNetworkSelectStep/ExternalWalletNetworkSelectStep.js";
 import { AwaitingIFrameStep } from "../AwaitingIFrameStep/AwaitingIFrameStep.js";
+import { Footer } from "../Footer/Footer.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
+  onClose,
+  onDisconnect,
+  isDisconnecting
 }) => {
   const currentStep = useModalStore((state) => state.step);
   const onRampConfig = useModalStore((state) => state.onRampConfig);
@@ -170,10 +166,10 @@ const Body = ({
         return /* @__PURE__ */ jsx(AddFundsDone, { onClose });
       }
       case ModalStep.ACCOUNT_MAIN: {
-        return /* @__PURE__ */ jsx(Account, { onClose });
+        return /* @__PURE__ */ jsx(Account, {});
       }
       case ModalStep.ACCOUNT_PROFILE: {
-        return /* @__PURE__ */ jsx(AccountProfile, {});
+        return /* @__PURE__ */ jsx(AccountProfile, { onDisconnect, isDisconnecting });
       }
       case ModalStep.ACCOUNT_PROFILE_LIST: {
         return /* @__PURE__ */ jsx(AccountProfileLinkOptions, {});
@@ -228,7 +224,7 @@ const Body = ({
       /* @__PURE__ */ jsx(Controls, { onClose }),
       /* @__PURE__ */ jsx(Header, {})
     ] }),
-    /* @__PURE__ */ jsxs(AnimatedWrapper, { children: [
+    /* @__PURE__ */ jsxs(AnimatedWrapper, { noAnimate: IFrameSteps.includes(currentStep), children: [
       /* @__PURE__ */ jsx(
         AnimatePresence,
         {
@@ -238,7 +234,7 @@ const Body = ({
             setStepDirection(1);
           },
           custom: stepDirection,
-          children: /* @__PURE__ */ jsxs(
+          children: /* @__PURE__ */ jsx(
             BodyContainer,
             {
               custom: stepDirection,
@@ -247,49 +243,49 @@ const Body = ({
               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" }) })
-                      ] }) })
-                    ]
-                  }
-                )
-              ]
+              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" }) })
+                    ] }) })
+                  ]
+                }
+              )
             },
             ["ADD_FUNDS_BUY", "ADD_FUNDS_RECEIVE", "ADD_FUNDS_WITHDRAW"].includes(currentStep) ? "ADD_FUNDS" : currentStep
           )
         }
       ),
-      /* @__PURE__ */ jsx(IFrameStep, {})
+      /* @__PURE__ */ jsx(IFrameStep, {}),
+      /* @__PURE__ */ jsx(Footer, {})
     ] })
   ] });
 };
 const Container = safeStyled.div`
   position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
 `;
 const AnimatedWrapper = safeStyled(AnimatedHeightWrapper)`
-  margin-top: -16px;
 `;
 const BodyContainer = safeStyled(motion.div)`
   position: relative;
@@ -305,10 +301,7 @@ const InnerContainer = safeStyled.div`
   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"}`;
-}};
+  padding: 0px;
   min-height: ${({ $step }) => {
   var _a;
   return (_a = MIN_HEIGHT[$step]) != null ? _a : "auto";

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

@@ -4,10 +4,10 @@ import {
 } 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 { HeroAccountTypeIcon, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
 import { useEffect, useMemo } from "react";
 import { useModalStore } from "../../stores/index.js";
-import { safeStyled } from "@getpara/react-common";
+import { HeroSpinner, safeStyled } from "@getpara/react-common";
 import { useCopyToClipboard } from "@getpara/react-common";
 import { ModalStep } from "../../utils/steps.js";
 import { routeMobileExternalWallet } from "../../utils/routeMobileExternalWallet.js";
@@ -56,15 +56,18 @@ const ChainSwitch = () => {
         ] })
       ] }) });
     }
+    const isError = !!(externalWalletError == null ? void 0 : externalWalletError[0]);
     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(
+        HeroSpinner,
+        {
+          icon: /* @__PURE__ */ jsx(HeroAccountTypeIcon, { accountType: wallet.internalId, src: wallet ? wallet.iconUrl : void 0 }),
+          status: isError ? "error" : "pending",
+          text: isError ? externalWalletError[0] : `Confirm the request to change networks in your ${wallet.name} wallet.`,
+          secondaryText: externalWalletError == null ? void 0 : externalWalletError[1]
+        }
+      ),
+      ((_a = externalWalletError == null ? void 0 : externalWalletError[0]) == null ? void 0 : _a.toLowerCase()) !== NETWORK_NOT_SUPPORTED_ERROR && /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, variant: "secondary", onClick: handleTryAgainClick, children: [
         /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "refresh" }),
         "Try Again"
       ] })
@@ -79,17 +82,6 @@ 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/Controls/{Selects.d.ts → ChainSelect.d.ts}

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