@getpara/react-sdk 1.7.1 → 1.8.0

package/dist/modal/components/VerificationCodeStep/VerificationCodeStep.js

@@ -0,0 +1,159 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslCodeInput, CpslSpinner, CpslText } from "@getpara/react-components";
+import { useEffect, useRef, useState } from "react";
+import { styled } from "styled-components";
+import { ModalStep } from "../../utils/steps.js";
+import { useModalStore, useThemeStore, useUserInfoStore } from "../../stores/index.js";
+import { Heading, InnerStepContainer, StepContainer } from "../common.js";
+import { AuthMethod } from "@getpara/core-sdk";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+const VerificationCodeStep = () => {
+  const theme = useThemeStore((state) => state.theme);
+  const authInfo = useUserInfoStore((state) => state.getAuthInfo());
+  const setStep = useModalStore((state) => state.setStep);
+  const setWebAuthURLForCreate = useModalStore((state) => state.setWebAuthURLForCreate);
+  const setIFrameUrl = useModalStore((state) => state.setIFrameUrl);
+  const setIsIFrameReady = useModalStore((state) => state.setIsIFrameReady);
+  const setAuthStepRoute = useModalStore((state) => state.setAuthStepRoute);
+  const para = useInternalClient();
+  const inputRef = useRef(null);
+  const [code, setCode] = useState("");
+  const [codeError, setCodeError] = useState("");
+  const [resendStatus, setResendStatus] = useState("Resend.");
+  const [resendDisabled, setResendDisabled] = useState(false);
+  const [isVerifying, setIsVerifying] = useState(false);
+  const isEmail = (authInfo == null ? void 0 : authInfo.authType) === "email";
+  useEffect(() => {
+    setTimeout(() => {
+      var _a, _b;
+      (_b = (_a = inputRef.current.shadowRoot.querySelectorAll("input")) == null ? void 0 : _a[0]) == null ? void 0 : _b.focus();
+    }, 10);
+  }, []);
+  useEffect(() => {
+    if (code.length === 6) {
+      handleSubmitCode();
+    }
+  }, [code]);
+  const handleResendClick = () => __async(void 0, null, function* () {
+    if (!resendDisabled) {
+      setResendStatus("Resent!");
+      setResendDisabled(true);
+      isEmail ? yield para.resendVerificationCode() : yield para.resendVerificationCodeByPhone();
+      setTimeout(() => {
+        setResendStatus("Resend.");
+        setResendDisabled(false);
+      }, 3e3);
+    }
+  });
+  const handleCodeInput = (e) => {
+    if (codeError) {
+      setCodeError("");
+    }
+    setCode(e.detail.value.trim());
+  };
+  const handleSubmitCode = () => __async(void 0, null, function* () {
+    setIsVerifying(true);
+    if (code.length === 6 && /^\d+$/.test(code)) {
+      try {
+        const supportedCreateAuthMethods = yield para.getSupportedCreateAuthMethods();
+        if (supportedCreateAuthMethods.has(AuthMethod.PASSWORD) && supportedCreateAuthMethods.has(AuthMethod.PASSKEY)) {
+          setIsIFrameReady(false);
+          const webAuthUrl = isEmail ? yield para.verifyEmail({ verificationCode: code }) : yield para.verifyPhone({ verificationCode: code });
+          const passwordAuthUrl = yield para.getSetupPasswordURL({ authType: authInfo == null ? void 0 : authInfo.authType, theme });
+          setWebAuthURLForCreate(yield para.shortenLoginLink(webAuthUrl));
+          setIFrameUrl(yield para.shortenLoginLink(passwordAuthUrl));
+          setAuthStepRoute(ModalStep.BIOMETRIC_CREATION);
+          return;
+        } else if (supportedCreateAuthMethods.has(AuthMethod.PASSWORD)) {
+          setIsIFrameReady(false);
+          isEmail ? yield para.verifyEmail({ verificationCode: code }) : yield para.verifyPhone({ verificationCode: code });
+          const url = yield para.getSetupPasswordURL({ authType: authInfo == null ? void 0 : authInfo.authType, theme });
+          setIFrameUrl(yield para.shortenLoginLink(url));
+          setAuthStepRoute(ModalStep.PASSWORD_CREATION);
+          return;
+        } else {
+          const url = isEmail ? yield para.verifyEmail({ verificationCode: code }) : yield para.verifyPhone({ verificationCode: code });
+          setWebAuthURLForCreate(yield para.shortenLoginLink(url));
+          setStep(ModalStep.BIOMETRIC_CREATION);
+        }
+      } catch (e) {
+        if (e.message.includes("429")) {
+          setCodeError("Too many incorrect attempts. Please try again in 10 minutes.");
+        } else {
+          setCodeError("Incorrect code.");
+        }
+      }
+    } else {
+      setCodeError("Incorrect code.");
+    }
+    setIsVerifying(false);
+  });
+  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsxs(Heading, { variant: "headingS", weight: "bold", children: [
+        "Verify ",
+        isEmail ? "Email" : "Phone Number"
+      ] }),
+      /* @__PURE__ */ jsxs(InlineText, { variant: "bodyS", color: "secondary", children: [
+        "Please enter the code we sent to ",
+        /* @__PURE__ */ jsx(InlineText, { variant: "bodyS", children: authInfo == null ? void 0 : authInfo.identifier })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(InnerStepContainer, { children: isVerifying ? /* @__PURE__ */ jsx(CpslSpinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "form",
+        {
+          onSubmit: (e) => __async(void 0, null, function* () {
+            e.preventDefault();
+            yield handleSubmitCode();
+          }),
+          children: /* @__PURE__ */ jsx(
+            StyledCodeInput,
+            {
+              ref: inputRef,
+              length: 6,
+              type: "number",
+              code,
+              onCpslInput: handleCodeInput,
+              errorText: codeError,
+              onKeyDown: (e) => __async(void 0, null, function* () {
+                return e.key === "Enter" && (yield handleSubmitCode());
+              })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsxs(InlineText, { variant: "bodyS", color: "secondary", children: [
+        "Didn\u2019t receive a code?",
+        " ",
+        /* @__PURE__ */ jsx(
+          ClickableText,
+          {
+            variant: "bodyS",
+            style: { cursor: resendDisabled ? "default" : "pointer" },
+            onClick: handleResendClick,
+            children: resendStatus
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+};
+const StyledCodeInput = styled(CpslCodeInput)`
+  align-self: center;
+`;
+const InlineText = styled(CpslText)`
+  text-align: center;
+  display: inline-block;
+`;
+const ClickableText = styled(InlineText)`
+  cursor: pointer;
+  display: inline-block;
+`;
+export {
+  VerificationCodeStep
+};

package/dist/modal/components/Waiting/Waiting.js

@@ -0,0 +1,17 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslSpinner, CpslText } from "@getpara/react-components";
+import { Heading, SpinnerContainer, StepContainer, InnerStepContainer } from "../common.js";
+const Waiting = ({ heading, subheading }) => {
+  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
+    /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) }),
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: heading }),
+      /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: subheading })
+    ] })
+  ] });
+};
+export {
+  Waiting
+};

