@getpara/react-sdk 1.9.0 → 1.11.0

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

@@ -0,0 +1,105 @@
+"use client";
+import {
+  __async,
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { Heading, InnerStepContainer } from "../common.js";
+import { CpslText } from "@getpara/react-components";
+import { useAddFunds } from "./AddFundsContext.js";
+import { useModalStore, useThemeStore } from "../../stores/index.js";
+import { motion, AnimatePresence } from "framer-motion";
+import { OnRampProviderButton } from "../OnRampComponents/OnRampProviderButton.js";
+import { useActiveWallet } from "../../hooks/useActiveWallet.js";
+import { EnabledFlow, OnRampProvider, OnRampPurchaseType } from "@getpara/web-sdk";
+import { ModalStep } from "../../utils/steps.js";
+import { contentMotionProps } from "./common.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+function AddFundsProvider() {
+  const para = useInternalClient();
+  const hideWallets = useThemeStore((state) => state.hideWallets);
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const setOnRampPurchase = useModalStore((state) => state.setOnRampPurchase);
+  const setModalStep = useModalStore((state) => state.setStep);
+  const { asset, network, fiatQuantity, isProviderAllowed, tab } = useAddFunds();
+  const activeWallet = useActiveWallet();
+  return /* @__PURE__ */ jsxs(Container, __spreadProps(__spreadValues({}, contentMotionProps), { children: [
+    /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", 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 ",
+        hideWallets ? "account" : "wallet"
+      ] }),
+      /* @__PURE__ */ jsx(AnimatePresence, { children: onRampConfig.providers.map((id, index) => {
+        return isProviderAllowed[id] ? /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            style: { width: "100%" },
+            layout: true,
+            initial: { opacity: 0, transform: "translateX(25px)" },
+            animate: { opacity: 1, transform: "none" },
+            exit: { opacity: 0, transform: "translateX(-25px)" },
+            transition: { duration: 0.2 },
+            children: /* @__PURE__ */ jsx(
+              OnRampProviderButton,
+              {
+                config: onRampConfig,
+                index,
+                onClick: () => __async(this, null, function* () {
+                  if (!(activeWallet == null ? void 0 : activeWallet.type)) return;
+                  const isPopup = id !== OnRampProvider.RAMP;
+                  const { onRampPurchase: newOnRampPurchase } = yield para.initiateOnRampTransaction({
+                    walletId: activeWallet.isExternal ? void 0 : activeWallet.id,
+                    externalWalletAddress: activeWallet.isExternal ? activeWallet.id : void 0,
+                    shouldOpenPopup: isPopup,
+                    params: {
+                      type: tab === EnabledFlow.BUY ? OnRampPurchaseType.BUY : OnRampPurchaseType.SELL,
+                      walletType: activeWallet.type,
+                      provider: id,
+                      network,
+                      asset,
+                      fiatQuantity,
+                      testMode: onRampConfig.testMode
+                    }
+                  });
+                  setOnRampPurchase(__spreadProps(__spreadValues({}, newOnRampPurchase), { fiat: "USD" }));
+                  !isPopup && setModalStep(ModalStep.ADD_FUNDS_AWAITING);
+                })
+              },
+              id
+            )
+          },
+          id
+        ) : null;
+      }) })
+    ] })
+  ] }));
+}
+const Container = styled(motion.div)`
+  width: 100%;
+  height: 100%;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  height: 320px;
+`;
+const $InnerStepContainer = styled(InnerStepContainer)`
+  position: relative;
+`;
+const NoProviders = styled(CpslText)`
+  width: 100%;
+  text-align: center;
+  visibility: ${({ isHidden }) => isHidden ? "hidden" : "visible"};
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: visibility 0.2s;
+`;
+export {
+  AddFundsProvider
+};

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

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

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

