@getpara/react-sdk 2.0.0-alpha.3 → 2.0.0-alpha.6

package/dist/modal/ParaModal.js

@@ -0,0 +1,262 @@
+"use client";
+import {
+  __async,
+  __objRest,
+  __spreadValues
+} from "../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { CpslAuthModal, defineCustomElements, generateTheme } from "@getpara/react-components";
+import { ModalContent } from "./components/index.js";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { useModalStore } from "./stores/index.js";
+import { ModalStep, RESET_TO_ACCOUNT_STEPS, RESET_TO_AUTH_STEPS } from "./utils/steps.js";
+import { AuthLayout } from "./types/modalProps.js";
+import { DEFAULTS } from "./constants/defaults.js";
+import { useGoBack } from "./hooks/useGoBack.js";
+import styled from "styled-components";
+import { hasEmbeddedAuth, hasExternalWallet } from "./utils/authLayoutHelpers.js";
+import { useModal, useWalletState } from "../provider/index.js";
+import { useInternalClient } from "../provider/hooks/utils/useInternalClient.js";
+import { useExternalWallets } from "../provider/providers/ExternalWalletProvider.js";
+import { useStore } from "../provider/stores/useStore.js";
+import parsePhoneNumberFromString from "libphonenumber-js";
+import { useAuthActions } from "../provider/providers/AuthProvider.js";
+import { validateAuth } from "./utils/authInputHelpers.js";
+defineCustomElements();
+const ParaModal = forwardRef((props, ref) => {
+  const storedModalConfig = useStore((state) => state.modalConfig);
+  const modalContentRef = useRef(null);
+  const currentStep = useModalStore((state) => state.step);
+  const setAuthState = useModalStore((state) => state.setAuthState);
+  const setOnModalStepChange = useModalStore((state) => state.setOnModalStepChange);
+  const setStep = useModalStore((state) => state.setStep);
+  const hasPreviousStep = useModalStore((state) => state.hasPreviousStep());
+  const setFlow = useModalStore((state) => state.setFlow);
+  const setIsFullyLoggedIn = useModalStore((state) => state.setIsFullyLoggedIn);
+  const goBack = useGoBack();
+  const setAuthLayout = useModalStore((state) => state.setAuthLayout);
+  const storedAuthLayout = useModalStore((state) => state.authLayout);
+  const resetModalState = useModalStore((state) => state.resetState);
+  const setRecoveryShare = useModalStore((state) => state.setRecoveryShare);
+  const { disconnectExternalWallet } = useExternalWallets();
+  const { isOpen: storedIsOpen, closeModal } = useModal();
+  const para = useInternalClient();
+  const { setSelectedWallet, updateSelectedWallet } = useWalletState();
+  const setAuthStepRoute = useModalStore((state) => state.setAuthStepRoute);
+  const { signUpOrLogIn, isCreateGuestWalletsPending } = useAuthActions();
+  const [isModalMounted, setIsModalMounted] = useState(false);
+  const [isInit, setIsInit] = useState(false);
+  const externalWallets = useStore((state) => state.externalWallets);
+  const _a = __spreadValues(__spreadValues({}, storedModalConfig), props), {
+    isOpen: configIsOpen,
+    theme,
+    disableEmailLogin = false,
+    disablePhoneLogin = false,
+    isGuestModeEnabled = false,
+    oAuthMethods = ["GOOGLE", "TWITTER"],
+    bareModal = false,
+    className,
+    currentStepOverride,
+    authLayout = [AuthLayout.AUTH_FULL, AuthLayout.EXTERNAL_FULL],
+    embeddedModal,
+    onModalStepChange,
+    onClose,
+    defaultAuthIdentifier
+  } = _a, rest = __objRest(_a, [
+    "isOpen",
+    "theme",
+    "disableEmailLogin",
+    "disablePhoneLogin",
+    "isGuestModeEnabled",
+    "oAuthMethods",
+    "bareModal",
+    "className",
+    "currentStepOverride",
+    "authLayout",
+    "embeddedModal",
+    "onModalStepChange",
+    "onClose",
+    "defaultAuthIdentifier"
+  ]);
+  const isOpen = configIsOpen != null ? configIsOpen : storedIsOpen;
+  useImperativeHandle(ref, () => {
+    return {
+      goBack() {
+        goBack();
+      },
+      canGoBack() {
+        return hasPreviousStep;
+      },
+      currentStep() {
+        return currentStep;
+      },
+      handleModalClose() {
+        var _a2;
+        (_a2 = modalContentRef == null ? void 0 : modalContentRef.current) == null ? void 0 : _a2.handleModalClose();
+      }
+    };
+  }, [hasPreviousStep, currentStep]);
+  const initModal = (shouldAutoLogin) => __async(void 0, null, function* () {
+    var _a2;
+    const isAccount = yield para.isFullyLoggedIn(), isGuest = isAccount && para.isGuestMode || isCreateGuestWalletsPending;
+    switch (true) {
+      case !!currentStepOverride:
+        setStep(ModalStep[currentStepOverride.toUpperCase()]);
+        break;
+      case isGuest:
+        setFlow("guest");
+        setStep(isCreateGuestWalletsPending ? ModalStep.AWAITING_GUEST_WALLET_CREATION : ModalStep.ACCOUNT_MAIN);
+        setIsFullyLoggedIn(true);
+        break;
+      case isAccount:
+        setFlow("account");
+        setStep(ModalStep.ACCOUNT_MAIN);
+        setIsFullyLoggedIn(true);
+        break;
+      default:
+        if (currentStep !== ModalStep.AUTH_MAIN && currentStep !== ModalStep.SECRET) {
+          setFlow(void 0);
+          setStep(para.isTelegram ? ModalStep.TELEGRAM_OAUTH : ModalStep.AUTH_MAIN);
+          setAuthState();
+          setAuthStepRoute();
+        }
+        yield disconnectExternalWallet();
+        setSelectedWallet({ id: void 0, type: void 0 });
+        setIsFullyLoggedIn(false);
+        if (shouldAutoLogin) {
+          if (defaultAuthIdentifier && ((_a2 = para.authInfo) == null ? void 0 : _a2.identifier) !== defaultAuthIdentifier) {
+            const number = parsePhoneNumberFromString(defaultAuthIdentifier);
+            try {
+              const auth = validateAuth(
+                number ? number.nationalNumber : defaultAuthIdentifier,
+                (number == null ? void 0 : number.countryCallingCode) ? `+${number == null ? void 0 : number.countryCallingCode}` : void 0,
+                number ? "phone" : "email"
+              );
+              para.setAuth(number ? { phone: defaultAuthIdentifier } : { email: defaultAuthIdentifier });
+              signUpOrLogIn(auth);
+            } catch (err) {
+              console.error("invalid user identifier:", err.message);
+            }
+          }
+        }
+        break;
+    }
+    setIsInit(true);
+  });
+  useEffect(() => {
+    let _authLayout = authLayout;
+    if (!(externalWallets == null ? void 0 : externalWallets.length) && hasExternalWallet(authLayout)) {
+      _authLayout = _authLayout.filter((l) => !l.includes("EXTERNAL"));
+    }
+    if (disableEmailLogin && disablePhoneLogin && !(oAuthMethods == null ? void 0 : oAuthMethods.length) && hasEmbeddedAuth(authLayout)) {
+      _authLayout = _authLayout.filter((l) => !l.includes("AUTH"));
+    }
+    if (JSON.stringify(storedAuthLayout) !== JSON.stringify(_authLayout)) {
+      setAuthLayout(_authLayout);
+    }
+  }, [disableEmailLogin, disablePhoneLogin, oAuthMethods, externalWallets, authLayout, storedAuthLayout]);
+  useEffect(() => {
+    if (theme) {
+      generateTheme(theme);
+    }
+  }, [theme]);
+  useEffect(() => {
+    setOnModalStepChange(onModalStepChange);
+  }, [onModalStepChange]);
+  useEffect(() => {
+    if (para) {
+      initModal();
+    } else {
+      console.error("A Para instance must be provided.");
+    }
+  }, []);
+  useEffect(() => {
+    if (isOpen && para) {
+      initModal(true);
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    updateSelectedWallet();
+  }, [para]);
+  const handleClose = () => {
+    closeModal();
+    onClose == null ? void 0 : onClose();
+  };
+  const handleModalEntering = () => {
+    setIsModalMounted(true);
+  };
+  const handleModalExited = () => __async(void 0, null, function* () {
+    setIsModalMounted(false);
+    if (RESET_TO_AUTH_STEPS.includes(currentStep)) {
+      resetModalState();
+      setRecoveryShare(null);
+    } else if (RESET_TO_ACCOUNT_STEPS.includes(currentStep)) {
+      setStep(ModalStep.LOGIN_DONE);
+    }
+    if (para) {
+      yield initModal();
+    }
+    setIsInit(false);
+  });
+  if (!para) {
+    console.error("A Para instance is required.");
+    return null;
+  }
+  if (!(storedAuthLayout == null ? void 0 : storedAuthLayout.length)) {
+    const hasExternalWalletError = !(externalWallets == null ? void 0 : externalWallets.length) && hasExternalWallet(authLayout);
+    const hasEmbeddedWalletError = disableEmailLogin && disablePhoneLogin && !(oAuthMethods == null ? void 0 : oAuthMethods.length) && hasEmbeddedAuth(authLayout);
+    if (hasExternalWalletError || hasEmbeddedWalletError) {
+      if (hasExternalWalletError) {
+        console.error("At least one external wallet must be provided if external wallet auth is enabled.");
+      }
+      if (hasEmbeddedWalletError) {
+        console.error(
+          "At least one login method (email, phone or OAuth) must be provided if embedded wallet auth is enabled."
+        );
+      }
+    } else {
+      console.error("At least one auth layout selection is required.");
+    }
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    StyledAuthModal,
+    {
+      enterTransitionDuration: DEFAULTS.ANIMATION_DURATION,
+      exitTransitionDuration: DEFAULTS.ANIMATION_DURATION,
+      open: isOpen,
+      onCpslModalExited: handleModalExited,
+      onCpslModalEntering: handleModalEntering,
+      onCpslModalRequestClose: handleClose,
+      noOverlay: bareModal,
+      className,
+      "data-testid": "modal",
+      $embeddedModal: !!embeddedModal,
+      children: isModalMounted && ((embeddedModal || bareModal) && isInit || !embeddedModal && !bareModal) && /* @__PURE__ */ jsx(
+        ModalContent,
+        __spreadValues({
+          oAuthMethods,
+          disableEmailLogin,
+          disablePhoneLogin,
+          isGuestModeEnabled,
+          onClose: handleClose
+        }, rest)
+      )
+    }
+  );
+});
+const StyledAuthModal = styled(CpslAuthModal)`
+  ${({ $embeddedModal }) => $embeddedModal && `
+    &::part(modal-body-card) {
+    --card-box-shadow: none;
+    --card-border-width: 0px;
+  };
+
+  &::part(modal-footer) {
+    --card-box-shadow: none;
+    --card-border-width: 0px;
+  };`}
+`;
+export {
+  ParaModal
+};

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

@@ -0,0 +1,139 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { InnerStepContainer, StepContainer, StyledCpslTileButton } from "../common.js";
+import { CpslButton, CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
+import { OnRampStep, useModalStore } from "../../stores/index.js";
+import { useState } from "react";
+import { ModalStep } from "../../utils/steps.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { formatBalanceString } from "../../utils/stringFormatters.js";
+import { useAccount, useWalletBalance } from "../../../provider/index.js";
+import { EnabledFlow } from "@getpara/web-sdk";
+const Account = ({ onClose }) => {
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const setStep = useModalStore((state) => state.setStep);
+  const setFlow = useModalStore((state) => state.setFlow);
+  const setGuestAddFundsTab = useModalStore((state) => state.setGuestAddFundsTab);
+  const setOnRampStep = useModalStore((state) => state.setOnRampStep);
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
+  const { disconnectExternalWallet } = useExternalWallets();
+  const para = useInternalClient();
+  const { data: account } = useAccount();
+  const { data: balance, isLoading: isBalanceLoading } = useWalletBalance();
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
+  const isGuestMode = (account == null ? void 0 : account.isConnected) && account.isGuestMode;
+  const cantBuyAndWithdraw = para.externalWalletConnectionType === "CONNECTION_ONLY" && !para.userId;
+  const isOnRampLoaded = !!onRampConfig;
+  const handleBuyClick = () => {
+    if (isGuestMode) {
+      setGuestAddFundsTab(EnabledFlow.BUY);
+      setStep(ModalStep.AUTH_GUEST_SIGNUP);
+    } else {
+      setOnRampStep(OnRampStep.SETTINGS);
+      setStep(ModalStep.ADD_FUNDS_BUY);
+    }
+  };
+  const handleReceiveClick = () => {
+    setStep(ModalStep.ADD_FUNDS_RECEIVE);
+  };
+  const handleSellClick = () => {
+    if (isGuestMode) {
+      setGuestAddFundsTab(EnabledFlow.WITHDRAW);
+      setStep(ModalStep.AUTH_GUEST_SIGNUP);
+    } else {
+      setOnRampStep(OnRampStep.SETTINGS);
+      setStep(ModalStep.ADD_FUNDS_WITHDRAW);
+    }
+  };
+  const handleDisconnectClick = () => __async(void 0, null, function* () {
+    setIsDisconnecting(true);
+    yield para.logout();
+    yield disconnectExternalWallet();
+    onClose();
+    setStep(ModalStep.AUTH_MAIN);
+    setFlow(void 0);
+    setIsDisconnecting(false);
+  });
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+    isBalanceLoading ? /* @__PURE__ */ jsx(BalanceContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, { size: 39 }) }) : balance !== void 0 && balance !== null && /* @__PURE__ */ jsx(BalanceContainer, { children: /* @__PURE__ */ jsx(CpslText, { variant: "headingS", weight: "medium", children: formatBalanceString(balance) }) }),
+    isGuestMode && /* @__PURE__ */ jsxs(Fragment, { children: [
+      balance && parseFloat(balance) > 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."
+      ] }),
+      /* @__PURE__ */ jsxs(
+        CpslButton,
+        {
+          fullWidth: true,
+          variant: "primary",
+          onClick: () => {
+            setStep(ModalStep.AUTH_GUEST_SIGNUP);
+          },
+          children: [
+            /* @__PURE__ */ jsx(CpslIcon, { icon: "stars02" }),
+            "Complete Account Setup"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(ButtonContainer, { children: isOnRampLoaded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      onRampConfig.isBuyEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "creditCard", onClick: handleBuyClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Buy Crypto" }) }),
+      onRampConfig.isReceiveEnabled && /* @__PURE__ */ jsx(OptionButton, { icon: "qrCode02", onClick: handleReceiveClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Receive" }) }),
+      onRampConfig.isWithdrawEnabled && !cantBuyAndWithdraw && /* @__PURE__ */ jsx(OptionButton, { icon: "arrowCircleBrokenDownLeft", onClick: handleSellClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Withdraw" }) })
+    ] }) : /* @__PURE__ */ jsx(CpslSpinner, {}) }),
+    !isGuestMode && /* @__PURE__ */ jsx(DisconnectButton, { variant: "destructive", fullWidth: true, onClick: handleDisconnectClick, disabled: isDisconnecting, children: isDisconnecting ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      hideWallets ? "Logout" : "Disconnect Wallet",
+      /* @__PURE__ */ jsx(CpslIcon, { icon: "logOut", slot: "end" })
+    ] }) })
+  ] }) });
+};
+const ButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+  height: 88px;
+`;
+const OptionButton = styled(StyledCpslTileButton)`
+  flex: 1;
+
+  --button-icon-color: var(--cpsl-color-text-primary);
+`;
+const DisconnectButton = styled(CpslButton)`
+  --button-border-width: 0px;
+`;
+const BalanceContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding-top: 8px;
+  padding-bottom: 24px;
+`;
+const Alert = styled.div`
+  --icon-color: var(--cpsl-color-utility-yellow);
+  --icon-stroke-color: var(--cpsl-color-utility-yellow);
+  --icon-fill-color: var(--cpsl-color-utility-yellow);
+
+  display: flex;
+  padding: 8px;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: var(--cpsl-border-radius-alert);
+  border: 1px solid var(--cpsl-color-utility-yellow);
+  background: var(--cpsl-color-utility-yellow-light);
+  font-size: 14px;
+`;
+export {
+  Account
+};

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