package/dist/modal/components/WalletCard/PartnerIcon.js

@@ -0,0 +1,34 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import styled from "styled-components";
+import { CpslIcon, CpslText } from "@getpara/react-components";
+const PartnerIcon = ({ partner }) => {
+  const { logoUrl, displayName, backgroundColor, foregroundColor } = partner;
+  if (logoUrl) {
+    return /* @__PURE__ */ jsx(Icon, { src: logoUrl });
+  }
+  return /* @__PURE__ */ jsx(Container, { $backgroundColor: backgroundColor, children: /* @__PURE__ */ jsx(Text, { variant: "bodyXS", $color: foregroundColor, children: displayName[0] }) });
+};
+const Container = styled.div`
+  width: 14px;
+  height: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: ${({ $backgroundColor }) => `${$backgroundColor != null ? $backgroundColor : "var(--cpsl-color-contrast)"}`};
+  border-radius: 100%;
+`;
+const Text = styled(CpslText)`
+  &::part(text-element) {
+    line-height: 100%;
+    color: ${({ $color }) => `${$color != null ? $color : "var(--cpsl-color-foreground-0)"}`};
+  }
+`;
+const Icon = styled(CpslIcon)`
+  --height: 14px;
+  --width: 14px;
+`;
+export {
+  PartnerIcon
+};

package/dist/modal/components/WalletCard/WalletCard.js