@@ -0,0 +1,79 @@
+"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 { isMobile, WalletType } from "@getpara/web-sdk";
+import { useModalStore, useThemeStore } from "../../stores/index.js";
+import { useCopyToClipboard } from "@getpara/react-common";
+import { useMemo } from "react";
+import { useActiveWallet } from "../../hooks/useActiveWallet.js";
+import { useAddFunds } from "./AddFundsContext.js";
+import { formatNetworkList } from "../../utils/stringFormatters.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+const GENERIC_WALLET = {
+  [WalletType.EVM]: "Ethereum or EVM-based L2s",
+  [WalletType.SOLANA]: "Solana",
+  [WalletType.COSMOS]: "Cosmos"
+};
+function AddFundsReceive() {
+  const [isCopied, copy] = useCopyToClipboard();
+  const { networks } = useAddFunds();
+  const para = useInternalClient();
+  const appName = useThemeStore((state) => state.appName);
+  const hideWallets = useThemeStore((state) => state.hideWallets);
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const activeWallet = useActiveWallet();
+  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: [
+    /* @__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" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsxs(CenteredText, { weight: "semiBold", children: [
+        !!onRampConfig.allowedAssets && networks.length > 0 || hideWallets ? appName != null ? appName : "This App" : "This Wallet",
+        " ",
+        "Only Supports:"
+      ] }),
+      /* @__PURE__ */ jsx(CenteredText, { weight: "medium", color: "secondary", children: !!onRampConfig.allowedAssets && networks.length > 0 ? formatNetworkList(networks) : GENERIC_WALLET[activeWallet.type] })
+    ] })
+  ] });
+}
+export {
+  AddFundsReceive
+};

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

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

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

