@getpara/react-sdk 1.7.0 → 1.8.0

package/dist/modal/components/OAuth/TelegramOAuthStep.js

@@ -0,0 +1,139 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AuthMethod, OAuthMethod } from "@getpara/web-sdk";
+import { useModalStore, useThemeStore, useUserInfoStore } from "../../stores/index.js";
+import styled from "styled-components";
+import { useEffect, useRef, useState } from "react";
+import { HeroSpinner } from "@getpara/react-common";
+import { ModalStep } from "../../utils/steps.js";
+import { CpslSpinner } from "@getpara/react-components";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useSetLoginURLs } from "../../hooks/useSetLoginURLs.js";
+function TelegramOAuthStep() {
+  const iframe = useRef();
+  const para = useInternalClient();
+  const setFlow = useModalStore((state) => state.setFlow);
+  const setStep = useModalStore((state) => state.setStep);
+  const setAuthInfo = useUserInfoStore((state) => state.setAuthInfo);
+  const setBiometricLocationHints = useModalStore((state) => state.setBiometricLocationHints);
+  const setIFrameUrl = useModalStore((state) => state.setIFrameUrl);
+  const setIsIFrameReady = useModalStore((state) => state.setIsIFrameReady);
+  const setAuthStepRoute = useModalStore((state) => state.setAuthStepRoute);
+  const setWebAuthURLForCreate = useModalStore((state) => state.setWebAuthURLForCreate);
+  const theme = useThemeStore((state) => state.theme);
+  const setLoginURLs = useSetLoginURLs();
+  const [url, setUrl] = useState(void 0);
+  const [isWaiting, setIsWaiting] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+  const [isError, setIsError] = useState(false);
+  useEffect(() => {
+    if (!url) {
+      para.getOAuthURL({ method: OAuthMethod.TELEGRAM }).then((url2) => {
+        setUrl(url2);
+      });
+    }
+  }, [url]);
+  useEffect(() => {
+    const updateState = (event) => __async(this, null, function* () {
+      switch (event.data.type) {
+        case "TELEGRAM_LOGIN":
+          setIsWaiting(true);
+          setIsError(false);
+          break;
+        case "TELEGRAM_FAILED":
+          setIsWaiting(false);
+          setIsError(true);
+          break;
+        case "TELEGRAM_SUCCESS":
+          if (!!event.data.payload) {
+            const authObject = event.data.payload;
+            const result = yield para.verifyTelegram(authObject);
+            if (!result.isValid) {
+              setIsWaiting(false);
+              setIsError(true);
+              iframe.current && iframe.current.contentWindow.postMessage({ type: "TELEGRAM_FAILED" }, "*");
+              return;
+            }
+            const { telegramUserId, isNewUser, supportedAuthMethods, biometricHints } = result;
+            const pfpUrl = authObject.photo_url;
+            const displayName = authObject.username ? `@${authObject.username}` : authObject.first_name ? `${authObject.first_name}${authObject.last_name ? ` ${authObject.last_name}` : ""}` : `Telegram User @${telegramUserId}`;
+            setAuthInfo({
+              telegramUserId,
+              pfpUrl,
+              displayName
+            });
+            if (isNewUser) {
+              const supportedCreateAuthMethods = yield para.getSupportedCreateAuthMethods();
+              setIsIFrameReady(false);
+              setFlow("signUp");
+              const supportsPasskey = supportedCreateAuthMethods.has(AuthMethod.PASSKEY);
+              if (supportsPasskey) {
+                setWebAuthURLForCreate(
+                  yield para.shortenLoginLink(yield para.getSetUpBiometricsURL({ authType: "telegram" }))
+                );
+                setStep(ModalStep.BIOMETRIC_CREATION);
+              }
+              if (supportedCreateAuthMethods.has(AuthMethod.PASSWORD)) {
+                setIFrameUrl(yield para.shortenLoginLink(yield para.getSetupPasswordURL({ authType: "telegram", theme })));
+                setAuthStepRoute(supportsPasskey ? ModalStep.BIOMETRIC_CREATION : ModalStep.PASSWORD_CREATION);
+              }
+            } else {
+              setFlow("login");
+              const supportedAuthMethodsSet = new Set(supportedAuthMethods);
+              biometricHints && setBiometricLocationHints(biometricHints);
+              yield setLoginURLs({
+                supportedAuthMethods: supportedAuthMethodsSet,
+                authType: "telegram",
+                displayName,
+                pfpUrl
+              });
+              setStep(ModalStep.BIOMETRIC_LOGIN);
+            }
+          }
+          break;
+      }
+    });
+    window == null ? void 0 : window.addEventListener("message", updateState, false);
+    return () => {
+      window == null ? void 0 : window.removeEventListener("message", updateState, false);
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(HeroContainer, { children: /* @__PURE__ */ jsx(
+      HeroSpinner,
+      {
+        icon: "telegramBrand",
+        status: isWaiting ? "loading" : isError ? "error" : "inactive",
+        text: isWaiting ? "Follow the on-screen prompts." : isError ? "Login Failed" : void 0
+      }
+    ) }),
+    url && /* @__PURE__ */ jsx(IFrame, { ref: iframe, style: { display: isLoaded ? "block" : "none" }, src: url, onLoad: () => setIsLoaded(true) }),
+    (!url || !isLoaded) && /* @__PURE__ */ jsx(CpslSpinner, {})
+  ] });
+}
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+`;
+const HeroContainer = styled.div`
+  display: flex;
+  min-height: 276px;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+`;
+const IFrame = styled.iframe`
+  width: 100%;
+  height: 52px;
+  border: none;
+`;
+export {
+  TelegramOAuthStep
+};

package/dist/modal/components/OnRampComponents/AddingFunds.js

@@ -0,0 +1,23 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { OnRampPurchaseStatus } from "@getpara/web-sdk";
+import { SpinnerContainer } from "../common.js";
+import { ON_RAMP_PROVIDERS } from "../../constants/constants.js";
+import { useModalStore } from "../../stores/index.js";
+import { CpslSpinner, CpslText } from "@getpara/react-components";
+const AddingFunds = () => {
+  const onRampPurchase = useModalStore((state) => state.onRampPurchase);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) }),
+    /* @__PURE__ */ jsxs(CpslText, { children: [
+      "Follow the prompts presented by",
+      " ",
+      OnRampPurchaseStatus ? ON_RAMP_PROVIDERS[onRampPurchase.provider].name : "the provider",
+      "."
+    ] })
+  ] });
+};
+export {
+  AddingFunds
+};

package/dist/modal/components/OnRampComponents/OnRampProviderButton.js

@@ -0,0 +1,77 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ON_RAMP_PROVIDERS } from "../../constants/constants.js";
+import styled from "styled-components";
+import { CpslButton, CpslIcon, CpslSpinner, CpslText } from "@getpara/react-components";
+import { motion } from "framer-motion";
+const OnRampProviderButton = ({ config, index, onClick: _onClick }) => {
+  const [isLoading, setIsLoading] = useState(false);
+  const provider = config.providers[index];
+  const { feeLower, feeUpper, name, icon, backgroundColors } = ON_RAMP_PROVIDERS[provider];
+  const feeString = `Fee ${feeLower}% - ${feeUpper}%`;
+  const onClick = () => __async(void 0, null, function* () {
+    setIsLoading(true);
+    yield _onClick();
+    setIsLoading(false);
+  });
+  return /* @__PURE__ */ jsx(StyledButton, { $gradientColors: backgroundColors, fullWidth: true, onClick, children: /* @__PURE__ */ jsxs(Container, { $backgroundColor: backgroundColors[1], children: [
+    /* @__PURE__ */ jsx(IconContainer, { children: /* @__PURE__ */ jsx(CpslIcon, { icon }) }),
+    /* @__PURE__ */ jsxs(ProviderInfoContainer, { children: [
+      /* @__PURE__ */ jsx(Text, { variant: "bodyL", weight: "medium", children: name }),
+      /* @__PURE__ */ jsx(ProviderInfoInnerContainer, { children: /* @__PURE__ */ jsx(Text, { variant: "bodyXS", weight: "medium", children: feeString }) })
+    ] }),
+    isLoading ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsx(Chevron, { icon: "chevronUp" })
+  ] }) });
+};
+const StyledButton = styled(CpslButton)`
+  width: 100%;
+  --button-primary-background-color: ${({ $gradientColors }) => `linear-gradient(90deg, ${$gradientColors[0]} 0%, ${$gradientColors[1]} 100%)`};
+  --button-primary-hover-background-color: ${({ $gradientColors }) => `linear-gradient(90deg, ${$gradientColors[0]} 0%, ${$gradientColors[0]} 100%)`};
+  --button-primary-active-background-color: ${({ $gradientColors }) => `linear-gradient(90deg, ${$gradientColors[0]} 0%, ${$gradientColors[0]} 100%)`};
+`;
+const Container = styled(motion.div)`
+  display: flex;
+  gap: 8px;
+  flex: 1;
+  align-items: center;
+
+  & cpsl-spinner {
+    --background-color: ${({ $backgroundColor }) => `${$backgroundColor}`};
+  }
+`;
+const ProviderInfoContainer = styled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 2px;
+`;
+const ProviderInfoInnerContainer = styled.div`
+  display: flex;
+  gap: 16px;
+`;
+const IconContainer = styled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border-radius: 100%;
+  height: 48px;
+  width: 48px;
+`;
+const Text = styled(CpslText)`
+  &::part(text-element) {
+    color: #fff;
+  }
+`;
+const Chevron = styled(CpslIcon)`
+  transform: rotate(90deg);
+  --icon-color: #fff;
+`;
+export {
+  OnRampProviderButton
+};

package/dist/modal/components/RecoverySecretStep/RecoverySecretStep.js

@@ -0,0 +1,101 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslText } from "@getpara/react-components";
+import { useModalStore, useThemeStore, useUserInfoStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { Heading, InnerStepContainer, StepContainer, StyledCpslTileButton } from "../common.js";
+import { styled } from "styled-components";
+import { useCopyToClipboard } from "@getpara/react-common";
+import { getMailtoLink } from "../../utils/getMailtoLink.js";
+import { useState } from "react";
+const SaveRecoverySecret = ({
+  email,
+  value,
+  onComplete
+}) => {
+  const [isSecretSaved, setIsSecretSaved] = useState(false);
+  const [isCopied, copy] = useCopyToClipboard();
+  const onCopy = () => {
+    copy(value);
+    setIsSecretSaved(true);
+  };
+  const onDownload = () => {
+    const element = document.createElement("a");
+    const file = new Blob([value], { type: "text/plain" });
+    element.href = URL.createObjectURL(file);
+    element.download = "recovery.txt";
+    document.body.appendChild(element);
+    element.click();
+    setIsSecretSaved(true);
+  };
+  const onEmail = () => {
+    typeof window !== "undefined" && window.open(getMailtoLink(email, value), "_self");
+    setIsSecretSaved(true);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(Heading, { variant: "headingXS", weight: "semiBold", children: "Save your Recovery Secret" }),
+      /* @__PURE__ */ jsxs(ButtonContainer, { children: [
+        /* @__PURE__ */ jsx(ActionButton, { icon: "download", onClick: onDownload, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Download" }) }),
+        /* @__PURE__ */ jsx(ActionButton, { icon: isCopied ? "check" : "copy", onClick: onCopy, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: isCopied ? "Copied!" : "Copy" }) }),
+        /* @__PURE__ */ jsx(ActionButton, { icon: "send", onClick: onEmail, children: /* @__PURE__ */ jsx(CpslText, { variant: "bodyXS", color: "secondary", weight: "medium", children: "Email" }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: onComplete, disabled: !isSecretSaved, children: !isSecretSaved ? "Choose an option above to continue" : "I\u2019ve saved my recovery secret" }) })
+  ] });
+};
+const RecoverySecretStep = () => {
+  const hideWallets = useThemeStore((state) => state.hideWallets);
+  const setStep = useModalStore((state) => state.setStep);
+  const authInfo = useUserInfoStore((state) => state.getAuthInfo());
+  const recoveryShare = useUserInfoStore((state) => state.recoveryShare);
+  const backupDecryptionKey = JSON.parse(recoveryShare || "{}").backupDecryptionKey;
+  const onComplete = () => __async(void 0, null, function* () {
+    setStep(ModalStep.WALLET_CREATION_DONE);
+  });
+  return /* @__PURE__ */ jsxs(StepContainer, { children: [
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: hideWallets ? "Don't lose access" : "Don't lose your wallet" }),
+      /* @__PURE__ */ jsxs(InlineText, { variant: "bodyS", color: "secondary", weight: "medium", children: [
+        "Your",
+        " ",
+        /* @__PURE__ */ jsx(InlineText, { variant: "bodyS", weight: "medium", children: "Recovery Secret" }),
+        " ",
+        "ensures you will be able to regain access to your ",
+        hideWallets ? "account" : "wallet",
+        " if you lose your Passkey or Password."
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(
+      SaveRecoverySecret,
+      {
+        email: (authInfo == null ? void 0 : authInfo.authType) === "email" ? authInfo.identifier : void 0,
+        value: backupDecryptionKey,
+        onComplete
+      }
+    )
+  ] });
+};
+const ActionButton = styled(StyledCpslTileButton)`
+  flex: 1;
+
+  --button-icon-color: var(--cpsl-color-text-primary);
+`;
+const ButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+`;
+const InlineText = styled(CpslText)`
+  text-align: center;
+  display: inline-block;
+`;
+export {
+  RecoverySecretStep,
+  SaveRecoverySecret
+};