@@ -1,3 +1 @@
-import { EnabledFlow } from '@getpara/web-sdk';
-export type Tab = EnabledFlow;
 export declare const AddFunds: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,69 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { EnabledFlow } from "@getpara/web-sdk";
+import { InnerStepContainer, StepContainer } from "../common.js";
+import { CpslIcon, CpslSpinner, CpslTab, CpslTabs } from "@getpara/react-components";
+import { OnRampStep } from "../../stores/index.js";
+import { useModalStore } from "../../stores/modal/useModalStore.js";
+import { useEffect, useMemo } from "react";
+import { getAddFundsStep } from "../../utils/steps.js";
+import styled from "styled-components";
+import { useAccount, useWallet } from "../../../provider/index.js";
+import { AddFundsProvider } from "./AddFundsProvider.js";
+import { AddFundsReceive } from "./AddFundsReceive.js";
+import { AddFundsContextProvider, TABS } from "./AddFundsContext.js";
+import { AnimatePresence } from "framer-motion";
+import { AddFundsSettings } from "./AddFundsSettings.js";
+const AddFunds = () => {
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const onRampStep = useModalStore((state) => state.onRampStep);
+  const storedTab = useModalStore((state) => state.accountAddFundTab);
+  const setModalStep = useModalStore((state) => state.setStep);
+  const setOnRampPurchase = useModalStore((state) => state.setOnRampPurchase);
+  const { data: activeWallet } = useWallet();
+  const { data: account } = useAccount();
+  const isGuestMode = (account == null ? void 0 : account.isConnected) && account.isGuestMode;
+  const tabs = TABS.filter(
+    ([enabledFlow, key]) => !!(onRampConfig == null ? void 0 : onRampConfig[key]) && (!isGuestMode || enabledFlow === EnabledFlow.RECEIVE)
+  );
+  const tab = storedTab != null ? storedTab : tabs[0][0];
+  const isMultiFlow = tabs.length > 1;
+  const onSetTab = (event) => {
+    setModalStep(getAddFundsStep(event.detail.tab));
+  };
+  const Content = useMemo(() => {
+    switch (tab) {
+      case EnabledFlow.BUY:
+      case EnabledFlow.WITHDRAW: {
+        switch (onRampStep) {
+          case OnRampStep.SETTINGS:
+            return /* @__PURE__ */ jsx(AddFundsSettings, {});
+          case OnRampStep.PROVIDER:
+            return /* @__PURE__ */ jsx(AddFundsProvider, {});
+        }
+      }
+      default:
+        return /* @__PURE__ */ jsx(AddFundsReceive, {});
+    }
+  }, [onRampStep, tab]);
+  useEffect(() => {
+    setOnRampPurchase(void 0);
+  }, []);
+  if (!onRampConfig || !activeWallet) {
+    return /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, {}) });
+  }
+  return /* @__PURE__ */ jsxs(StepContainer, { children: [
+    isMultiFlow && /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslTabs, { selectedTab: tab, onCpslTabsChanged: onSetTab, children: TABS.map(([tab2, _, icon, title]) => /* @__PURE__ */ jsxs(CpslTab, { tab: tab2, children: [
+      /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon }),
+      title
+    ] }, tab2)) }) }),
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(AddFundsContextProvider, { "data-testid": "add-funds", tab, children: Content }) })
+  ] });
+};
+const SpinnerContainer = styled(StepContainer)`
+  margin: 50% 0;
+`;
+export {
+  AddFunds
+};

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

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

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

