@getpara/react-sdk 1.6.1-dev.0 → 1.7.0

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

@@ -1,69 +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 { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.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 para = useInternalClient();
-  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 para.logout();
-    yield disconnectExternalWallet();
-    onClose();
-    setStep(ModalStep.AUTH_MAIN);
-    setIsDisconnecting(false);
-  });
-  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-    /* @__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;
-`;
-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
-};

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

@@ -1,72 +0,0 @@
-"use client";
-import {
-  __spreadValues
-} from "../../../chunk-MMUBH76A.js";
-import { jsx } from "react/jsx-runtime";
-import { StepContainer } from "../common.js";
-import { OnRampProvider } from "@getpara/web-sdk";
-import { useModalStore, useThemeStore } 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";
-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 = useThemeStore((state) => state.appName);
-  const isDark = useThemeStore((state) => state.isDark);
-  const [MoonPayEmbed, setMoonPayEmbed] = useState(null);
-  const props = {
-    para,
-    appName,
-    onRampConfig,
-    onRampPurchase,
-    isDark,
-    isEmbedded: true,
-    setOnRampPurchase,
-    onClose: goBack
-  };
-  useEffect(() => {
-    const _MoonPayEmbed = lazy(() => import("./MoonPayEmbed.js"));
-    setMoonPayEmbed(_MoonPayEmbed);
-  }, []);
-  const onRampEmbed = useMemo(() => {
-    if (!onRampPurchase.id) {
-      return null;
-    }
-    switch (onRampPurchase == null ? void 0 : onRampPurchase.provider) {
-      case OnRampProvider.STRIPE:
-        return /* @__PURE__ */ jsx(StripeEmbed, __spreadValues({}, props));
-      case OnRampProvider.MOONPAY:
-        return !MoonPayEmbed || typeof window === "undefined" ? null : /* @__PURE__ */ jsx(MoonPayEmbed, __spreadValues({}, props));
-      case OnRampProvider.RAMP:
-        return /* @__PURE__ */ jsx(RampEmbed, __spreadValues({ apiKey: onRampConfig.rampApiKey }, props));
-    }
-  }, [onRampPurchase == null ? void 0 : onRampPurchase.provider, MoonPayEmbed]);
-  useEffect(() => {
-    let timeoutId;
-    if ((onRampPurchase == null ? void 0 : onRampPurchase.status) && ["CANCELLED", "FINISHED"].includes(onRampPurchase.status)) {
-      timeoutId = setTimeout(() => {
-        setStep(STEPS[onRampPurchase.status]);
-      }, 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
-};

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

@@ -1,43 +0,0 @@
-"use client";
-import "../../../chunk-MMUBH76A.js";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Heading, HeroIcon, InnerStepContainer, StepContainer } from "../common.js";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
-import { useMemo } from "react";
-import { CpslButton, CpslText } from "@getpara/react-components";
-import { getAddFundsStep } from "../../utils/steps.js";
-const AddFundsDone = ({ isSuccess, onClose }) => {
-  const hideWallets = useThemeStore((state) => state.hideWallets);
-  const setStep = useModalStore((state) => state.setStep);
-  const onRampPurchase = useModalStore((state) => state.onRampPurchase);
-  const accountAddFundTab = useModalStore((state) => state.accountAddFundTab);
-  const formatter = useMemo(() => {
-    return new Intl.NumberFormat("en-US", {
-      style: "currency",
-      currency: (onRampPurchase == null ? void 0 : onRampPurchase.fiat) || "USD"
-    });
-  }, [onRampPurchase == null ? void 0 : onRampPurchase.fiat]);
-  const heading = isSuccess ? "Transaction Successful" : "Something Went Wrong";
-  const text = isSuccess ? `${formatter.format(parseFloat(onRampPurchase == null ? void 0 : onRampPurchase.fiatQuantity))} is now available in your ${hideWallets ? "account" : "wallet"}.` : `No funds were added to your ${hideWallets ? "account" : "wallet"}.`;
-  const buttonText = isSuccess ? "Done" : "Try Again";
-  return /* @__PURE__ */ jsxs(StepContainer, { children: [
-    /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
-    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
-      /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: heading }),
-      /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", children: text })
-    ] }),
-    /* @__PURE__ */ jsx(
-      CpslButton,
-      {
-        fullWidth: true,
-        onClick: () => {
-          isSuccess ? onClose() : setStep(getAddFundsStep(accountAddFundTab));
-        },
-        children: buttonText
-      }
-    )
-  ] });
-};
-export {
-  AddFundsDone
-};

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

@@ -1,4 +0,0 @@
-"use client";
-export * from "./AddFunds.js";
-export * from "./AddFundsAwaiting.js";
-export * from "./AddFundsDone.js";