@@ -0,0 +1,233 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from "react";
+import { useAddFunds } from "./AddFundsContext.js";
+import { CpslButton, CpslIcon, CpslInput, CpslRow, CpslText } from "@getpara/react-components";
+import { AssetIcon, HeaderSelect, HeaderSelectContainer, HeaderSelectItem, NetworkIcon } from "../common.js";
+import { getAssetCode, getNetworkName } from "../../constants/constants.js";
+import { EnabledFlow, getOnRampNetworks, OnRampPurchaseType } from "@getpara/web-sdk";
+import { OnRampStep, useModalStore, useThemeStore } from "../../stores/index.js";
+import styled from "styled-components";
+import { contentMotionProps, NoProviders } from "./common.js";
+import { AnimatePresence, motion, useIsPresent } from "framer-motion";
+import { AddFundsAsset } from "./AddFundsAsset.js";
+function NetworkPill({
+  network,
+  gap = "4px",
+  slot,
+  start,
+  fix = false
+}) {
+  return /* @__PURE__ */ jsxs(CpslRow, __spreadProps(__spreadValues({ gap }, slot ? { slot } : {}), { children: [
+    start,
+    /* @__PURE__ */ jsx(NetworkIcon, { network, size: "24px" }),
+    /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "contrast", style: fix ? { marginRight: "8px" } : void 0, children: getNetworkName(network) })
+  ] }));
+}
+function AssetPill({ asset, gap = "4px", slot, fix }) {
+  if (!asset) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(CpslRow, __spreadProps(__spreadValues({ gap }, slot ? { slot } : {}), { children: [
+    /* @__PURE__ */ jsx(AssetIcon, { asset, size: "24px" }),
+    /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "contrast", style: fix ? { marginRight: "8px" } : void 0, children: getAssetCode(asset) })
+  ] }));
+}
+const NetworkLabel = /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", style: { margin: "0 8px" }, children: "Network" });
+function AddFundsSettings() {
+  const isPresent = useIsPresent();
+  const hideWallets = useThemeStore((state) => state.hideWallets);
+  const setOnRampStep = useModalStore((state) => state.setOnRampStep);
+  const {
+    assets,
+    networks,
+    asset,
+    setAsset,
+    network,
+    setNetwork,
+    fiatQuantity,
+    setFiatQuantity,
+    onRampConfig,
+    activeWallet,
+    isProviderAllowed,
+    tab
+  } = useAddFunds();
+  const [value, setValue] = useState(parseFloat(fiatQuantity).toFixed(2) || "25.00");
+  const narrowedNetworks = useMemo(() => {
+    return !asset ? networks : getOnRampNetworks(onRampConfig.assetInfo, {
+      walletType: 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, network, asset, activeWallet.type, onRampConfig.providers, tab]);
+  const content = useMemo(() => {
+    if (!!asset && Object.values(isProviderAllowed).every((v) => !v) || assets.length === 0) {
+      return /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({}, contentMotionProps), { isPresent, children: /* @__PURE__ */ jsxs(NoProviders, { isHidden: Object.values(isProviderAllowed).some((v) => !!v), variant: "bodyM", children: [
+        "No providers are available for this ",
+        hideWallets ? "account" : "wallet"
+      ] }) }), "noProviders");
+    }
+    return !!asset ? /* @__PURE__ */ jsx(Container, __spreadProps(__spreadValues({}, contentMotionProps), { isPresent, children: assets.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(CpslRow, { children: [
+        /* @__PURE__ */ jsx(HeaderSelectContainer, { children: assets.length > 1 ? /* @__PURE__ */ jsxs(
+          HeaderSelect,
+          {
+            selectedValue: asset,
+            onCpslSelectValueChange: (e) => {
+              setAsset(e.detail);
+            },
+            showFormattedSelectedItem: true,
+            placeholder: "Choose asset...",
+            anchorElId: "inputContainer",
+            $width: 160,
+            autoWidth: true,
+            selectedItemVariant: "bodyXS",
+            children: [
+              asset && /* @__PURE__ */ jsx(AssetPill, { asset, slot: "selected-item" }),
+              assets.map((a) => /* @__PURE__ */ jsx(HeaderSelectItem, { slot: "items", value: a, children: /* @__PURE__ */ jsx(AssetPill, { gap: "8px", asset: a }) }, a))
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(AssetPill, { asset, fix: true }) }),
+        /* @__PURE__ */ jsx(HeaderSelectContainer, { children: narrowedNetworks.length > 1 ? /* @__PURE__ */ jsxs(
+          HeaderSelect,
+          {
+            selectedValue: network,
+            onCpslSelectValueChange: (e) => {
+              setNetwork(e.detail);
+            },
+            showFormattedSelectedItem: true,
+            placeholder: "Choose network...",
+            $width: 160,
+            autoWidth: true,
+            selectedItemVariant: "bodyXS",
+            children: [
+              network && /* @__PURE__ */ jsx(NetworkPill, { network, start: NetworkLabel, slot: "selected-item" }),
+              narrowedNetworks.map((n) => /* @__PURE__ */ jsx(HeaderSelectItem, { slot: "items", value: n, children: /* @__PURE__ */ jsx(NetworkPill, { gap: "8px", network: n }) }, n))
+            ]
+          }
+        ) : network ? /* @__PURE__ */ jsx(NetworkPill, { network, start: NetworkLabel, fix: true }) : null })
+      ] }),
+      /* @__PURE__ */ jsxs(CpslRow, { col: true, gap: "16px", children: [
+        /* @__PURE__ */ jsx(
+          Input,
+          {
+            value: value || "",
+            fitContent: true,
+            autoselect: true,
+            onKeyDown: (e) => {
+              if (!/^(\d|\.)$/.test(e.key) && !["Delete", "Backspace", "Tab", "Shift"].includes(e.key)) {
+                e.preventDefault();
+              }
+            },
+            onChange: (e) => {
+              var _a;
+              const numericValue = (((_a = e.currentTarget) == null ? void 0 : _a.value) || "").replace(/[^0-9.]/g, "");
+              if (numericValue !== "") {
+                const formattedValue = parseFloat(numericValue).toFixed(2);
+                setValue(formattedValue);
+              } else {
+                setValue(null);
+              }
+            },
+            onBlur: (e) => {
+              const numericValue = (e.currentTarget.value || "").replace(/[^0-9.]/g, "");
+              if (numericValue === "") {
+                setValue(null);
+              } else {
+                setValue(parseFloat(numericValue).toFixed(2));
+              }
+            },
+            placeholder: "0",
+            children: /* @__PURE__ */ jsx(CurrencySign, { slot: "start", children: "$" })
+          },
+          value || ""
+        ),
+        /* @__PURE__ */ jsx(CpslRow, { style: { width: "100%" }, children: ["25", "50", "100"].map((quantity) => {
+          return /* @__PURE__ */ jsxs(PresetButton, { fullWidth: true, variant: "secondary", onClick: () => setValue(`${quantity}.00`), children: [
+            "$",
+            quantity
+          ] }, quantity);
+        }) })
+      ] }),
+      /* @__PURE__ */ jsxs(
+        CpslButton,
+        {
+          fullWidth: true,
+          disabled: value === "",
+          onClick: () => {
+            setFiatQuantity(value);
+            setOnRampStep(OnRampStep.PROVIDER);
+          },
+          children: [
+            "Continue",
+            /* @__PURE__ */ jsx(CpslIcon, { icon: "arrow" })
+          ]
+        }
+      )
+    ] }) }), "quantity") : /* @__PURE__ */ jsx(AssetContainer, __spreadProps(__spreadValues({}, contentMotionProps), { isPresent, children: /* @__PURE__ */ jsx(AddFundsAsset, {}) }), "asset");
+  }, [asset, network, assets, narrowedNetworks, isProviderAllowed, isPresent, value]);
+  useEffect(() => {
+    if (!network || !narrowedNetworks.includes(network)) {
+      setNetwork(narrowedNetworks[0]);
+    }
+  }, [narrowedNetworks, network, tab]);
+  useEffect(() => {
+    if (!!asset && !assets.includes(asset)) {
+      setAsset(assets[0]);
+    }
+  }, [assets, asset, tab]);
+  return /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: content });
+}
+const Container = styled(motion.div)`
+  width: 100%;
+  height: 100%;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 32px;
+  position: relative;
+  height: 320px;
+  ${({ isPresent }) => isPresent ? "transform: none !important;" : ""};
+
+  & > * {
+    width: 100%;
+  }
+`;
+const AssetContainer = styled(Container)`
+  gap: 8px;
+`;
+const CurrencySign = styled.div`
+  font-size: 72px;
+  color: var(--cpsl-color-text-primary);
+  position: relative;
+  right: -16px;
+`;
+const PresetButton = styled(CpslButton)`
+  --button-color: var(--cpsl-color-text-contrast);
+  --button-font-size: 24px;
+  --button-secondary-background-color: var(--cpsl-color-background-8);
+  --button-secondary-border-color: var(--cpsl-color-background-8);
+  --button-secondary-hover-color: var(--cpsl-color-text-contrast);
+  --button-secondary-hover-background-color: var(--cpsl-color-background-16);
+  --button-secondary-hover-border-color: var(--cpsl-color-background-16);
+  flex: 1;
+`;
+const Input = styled(CpslInput)`
+  --container-background-color: transparent;
+  --container-height: 90px;
+  --container-border-width: 0;
+  --input-background-color: transparent;
+  --input-font-size: 72px;
+  --input-text-align: center;
+  --input-width: 100%;
+`;
+export {
+  AddFundsSettings
+};

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

