@getpara/react-sdk-lite 2.0.0-alpha.52 → 2.0.0-alpha.54

package/dist/modal/ParaModal.js

@@ -27,9 +27,9 @@ import { SDK_VERSION } from "./constants/constants.js";
 defineCustomElements();
 const ParaModal = forwardRef((props, ref) => {
   const storedModalConfig = useStore((state) => state.modalConfig);
-  const openedToStep = useStore((state) => state.openedToStep);
+  const refs = useStore((state) => state.refs);
   const modalContentRef = useRef(null);
-  const refs = useModalStore((state) => state.refs);
+  const modalRefs = useModalStore((state) => state.refs);
   const flow = useModalStore((state) => state.flow);
   const currentStep = useModalStore((state) => state.step);
   const setAuthState = useModalStore((state) => state.setAuthState);
@@ -153,7 +153,7 @@ const ParaModal = forwardRef((props, ref) => {
         break;
       case isAccount:
         setFlow("account");
-        if (!openedToStep.current) {
+        if (!refs.openedToStep.current) {
           setStep(ModalStep.ACCOUNT_MAIN);
         }
         break;
@@ -223,7 +223,7 @@ const ParaModal = forwardRef((props, ref) => {
     updateSelectedWallet();
   }, [para]);
   useEffect(() => {
-    if (bareModal && !isAccountLoading && !isConnected && !["signup", "login"].includes(flow != null ? flow : "") && refs.currentStep.current !== ModalStep.AUTH_MAIN) {
+    if (bareModal && !isAccountLoading && !isConnected && !["signup", "login"].includes(flow != null ? flow : "") && modalRefs.currentStep.current !== ModalStep.AUTH_MAIN) {
       setStep(ModalStep.AUTH_MAIN);
     }
   }, [bareModal, flow, isConnected, isAccountLoading]);
@@ -256,7 +256,7 @@ const ParaModal = forwardRef((props, ref) => {
     setIsModalMounted(true);
   };
   const handleModalExited = () => __async(void 0, null, function* () {
-    openedToStep.current = null;
+    refs.openedToStep.current = null;
     setIsModalMounted(false);
     if (RESET_TO_AUTH_STEPS.includes(currentStep)) {
       resetModalState();

package/dist/modal/components/Account/Account.js

@@ -8,9 +8,10 @@ import { OnRampStep, useModalStore } from "../../stores/index.js";
 import { useEffect } from "react";
 import { ModalStep } from "../../utils/steps.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useAccount, useWalletBalance } from "../../../provider/index.js";
+import { useAccount } from "../../../provider/index.js";
 import { EnabledFlow } from "@getpara/web-sdk";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
+import { useAssets } from "../../../provider/providers/AssetsProvider.js";
 import { AccountHeader } from "./AccountHeader.js";
 const Account = () => {
   const onRampConfig = useModalStore((state) => state.onRampConfig);
@@ -19,8 +20,8 @@ const Account = () => {
   const setOnRampStep = useModalStore((state) => state.setOnRampStep);
   const para = useInternalClient();
   const { embedded } = useAccount();
-  const { data: balance } = useWalletBalance();
   const { isEnabled } = useAccountLinking();
+  const { profileBalance } = useAssets();
   const isGuestMode = embedded.isConnected && embedded.isGuestMode;
   const cantBuyAndWithdraw = (para.externalWalletConnectionType === "CONNECTION_ONLY" || para.externalWalletConnectionType === "VERIFICATION") && !para.userId;
   const isOnRampLoaded = !!onRampConfig;
@@ -56,7 +57,7 @@ const Account = () => {
     /* @__PURE__ */ jsx(AccountHeader, { withBalance: true }),
     /* @__PURE__ */ jsxs(LowerContainer, { children: [
       isGuestMode && /* @__PURE__ */ jsxs(Fragment, { children: [
-        balance && parseFloat(balance) > 0 && /* @__PURE__ */ jsxs(Alert, { children: [
+        profileBalance && profileBalance.value && profileBalance.value.value > 0 && /* @__PURE__ */ jsxs(Alert, { children: [
           /* @__PURE__ */ jsx(CpslIcon, { icon: "alertTriangle", size: "24px", style: { color: "var(--cpsl-color-utility-yellow)" } }),
           "You've funded this account - complete account setup to maintain access."
         ] }),

package/dist/modal/components/Account/AccountHeader.js

@@ -2,32 +2,26 @@
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { getExternalWalletIcon, safeStyled } from "@getpara/react-common";
-import { formatBalanceString } from "../../utils/stringFormatters.js";
 import { CpslIcon, CpslText } from "@getpara/react-components";
 import { useMemo } from "react";
 import { truncateAddress } from "@getpara/web-sdk";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useAccount, useWallet, useWalletBalance } from "../../../provider/index.js";
+import { useAssets } from "../../../provider/providers/AssetsProvider.js";
+import { useAccount } from "../../../provider/index.js";
 import { WalletSelect } from "../WalletSelect/WalletSelect.js";
-const Balance = () => {
-  const { data: balance } = useWalletBalance();
-  return /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", weight: "medium", style: { visibility: !!balance ? "visible" : "hidden" }, children: balance ? formatBalanceString(balance) : "0" });
-};
 const AccountHeader = ({ withBalance = false } = {}) => {
   const para = useInternalClient();
   const { connectionType } = useAccount();
-  const { data: activeWallet } = useWallet();
+  const { profileBalance, totalBalance } = useAssets();
+  const externalWallet = Object.keys(para == null ? void 0 : para.externalWallets).length > 0 ? Object.values(para.externalWallets)[0] : void 0;
   const { name, icon, src } = useMemo(() => {
     var _a;
     let name2, icon2, src2;
     switch (true) {
-      case (activeWallet == null ? void 0 : activeWallet.isExternal):
-        {
-          const wallet = Object.values(para.externalWallets)[0];
-          name2 = (_a = wallet.ensName) != null ? _a : truncateAddress(wallet.address, wallet.type, { prefix: para.cosmosPrefix });
-          src2 = wallet.ensAvatar;
-          icon2 = getExternalWalletIcon(wallet.externalProviderId);
-        }
+      case !!externalWallet:
+        name2 = (_a = externalWallet.ensName) != null ? _a : truncateAddress(externalWallet.address, externalWallet.type, { prefix: para.cosmosPrefix });
+        src2 = externalWallet.ensAvatar;
+        icon2 = getExternalWalletIcon(externalWallet.externalProviderId);
         break;
       default:
         name2 = `${para.partnerName} Wallet`;
@@ -36,7 +30,7 @@ const AccountHeader = ({ withBalance = false } = {}) => {
         break;
     }
     return { name: name2, icon: icon2, src: src2 };
-  }, [activeWallet, para.partnerName, para.partnerLogo, para.externalWallets]);
+  }, [para.partnerName, para.partnerLogo, externalWallet]);
   return /* @__PURE__ */ jsxs(AccountContainer, { children: [
     /* @__PURE__ */ jsx(
       CpslIcon,
@@ -51,7 +45,7 @@ const AccountHeader = ({ withBalance = false } = {}) => {
       }
     ),
     connectionType === "both" ? /* @__PURE__ */ jsx(WalletSelect, {}) : /* @__PURE__ */ jsx(CpslText, { variant: "headingXS", weight: "semiBold", color: "contrast", children: name }),
-    withBalance && /* @__PURE__ */ jsx(Balance, {})
+    withBalance && typeof totalBalance === "string" && totalBalance !== "" && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", weight: "medium", style: { visibility: profileBalance ? "visible" : "hidden" }, children: totalBalance })
   ] });
 };
 const AccountContainer = safeStyled.div`

package/dist/modal/components/Account/AccountProfile.js

@@ -9,21 +9,47 @@ import { CpslButton, CpslIcon, CpslText } from "@getpara/react-components";
 import { useAccount, useClient } from "../../../provider/index.js";
 import { useLinkedAccounts } from "../../../provider/hooks/index.js";
 import { getWalletDisplayName } from "../../utils/getWalletDisplayName.js";
-import { truncateAddress } from "@getpara/web-sdk";
+import {
+  formatAssetQuantity,
+  formatCurrency,
+  truncateAddress
+} from "@getpara/web-sdk";
 import { useAccountLinking } from "../../../provider/providers/AccountLinkProvider.js";
+import { useMemo } from "react";
 import { ACCOUNT_TYPES, safeStyled, useCopyToClipboard } from "@getpara/react-common";
 import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useStore } from "../../../provider/stores/useStore.js";
 import { AccountHeader } from "./AccountHeader.js";
+import { useAssets } from "../../../provider/providers/AssetsProvider.js";
 const Entry = ({
   identifier,
   icon,
   name,
   address,
   addressShort,
+  balance: walletBalance,
   onUnlink
 }) => {
+  const balancesConfig = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.balances;
+  });
   const [isCopied, copy] = useCopyToClipboard();
+  const balance = useMemo(() => {
+    var _a;
+    switch (true) {
+      case !balancesConfig:
+      case (balancesConfig == null ? void 0 : balancesConfig.displayType) === "AGGREGATED":
+        return formatCurrency(walletBalance == null ? void 0 : walletBalance.value);
+      default:
+        return formatAssetQuantity({
+          quantity: (_a = walletBalance == null ? void 0 : walletBalance.assets.find(
+            ({ metadata }) => !!metadata && metadata.symbol === balancesConfig.asset.symbol
+          )) == null ? void 0 : _a.quantity,
+          symbol: balancesConfig.asset.symbol
+        });
+    }
+  }, [balancesConfig, walletBalance]);
   return /* @__PURE__ */ jsxs(EntryContainer, { children: [
     icon,
     /* @__PURE__ */ jsx(EntryDisplayName, { variant: "bodyM", color: "contrast", children: name }),
@@ -43,6 +69,7 @@ const Entry = ({
         }
       )
     ] }) : null }),
+    typeof balance === "string" && balance !== "" && /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "contrast", children: balance }),
     onUnlink && /* @__PURE__ */ jsx(EntryUnlink, { href: "#", onClick: onUnlink, children: "Unlink" })
   ] }, address != null ? address : identifier);
 };
@@ -60,13 +87,14 @@ const AccountProfile = ({
     var _a2;
     return (_a2 = state.modalConfig) == null ? void 0 : _a2.hideWallets;
   });
+  const { profileBalance } = useAssets();
   if (!para) {
     return null;
   }
   const externalWallet = (_a = para.authInfo) == null ? void 0 : _a.externalWallet;
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
-    /* @__PURE__ */ jsx(AccountHeader, {}),
-    /* @__PURE__ */ jsxs(ParaConnect, { target: "_blank", href: "https://connect.getpara.com", rel: "noreferrer noopener", children: [
+    /* @__PURE__ */ jsx(AccountHeader, { withBalance: true }),
+    connectionType !== "external" && /* @__PURE__ */ jsxs(ParaConnect, { target: "_blank", href: "https://connect.getpara.com", rel: "noreferrer noopener", children: [
       /* @__PURE__ */ jsx(ParaIcon, { icon: "paraIconBrand", size: "40px", inset: "8px", background: "white" }),
       /* @__PURE__ */ jsxs("div", { children: [
         "Do even more with your wallet",
@@ -106,7 +134,8 @@ const AccountProfile = ({
           icon: /* @__PURE__ */ jsx(WalletTypeIcon, { walletType: wallet.type, externalWallet: wallet.externalProviderId, size: "24px" }),
           name: getWalletDisplayName(para, wallet),
           address: wallet.address,
-          addressShort: truncateAddress(wallet.address, wallet.type)
+          addressShort: truncateAddress(wallet.address, wallet.type),
+          balance: profileBalance == null ? void 0 : profileBalance.wallets.find((w) => w.address === wallet.address)
         },
         wallet.address
       )) })

package/dist/modal/components/Account/AccountProfileLink.js

@@ -9,7 +9,7 @@ import { useEffect, useMemo } from "react";
 import { HeroAccountTypeIcon, HeroSuccessIcon } from "../common.js";
 import { VerificationCode } from "../VerificationCodeStep/VerificationCodeStep.js";
 import { extractAuthInfo } from "@getpara/user-management-client";
-import { FarcasterConnectQR } from "../OAuth/FarcasterOAuthStep.js";
+import { FarcasterLink } from "../OAuth/FarcasterLink.js";
 import { useTelegramLogin } from "../../hooks/useTelegramLogin.js";
 import { TelegramIFrame } from "../OAuth/TelegramOAuthStep.js";
 import { AuthInput } from "../AuthInput/AuthInput.js";
@@ -35,7 +35,7 @@ function AccountProfileLink() {
     isLoaded,
     setIsLoaded
   } = useTelegramLogin(
-    isTelegram ? { isActive: isTelegram, status: linkAccountStatus, onSubmit: verifyTelegramLink } : { isActive: false }
+    isTelegram ? { isActive: isTelegram, status: linkAccountStatus, onSubmit: verifyTelegramLink, isLinking: true } : { isActive: false, isLinking: true }
   ), status = (accountLinkInProgress == null ? void 0 : accountLinkInProgress.isComplete) ? "success" : isTelegram ? telegramStatus : linkAccountStatus, commonWallet = useMemo(() => {
     const wallet = wallets.find(
       (w) => [w.name, w.internalId, w.id].includes(externalWalletProvider != null ? externalWalletProvider : "") && w.type === externalWalletType
@@ -140,7 +140,7 @@ function AccountProfileLink() {
         break;
       // Farcaster Connect QR
       case (accountLinkType === "FARCASTER" && status !== "success"):
-        lower2 = /* @__PURE__ */ jsx(FarcasterConnectQR, {});
+        lower2 = /* @__PURE__ */ jsx(FarcasterLink, {});
         break;
       // OAuth, External Wallet, Telegram
       default:

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

@@ -6,7 +6,7 @@ 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 { formatCurrency, 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";
@@ -16,10 +16,12 @@ import { useWallet } from "../../../provider/hooks/queries/useWallet.js";
 import { AssetIcon, 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 +61,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/AwaitingAccountStep/AwaitingAccountStep.d.ts

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

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

@@ -0,0 +1,20 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { useModalStore } from "../../stores/index.js";
+import { Waiting } from "../Waiting/Waiting.js";
+const AwaitingAccountStep = () => {
+  const isLogin = useModalStore((state) => state.isLogin());
+  const verifyState = useModalStore((state) => state.getVerifyState());
+  const isSLOPopup = !!(verifyState == null ? void 0 : verifyState.isWalletSelectionNeeded);
+  return /* @__PURE__ */ jsx(
+    Waiting,
+    {
+      heading: isLogin ? "Logging you in..." : "Creating your account...",
+      subheading: isSLOPopup ? "Follow the prompts presented by your browser." : void 0
+    }
+  );
+};
+export {
+  AwaitingAccountStep
+};

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

@@ -18,7 +18,7 @@ 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 { 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";
@@ -42,8 +42,9 @@ import { AccountProfileLinkOptions } from "../Account/AccountProfileLinkOptions.
 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 { AwaitingAccountStep } from "../AwaitingAccountStep/AwaitingAccountStep.js";
 import { Footer } from "../Footer/Footer.js";
+import { renderTextWithLinks } from "../../utils/renderTextWithLinks.js";
 const MIN_HEIGHT = {
   [ModalStep.ADD_FUNDS_AWAITING]: "680px"
 };
@@ -66,6 +67,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;
@@ -189,8 +192,8 @@ const Body = ({
       case ModalStep.EX_WALLET_NETWORK_SELECT: {
         return /* @__PURE__ */ jsx(ExternalWalletNetworkSelectStep, {});
       }
-      case ModalStep.AWAITING_IFRAME: {
-        return /* @__PURE__ */ jsx(AwaitingIFrameStep, {});
+      case ModalStep.AWAITING_ACCOUNT: {
+        return /* @__PURE__ */ jsx(AwaitingAccountStep, {});
       }
       default: {
         if (IFrameSteps.includes(currentStep)) {
@@ -234,7 +237,7 @@ const Body = ({
             setStepDirection(1);
           },
           custom: stepDirection,
-          children: /* @__PURE__ */ jsx(
+          children: /* @__PURE__ */ jsxs(
             BodyContainer,
             {
               custom: stepDirection,
@@ -243,32 +246,38 @@ 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: [
+                      /* @__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(ModalErrorAlert, { children: /* @__PURE__ */ jsxs(ErrorContent, { children: [
+                  /* @__PURE__ */ jsx(ErrorCloseButton, { onClick: () => setModalError(void 0), children: /* @__PURE__ */ jsx(ErrorCloseIcon, { icon: "x" }) }),
+                  /* @__PURE__ */ jsx(ErrorText, { children: renderTextWithLinks(modalError) })
+                ] }) })
+              ]
             },
             ["ADD_FUNDS_BUY", "ADD_FUNDS_RECEIVE", "ADD_FUNDS_WITHDRAW"].includes(currentStep) ? "ADD_FUNDS" : currentStep
           )
@@ -291,7 +300,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`
@@ -330,17 +339,59 @@ const TestModeAlert = safeStyled(CpslAlert)`
   right: 16px;
   z-index: 1000;
 `;
+const ModalErrorAlert = safeStyled.div`
+  background: #fffcec;
+  border: 2px solid var(--cpsl-color-utility-yellow);
+  border-radius: 4px;
+  padding: 8px 8px;
+`;
+const ErrorContent = safeStyled.div`
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  position: relative;
+`;
+const ErrorText = safeStyled.div`
+  flex: 1;
+  font-size: 14px;
+  line-height: 1.4;
+  color: var(--cpsl-color-black);
+  font-weight: 400;
+`;
+const ErrorCloseButton = safeStyled.button`
+  background-color: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  margin-top: 1px;
+`;
+const ErrorCloseIcon = safeStyled(CpslIcon)`
+  --icon-color: var(--cpsl-color-utility-yellow);
+  --height: 20px;
+  --width: 20px;
+`;
 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

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

@@ -42,6 +42,7 @@ const useStepTitle = () => {
       [ModalStep.VERIFICATIONS]: "Sign Up",
       [ModalStep.AWAITING_OAUTH]: signUpOrLogInTitle,
       [ModalStep.FARCASTER_OAUTH]: signUpOrLogInTitle,
+      [ModalStep.TELEGRAM_OAUTH]: signUpOrLogInTitle,
       [ModalStep.BIOMETRIC_CREATION]: "Sign Up",
       [ModalStep.PASSWORD_CREATION]: "Sign Up",
       [ModalStep.AWAITING_BIOMETRIC_CREATION]: "Sign Up",
@@ -69,7 +70,7 @@ const useStepTitle = () => {
       [ModalStep.ACCOUNT_PROFILE_LIST]: "Link Account",
       [ModalStep.ACCOUNT_PROFILE_ADD]: "Link Account",
       [ModalStep.ACCOUNT_PROFILE_REMOVE]: "Unlink Account",
-      [ModalStep.AWAITING_IFRAME]: isLogin ? "Login" : "Sign Up"
+      [ModalStep.AWAITING_ACCOUNT]: isLogin ? "Login" : "Sign Up"
     }),
     [isLogin, chainId, hideWallets, authStepTitle]
   );

package/dist/modal/components/OAuth/FarcasterLink.d.ts

@@ -0,0 +1,2 @@
+export declare function FarcasterConnectQR(): import("react/jsx-runtime").JSX.Element;
+export declare const FarcasterLink: () => import("react/jsx-runtime").JSX.Element;

package/dist/modal/components/OAuth/FarcasterLink.js

@@ -0,0 +1,30 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
+import { CenteredText, Heading, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
+import { useModalStore } from "../../stores/index.js";
+import { isMobile } from "@getpara/web-sdk";
+function FarcasterConnectQR() {
+  const farcasterConnectUri = useModalStore((state) => state.farcasterConnectUri);
+  return /* @__PURE__ */ jsx(Fragment, { children: isMobile() ? /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+    /* @__PURE__ */ jsx(CpslText, { weight: "medium", color: "secondary", children: `Don\u2019t have Farcaster` }),
+    /* @__PURE__ */ jsxs(CpslButton, { as: "a", href: "https://link.warpcast.com/download-qr", target: "_blank", variant: "secondary", children: [
+      /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "linkExternal" }),
+      `Get Farcaster`
+    ] })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Heading, { children: "Sign in using Farcaster" }),
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(CenteredText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan the QR code with your phone's camera to proceed." }),
+      /* @__PURE__ */ jsx(QRContainer, { children: !farcasterConnectUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: farcasterConnectUri }) })
+    ] })
+  ] }) });
+}
+const FarcasterLink = () => {
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsx(FarcasterConnectQR, {}) });
+};
+export {
+  FarcasterConnectQR,
+  FarcasterLink
+};

package/dist/modal/components/OAuth/FarcasterOAuthStep.d.ts

@@ -1,3 +1 @@
-export declare function FarcasterConnectQR(): import("react/jsx-runtime").JSX.Element;
-declare const FarcasterOAuthStep: () => import("react/jsx-runtime").JSX.Element;
-export default FarcasterOAuthStep;
+export declare function FarcasterOAuthStep(): import("react/jsx-runtime").JSX.Element;