@getpara/react-sdk 1.8.0 → 1.10.0

package/dist/modal/ParaModal.js

@@ -121,6 +121,7 @@ const ParaModalInner = forwardRef(
     const para = useInternalClient();
     const { selectedWallet, setSelectedWallet } = useWalletState();
     const setIsPasskeySupported = useModalStore((state) => state.setIsPasskeySupported);
+    const setAuthStepRoute = useModalStore((state) => state.setAuthStepRoute);
     const [isModalMounted, setIsModalMounted] = useState(false);
     const [isInit, setIsInit] = useState(false);
     const [ready, setIsReady] = useState(false);
@@ -157,6 +158,7 @@ const ParaModalInner = forwardRef(
           setWebAuthURLForLogin();
           setWebAuthURLForCreate();
           setBiometricLocationHints();
+          setAuthStepRoute();
         }
         setSelectedWallet({ id: void 0, type: void 0 });
         setIsFullyLoggedIn(false);

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

@@ -6,7 +6,7 @@ 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 { useModalStore, useThemeStore } from "../../stores/index.js";
+import { OnRampStep, useModalStore, useThemeStore } from "../../stores/index.js";
 import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
 import { useState } from "react";
 import { ModalStep } from "../../utils/steps.js";
@@ -15,18 +15,21 @@ import { formatBalanceString } from "../../utils/stringFormatters.js";
 const Account = ({ onClose }) => {
   const onRampConfig = useModalStore((state) => state.onRampConfig);
   const setStep = useModalStore((state) => state.setStep);
+  const setOnRampStep = useModalStore((state) => state.setOnRampStep);
   const hideWallets = useThemeStore((state) => state.hideWallets);
   const { disconnectExternalWallet } = useExternalWallets();
   const { balance, isLoading: isBalanceLoading } = useWalletBalance();
   const [isDisconnecting, setIsDisconnecting] = useState(false);
   const isOnRampLoaded = !!onRampConfig;
   const handleBuyClick = () => {
+    setOnRampStep(OnRampStep.SETTINGS);
     setStep(ModalStep.ADD_FUNDS_BUY);
   };
   const handleReceiveClick = () => {
     setStep(ModalStep.ADD_FUNDS_RECEIVE);
   };
   const handleSellClick = () => {
+    setOnRampStep(OnRampStep.SETTINGS);
     setStep(ModalStep.ADD_FUNDS_WITHDRAW);
   };
   const handleDisconnectClick = () => __async(void 0, null, function* () {

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

@@ -1,220 +1,65 @@
 "use client";
-import {
-  __async,
-  __spreadProps,
-  __spreadValues
-} from "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import {
-  EnabledFlow,
-  getOnRampAssets,
-  getOnRampNetworks,
-  OnRampProvider,
-  OnRampPurchaseType,
-  toAssetInfoArray,
-  WalletType
-} from "@getpara/web-sdk";
-import { CenteredText, FilledDisabledInput, Heading, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
-import {
-  CpslButton,
-  CpslDivider,
-  CpslIcon,
-  CpslIdenticon,
-  CpslQrCode,
-  CpslSpinner,
-  CpslTab,
-  CpslTabs,
-  CpslText
-} from "@getpara/react-components";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
+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 { OnRampProviderButton } from "../OnRampComponents/OnRampProviderButton.js";
-import { isMobile } from "@getpara/web-sdk";
 import { useActiveWallet } from "../../hooks/useActiveWallet.js";
-import { getAddFundsStep, ModalStep } from "../../utils/steps.js";
-import { motion, AnimatePresence } from "framer-motion";
-import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
-import { getNetworkFromChainId, getNetworkOrMainNetEquivalent, useCopyToClipboard } from "@getpara/react-common";
-import { formatNetworkList } from "../../utils/stringFormatters.js";
+import { getAddFundsStep } from "../../utils/steps.js";
 import styled from "styled-components";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-const TABS = [
-  [EnabledFlow.BUY, "isBuyEnabled", "creditCard", "Buy"],
-  [EnabledFlow.RECEIVE, "isReceiveEnabled", "qrCode", "Receive"],
-  [EnabledFlow.WITHDRAW, "isWithdrawEnabled", "arrowCircleBrokenDownLeft", "Withdraw"]
-];
-const GENERIC_WALLET = {
-  [WalletType.EVM]: "Ethereum or EVM-based L2s",
-  [WalletType.SOLANA]: "Solana",
-  [WalletType.COSMOS]: "Cosmos"
-};
+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 [isCopied, copy] = useCopyToClipboard();
-  const para = useInternalClient();
-  const appName = useThemeStore((state) => state.appName);
   const onRampConfig = useModalStore((state) => state.onRampConfig);
-  const hideWallets = useThemeStore((state) => state.hideWallets);
+  const onRampStep = useModalStore((state) => state.onRampStep);
   const storedTab = useModalStore((state) => state.accountAddFundTab);
-  const setStep = useModalStore((state) => state.setStep);
+  const setModalStep = useModalStore((state) => state.setStep);
   const setOnRampPurchase = useModalStore((state) => state.setOnRampPurchase);
-  const { chainId } = useExternalWallets();
   const activeWallet = useActiveWallet();
   const tabs = TABS.filter(([, key]) => !!onRampConfig[key]);
-  const isMultiFlow = tabs.length > 1;
   const tab = storedTab != null ? storedTab : tabs[0][0];
-  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 isMultiFlow = tabs.length > 1;
   const onSetTab = (event) => {
-    setStep(getAddFundsStep(event.detail.tab));
+    setModalStep(getAddFundsStep(event.detail.tab));
   };
-  const onCopy = () => {
-    copy(address);
-  };
-  const [allowedNetworks, allowedAssets, isProviderAllowed] = useMemo(() => {
-    if (!onRampConfig || !activeWallet) {
-      return [[], [], {}];
+  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, {});
     }
-    const action = tab === EnabledFlow.BUY ? OnRampPurchaseType.BUY : OnRampPurchaseType.SELL;
-    const detectedNetwork = getNetworkFromChainId(chainId);
-    const isExternal = activeWallet.isExternal && !!detectedNetwork;
-    const allowedNetworks2 = isExternal ? [getNetworkOrMainNetEquivalent(detectedNetwork, onRampConfig.testMode)] : getOnRampNetworks(onRampConfig.assetInfo, {
-      walletType: activeWallet.type,
-      allowed: onRampConfig.allowedAssets ? Object.keys(onRampConfig.allowedAssets) : void 0
-    });
-    const allowedAssetsLookup = allowedNetworks2.reduce((acc, network) => {
-      var _a;
-      const configValue = (_a = onRampConfig.allowedAssets) == null ? void 0 : _a[network];
-      const allowed = configValue === true ? void 0 : configValue;
-      return __spreadProps(__spreadValues({}, acc), {
-        [network]: getOnRampAssets(onRampConfig.assetInfo, { walletType: activeWallet.type, network, allowed })
-      });
-    }, {});
-    const isProviderAllowed2 = onRampConfig.providers.reduce(
-      (acc, id) => {
-        const hasMatch = toAssetInfoArray(onRampConfig.assetInfo).some(([type, network, asset, validProviders]) => {
-          var _a, _b;
-          return type === activeWallet.type && allowedNetworks2.includes(network) && (!allowedAssetsLookup[network] || allowedAssetsLookup[network].includes(asset)) && !!((_b = (_a = validProviders[id]) == null ? void 0 : _a[1]) == null ? void 0 : _b[action]);
-        });
-        return __spreadProps(__spreadValues({}, acc), {
-          [id]: hasMatch
-        });
-      },
-      {}
-    );
-    return [allowedNetworks2, [...new Set(Object.values(allowedAssetsLookup).flat())], isProviderAllowed2];
-  }, [activeWallet == null ? void 0 : activeWallet.type, activeWallet == null ? void 0 : activeWallet.isExternal, tab, onRampConfig.assetInfo, onRampConfig.allowedAssets, chainId]);
-  useEffect(() => {
-    setOnRampPurchase(void 0);
-  }, []);
+  }, [onRampStep, tab]);
   useEffect(() => {
     setOnRampPurchase(void 0);
   }, []);
   if (!onRampConfig || !activeWallet) {
     return /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, {}) });
   }