@@ -0,0 +1,127 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { useModalStore, useThemeStore } from "../../stores/index.js";
+import { CpslButton, CpslIdenticon, CpslText } from "@getpara/react-components";
+import { truncateAddress } from "@getpara/web-sdk";
+import { ModalStep } from "../../utils/steps.js";
+import { useWalletState } from "../../../provider/index.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+const ExternalWalletCard = ({ address, showAddFunds }) => {
+  var _a;
+  const para = useInternalClient();
+  const wallet = para.externalWallets[address];
+  if (!wallet) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    SharedWalletCard,
+    {
+      address: (_a = wallet.ensName) != null ? _a : truncateAddress(wallet.address, wallet.type),
+      identiconHash: para.getIdenticonHash(wallet.id, wallet.type),
+      showAddFunds
+    }
+  );
+};
+const WalletCard = ({ id, type, showAddFunds }) => {
+  var _a, _b;
+  const para = useInternalClient();
+  const appName = useThemeStore((state) => state.appName);
+  const wallet = para.findWallet(id, type);
+  if (!wallet) {
+    return null;
+  }
+  const address = para.getDisplayAddress(wallet.id, { addressType: type });
+  return /* @__PURE__ */ jsx(
+    SharedWalletCard,
+    {
+      id: wallet.id,
+      type: wallet.type,
+      address: (_a = wallet.ensName) != null ? _a : truncateAddress(address, type, { prefix: para.cosmosPrefix }),
+      name: (_b = wallet.name) != null ? _b : `${appName ? `${appName} ` : ""}Wallet`,
+      identiconHash: para.getIdenticonHash(wallet.id, type),
+      showAddFunds
+    }
+  );
+};
+const SharedWalletCard = ({ address, name, identiconHash, showAddFunds, id, type }) => {
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const { setSelectedWallet } = useWalletState();
+  const setStep = useModalStore((state) => state.setStep);
+  const isAddFundsEnabled = onRampConfig.isBuyEnabled || onRampConfig.isReceiveEnabled;
+  const handleAddFundsClick = () => {
+    if (id && type) {
+      setSelectedWallet({ id, type });
+      isAddFundsEnabled && setStep(onRampConfig.isBuyEnabled ? ModalStep.ADD_FUNDS_BUY : ModalStep.ADD_FUNDS_RECEIVE);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsxs(InnerContainer, { children: [
+      /* @__PURE__ */ jsx(CpslIdenticon, { size: "48px", hash: identiconHash }),
+      /* @__PURE__ */ jsxs(WalletNameContainer, { children: [
+        !!name && /* @__PURE__ */ jsx(Name, { color: "contrast", variant: "bodyL", weight: "semiBold", children: name }),
+        /* @__PURE__ */ jsx(Name, { color: "secondary", variant: "bodyS", weight: "medium", children: address })
+      ] })
+    ] }),
+    showAddFunds && isAddFundsEnabled && /* @__PURE__ */ jsx(AddFundsButton, { onClick: handleAddFundsClick, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "contrast", weight: "medium", children: "Add Funds" }) })
+  ] });
+};
+const WalletCards = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+`;
+const Container = styled.div`
+  width: 100%;
+  padding: 24px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  background-color: var(--cpsl-color-background-8);
+  border-radius: 16px;
+`;
+const InnerContainer = styled.div`
+  display: flex;
+  justify-content: flex-start;
+  gap: 8px;
+  align-items: center;
+  overflow: hidden;
+`;
+const WalletNameContainer = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  align-items: flex-start;
+  justify-content: center;
+  overflow: hidden;
+`;
+const Name = styled(CpslText)`
+  width: 100%;
+  &::part(text-element) {
+    line-height: 100%;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+  }
+`;
+const AddFundsButton = styled(CpslButton)`
+  --button-primary-background-color: var(--cpsl-color-card-surface);
+  --button-primary-hover-background-color: var(--cpsl-color-background-4);
+  --button-primary-color: var(--cpsl-color-text-contrast);
+  --button-primary-hover-color: var(--cpsl-color-text-contrast);
+  --button-primary-active-color: var(--cpsl-color-text-contrast);
+  --button-padding-start: 8px;
+  --button-padding-end: 8px;
+  --button-padding-top: 8px;
+  --button-padding-bottom: 8px;
+  --button-border-radius: 8px;
+`;
+export {
+  ExternalWalletCard,
+  WalletCard,
+  WalletCards
+};

