@getpara/react-sdk-lite 2.7.0 → 2.9.0

package/dist/modal/ParaModal.js

@@ -14,7 +14,7 @@ import { ModalStep, RESET_TO_ACCOUNT_STEPS, RESET_TO_AUTH_STEPS } from "./utils/
 import { AuthLayout } from "./types/modalProps.js";
 import { DEFAULTS } from "./constants/defaults.js";
 import { useGoBack } from "./hooks/useGoBack.js";
-import { safeStyled, SDK_VERSION } from "@getpara/react-common";
+import { safeStyled } from "@getpara/react-common";
 import { hasEmbeddedAuth, hasExternalWallet } from "./utils/authLayoutHelpers.js";
 import { useAccount, useModal, useParaStatus, useWalletState } from "../provider/index.js";
 import { useInternalClient } from "../provider/hooks/utils/useInternalClient.js";
@@ -110,7 +110,7 @@ const ParaModal = forwardRef((props, ref) => {
             onClose,
             defaultAuthIdentifier
           }), rest),
-          reactSdkVersion: SDK_VERSION
+          reactSdkVersion: "2.9.0"
         });
       } catch (e) {
       }

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

@@ -66,11 +66,11 @@ const Account = () => {
   useEffect(() => {
     setGuestAddFundsTab();
   }, []);
-  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsxs($InnerStepContainer, { children: [
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, "data-testid": "para-account-main", children: /* @__PURE__ */ jsxs($InnerStepContainer, { children: [
     /* @__PURE__ */ jsx(AccountHeader, { withBalance: true }),
     /* @__PURE__ */ jsxs(LowerContainer, { children: [
       isGuestMode && /* @__PURE__ */ jsxs(Fragment, { children: [
-        profileBalance && profileBalance.value && profileBalance.value.value > 0 && /* @__PURE__ */ jsxs(Alert, { children: [
+        profileBalance && profileBalance.value && profileBalance.value.value > 0 && /* @__PURE__ */ jsxs(Alert, { "data-testid": "para-guest-warning", 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."
         ] }),
@@ -82,6 +82,7 @@ const Account = () => {
             onClick: () => {
               setStep(ModalStep.AUTH_GUEST_SIGNUP);
             },
+            "data-testid": "para-complete-setup",
             children: [
               /* @__PURE__ */ jsx(CpslIcon, { icon: "stars02" }),
               "Complete Account Setup"
@@ -89,15 +90,24 @@ const Account = () => {
           }
         )
       ] }),
-      !!(sendTx == null ? void 0 : sendTx.explorerUrl) && /* @__PURE__ */ jsxs(MonitorLink, { target: "_blank", href: sendTx.explorerUrl, rel: "noopener noreferrer", children: [
+      !!(sendTx == null ? void 0 : sendTx.explorerUrl) && /* @__PURE__ */ jsxs(MonitorLink, { target: "_blank", href: sendTx.explorerUrl, rel: "noopener noreferrer", "data-testid": "para-monitor-tx", children: [
         /* @__PURE__ */ jsx("span", { children: "Monitor Transaction" }),
         /* @__PURE__ */ jsx(CpslIcon, { icon: "externalLink", size: "16px", style: { marginLeft: "6px" } })
       ] }),
       /* @__PURE__ */ jsx(ButtonContainer, { children: isOnRampLoaded ? /* @__PURE__ */ jsxs(Fragment, { children: [
-        (onRampConfig.isBuyEnabled || onRampConfig.isReceiveEnabled) && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "plusCircle", onClick: handleBuyClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Add Funds" }) }),
-        embedded.authType !== "externalWallet" && /* @__PURE__ */ jsx(OptionButton, { icon: "send", onClick: handleSendClick, disabled: !profileBalance, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Send" }) }),
-        onRampConfig.isWithdrawEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "arrowCircleDown", onClick: handleSellClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Withdraw" }) }),
-        /* @__PURE__ */ jsx(OptionButton, { icon: "user01", onClick: handleProfileClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: isEnabled ? "Profile" : "Settings" }) })
+        (onRampConfig.isBuyEnabled || onRampConfig.isReceiveEnabled) && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "plusCircle", onClick: handleBuyClick, "data-testid": "para-add-funds-tile", children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Add Funds" }) }),
+        embedded.authType !== "externalWallet" && /* @__PURE__ */ jsx(
+          OptionButton,
+          {
+            icon: "send",
+            onClick: handleSendClick,
+            disabled: !profileBalance,
+            "data-testid": "para-send-tile",
+            children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Send" })
+          }
+        ),
+        onRampConfig.isWithdrawEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "arrowCircleDown", onClick: handleSellClick, "data-testid": "para-withdraw-tile", children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Withdraw" }) }),
+        /* @__PURE__ */ jsx(OptionButton, { icon: "user01", onClick: handleProfileClick, "data-testid": "para-profile-tile", children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: isEnabled ? "Profile" : "Settings" }) })
       ] }) : /* @__PURE__ */ jsx(CpslSpinner, {}) })
     ] })
   ] }) });

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

@@ -66,10 +66,20 @@ const AccountProfile = ({
           /* @__PURE__ */ jsx(Content, { children: wallets.map((wallet) => /* @__PURE__ */ jsx(WalletEntry, { wallet, isSelectable: true }, `${wallet.address}-${wallet.type}`)) })
         ] }, partner.id);
       }),
-      !embedded.isGuestMode && /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, variant: "tertiary", onClick: switchWallets, disabled: isSwitchWalletsPending, children: isSwitchWalletsPending ? "Please Wait..." : /* @__PURE__ */ jsxs(Fragment, { children: [
-        /* @__PURE__ */ jsx(CpslIcon, { icon: "shuffle", slot: "start", size: "16px" }),
-        para.isMultiWallet ? "Switch Wallets" : "Switch Wallet"
-      ] }) })
+      !embedded.isGuestMode && /* @__PURE__ */ jsx(
+        CpslButton,
+        {
+          fullWidth: true,
+          variant: "tertiary",
+          onClick: switchWallets,
+          disabled: isSwitchWalletsPending,
+          "data-testid": "para-switch-wallets",
+          children: isSwitchWalletsPending ? "Please Wait..." : /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(CpslIcon, { icon: "shuffle", slot: "start", size: "16px" }),
+            para.isMultiWallet ? "Switch Wallets" : "Switch Wallet"
+          ] })
+        }
+      )
     ] }),
     !embedded.isGuestMode && /* @__PURE__ */ jsxs(Section, { children: [
       /* @__PURE__ */ jsx(Title, { variant: "bodyS", color: "secondary", children: "Connected Wallets" }),
@@ -85,6 +95,7 @@ const AccountProfile = ({
             onClick: () => {
               setStep(ModalStep.ADD_EX_WALLET_MORE);
             },
+            "data-testid": "para-add-wallet",
             children: [
               /* @__PURE__ */ jsx(CpslIcon, { icon: "plus", slot: "start" }),
               "Add Wallet"
@@ -108,16 +119,26 @@ const AccountProfile = ({
             linkedAccount.id
           );
         }) }),
-        /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, variant: "tertiary", onClick: () => linkAccount(void 0), children: [
+        /* @__PURE__ */ jsxs(CpslButton, { fullWidth: true, variant: "tertiary", onClick: () => linkAccount(void 0), "data-testid": "para-link-account", children: [
           /* @__PURE__ */ jsx(CpslIcon, { icon: "userPlus", slot: "start", size: "16px" }),
           "Link an account"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxs(DisconnectButton, { variant: "destructive", fullWidth: true, onClick: onDisconnect, disabled: isDisconnecting, children: [
-      hideWallets ? "Logout" : "Disconnect Wallet",
-      /* @__PURE__ */ jsx(CpslIcon, { icon: "logOut", slot: "end" })
-    ] })
+    /* @__PURE__ */ jsxs(
+      DisconnectButton,
+      {
+        variant: "destructive",
+        fullWidth: true,
+        onClick: onDisconnect,
+        disabled: isDisconnecting,
+        "data-testid": "para-disconnect",
+        children: [
+          hideWallets ? "Logout" : "Disconnect Wallet",
+          /* @__PURE__ */ jsx(CpslIcon, { icon: "logOut", slot: "end" })
+        ]
+      }
+    )
   ] });
 };
 const Section = safeStyled.div`

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

@@ -175,7 +175,8 @@ function AccountSendForm() {
                   }
                 },
                 symbol: inputMode === "VALUE" ? "$" : void 0,
-                size: "56px"
+                size: "56px",
+                "data-testid": "para-send-amount"
               }
             ),
             !!assetPrice && assetPrice.value > 0 && !isTestnet && /* @__PURE__ */ jsxs(
@@ -190,6 +191,7 @@ function AccountSendForm() {
                   cursor: "pointer"
                 },
                 onClick: () => setInputMode((prev) => prev === "VALUE" ? "AMOUNT" : "VALUE"),
+                "data-testid": "para-send-toggle-mode",
                 children: [
                   /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", children: inputMode === "VALUE" ? formatAssetQuantity({
                     quantity: isMax && assetAmountOnNetwork ? assetAmountOnNetwork : transferAmount,
@@ -218,6 +220,7 @@ function AccountSendForm() {
                 alignItems: "center",
                 justifyContent: "space-between"
               },
+              "data-testid": "para-send-asset-select",
               children: [
                 /* @__PURE__ */ jsxs(
                   "div",
@@ -303,6 +306,7 @@ function AccountSendForm() {
                       e.stopPropagation();
                       setIsMax(true);
                     },
+                    "data-testid": "para-send-max",
                     children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "primary", children: "Max" })
                   }
                 ),
@@ -320,6 +324,7 @@ function AccountSendForm() {
         value: inputDestinationAddress,
         onCpslInput: (e) => setInputDestinationAddress(e.detail.value),
         style: { width: "100%" },
+        "data-testid": "para-send-recipient",
         children: /* @__PURE__ */ jsx(WalletTypeIcon, { walletType: selectedWallet.type, size: "24px", slot: "start" })
       }
     ),
@@ -336,6 +341,7 @@ function AccountSendForm() {
         pending: estimateIsPending || broadcastIsPending,
         disabled: estimateIsPending || broadcastIsPending || !((_l = estimate == null ? void 0 : estimate.result) == null ? void 0 : _l.txSerialized) || !!(estimate == null ? void 0 : estimate.error),
         onClick: onSubmit,
+        "data-testid": "para-send-confirm",
         children: "Confirm Send"
       }
     )

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

@@ -71,6 +71,7 @@ const AccountWallet = () => {
           onClick: () => {
             window.open(url(profileWallet.address), "_blank");
           },
+          "data-testid": "para-view-explorer",
           children: [
             "View wallet on ",
             name,
@@ -103,6 +104,7 @@ const AccountWallet = () => {
             setProfileWallet(void 0);
             setStep(ModalStep.ACCOUNT_PROFILE);
           }),
+          "data-testid": "para-disconnect-wallet",
           children: [
             /* @__PURE__ */ jsx(CpslIcon, { icon: "key", slot: "start" }),
             "Disconnect"

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

@@ -7,7 +7,7 @@ import { CpslIcon, CpslSpinner, CpslTab, CpslTabs } from "@getpara/react-compone
 import { OnRampStep } from "../../stores/index.js";
 import { useModalStore } from "../../stores/modal/useModalStore.js";
 import { useEffect, useMemo } from "react";
-import { getAddFundsStep, ModalStep } from "../../utils/steps.js";
+import { getAddFundsStep } from "../../utils/steps.js";
 import { safeStyled } from "@getpara/react-common";
 import { useAccount, useWallet } from "../../../provider/index.js";
 import { AddFundsProvider } from "./AddFundsProvider.js";
@@ -15,10 +15,8 @@ import { AddFundsReceive } from "./AddFundsReceive.js";
 import { AddFundsContextProvider, TABS } from "./AddFundsContext.js";
 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);
   const storedTab = useModalStore((state) => state.accountAddFundTab);
@@ -61,7 +59,6 @@ const AddFunds = () => {
       /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon }),
       title
     ] }, tab2)) }) }),
-    (step === ModalStep.ADD_FUNDS_RECEIVE || (embedded == null ? void 0 : embedded.wallets) && embedded.wallets.length > 1) && /* @__PURE__ */ jsx(WalletSelectOld, {}),
     /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(AddFundsContextProvider, { "data-testid": "add-funds", tab, children: Content }) })
   ] });
 };

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

@@ -1,99 +1,36 @@
 "use client";
-import {
-  __async,
-  __spreadProps,
-  __spreadValues
-} from "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import "../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
 import * as comp from "@getpara/react-components";
-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 { formatCurrency } from "@getpara/web-sdk";
+import { getAssetCode, getAssetName, ON_RAMP_ASSETS } from "@getpara/react-common";
 import { useAddFunds } from "./AddFundsContext.js";
-import { useWallet } from "../../../provider/hooks/queries/useWallet.js";
-import { AssetIcon, contentMotionProps, GradientScroll } from "../common.js";
-import { AnimatePresence, motion } from "framer-motion";
+import { AssetIcon, SearchableButtonList } 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 { assets, setAsset } = useAddFunds();
   const { assetMetadata } = useAssets();
-  const [searchStr, setSearchStr] = useState("");
-  const onSelect = (_asset) => __async(this, null, function* () {
-    yield setAsset(_asset);
-    if (!network && !!onRampConfig && !!activeWallet) {
-      yield setNetwork(
-        getOnRampNetworks(onRampConfig.assetInfo, {
-          walletType: activeWallet.type,
-          assets: [_asset]
-        })[0]
-      );
-    }
-  });
-  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,
-      {
-        placeholder: "Search for an asset",
-        value: searchStr,
-        onCpslInput: (e) => {
-          setSearchStr(e.detail.value);
-        },
-        children: /* @__PURE__ */ jsx(comp.CpslIcon, { icon: "search", slot: "start" })
-      }
-    ) })) }),
-    /* @__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,
-      {
-        style: { width: "100%" },
-        initial: { opacity: 0 },
-        animate: { opacity: 1 },
-        exit: { opacity: 0 },
-        transition: { duration: 0.2 },
-        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, { 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)
+  return /* @__PURE__ */ jsx(
+    SearchableButtonList,
+    {
+      height: 300,
+      items: assets,
+      transformItem: (asset) => {
+        return {
+          key: asset,
+          icon: /* @__PURE__ */ jsx(AssetIcon, { asset, size: "48px" }),
+          text: ON_RAMP_ASSETS[asset].code,
+          endText: (assetMetadata == null ? void 0 : assetMetadata[asset]) ? /* @__PURE__ */ jsx(comp.CpslText, { variant: "bodyM", children: formatCurrency(assetMetadata[asset].price) }) : null
+        };
+      },
+      searchPlaceholder: "Search for an asset",
+      searchFilter: ({ item, searchStr }) => {
+        return searchStr === "" || getAssetCode(item).toLowerCase().startsWith(searchStr.toLowerCase()) || getAssetName(item).toLowerCase().startsWith(searchStr.toLowerCase());
       },
-      asset
-    )) }) }) })
-  ] });
+      onSelect: (asset) => setAsset(asset)
+    }
+  );
 }
-const AssetList = safeStyled.ul`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  gap: 8px;
-  list-style: none;
-  padding-inline-start: 0;
-  margin: 0;
-  padding: 0px;
-`;
-const AssetButton = safeStyled(comp.CpslButton)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  --button-secondary-background-color: var(--cpsl-color-background-8);
-  --button-secondary-border-color: var(--cpsl-color-background-8);
-  --button-secondary-hover-background-color: var(--cpsl-color-background-16);
-  --button-secondary-hover-border-color: var(--cpsl-color-background-16);
-`;
-const Info = safeStyled(comp.CpslCol)`
-    text-align: left;
-  `, Code = comp.CpslText, Name = comp.CpslText;
-const SearchInput = safeStyled(comp.CpslInput)`
-  --container-background-color: var(--cpsl-color-background-8);
-  --input-background-color: transparent;
-`;
 export {
   AddFundsAsset
 };

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

@@ -9,19 +9,23 @@ export declare const TABS: [
     IconType,
     ReactNode
 ][];
+type SettingsStep = 'FORM' | 'ASSETS' | 'NETWORKS' | 'NO_PROVIDERS';
 type Value = {
-    network: TNetwork | undefined;
+    network: TNetwork | null;
     setNetwork: Dispatch<SetStateAction<Value['network']>>;
-    asset: TOnRampAsset | undefined;
+    asset: TOnRampAsset | null;
     setAsset: Dispatch<SetStateAction<Value['asset']>>;
     fiatQuantity: string | undefined;
     setFiatQuantity: Dispatch<SetStateAction<Value['fiatQuantity']>>;
     networks: TNetwork[];
+    narrowedNetworks: TNetwork[];
     assets: TOnRampAsset[];
     isProviderAllowed: Partial<Record<OnRampProvider, boolean>>;
     tab: Tab;
     activeWallet: ReturnType<typeof useWallet>['data'];
     onRampConfig: OnRampConfig;
+    settingsStep: SettingsStep | null;
+    TestModeAlert: ReactNode;
 };
 export declare const AddFundsContext: import("react").Context<Value>;
 export declare function AddFundsContextProvider({ tab, children }: PropsWithChildren<{

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

@@ -3,7 +3,7 @@ import {
   __spreadProps,
   __spreadValues
 } from "../../../chunk-MMUBH76A.js";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import {
   createContext,
   useContext,
@@ -20,7 +20,9 @@ import {
   getOnRampNetworks,
   OnRampPurchaseType
 } from "@getpara/web-sdk";
-import { getNetworkFromChainId, getNetworkOrMainNetEquivalent } from "@getpara/react-common";
+import { getNetworkFromChainId, getNetworkOrMainNetEquivalent, safeStyled } from "@getpara/react-common";
+import { CpslAlert, CpslIcon } from "@getpara/react-components";
+import { useStore } from "../../../provider/stores/useStore.js";
 const TABS = [
   [EnabledFlow.BUY, "isBuyEnabled", "creditCard", "Buy"],
   [EnabledFlow.RECEIVE, "isReceiveEnabled", "qrCode", "Receive"],
@@ -28,20 +30,23 @@ const TABS = [
 ];
 const DEFAULT = {
   networks: [],
+  narrowedNetworks: [],
   assets: [],
   isProviderAllowed: {},
   tab: TABS[0][0],
-  network: void 0,
+  network: null,
   setNetwork: () => {
   },
-  asset: void 0,
+  asset: null,
   setAsset: () => {
   },
   fiatQuantity: "25.00",
   setFiatQuantity: () => {
   },
   onRampConfig: {},
-  activeWallet: {}
+  activeWallet: {},
+  settingsStep: "FORM",
+  TestModeAlert: null
 };
 function isValid(onRampConfig, walletType, network, asset) {
   var _a, _b;
@@ -50,9 +55,12 @@ function isValid(onRampConfig, walletType, network, asset) {
 const AddFundsContext = createContext(DEFAULT);
 function AddFundsContextProvider({ tab, children }) {
   var _a, _b;
+  const appName = useStore((state) => state.appName);
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const onRampStep = useModalStore((state) => state.onRampStep);
   const setOnRampStep = useModalStore((state) => state.setOnRampStep);
+  const isTestModeAlertDismissed = useModalStore((state) => state.isTestModeAlertDismissed);
+  const setIsTestModeAlertDismissed = useModalStore((state) => state.setIsTestModeAlertDismissed);
   const { chainId } = useExternalWallets();
   const { data: activeWallet } = useWallet();
   const [fiatQuantity, setFiatQuantity] = useState((_b = (_a = onRampConfig == null ? void 0 : onRampConfig.defaultBuyAmount) == null ? void 0 : _a[0]) != null ? _b : "25.00");
@@ -94,12 +102,17 @@ function AddFundsContextProvider({ tab, children }) {
       )
     ];
   }, [networks, onRampConfig, activeWallet, tab]);
-  const [network, setNetwork] = useState(
-    !!(activeWallet == null ? void 0 : activeWallet.type) && !!(onRampConfig == null ? void 0 : onRampConfig.defaultOnRampNetwork) && !!onRampConfig.assetInfo[activeWallet.type][onRampConfig.defaultOnRampNetwork] ? onRampConfig.defaultOnRampNetwork : void 0
-  );
-  const [asset, setAsset] = useState(
-    !!network && !!(onRampConfig == null ? void 0 : onRampConfig.defaultOnRampAsset) && assets.includes(onRampConfig.defaultOnRampAsset) ? onRampConfig.defaultOnRampAsset : void 0
-  );
+  const [network, setNetwork] = useState(null);
+  const [asset, setAsset] = useState(null);
+  const narrowedNetworks = useMemo(() => {
+    return !asset || !onRampConfig ? networks : getOnRampNetworks(onRampConfig.assetInfo, {
+      walletType: activeWallet == null ? void 0 : activeWallet.type,
+      allowed: onRampConfig.allowedAssets ? Object.entries(onRampConfig.allowedAssets).filter(([_, value2]) => value2 === true || value2.includes(asset)).map(([key]) => key) : void 0,
+      assets: [asset],
+      providers: onRampConfig.providers,
+      action: tab === EnabledFlow.BUY ? OnRampPurchaseType.BUY : OnRampPurchaseType.SELL
+    });
+  }, [networks, asset, activeWallet == null ? void 0 : activeWallet.type, onRampConfig, tab]);
   const isProviderAllowed = useMemo(
     () => onRampConfig && !!(activeWallet == null ? void 0 : activeWallet.type) ? onRampConfig.providers.reduce(
       (acc, id) => {
@@ -112,6 +125,37 @@ function AddFundsContextProvider({ tab, children }) {
     ) : {},
     [onRampConfig, network, asset, activeWallet, tab]
   );
+  const settingsStep = useMemo(() => {
+    switch (true) {
+      case (assets.length === 0 && networks.length === 0):
+        return "NO_PROVIDERS";
+      case (!!asset && !!network):
+        return "FORM";
+      case !asset:
+        return "ASSETS";
+      case !network:
+        return "NETWORKS";
+      default:
+        return null;
+    }
+  }, [asset, network, assets.length, networks.length]);
+  const TestModeAlert = useMemo(() => {
+    return (onRampConfig == null ? void 0 : onRampConfig.testMode) && !isTestModeAlertDismissed ? /* @__PURE__ */ jsx(CpslAlert, { variant: "error", filled: true, children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("span", { 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: () => setIsTestModeAlertDismissed(true), children: /* @__PURE__ */ jsx(CloseX, { icon: "x" }) })
+    ] }) }) : null;
+  }, [isTestModeAlertDismissed, appName, onRampConfig == null ? void 0 : onRampConfig.testMode, setIsTestModeAlertDismissed]);
+  useEffect(() => {
+    if (!!asset && !network && narrowedNetworks.length === 1) {
+      setNetwork(narrowedNetworks[0]);
+    }
+  }, [asset, network, narrowedNetworks]);
   const value = useMemo(() => {
     if (!onRampConfig || !activeWallet) {
       return DEFAULT;
@@ -119,6 +163,7 @@ function AddFundsContextProvider({ tab, children }) {
     return {
       tab,
       networks,
+      narrowedNetworks,
       assets,
       isProviderAllowed,
       asset,
@@ -128,22 +173,39 @@ function AddFundsContextProvider({ tab, children }) {
       fiatQuantity,
       setFiatQuantity,
       activeWallet,
-      onRampConfig
+      onRampConfig,
+      settingsStep,
+      TestModeAlert
     };
   }, [
     tab,
     networks,
+    narrowedNetworks,
     assets,
     isProviderAllowed,
     asset,
-    setAsset,
     network,
-    setNetwork,
     fiatQuantity,
     setFiatQuantity,
     activeWallet,
-    onRampConfig
+    onRampConfig,
+    settingsStep,
+    TestModeAlert
   ]);
+  useEffect(() => {
+    const newNetwork = !!(activeWallet == null ? void 0 : activeWallet.type) && !!(onRampConfig == null ? void 0 : onRampConfig.defaultOnRampNetwork) && !!onRampConfig.assetInfo[activeWallet.type][onRampConfig.defaultOnRampNetwork] ? onRampConfig.defaultOnRampNetwork : networks.find(
+      (network2) => (activeWallet == null ? void 0 : activeWallet.type) === "COSMOS" ? network2 === "COSMOS" : (activeWallet == null ? void 0 : activeWallet.type) === "SOLANA" ? network2 === "SOLANA" : network2 === "ETHEREUM"
+    ) || networks[0] || null;
+    const newAsset = !!network && !!(onRampConfig == null ? void 0 : onRampConfig.defaultOnRampAsset) && assets.includes(onRampConfig.defaultOnRampAsset) ? onRampConfig.defaultOnRampAsset : assets.find(
+      (asset2) => (activeWallet == null ? void 0 : activeWallet.type) === "COSMOS" ? asset2 === "ATOM" : (activeWallet == null ? void 0 : activeWallet.type) === "SOLANA" ? asset2 === "SOLANA" : asset2 === "ETHEREUM"
+    ) || assets[0] || null;
+    if (newAsset !== asset) {
+      setAsset(newAsset);
+    }
+    if (newNetwork !== network) {
+      setNetwork(newNetwork);
+    }
+  }, [activeWallet == null ? void 0 : activeWallet.type, assets, networks]);
   useEffect(() => {
     if (!!activeWallet && onRampStep === OnRampStep.PROVIDER && !isValid(onRampConfig, activeWallet.type, network, asset)) {
       setOnRampStep(OnRampStep.SETTINGS);
@@ -152,6 +214,26 @@ function AddFundsContextProvider({ tab, children }) {
   return /* @__PURE__ */ jsx(AddFundsContext.Provider, { value, children });
 }
 const useAddFunds = () => useContext(AddFundsContext);
+const CloseButton = 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;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+`;
+const CloseX = safeStyled(CpslIcon)`
+  --icon-color: var(--cpsl-color-utility-yellow-dark, #92400e);
+  --height: 18px;
+  --width: 18px;
+`;
 export {
   AddFundsContext,
   AddFundsContextProvider,

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

@@ -0,0 +1 @@
+export declare function AddFundsNetwork(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,31 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { getNetworkName } from "@getpara/react-common";
+import { useAddFunds } from "./AddFundsContext.js";
+import { Heading, NetworkIcon, SearchableButtonList } from "../common.js";
+import { CpslRow } from "@getpara/react-components";
+function AddFundsNetwork() {
+  const { narrowedNetworks, setNetwork } = useAddFunds();
+  return /* @__PURE__ */ jsxs(CpslRow, { col: true, gap: "8px", style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsx(Heading, { children: "Choose Network" }),
+    /* @__PURE__ */ jsx(
+      SearchableButtonList,
+      {
+        height: 300,
+        items: narrowedNetworks,
+        transformItem: (network) => {
+          return {
+            key: network,
+            icon: /* @__PURE__ */ jsx(NetworkIcon, { network, size: "48px" }),
+            text: getNetworkName(network)
+          };
+        },
+        onSelect: (network) => setNetwork(network)
+      }
+    )
+  ] });
+}
+export {
+  AddFundsNetwork
+};