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

package/dist/modal/ParaModal.js

@@ -1,362 +0,0 @@
-"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 [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();
-        }
-        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

@@ -1,77 +0,0 @@
-"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

@@ -1,220 +0,0 @@
-"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",
-  [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
-};