@@ -0,0 +1,19 @@
+export declare const contentMotionProps: {
+    transition: {
+        duration: number;
+    };
+    initial: {
+        opacity: number;
+    };
+    animate: {
+        opacity: number;
+    };
+    exit: {
+        opacity: number;
+    };
+};
+export declare const NoProviders: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: import("react").Ref<any>;
+}, {
+    isHidden?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;

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

@@ -0,0 +1,24 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { CpslText } from "@getpara/react-components";
+import styled from "styled-components";
+const contentMotionProps = {
+  transition: { duration: 0.2 },
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 }
+};
+const NoProviders = styled(CpslText)`
+  width: 100%;
+  text-align: center;
+  visibility: ${({ isHidden }) => isHidden ? "hidden" : "visible"};
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  transition: visibility 0.2s;
+`;
+export {
+  NoProviders,
+  contentMotionProps
+};

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

@@ -36,6 +36,7 @@ import { useEffect, useState } from "react";
 import { TelegramOAuthStep } from "../OAuth/TelegramOAuthStep.js";
 import { AwaitingPasswordStep } from "../AwaitingPasswordStep/AwaitingPasswordStep.js";
 import { IFrameStep } from "../IFrameStep/IFrameStep.js";
+import { NetworkSpeedBanner } from "@getpara/react-common";
 const MIN_HEIGHT = {
   [ModalStep.ADD_FUNDS_AWAITING]: "680px"
 };