package/dist/modal/components/Setup2FAStep/Setup2FAStep.js

@@ -0,0 +1,141 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  CpslButton,
+  CpslCodeInput,
+  CpslDivider,
+  CpslIcon,
+  CpslQrCode,
+  CpslSpinner,
+  CpslText
+} from "@getpara/react-components";
+import { useEffect, useRef, useState } from "react";
+import { useModalStore } from "../../stores/index.js";
+import { Heading, QRContainer, FilledDisabledInput, StepContainer, InnerStepContainer } from "../common.js";
+import { ModalStep } from "../../utils/steps.js";
+import { styled } from "styled-components";
+import { useCopyToClipboard } from "@getpara/react-common";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+const Setup2FAStep = ({ onClose }) => {
+  const isLogin = useModalStore((state) => state.isLogin());
+  const setStep = useModalStore((state) => state.setStep);
+  const para = useInternalClient();
+  const isVerifying = useModalStore((state) => state.step === ModalStep.VERIFY_2FA);
+  const [copied, copy] = useCopyToClipboard();
+  const inputRef = useRef(null);
+  const [qrCodeValue, setQrCodeValue] = useState(null);
+  const [code, setCode] = useState("");
+  const [codeError, setCodeError] = useState("");
+  const [isVerifyingCode, setIsVerifyingCode] = useState(false);
+  const params = qrCodeValue ? new URL(qrCodeValue).searchParams : void 0;
+  const secret = params == null ? void 0 : params.get("secret");
+  useEffect(() => {
+    function fetchOtpAuthUrl() {
+      return __async(this, null, function* () {
+        try {
+          const { uri } = yield para.setup2FA();
+          setQrCodeValue(uri);
+        } catch (error) {
+          console.error("Error fetching OTPAuth URL:", error);
+        }
+      });
+    }
+    fetchOtpAuthUrl();
+  }, []);
+  useEffect(() => {
+    setTimeout(() => {
+      var _a, _b, _c;
+      (_c = (_b = (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.shadowRoot.querySelectorAll("input")) == null ? void 0 : _b[0]) == null ? void 0 : _c.focus();
+    }, 10);
+  }, [isVerifying]);
+  useEffect(() => {
+    if (code.length === 6) {
+      handleSubmitCode();
+    }
+  }, [code]);
+  const handleNext = () => {
+    setStep(ModalStep.VERIFY_2FA);
+  };
+  const handleSkip = () => {
+    if (isLogin) {
+      setStep(ModalStep.LOGIN_DONE);
+    } else {
+      onClose();
+    }
+  };
+  const handleCodeInput = (e) => {
+    if (codeError) {
+      setCodeError("");
+    }
+    setCode(e.detail.value.trim());
+  };
+  const handleSubmitCode = () => __async(void 0, null, function* () {
+    setIsVerifyingCode(true);
+    if (code.length === 6 && /^\d+$/.test(code)) {
+      try {
+        yield para.enable2FA({ verificationCode: code });
+        setStep(ModalStep.TWO_FACTOR_DONE);
+      } catch (e) {
+        setCodeError("Incorrect Code");
+      }
+    } else {
+      setCodeError("Incorrect Code");
+    }
+    setIsVerifyingCode(false);
+  });
+  const handleCopy = () => {
+    copy(secret);
+  };
+  return /* @__PURE__ */ jsxs(StepContainer, { children: [
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Turn on Two-Factor authentication" }),
+      isVerifying && /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Please enter the code from your authenticator app." })
+    ] }),
+    /* @__PURE__ */ jsx(InnerStepContainer, { children: isVerifying ? /* @__PURE__ */ jsx(Fragment, { children: isVerifyingCode ? /* @__PURE__ */ jsx(CpslSpinner, {}) : /* @__PURE__ */ jsx(
+      "form",
+      {
+        onSubmit: (e) => __async(void 0, null, function* () {
+          e.preventDefault();
+          yield handleSubmitCode();
+        }),
+        children: /* @__PURE__ */ jsx(
+          StyledCodeInput,
+          {
+            ref: inputRef,
+            code,
+            onCpslInput: handleCodeInput,
+            errorText: codeError,
+            length: 6,
+            onKeyDown: (e) => __async(void 0, null, function* () {
+              return e.key === "Enter" && (yield handleSubmitCode());
+            })
+          }
+        )
+      }
+    ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan with your preferred authenticator app." }),
+      /* @__PURE__ */ jsx(QRContainer, { children: !qrCodeValue ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: qrCodeValue }) })
+    ] }) }),
+    !isVerifying && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(CpslDivider, { children: "or enter the code manually" }) }),
+      /* @__PURE__ */ jsx(InnerStepContainer, { children: /* @__PURE__ */ jsx(FilledDisabledInput, { disabled: true, value: secret, noAutoDisable: true, children: /* @__PURE__ */ jsx(CpslButton, { slot: "end", variant: "ghost", onClick: handleCopy, children: /* @__PURE__ */ jsx(CpslIcon, { icon: copied ? "check" : "copy" }) }) }) }),
+      /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+        /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: handleNext, children: "Continue" }),
+        /* @__PURE__ */ jsx(SkipButton, { variant: "ghost", onClick: handleSkip, children: "Skip" })
+      ] })
+    ] })
+  ] });
+};
+const StyledCodeInput = styled(CpslCodeInput)`
+  align-self: center;
+`;
+const SkipButton = styled(CpslButton)`
+  margin-top: 8px;
+  text-decoration: underline;
+`;
+export {
+  Setup2FAStep
+};