package/dist/modal/components/WalletCreationDoneStep/WalletCreationDoneStep.js

@@ -0,0 +1,52 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslText } from "@getpara/react-components";
+import { StepContainer, InnerStepContainer, HeroIcon } from "../common.js";
+import { useModalStore, useThemeStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { WalletCard, WalletCards } from "../WalletCard/WalletCard.js";
+import styled from "styled-components";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+const WalletCreationDoneStep = ({ twoFactorAuthEnabled, onClose }) => {
+  const hideWallets = useThemeStore((state) => state.hideWallets);
+  const setStep = useModalStore((state) => state.setStep);
+  const isLogin = useModalStore((state) => state.isLogin());
+  const onRampConfig = useModalStore((state) => state.onRampConfig);
+  const para = useInternalClient();
+  const isOnRampConfigured = (onRampConfig == null ? void 0 : onRampConfig.isBuyEnabled) || (onRampConfig == null ? void 0 : onRampConfig.isReceiveEnabled) || (onRampConfig == null ? void 0 : onRampConfig.isWithdrawEnabled);
+  const handleNext = () => __async(void 0, null, function* () {
+    if (isLogin) {
+      if (!twoFactorAuthEnabled) {
+        setStep(ModalStep.LOGIN_DONE);
+        return;
+      }
+      const is2FAComplete = yield para.check2FAStatus();
+      setStep(is2FAComplete ? ModalStep.LOGIN_DONE : ModalStep.SETUP_2FA);
+    } else {
+      if (twoFactorAuthEnabled) {
+        setStep(ModalStep.SETUP_2FA);
+      } else {
+        onClose();
+      }
+    }
+  });
+  return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
+    /* @__PURE__ */ jsx(CardContainer, { children: hideWallets ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
+      /* @__PURE__ */ jsx(CpslText, { variant: "bodyM", color: "secondary", weight: "medium", style: { marginTop: "16px" }, children: "Your account has been created." })
+    ] }) : /* @__PURE__ */ jsx(WalletCards, { children: para.currentWalletIdsArray.map(([id, type]) => {
+      return /* @__PURE__ */ jsx(WalletCard, { id, type, showAddFunds: isOnRampConfigured }, id);
+    }) }) }),
+    /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handleNext, children: twoFactorAuthEnabled ? "Continue" : "Done" }) })
+  ] });
+};
+const CardContainer = styled(InnerStepContainer)`
+  min-height: 196px;
+  justify-content: center;
+`;
+export {
+  WalletCreationDoneStep
+};

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

@@ -14,10 +14,10 @@ export declare const StepContainer: import("styled-components/dist/types").IStyl
 }>> & string;
 export declare const Heading: typeof CpslText;
 export declare const StyledCpslTileButton: typeof CpslTileButton;
-export declare const HeroIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("@getpara/core-components").JSX.CpslIcon & Omit<import("react").HTMLAttributes<HTMLCpslIconElement>, "style"> & import("@getpara/react-components/dist/types/components/stencil-generated/react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLCpslIconElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLCpslIconElement>;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@getpara/core-components").JSX.CpslIcon & Omit<import("react").HTMLAttributes<HTMLCpslIconElement>, "style"> & import("@getpara/react-components/dist/types/components/stencil-generated/react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLCpslIconElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const HeroIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: import("react").Ref<any>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;
 export declare const ErrorContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("@getpara/core-components").JSX.CpslIcon & Omit<import("react").HTMLAttributes<HTMLCpslIconElement>, "style"> & import("@getpara/react-components/dist/types/components/stencil-generated/react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLCpslIconElement>, "ref"> & {
-    ref?: import("react").Ref<HTMLCpslIconElement>;
-}, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@getpara/core-components").JSX.CpslIcon & Omit<import("react").HTMLAttributes<HTMLCpslIconElement>, "style"> & import("@getpara/react-components/dist/types/components/stencil-generated/react-component-lib/interfaces").StyleReactProps & import("react").RefAttributes<HTMLCpslIconElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const ErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<any, "ref"> & import("react").RefAttributes<any>, "ref"> & {
+    ref?: import("react").Ref<any>;
+}, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<any>>, keyof import("react").Component<any, {}, any>>;

package/dist/modal/components/common.js