-  useEffect(() => {
-    setOnRampPurchase(void 0);
-  }, []);
   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(Fragment, { children: [EnabledFlow.BUY, EnabledFlow.WITHDRAW].includes(tab) ? /* @__PURE__ */ jsxs(Fragment, { 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(void 0, null, function* () {
-                    var _a;
-                    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,
-                        networks: allowedNetworks,
-                        assets: allowedAssets,
-                        defaultNetwork: onRampConfig.defaultOnRampNetwork,
-                        defaultAsset: onRampConfig.defaultOnRampAsset,
-                        fiatQuantity: (_a = onRampConfig.defaultBuyAmount) == null ? void 0 : _a[0],
-                        testMode: onRampConfig.testMode
-                      }
-                    });
-                    setOnRampPurchase(__spreadProps(__spreadValues({}, newOnRampPurchase), { fiat: "USD" }));
-                    !isPopup && setStep(ModalStep.ADD_FUNDS_AWAITING);
-                  })
-                },
-                id
-              )
-            },
-            id
-          ) : null;
-        }) })
-      ] })
-    ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsxs(FilledDisabledInput, { noAutoDisable: true, readonly: true, placeholder: address, 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 && allowedNetworks.length > 0 || hideWallets ? appName != null ? appName : "This App" : "This Wallet",
-          " ",
-          "Only Supports:"
-        ] }),
-        /* @__PURE__ */ jsx(CenteredText, { weight: "medium", color: "secondary", children: !!onRampConfig.allowedAssets && allowedNetworks.length > 0 ? formatNetworkList(allowedNetworks) : GENERIC_WALLET[activeWallet.type] })
-      ] })
-    ] }) })
+    /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(AddFundsContextProvider, { "data-testid": "add-funds", tab, children: Content }) })
   ] });
 };
 const SpinnerContainer = styled(StepContainer)`
   margin: 50% 0;
 `;