@@ -131,7 +132,7 @@ const Body = ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePh
       case ModalStep.ADD_FUNDS_BUY:
       case ModalStep.ADD_FUNDS_RECEIVE:
       case ModalStep.ADD_FUNDS_WITHDRAW: {
-        return /* @__PURE__ */ jsx(AddFunds, {});
+        return /* @__PURE__ */ jsx(AddFunds, { "data-testid": "add-funds" });
       }
       case ModalStep.ADD_FUNDS_AWAITING: {
         return /* @__PURE__ */ jsx(AddFundsAwaiting, {});
@@ -211,6 +212,7 @@ const Body = ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePh
                     $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,

package/dist/modal/components/Controls/Selects.js

@@ -5,15 +5,15 @@ import {
   __spreadValues
 } from "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { CpslButton, CpslIcon, CpslIdenticon, CpslSelect, CpslSelectItem, CpslText } from "@getpara/react-components";
+import { CpslButton, CpslIcon, CpslIdenticon, CpslText } from "@getpara/react-components";
 import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
 import styled from "styled-components";
 import { useThemeStore } from "../../stores/index.js";
 import { truncateAddress, WalletType } from "@getpara/web-sdk";
 import { useEffect, useRef } from "react";
 import { useDropdownPosition } from "../AuthInput/hooks/useDropdownPosition.js";
-import { MOBILE_SIZE } from "../../constants/constants.js";
 import { useActiveWallet } from "../../hooks/useActiveWallet.js";
+import { HeaderSelect, HeaderSelectContainer, HeaderSelectItem } from "../common.js";
 import { useWalletState } from "../../../provider/index.js";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 import { useCopyToClipboard } from "@getpara/react-common";
@@ -44,8 +44,8 @@ const ChainSelect = () => {
   }
   const chainIdToUse = chainIdSwitchingTo != null ? chainIdSwitchingTo : chainId;
   const selectedChainName = (_a = chains.find((c) => c.id.toString() === chainIdToUse)) == null ? void 0 : _a.name;
-  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, id: "inputContainer", children: /* @__PURE__ */ jsxs(
-    StyledSelect,
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(HeaderSelectContainer, { ref: containerRef, id: "inputContainer", children: /* @__PURE__ */ jsxs(
+    HeaderSelect,
     {
       selectedValue: (_b = chainIdToUse == null ? void 0 : chainIdToUse.toString()) != null ? _b : "",
       onCpslSelectValueChange: (e) => {
@@ -61,7 +61,7 @@ const ChainSelect = () => {
       selectedItemVariant: "bodyXS",
       children: [
         chainIdToUse && /* @__PURE__ */ jsx(ChainName, { variant: "bodyXS", color: "contrast", slot: "selected-item", children: selectedChainName }),
-        chains == null ? void 0 : chains.map((chain) => /* @__PURE__ */ jsx(StyledSelectItem, { slot: "items", value: chain.id.toString(), children: /* @__PURE__ */ jsx(ChainName, { variant: "bodyXS", color: "contrast", children: chain.name }) }, chain.id))
+        chains == null ? void 0 : chains.map((chain) => /* @__PURE__ */ jsx(HeaderSelectItem, { slot: "items", value: chain.id.toString(), children: /* @__PURE__ */ jsx(ChainName, { variant: "bodyXS", color: "contrast", children: chain.name }) }, chain.id))
       ]
     }
   ) }) });
@@ -91,7 +91,7 @@ const AccountSelect = () => {
     copy(activeWallet.address ? para.getDisplayAddress(activeWallet.id, { addressType: activeWallet.type }) : "");
   };
   const ActiveWalletNode = activeWallet ? /* @__PURE__ */ jsxs(FlexRow, { slot: "selected-item", children: [
-    /* @__PURE__ */ jsx(CpslIdenticon, { variant: "avatar", size: "14px", hash: para.getIdenticonHash(activeWallet.id, activeWallet.type) }),
+    /* @__PURE__ */ jsx(CpslIdenticon, { variant: "avatar", size: "24px", hash: para.getIdenticonHash(activeWallet.id, activeWallet.type) }),
     /* @__PURE__ */ jsx(WalletName, { variant: "bodyXS", color: "contrast", children: getName(para, __spreadProps(__spreadValues({}, activeWallet), { hideWallets })) }),
     !hideWallets && /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", children: (_a = activeWallet.ensName) != null ? _a : para.getDisplayAddress(activeWallet.id, { truncate: true, addressType: activeWallet.type }) }),
@@ -116,8 +116,8 @@ const AccountSelect = () => {
       resize();
     }
   }, [activeWallet, para.availableWallets, dropdownMaxHeight]);
-  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(SelectContainer, { ref: containerRef, id: "addressInputContainer", children: para.availableWallets.length > 1 ? /* @__PURE__ */ jsxs(
-    StyledSelect,
+  return /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsx(HeaderSelectContainer, { ref: containerRef, id: "addressInputContainer", children: para.availableWallets.length > 1 ? /* @__PURE__ */ jsxs(
+    HeaderSelect,
     {
       selectedValue: getValue(activeWallet == null ? void 0 : activeWallet.id, activeWallet == null ? void 0 : activeWallet.type),
       onCpslSelectValueChange: (e) => {
@@ -137,7 +137,7 @@ const AccountSelect = () => {
         para.availableWallets.map(({ address, name: _name, id, type, isExternal }) => {
           const key = getValue(id, type);
           const name = _name != null ? _name : getName(para, { type, isExternal, isMenu: true, hideWallets });
-          return /* @__PURE__ */ jsx(StyledSelectItem, { slot: "items", value: key, children: /* @__PURE__ */ jsxs(FlexRow, { children: [
+          return /* @__PURE__ */ jsx(HeaderSelectItem, { slot: "items", value: key, children: /* @__PURE__ */ jsxs(FlexRow, { children: [
             /* @__PURE__ */ jsx(CpslIdenticon, { size: "40px", hash: para.getIdenticonHash(id, type) }),
             /* @__PURE__ */ jsxs(FlexCol, { children: [
               name && /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "contrast", children: name }),
@@ -168,15 +168,6 @@ const FlexCol = styled.div`
 const WalletName = styled(CpslText)`
   white-space: nowrap;
 `;
-const SelectContainer = styled.div`
-  position: relative;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  border-radius: 1000px;
-  background-color: var(--cpsl-color-background-8);
-  padding: 8px;
-`;
 const ChainName = styled(CpslText)`
   max-width: 150px;
   text-transform: capitalize;
@@ -187,47 +178,6 @@ const ChainName = styled(CpslText)`
     overflow: hidden;
   }
 `;
-const StyledSelect = styled(CpslSelect)`
-  --container-height: auto;
-  --container-border-width: 0px;
-  --container-padding-end: 0px;
-  --container-padding-start: 0px;
-  --container-background-color: transparent;
-  --container-box-shadow: none;
-  --container-gap: 2px;
-  --icon-width: 16px;
-  --icon-height: 16px;
-
-  &::part(selected-text) {
-    white-space: nowrap;
-  }
-
-  &::part(dropdown) {
-    min-width: ${({ $width }) => `${$width - 2}px`};
-  }
-
-  &::part(popover) {
-    /* Have to adjust the top of the popover here since we're using a transform on the modal which causes fixed position items to not be relative to the viewport */
-    @media (max-width: ${MOBILE_SIZE}px) {
-      top: ${({ $top }) => $top ? `${$top}px` : "0px"};
-      bottom: 16px;
-    }
-    cpsl-auth-modal.force-mobile-media & {
-      top: ${({ $top }) => $top ? `${$top}px` : "0px"};
-      bottom: 16px;
-    }
-  }
-
-  &::part(icon) {
-    --icon-color: var(--cpsl-color-contrast);
-  }
-`;
-const StyledSelectItem = styled(CpslSelectItem)`
-  --outer-container-padding-start: 4px;
-  --outer-container-padding-end: 4px;
-  --outer-container-padding-top: 4px;
-  --outer-container-padding-bottom: 4px;
-`;
 export {
   AccountSelect,
   ChainSelect

package/dist/modal/components/WalletCard/WalletCard.js

@@ -49,7 +49,7 @@ const SharedWalletCard = ({ address, name, identiconHash, showAddFunds, id, type
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const { setSelectedWallet } = useWalletState();
   const setStep = useModalStore((state) => state.setStep);
-  const isAddFundsEnabled = onRampConfig.isBuyEnabled || onRampConfig.isReceiveEnabled;
+  const isAddFundsEnabled = (onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) || (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled);
   const handleAddFundsClick = () => {
     if (id && type) {
       setSelectedWallet({ id, type });