@@ -0,0 +1,96 @@
+"use client";
+import "../../chunk-MMUBH76A.js";
+import { CpslIcon, CpslInput, CpslText, CpslTileButton } from "@getpara/react-components";
+import { styled } from "styled-components";
+const SpinnerContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const QRContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 286px;
+  height: 286px;
+`;
+const InfoBoxContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+`;
+const InfoBoxHeader = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+
+  cpsl-icon {
+    --height: 20px;
+    --width: 20px;
+  }
+`;
+const FilledDisabledInput = styled(CpslInput)`
+  --container-border-color: var(--cpsl-color-input-border-placeholder);
+  --container-background-color: var(--cpsl-color-background-0);
+  --input-background-color: transparent;
+  --input-font-weight: 500;
+  --input-color: var(--cpsl-color-text-secondary);
+`;
+const FullWidthFilledDisabledInput = styled(FilledDisabledInput)`
+  width: 100%;
+`;
+const CenteredText = styled(CpslText)`
+  width: 100%;
+  text-align: center;
+`;
+const InnerStepContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+`;
+const StepContainer = styled(InnerStepContainer)`
+  gap: ${({ $wide }) => $wide ? "32px" : "24px"};
+`;
+const Heading = styled(CenteredText)``;
+const StyledCpslTileButton = styled(CpslTileButton)`
+  --button-width: 100%;
+  --button-height: 87px;
+  --button-icon-height: 32px;
+  --button-icon-width: 32px;
+`;
+const HeroIcon = styled(CpslIcon)`
+  --height: 80px;
+  --width: 80px;
+  --icon-color: var(--cpsl-color-text-primary);
+`;
+const ErrorContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+`;
+const ErrorIcon = styled(CpslIcon)`
+  --height: 16px;
+  --width: 16px;
+  --icon-color: var(--cpsl-color-text-error);
+`;
+export {
+  CenteredText,
+  ErrorContainer,
+  ErrorIcon,
+  FilledDisabledInput,
+  FullWidthFilledDisabledInput,
+  Heading,
+  HeroIcon,
+  InfoBoxContent,
+  InfoBoxHeader,
+  InnerStepContainer,
+  QRContainer,
+  SpinnerContainer,
+  StepContainer,
+  StyledCpslTileButton
+};

package/dist/modal/components/index.js

@@ -0,0 +1,2 @@
+"use client";
+export * from "./ModalContent/ModalContent.js";

package/dist/modal/constants/constants.d.ts

@@ -24,7 +24,7 @@ export declare const ON_RAMP_ASSETS: Record<OnRampAsset, {
 export declare function getNetworkName(str: Network | string): string;
 export declare function getNetworkIcon(str: Network | string): IconType;
 export declare function getAssetName(str: OnRampAsset | string): string;
-export declare function getAssetIcon(str: OnRampAsset | string): "code" | "menu" | "image" | "polygon" | "key" | "search" | "download" | "x" | "send" | "alertCircle" | "alertTriangle" | "alignVerticalCenter" | "angelListBrand" | "angelList" | "appleBrand" | "apple" | "arbitrumBrand" | "arrowCircleBrokenDownLeft" | "arrowCircleDownFilled" | "arrowNarrow" | "arrow" | "asterisk" | "backupKit" | "bank" | "baseBrand" | "brush" | "celoBrand" | "checkCircleFilled" | "checkCircle" | "checkSquare" | "check" | "chevronDown" | "chevronRight" | "chevronSelectorVertical" | "chevronUp" | "clock" | "close" | "clubhouseBrand" | "clubhouse" | "copy07" | "copy" | "cosmos" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "discord" | "dot" | "dots" | "downloadCloud" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "farcaster" | "figmaBrand" | "figma" | "file" | "folder" | "githubBrand" | "github" | "globe" | "googleBrand" | "google" | "gridDots" | "helpCircle" | "heroAlertCircle" | "heroCheckmarkCapsule" | "heroCheckmark" | "heroEmail" | "heroExternalConnection" | "heroLock" | "heroPasskey" | "heroPhone" | "heroPlusCircleCapsule" | "heroPlusCircle" | "heroWallet" | "home" | "hp" | "infoCircle" | "instagramBrand" | "instagram" | "laptop" | "lenovo" | "lg" | "lightning01" | "lightning" | "linkExternal" | "linkedinBrand" | "linkedin" | "lockKeyholeCircle" | "logOut" | "mail" | "monitor" | "moonpayBrand" | "moreLoginOptions" | "motorola" | "nobleBrand" | "optimismBrand" | "paraBlackBg" | "paraBrand" | "paraIconBrand" | "paraIconQr" | "paraIcon" | "paraLogo" | "paraRingsDark" | "paraRings" | "para" | "passcode" | "phone" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "puzzlePiece" | "qrCode02" | "qrCode" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "samsung" | "settings" | "share" | "shield" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solana" | "spacingHeight" | "star04Filled" | "stars01Filled" | "stars" | "stopSquare" | "stripeBrand" | "telegramBrand" | "telegram" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "userCircle" | "user" | "wallet" | "youtubeBrand" | "youtube" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BQ2" | "BQ3" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CD2" | "CF" | "CH" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DS" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB2" | "GB" | "GD" | "GE" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SE" | "SG" | "SI" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WS" | "YE" | "ZA" | "ZM" | "ZW";
+export declare function getAssetIcon(str: OnRampAsset | string): "code" | "menu" | "image" | "polygon" | "key" | "search" | "download" | "x" | "alertCircle" | "alertTriangle" | "alignVerticalCenter" | "angelListBrand" | "angelList" | "appleBrand" | "apple" | "arbitrumBrand" | "arrowCircleBrokenDownLeft" | "arrowCircleDownFilled" | "arrowNarrow" | "arrow" | "asterisk" | "backupKit" | "bank" | "baseBrand" | "brush" | "celoBrand" | "checkCircleFilled" | "checkCircle" | "checkSquare" | "check" | "chevronDown" | "chevronRight" | "chevronSelectorVertical" | "chevronUp" | "clock" | "close" | "clubhouseBrand" | "clubhouse" | "copy07" | "copy" | "cosmos" | "creditCard02" | "creditCard" | "cube03" | "cubeOutline" | "cube" | "currencyDollar" | "decentBrand" | "decent" | "dell" | "discordBrand" | "discord" | "dot" | "dots" | "downloadCloud" | "dribbbleBrand" | "dribbble" | "earth" | "edit02" | "emptyCircle" | "ethereum" | "eyeOff" | "eye" | "facebookBrand" | "facebook" | "farcasterBrand" | "farcaster" | "figmaBrand" | "figma" | "file" | "folder" | "githubBrand" | "github" | "globe" | "googleBrand" | "google" | "gridDots" | "helpCircle" | "heroAlertCircle" | "heroCheckmarkCapsule" | "heroCheckmark" | "heroEmail" | "heroExternalConnection" | "heroLock" | "heroPasskey" | "heroPhone" | "heroPlusCircleCapsule" | "heroPlusCircle" | "heroWallet" | "home" | "hp" | "infoCircle" | "instagramBrand" | "instagram" | "laptop" | "lenovo" | "lg" | "lightning01" | "lightning" | "linkExternal" | "linkedinBrand" | "linkedin" | "lockKeyholeCircle" | "logOut" | "mail" | "monitor" | "moonpayBrand" | "moreLoginOptions" | "motorola" | "nobleBrand" | "optimismBrand" | "paraBlackBg" | "paraBrand" | "paraIconBrand" | "paraIconQr" | "paraIcon" | "paraLogo" | "paraRingsDark" | "paraRings" | "para" | "passcode" | "phone" | "pintrestBrand" | "pintrest" | "plusCircle" | "plus" | "polygonBrand" | "puzzlePiece" | "qrCode02" | "qrCode" | "rampNetworkBrand" | "rampNetwork" | "redditBrand" | "reddit" | "refresh" | "samsung" | "send" | "settings" | "share" | "shield" | "signalBrand" | "signal" | "sliders" | "snapchatBrand" | "snapchat" | "solana" | "spacingHeight" | "star04Filled" | "stars01Filled" | "stars" | "stopSquare" | "stripeBrand" | "telegramBrand" | "telegram" | "tetherBrand" | "tikTokBrand" | "tikTok" | "trash" | "tumblrBrand" | "tumblr" | "twitterBrand" | "twitter" | "usdcBrand" | "userCircle" | "user" | "wallet" | "youtubeBrand" | "youtube" | "AD" | "AE" | "AF" | "AG" | "AI" | "AL" | "AM" | "AO" | "AR" | "AS" | "AT" | "AU" | "AW" | "AX" | "AZ" | "BA" | "BB" | "BD" | "BE" | "BF" | "BG" | "BH" | "BI" | "BJ" | "BL" | "BM" | "BN" | "BO" | "BQ" | "BQ2" | "BQ3" | "BR" | "BS" | "BT" | "BW" | "BY" | "BZ" | "CA" | "CC" | "CD" | "CD2" | "CF" | "CH" | "CK" | "CL" | "CM" | "CN" | "CO" | "CR" | "CU" | "CW" | "CX" | "CY" | "CZ" | "DE" | "DJ" | "DK" | "DM" | "DO" | "DS" | "DZ" | "EC" | "EE" | "EG" | "EH" | "ER" | "ES" | "ET" | "FI" | "FJ" | "FK" | "FM" | "FO" | "FR" | "GA" | "GB2" | "GB" | "GD" | "GE" | "GG" | "GH" | "GI" | "GL" | "GM" | "GN" | "GQ" | "GR" | "GT" | "GU" | "GW" | "GY" | "HK" | "HN" | "HR" | "HT" | "HU" | "ID" | "IE" | "IL" | "IM" | "IN" | "IO" | "IQ" | "IR" | "IS" | "IT" | "JE" | "JM" | "JO" | "JP" | "KE" | "KG" | "KH" | "KI" | "KM" | "KN" | "KP" | "KR" | "KW" | "KY" | "KZ" | "LA" | "LB" | "LC" | "LI" | "LK" | "LR" | "LS" | "LT" | "LU" | "LV" | "LY" | "MA" | "MC" | "MD" | "ME" | "MG" | "MH" | "MK" | "ML" | "MM" | "MN" | "MO" | "MP" | "MQ" | "MR" | "MS" | "MT" | "MU" | "MV" | "MW" | "MX" | "MY" | "MZ" | "NA" | "NE" | "NF" | "NG" | "NI" | "NL" | "NO" | "NP" | "NR" | "NU" | "NZ" | "OM" | "PA" | "PE" | "PF" | "PG" | "PH" | "PK" | "PL" | "PN" | "PR" | "PS" | "PT" | "PW" | "PY" | "QA" | "RO" | "RS" | "RU" | "RW" | "SA" | "SB" | "SC" | "SE" | "SG" | "SI" | "SK" | "SL" | "SM" | "SN" | "SO" | "SR" | "SS" | "ST" | "SV" | "SX" | "SY" | "SZ" | "TC" | "TD" | "TG" | "TH" | "TJ" | "TK" | "TL" | "TM" | "TN" | "TO" | "TR" | "TT" | "TV" | "TW" | "TZ" | "UA" | "UG" | "US" | "UY" | "UZ" | "VC" | "VE" | "VG" | "VI" | "VN" | "VU" | "WS" | "YE" | "ZA" | "ZM" | "ZW";
 export declare const MOBILE_SIZE = 480;
 export declare const NETWORK_NOT_SUPPORTED_ERROR = "network not supported";
 export declare const EMAIL_REGEX: RegExp;

package/dist/modal/constants/constants.js

@@ -0,0 +1,111 @@
+"use client";
+import "../../chunk-MMUBH76A.js";
+import { Network, OnRampAsset, OnRampMethod, OnRampProvider } from "@getpara/core-sdk";
+const PARA_CONNECT = "https://connect.getpara.com/";
+const PARA_TERMS_AND_CONDITIONS = "https://getpara.com/terms";
+const ON_RAMP_PROVIDERS = {
+  [OnRampProvider.STRIPE]: {
+    name: "Stripe",
+    feeLower: 0.99,
+    feeUpper: 4.49,
+    methods: [OnRampMethod.ACH, OnRampMethod.DEBIT, OnRampMethod.CREDIT],
+    icon: "stripeBrand",
+    backgroundColors: ["#6772E5", "#808AF4"]
+  },
+  [OnRampProvider.RAMP]: {
+    name: "Ramp",
+    feeLower: 0.99,
+    feeUpper: 4.49,
+    methods: [OnRampMethod.ACH, OnRampMethod.DEBIT, OnRampMethod.CREDIT],
+    icon: "rampNetworkBrand",
+    backgroundColors: ["#21BF73", "#3AE492"]
+  },
+  [OnRampProvider.MOONPAY]: {
+    name: "MoonPay",
+    feeLower: 1,
+    feeUpper: 4.5,
+    methods: [OnRampMethod.ACH, OnRampMethod.DEBIT, OnRampMethod.CREDIT],
+    icon: "moonpayBrand",
+    backgroundColors: ["#7715F5", "#9647fd"]
+  }
+};
+const NETWORKS = {
+  [Network.ETHEREUM]: { name: "Ethereum", icon: "ethereum" },
+  [Network.SEPOLIA]: { name: "Sepolia", icon: "ethereum" },
+  [Network.ARBITRUM]: { name: "Arbitrum", icon: "arbitrumBrand" },
+  [Network.BASE]: { name: "Base", icon: "baseBrand" },
+  [Network.OPTIMISM]: { name: "Optimism", icon: "optimismBrand" },
+  [Network.POLYGON]: { name: "Polygon", icon: "polygonBrand" },
+  [Network.SOLANA]: { name: "Solana", icon: "solana" },
+  [Network.COSMOS]: { name: "Cosmos", icon: "cosmos" },
+  [Network.CELO]: { name: "Celo", icon: "celoBrand" },
+  [Network.NOBLE]: { name: "Noble", icon: "nobleBrand" }
+};
+const ON_RAMP_ASSETS = {
+  [OnRampAsset.ETHEREUM]: { name: "Ethereum", code: "ETH", icon: "ethereum" },
+  [OnRampAsset.USDC]: { name: "USDC", code: "USDC", icon: "usdcBrand" },
+  [OnRampAsset.POLYGON]: { name: "Polygon", code: "MATIC", icon: "polygonBrand" },
+  [OnRampAsset.SOLANA]: { name: "Solana", code: "SOL", icon: "solana" },
+  [OnRampAsset.ATOM]: { name: "Atom", code: "ATOM", icon: "cosmos" },
+  [OnRampAsset.CELO]: { name: "Celo", code: "CELO", icon: "celoBrand" },
+  [OnRampAsset.TETHER]: { name: "Tether", code: "USDT", icon: "tetherBrand" },
+  [OnRampAsset.CUSD]: { name: "Celo Dollar", code: "CUSD", icon: "celoBrand" },
+  [OnRampAsset.CEUR]: { name: "Celo Euro", code: "CEUR", icon: "celoBrand" },
+  [OnRampAsset.CREAL]: { name: "Celo Real", code: "CREAL", icon: "celoBrand" }
+};
+function getNetworkName(str) {
+  var _a, _b;
+  return (_b = (_a = NETWORKS[str]) == null ? void 0 : _a.name) != null ? _b : `${str[0]}${str.slice(1).toLowerCase()}`;
+}
+function getNetworkIcon(str) {
+  var _a, _b;
+  return (_b = (_a = NETWORKS[str]) == null ? void 0 : _a.icon) != null ? _b : "globe";
+}
+function getAssetName(str) {
+  var _a, _b;
+  return (_b = (_a = ON_RAMP_ASSETS[str]) == null ? void 0 : _a.code) != null ? _b : str;
+}
+function getAssetIcon(str) {
+  var _a, _b;
+  return (_b = (_a = ON_RAMP_ASSETS[str]) == null ? void 0 : _a.icon) != null ? _b : "emptyCircle";
+}
+const MOBILE_SIZE = 480;
+const NETWORK_NOT_SUPPORTED_ERROR = "network not supported";
+const EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|.(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+const BODY_MOTION_VARIANTS = {
+  enter: (direction) => {
+    return {
+      scale: direction > 0 ? 0.9 : 1.1,
+      opacity: 0
+    };
+  },
+  center: {
+    scale: 1,
+    opacity: 1
+  },
+  exit: (direction) => {
+    return {
+      scale: direction < 0 ? 0.9 : 1.1,
+      opacity: 0
+    };
+  }
+};
+const BODY_TRANSITION = {
+  duration: 0.2
+};
+export {
+  BODY_MOTION_VARIANTS,
+  BODY_TRANSITION,
+  EMAIL_REGEX,
+  MOBILE_SIZE,
+  NETWORKS,
+  NETWORK_NOT_SUPPORTED_ERROR,
+  ON_RAMP_ASSETS,
+  ON_RAMP_PROVIDERS,
+  PARA_CONNECT,
+  PARA_TERMS_AND_CONDITIONS,
+  getAssetIcon,
+  getAssetName,
+  getNetworkIcon,
+  getNetworkName
+};