@getpara/react-sdk 1.7.1 → 1.9.0

package/dist/modal/ParaModal.js

@@ -0,0 +1,364 @@
+"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, useUserInfoStore, useThemeStore } 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 { isPasskeySupported, ParaEvent } from "@getpara/web-sdk";
+import { ExternalWalletsWrapper } from "./components/ExternalWalletsWrapper/ExternalWalletsWrapper.js";
+import styled from "styled-components";
+import { hasEmbeddedAuth, hasExternalWallet } from "./utils/authLayoutHelpers.js";
+import { useModal, useWalletState } from "../provider/index.js";
+import { useStore } from "../provider/stores/useStore.js";
+import { getExternalWalletDisplayName } from "@getpara/react-common";
+import { useInternalClient } from "../provider/hooks/utils/useInternalClient.js";
+import { useExternalWalletProviderStore } from "./stores/externalWalletProvider/useExternalWalletProviderStore.js";
+defineCustomElements();
+const ParaModal = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { para, isOpen, externalWalletsWithParaAuth, rpcUrl: rpcUrlFromProps } = _b, rest = __objRest(_b, ["para", "isOpen", "externalWalletsWithParaAuth", "rpcUrl"]);
+    const [isInitialized, setIsInitialized] = useState(false);
+    const setClient = useStore((state) => state.setClient);
+    const client = useStore((state) => state.client);
+    const rpcUrl = useStore((state) => state.rpcUrl);
+    const setRpcUrl = useStore((state) => state.setRpcUrl);
+    const { closeModal, openModal } = useModal();
+    const updateExternalWalletProviderState = useExternalWalletProviderStore((state) => state.updateState);
+    useEffect(() => {
+      updateExternalWalletProviderState({ fullAuthWallets: externalWalletsWithParaAuth });
+    }, [externalWalletsWithParaAuth]);
+    useEffect(() => {
+      if (!client) {
+        setClient(para);
+      }
+      setIsInitialized(true);
+    }, []);
+    useEffect(() => {
+      if (rpcUrl !== rpcUrlFromProps) {
+        setRpcUrl(rpcUrlFromProps);
+      }
+    }, [rpcUrlFromProps]);
+    useEffect(() => {
+      if (!isOpen) {
+        closeModal();
+      }
+      if (isOpen) {
+        openModal();
+      }
+    }, [isOpen]);
+    if (!isInitialized) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(ParaModalInner, __spreadValues({ ref, para, externalWalletsWithParaAuth }, rest));
+  }
+);
+const ParaModalInner = forwardRef(
+  (_c, ref) => {
+    var _d = _c, {
+      theme,
+      appName,
+      logo,
+      disableEmailLogin = false,
+      disablePhoneLogin = false,
+      oAuthMethods,
+      bareModal = false,
+      className,
+      currentStepOverride,
+      externalWallets,
+      authLayout = [AuthLayout.AUTH_FULL, AuthLayout.EXTERNAL_FULL],
+      embeddedModal,
+      onModalStepChange,
+      hideWallets = false,
+      onClose,
+      externalWalletsWithParaAuth
+    } = _d, rest = __objRest(_d, [
+      "theme",
+      "appName",
+      "logo",
+      "disableEmailLogin",
+      "disablePhoneLogin",
+      "oAuthMethods",
+      "bareModal",
+      "className",
+      "currentStepOverride",
+      "externalWallets",
+      "authLayout",
+      "embeddedModal",
+      "onModalStepChange",
+      "hideWallets",
+      "onClose",
+      "externalWalletsWithParaAuth"
+    ]);
+    const modalContentRef = useRef(null);
+    const updateThemeState = useThemeStore((state) => state.updateState);
+    const refs = useModalStore((state) => state.refs);
+    const setWebAuthURLForLogin = useModalStore((state) => state.setWebAuthURLForLogin);
+    const setWebAuthURLForCreate = useModalStore((state) => state.setWebAuthURLForCreate);
+    const setBiometricLocationHints = useModalStore((state) => state.setBiometricLocationHints);
+    const currentStep = useModalStore((state) => state.step);
+    const setOnModalStepChange = useModalStore((state) => state.setOnModalStepChange);
+    const setStep = useModalStore((state) => state.setStep);
+    const setAuthInfo = useUserInfoStore((state) => state.setAuthInfo);
+    const hasPreviousStep = useModalStore((state) => state.hasPreviousStep());
+    const setFlow = useModalStore((state) => state.setFlow);
+    const setIsFullyLoggedIn = useModalStore((state) => state.setIsFullyLoggedIn);
+    const goBack = useGoBack();
+    const setAuthLayout = useThemeStore((state) => state.setAuthLayout);
+    const storedAuthLayout = useThemeStore((state) => state.authLayout);
+    const resetModalState = useModalStore((state) => state.resetState);
+    const resetUserInfoState = useUserInfoStore((state) => state.resetState);
+    const setRecoveryShare = useUserInfoStore((state) => state.setRecoveryShare);
+    const { isOpen, closeModal } = useModal();
+    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);
+    useImperativeHandle(ref, () => {
+      return {
+        goBack() {
+          goBack();
+        },
+        canGoBack() {
+          return hasPreviousStep;
+        },
+        currentStep() {
+          return currentStep;
+        },
+        handleModalClose() {
+          var _a;
+          (_a = modalContentRef == null ? void 0 : modalContentRef.current) == null ? void 0 : _a.handleModalClose();
+        }
+      };
+    }, [hasPreviousStep, currentStep]);
+    const initModal = () => __async(void 0, null, function* () {
+      const isAccount = yield para.isFullyLoggedIn();
+      setIsPasskeySupported(yield isPasskeySupported());
+      if (currentStepOverride) {
+        setStep(ModalStep[currentStepOverride.toUpperCase()]);
+      } else if (isAccount) {
+        setFlow("account");
+        setStep(ModalStep.ACCOUNT_MAIN);
+        setIsFullyLoggedIn(true);
+      } else {
+        if (currentStep !== ModalStep.AUTH_MAIN && currentStep !== ModalStep.SECRET) {
+          setStep(ModalStep.AUTH_MAIN);
+          setFlow();
+          setWebAuthURLForLogin();
+          setWebAuthURLForCreate();
+          setBiometricLocationHints();
+          setAuthStepRoute();
+        }
+        setSelectedWallet({ id: void 0, type: void 0 });
+        setIsFullyLoggedIn(false);
+      }
+      switch (true) {
+        case para.isEmail:
+          setAuthInfo({ email: para.getEmail() });
+          break;
+        case para.isPhone:
+          {
+            const { phone, countryCode } = para.getPhone();
+            setAuthInfo({ phone, countryCode });
+          }
+          break;
+        case para.isFarcaster:
+          setAuthInfo({ farcasterUsername: para.getFarcasterUsername() });
+          break;
+        case para.isTelegram:
+          setAuthInfo({ telegramUserId: para.telegramUserId });
+          if (!isAccount) {
+            setStep(ModalStep.TELEGRAM_OAUTH);
+          }
+          break;
+        case para.isExternalWalletAuth:
+          const externalWallets2 = Object.values(para.externalWallets);
+          const externalWalletWithFullAuth = externalWallets2.find((w) => w.isExternalWithParaAuth);
+          setAuthInfo({
+            displayName: getExternalWalletDisplayName({
+              address: externalWalletWithFullAuth.address,
+              type: externalWalletWithFullAuth.type
+            }),
+            externalWalletAddress: externalWalletWithFullAuth.address
+          });
+          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]);
+    useEffect(() => {
+      setOnModalStepChange(onModalStepChange);
+    }, [onModalStepChange]);
+    useEffect(() => {
+      var _a;
+      updateThemeState({
+        logo,
+        appName,
+        oAuthLogoVariant: (_a = theme == null ? void 0 : theme.oAuthLogoVariant) != null ? _a : "default",
+        bareModal,
+        embeddedModal,
+        hideWallets
+      });
+    }, [logo, appName, theme == null ? void 0 : theme.oAuthLogoVariant, bareModal, embeddedModal, hideWallets]);
+    useEffect(() => {
+      if (theme) {
+        generateTheme(theme);
+        updateThemeState({ isDark: theme.mode === "dark", theme });
+      }
+    }, [theme]);
+    useEffect(() => {
+      if (para) {
+        initModal();
+        if (bareModal) {
+          setIsModalMounted(true);
+        }
+      } else {
+        console.error("A Para instance must be provided.");
+      }
+    }, []);
+    useEffect(() => {
+      if (isOpen && para) {
+        initModal();
+      }
+    }, [isOpen]);
+    const updateActiveWallet = () => {
+      if (!(selectedWallet == null ? void 0 : selectedWallet.id) || !para.findWallet(selectedWallet == null ? void 0 : selectedWallet.id)) {
+        const defaultWallet = para.findWallet(void 0, void 0, { forbidPregen: true });
+        setSelectedWallet({ id: defaultWallet == null ? void 0 : defaultWallet.id, type: defaultWallet == null ? void 0 : defaultWallet.type });
+      }
+    };
+    useEffect(() => {
+      updateActiveWallet();
+    }, [para]);
+    useEffect(() => {
+      const closePopupWindow = () => {
+        var _a;
+        (_a = refs.popupWindow.current) == null ? void 0 : _a.close();
+      };
+      if (typeof window !== "undefined") {
+        window.addEventListener(ParaEvent.WALLETS_CHANGE_EVENT, updateActiveWallet);
+        window.addEventListener(ParaEvent.EXTERNAL_WALLET_CHANGE_EVENT, updateActiveWallet);
+        window.addEventListener("beforeunload", closePopupWindow);
+      }
+      setIsReady(true);
+      return () => {
+        if (typeof window !== "undefined") {
+          window.removeEventListener(ParaEvent.WALLETS_CHANGE_EVENT, updateActiveWallet);
+          window.removeEventListener(ParaEvent.EXTERNAL_WALLET_CHANGE_EVENT, updateActiveWallet);
+          window.removeEventListener("beforeunload", closePopupWindow);
+        }
+      };
+    }, []);
+    const handleClose = () => {
+      closeModal();
+      onClose == null ? void 0 : onClose();
+    };
+    const handleModalEntering = () => {
+      setIsModalMounted(true);
+    };
+    const handleModalExited = () => __async(void 0, null, function* () {
+      if (!bareModal) {
+        setIsModalMounted(false);
+      }
+      if (RESET_TO_AUTH_STEPS.includes(currentStep)) {
+        resetModalState();
+        resetUserInfoState();
+        setRecoveryShare(null);
+      } else if (RESET_TO_ACCOUNT_STEPS.includes(currentStep)) {
+        setStep(ModalStep.LOGIN_DONE);
+      }
+      if (para) {
+        yield initModal();
+        para.exitLoops();
+      }
+      if (!bareModal) {
+        setIsInit(false);
+      }
+    });
+    if (!ready) {
+      return null;
+    }
+    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(ExternalWalletsWrapper, { wallets: externalWallets, externalWalletsWithFullAuth: externalWalletsWithParaAuth, children: /* @__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 && (isInit && embeddedModal || !embeddedModal) && /* @__PURE__ */ jsx(
+          ModalContent,
+          __spreadValues({
+            oAuthMethods,
+            disableEmailLogin,
+            disablePhoneLogin,
+            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,77 @@
+"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 { useModalStore, useThemeStore } from "../../stores/index.js";
+import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
+import { useState } from "react";
+import { ModalStep } from "../../utils/steps.js";
+import { useWalletBalance } from "../../hooks/useWalletBalance.js";
+import { formatBalanceString } from "../../utils/stringFormatters.js";
+const Account = ({ onClose }) => {
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const setStep = useModalStore((state) => state.setStep);
+  const hideWallets = useThemeStore((state) => state.hideWallets);
+  const { disconnectExternalWallet } = useExternalWallets();
+  const { balance, isLoading: isBalanceLoading } = useWalletBalance();
+  const [isDisconnecting, setIsDisconnecting] = useState(false);
+  const isOnRampLoaded = !!onRampConfig;
+  const handleBuyClick = () => {
+    setStep(ModalStep.ADD_FUNDS_BUY);
+  };
+  const handleReceiveClick = () => {
+    setStep(ModalStep.ADD_FUNDS_RECEIVE);
+  };
+  const handleSellClick = () => {
+    setStep(ModalStep.ADD_FUNDS_WITHDRAW);
+  };
+  const handleDisconnectClick = () => __async(void 0, null, function* () {
+    setIsDisconnecting(true);
+    yield disconnectExternalWallet();
+    onClose();
+    setStep(ModalStep.AUTH_MAIN);
+    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 && /* @__PURE__ */ jsx(BalanceContainer, { children: /* @__PURE__ */ jsx(CpslText, { variant: "headingS", weight: "medium", children: formatBalanceString(balance) }) }),
+    /* @__PURE__ */ jsx(ButtonContainer, { children: isOnRampLoaded ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      onRampConfig.isBuyEnabled && /* @__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 && /* @__PURE__ */ jsx(OptionButton, { icon: "arrowCircleBrokenDownLeft", onClick: handleSellClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Withdraw" }) })
+    ] }) : /* @__PURE__ */ jsx(CpslSpinner, {}) }),
+    /* @__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;
+`;
+export {
+  Account
+};

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

@@ -0,0 +1,220 @@
+"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 { 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 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 or SVM-based networks",
+  [WalletType.COSMOS]: "Cosmos"
+};
+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 storedTab = useModalStore((state) => state.accountAddFundTab);
+  const setStep = 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 onSetTab = (event) => {
+    setStep(getAddFundsStep(event.detail.tab));
+  };
+  const onCopy = () => {
+    copy(address);
+  };
+  const [allowedNetworks, allowedAssets, isProviderAllowed] = useMemo(() => {
+    if (!onRampConfig || !activeWallet) {
+      return [[], [], {}];
+    }
+    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);
+  }, []);
+  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] })
+      ] })
+    ] }) })
+  ] });
+};
+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
+};