-const $InnerStepContainer = styled(InnerStepContainer)`
-  position: relative;
-  min-height: 270px;
-`;
-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 {
   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,119 @@
+"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 { useActiveWallet } from "../../hooks/useActiveWallet.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 activeWallet = useActiveWallet();
+  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) {
+      yield setNetwork(
+        getOnRampNetworks(onRampConfig.assetInfo, {
+          walletType: activeWallet.type,
+          assets: [_asset]
+        })[0]
+      );
+    }
+  });
+  const onScroll = () => {
+    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;
+`;
+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/AddFundsContext.d.ts

@@ -0,0 +1,31 @@
+import { Dispatch, PropsWithChildren, ReactNode, SetStateAction } from 'react';
+import { useActiveWallet } from '../../hooks/useActiveWallet.js';
+import { EnabledFlow, Network, OnRampAsset, OnRampConfig, OnRampProvider } from '@getpara/web-sdk';
+import { IconType } from '@getpara/react-components';
+export type Tab = EnabledFlow;
+export declare const TABS: [
+    Tab,
+    keyof Pick<OnRampConfig, 'isBuyEnabled' | 'isReceiveEnabled' | 'isWithdrawEnabled'>,
+    IconType,
+    ReactNode
+][];
+type Value = {
+    network: Network | undefined;
+    setNetwork: Dispatch<SetStateAction<Value['network']>>;
+    asset: OnRampAsset | undefined;
+    setAsset: Dispatch<SetStateAction<Value['asset']>>;
+    fiatQuantity: string | undefined;
+    setFiatQuantity: Dispatch<SetStateAction<Value['fiatQuantity']>>;
+    networks: Network[];
+    assets: OnRampAsset[];
+    isProviderAllowed: Partial<Record<OnRampProvider, boolean>>;
+    tab: Tab;
+    activeWallet: ReturnType<typeof useActiveWallet>;
+    onRampConfig: OnRampConfig;
+};
+export declare const AddFundsContext: import("react").Context<Value>;
+export declare function AddFundsContextProvider({ tab, children }: PropsWithChildren<{
+    tab: Tab;
+}>): import("react/jsx-runtime").JSX.Element;
+export declare const useAddFunds: () => Value;
+export {};

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

@@ -0,0 +1,154 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { OnRampStep, useModalStore } from "../../stores/index.js";
+import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
+import { useActiveWallet } from "../../hooks/useActiveWallet.js";
+import {
+  EnabledFlow,
+  getOnRampAssets,
+  getOnRampNetworks,
+  OnRampPurchaseType
+} from "@getpara/web-sdk";
+import { getNetworkFromChainId, getNetworkOrMainNetEquivalent } from "@getpara/react-common";
+const TABS = [
+  [EnabledFlow.BUY, "isBuyEnabled", "creditCard", "Buy"],
+  [EnabledFlow.RECEIVE, "isReceiveEnabled", "qrCode", "Receive"],
+  [EnabledFlow.WITHDRAW, "isWithdrawEnabled", "arrowCircleBrokenDownLeft", "Withdraw"]
+];
+const DEFAULT = {
+  networks: [],
+  assets: [],
+  isProviderAllowed: {},
+  tab: TABS[0][0],
+  network: void 0,
+  setNetwork: () => {
+  },
+  asset: void 0,
+  setAsset: () => {
+  },
+  fiatQuantity: "25.00",
+  setFiatQuantity: () => {
+  },
+  onRampConfig: {},
+  activeWallet: {}
+};
+function isValid({ assetInfo }, walletType, network, asset) {
+  var _a, _b;
+  return !!((_b = (_a = assetInfo[walletType]) == null ? void 0 : _a[network]) == null ? void 0 : _b[asset]);
+}
+const AddFundsContext = createContext(DEFAULT);
+function AddFundsContextProvider({ tab, children }) {
+  var _a, _b;
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const onRampStep = useModalStore((state) => state.onRampStep);
+  const setOnRampStep = useModalStore((state) => state.setOnRampStep);
+  const { chainId } = useExternalWallets();
+  const activeWallet = useActiveWallet();
+  const [fiatQuantity, setFiatQuantity] = useState((_b = (_a = onRampConfig.defaultBuyAmount) == null ? void 0 : _a[0]) != null ? _b : "25.00");
+  const networks = useMemo(() => {
+    const detectedNetwork = getNetworkFromChainId(chainId);
+    const isExternal = activeWallet.isExternal && !!detectedNetwork;
+    return isExternal ? [getNetworkOrMainNetEquivalent(detectedNetwork, onRampConfig.testMode)] : getOnRampNetworks(onRampConfig.assetInfo, {
+      walletType: activeWallet.type,
+      allowed: onRampConfig.allowedAssets ? Object.keys(onRampConfig.allowedAssets) : void 0,
+      providers: onRampConfig.providers,
+      action: OnRampPurchaseType[tab === EnabledFlow.BUY ? "BUY" : "SELL"]
+    });
+  }, [chainId, activeWallet, onRampConfig, tab]);
+  const assets = useMemo(() => {
+    return [
+      ...new Set(
+        Object.values(
+          networks.reduce((acc, network2) => {
+            var _a2;
+            const configValue = (_a2 = onRampConfig.allowedAssets) == null ? void 0 : _a2[network2];
+            const allowed = configValue === true ? void 0 : configValue;
+            return __spreadProps(__spreadValues({}, acc), {
+              [network2]: getOnRampAssets(onRampConfig.assetInfo, {
+                walletType: activeWallet.type,
+                network: network2,
+                allowed,
+                providers: onRampConfig.providers,
+                action: OnRampPurchaseType[tab === EnabledFlow.BUY ? "BUY" : "SELL"]
+              })
+            });
+          }, {})
+        ).flat()
+      )
+    ];
+  }, [networks, onRampConfig, activeWallet, tab]);
+  const [network, setNetwork] = useState(
+    !!(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 isProviderAllowed = useMemo(
+    () => onRampConfig.providers.reduce(
+      (acc, id) => {
+        var _a2, _b2, _c, _d, _e;
+        return __spreadProps(__spreadValues({}, acc), {
+          [id]: !!network && !!asset && !!((_e = (_d = (_c = (_b2 = (_a2 = onRampConfig.assetInfo[activeWallet.type]) == null ? void 0 : _a2[network]) == null ? void 0 : _b2[asset]) == null ? void 0 : _c[id]) == null ? void 0 : _d[1]) == null ? void 0 : _e[tab === EnabledFlow.BUY ? "BUY" : "SELL"])
+        });
+      },
+      {}
+    ),
+    [onRampConfig, network, asset, activeWallet, tab]
+  );
+  const value = useMemo(() => {
+    if (!onRampConfig || !activeWallet) {
+      return DEFAULT;
+    }
+    return {
+      tab,
+      networks,
+      assets,
+      isProviderAllowed,
+      asset,
+      setAsset,
+      network,
+      setNetwork,
+      fiatQuantity,
+      setFiatQuantity,
+      activeWallet,
+      onRampConfig
+    };
+  }, [
+    tab,
+    networks,
+    assets,
+    isProviderAllowed,
+    asset,
+    setAsset,
+    network,
+    setNetwork,
+    fiatQuantity,
+    setFiatQuantity,
+    activeWallet,
+    onRampConfig
+  ]);
+  useEffect(() => {
+    if (onRampStep === OnRampStep.PROVIDER && !isValid(onRampConfig, activeWallet.type, network, asset)) {
+      setOnRampStep(OnRampStep.SETTINGS);
+    }
+  }, [onRampStep, onRampConfig, activeWallet.type, network, asset, setOnRampStep]);
+  return /* @__PURE__ */ jsx(AddFundsContext.Provider, { value, children });
+}
+const useAddFunds = () => useContext(AddFundsContext);
+export {
+  AddFundsContext,
+  AddFundsContextProvider,
+  TABS,
+  useAddFunds
+};

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

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