@@ -0,0 +1,125 @@
+"use client";
+import {
+  __async,
+  __spreadProps,
+  __spreadValues
+} 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 styled from "styled-components";
+import { getAssetCode, getAssetName, ON_RAMP_ASSETS } from "../../constants/constants.js";
+import { useModalStore } from "../../stores/index.js";
+import { useRef, useState } from "react";
+import { useAddFunds } from "./AddFundsContext.js";
+import { useWallet } from "../../../provider/hooks/queries/useWallet.js";
+import { AssetIcon } 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) {
+      yield setNetwork(
+        getOnRampNetworks(onRampConfig.assetInfo, {
+          walletType: activeWallet.type,
+          assets: [_asset]
+        })[0]
+      );
+    }
+  });
+  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,
+      {
+        placeholder: "Search for an asset",
+        value: searchStr,
+        onCpslInput: (e) => {
+          setSearchStr(e.detail.value);
+        },
+        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) => {
+      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, { variant: "bodyL", children: ON_RAMP_ASSETS[asset].code }),
+            /* @__PURE__ */ jsx(Name, { variant: "bodyS", children: ON_RAMP_ASSETS[asset].name })
+          ] })
+        ] }, asset)
+      },
+      asset
+    )) }) }) })
+  ] });
+}
+const ScrollContainer = styled.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 = styled.ul`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  gap: 8px;
+  list-style: none;
+  padding-inline-start: 0;
+  margin: 0;
+  padding: 0px;
+`;
+const AssetButton = styled(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 = styled(comp.CpslCol)`
+    text-align: left;
+  `, Code = comp.CpslText, Name = comp.CpslText;
+const SearchInput = styled(comp.CpslInput)`
+  --container-background-color: var(--cpsl-color-background-8);
+  --input-background-color: transparent;
+`;
+export {
+  AddFundsAsset
+};

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

@@ -0,0 +1,78 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { StepContainer } from "../common.js";
+import { OnRampProvider } from "@getpara/web-sdk";
+import { useModalStore } from "../../stores/index.js";
+import { lazy, useEffect, useMemo, useState } from "react";
+import { ModalStep } from "../../utils/steps.js";
+import { RampEmbed, StripeEmbed } from "@getpara/react-common";
+import styled from "styled-components";
+import { useGoBack } from "../../hooks/useGoBack.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+const STEPS = {
+  CANCELLED: ModalStep.ADD_FUNDS_FAILURE,
+  FINISHED: ModalStep.ADD_FUNDS_SUCCESS
+};
+const AddFundsAwaiting = () => {
+  const setStep = useModalStore((state) => state.setStep);
+  const goBack = useGoBack();
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const onRampPurchase = useModalStore((state) => state.onRampPurchase);
+  const setOnRampPurchase = useModalStore((state) => state.setOnRampPurchase);
+  const para = useInternalClient();
+  const appName = useStore((state) => state.appName);
+  const isDark = useStore((state) => state.isDarkTheme);
+  const [MoonPayEmbed, setMoonPayEmbed] = useState();
+  const props = {
+    para,
+    appName,
+    onRampConfig,
+    onRampPurchase,
+    isDark,
+    isEmbedded: true,
+    setOnRampPurchase,
+    onClose: goBack
+  };
+  useEffect(() => {
+    const _MoonPayEmbed = lazy(() => import("./MoonPayEmbed.js"));
+    if (_MoonPayEmbed) {
+      setMoonPayEmbed(_MoonPayEmbed);
+    }
+  }, []);
+  const onRampEmbed = useMemo(() => {
+    var _a, _b;
+    if (!(onRampPurchase == null ? void 0 : onRampPurchase.id) || !props.onRampConfig) {
+      return null;
+    }
+    switch (onRampPurchase == null ? void 0 : onRampPurchase.provider) {
+      case OnRampProvider.STRIPE:
+        return /* @__PURE__ */ jsx(StripeEmbed, __spreadProps(__spreadValues({}, props), { onRampConfig: props.onRampConfig }));
+      case OnRampProvider.MOONPAY:
+        return !MoonPayEmbed || typeof window === "undefined" ? null : /* @__PURE__ */ jsx(MoonPayEmbed, __spreadProps(__spreadValues({}, props), { onRampConfig: props.onRampConfig }));
+      case OnRampProvider.RAMP:
+        return /* @__PURE__ */ jsx(RampEmbed, __spreadProps(__spreadValues({}, props), { apiKey: (_b = (_a = props.onRampConfig) == null ? void 0 : _a.rampApiKey) != null ? _b : "", onRampConfig: props.onRampConfig }));
+    }
+  }, [onRampPurchase == null ? void 0 : onRampPurchase.provider, MoonPayEmbed]);
+  useEffect(() => {
+    let timeoutId;
+    if ((onRampPurchase == null ? void 0 : onRampPurchase.status) && ["CANCELLED", "FINISHED"].includes(onRampPurchase.status)) {
+      timeoutId = setTimeout(() => {
+        var _a;
+        setStep(STEPS[(_a = onRampPurchase.status) != null ? _a : ""]);
+      }, 5e3);
+    }
+    return () => clearTimeout(timeoutId);
+  }, [onRampPurchase == null ? void 0 : onRampPurchase.status]);
+  return /* @__PURE__ */ jsx(Container, { $wide: true, children: onRampEmbed });
+};
+const Container = styled(StepContainer)`
+  flex: 1;
+`;
+export {
+  AddFundsAwaiting
+};