package/dist/modal/components/StripeComponents/StripeComponents.js

@@ -0,0 +1,88 @@
+"use client";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import React from "react";
+const STRIPE_PUBLISHABLE_KEY = "pk_live_51MvquNGrzDeP5yP9EgVSMBPQbrbg0oHDjPIIXypePd0jzOFjbadyfO7wBKLHhUtbKIUiEUVC3YYcTJyAmJ8xA7JE00T2UDfYKz";
+const STRIPE_PUBLISHABLE_KEY_TEST = "pk_test_51MvquNGrzDeP5yP98WgPaAUgQ50I3OpfPhVfiLO47FBHepJnZRPO62IzZY2uxT5ovhSS10RwcTcnaVil1mcJOzIi00dHapODdS";
+const CryptoElementsContext = React.createContext(null);
+CryptoElementsContext.displayName = "CryptoElementsContext";
+const CryptoElements = ({ stripeOnramp, children }) => {
+  const [ctx, setContext] = React.useState(() => ({
+    onramp: null
+  }));
+  React.useEffect(() => {
+    let isMounted = true;
+    Promise.resolve(stripeOnramp).then((onramp) => {
+      if (onramp && isMounted) {
+        setContext((ctx2) => ctx2.onramp ? ctx2 : { onramp });
+      }
+    });
+    return () => {
+      isMounted = false;
+    };
+  }, [stripeOnramp]);
+  return /* @__PURE__ */ jsx(CryptoElementsContext.Provider, { value: ctx, children });
+};
+const useStripeOnramp = () => {
+  const context = React.useContext(CryptoElementsContext);
+  return context == null ? void 0 : context.onramp;
+};
+const useOnrampSessionListener = (type, session, callback) => {
+  React.useEffect(() => {
+    if (session && callback) {
+      const listener = (e) => callback(e.payload);
+      session.addEventListener(type, listener);
+      return () => {
+        session.removeEventListener(type, listener);
+      };
+    }
+    return () => {
+    };
+  }, [session, callback, type]);
+};
+const OnrampElement = (_a) => {
+  var _b = _a, {
+    clientSecret,
+    appearance,
+    onReady = () => {
+    },
+    onSessionChange
+  } = _b, props = __objRest(_b, [
+    "clientSecret",
+    "appearance",
+    "onReady",
+    "onSessionChange"
+  ]);
+  const stripeOnramp = useStripeOnramp();
+  const onrampElementRef = React.useRef(null);
+  const [session, setSession] = React.useState();
+  const appearanceJSON = JSON.stringify(appearance);
+  React.useEffect(() => {
+    const containerRef = onrampElementRef.current;
+    if (containerRef) {
+      containerRef.innerHTML = "";
+      if (clientSecret && stripeOnramp) {
+        setSession(
+          stripeOnramp.createSession({
+            clientSecret,
+            appearance: { theme: appearance }
+          }).mount(containerRef)
+        );
+      }
+    }
+  }, [appearanceJSON, clientSecret, stripeOnramp]);
+  useOnrampSessionListener("onramp_ui_loaded", session, onReady);
+  useOnrampSessionListener("onramp_session_updated", session, onSessionChange);
+  return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({}, props), { ref: onrampElementRef }));
+};
+export {
+  CryptoElements,
+  OnrampElement,
+  STRIPE_PUBLISHABLE_KEY,
+  STRIPE_PUBLISHABLE_KEY_TEST,
+  useStripeOnramp
+};

package/dist/modal/components/TwoFactorDoneStep/TwoFactorDoneStep.js

@@ -0,0 +1,24 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslText } from "@getpara/react-components";
+import { Heading, StepContainer, InnerStepContainer, HeroIcon } from "../common.js";
+import { useThemeStore } from "../../stores/index.js";
+const TwoFactorDoneStep = ({ onClose }) => {
+  const hideWallets = useThemeStore((state) => state.hideWallets);
+  return /* @__PURE__ */ jsxs(StepContainer, { children: [
+    /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(Heading, { variant: "headingXS", weight: "semiBold", children: "Success" }),
+      /* @__PURE__ */ jsxs(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: [
+        "Your ",
+        hideWallets ? "account" : "wallet",
+        " is now protected by 2FA"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(CpslButton, { fullWidth: true, onClick: onClose, children: "Done" })
+  ] });
+};
+export {
+  TwoFactorDoneStep
+};