@getpara/react-sdk-lite 2.0.0-alpha.33

package/dist/modal/components/ModalContent/ModalContent.js

@@ -0,0 +1,88 @@
+"use client";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle } from "react";
+import { EnabledFlow } from "@getpara/web-sdk";
+import { useModalStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { Body } from "../Body/Body.js";
+import { Footer } from "../Footer/Footer.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+const ModalContent = forwardRef(
+  ({
+    twoFactorAuthEnabled = false,
+    oAuthMethods,
+    disableEmailLogin,
+    disablePhoneLogin,
+    isGuestModeEnabled = false,
+    onClose,
+    onRampTestMode
+  }, ref) => {
+    const para = useInternalClient();
+    const refs = useModalStore((state) => state.refs);
+    const onRampConfig = useModalStore((state) => state.onRampConfig);
+    const setOnRampConfig = useModalStore((state) => state.setOnRampConfig);
+    const accountAddFundTab = useModalStore((state) => state.accountAddFundTab);
+    const setAccountAddFundTab = useModalStore((state) => state.setAccountAddFundTab);
+    const { disconnectExternalWallet } = useExternalWallets();
+    useImperativeHandle(ref, () => {
+      return {
+        handleModalClose() {
+          handleClose();
+        }
+      };
+    }, []);
+    const handleClose = () => {
+      onClose == null ? void 0 : onClose();
+      if (refs.currentStep.current === ModalStep.EXTERNAL_WALLET_VERIFICATION && para.isExternalWalletAuth) {
+        disconnectExternalWallet();
+      }
+    };
+    useEffect(() => {
+      if (!onRampConfig) {
+        para.ctx.client.getOnRampConfig().then((res) => {
+          let newOnRampConfig;
+          newOnRampConfig = __spreadProps(__spreadValues({}, res), { testMode: onRampTestMode });
+          setOnRampConfig(newOnRampConfig);
+          if (!accountAddFundTab) {
+            setAccountAddFundTab(
+              newOnRampConfig.isBuyEnabled ? EnabledFlow.BUY : newOnRampConfig.isReceiveEnabled ? EnabledFlow.RECEIVE : newOnRampConfig.isWithdrawEnabled ? EnabledFlow.WITHDRAW : void 0
+            );
+          }
+        }).catch();
+      }
+    }, []);
+    useEffect(() => {
+      if (!!onRampConfig) {
+        setOnRampConfig(__spreadProps(__spreadValues({}, onRampConfig), { testMode: onRampTestMode }));
+      }
+    }, [onRampTestMode]);
+    useEffect(() => {
+      return () => {
+        var _a;
+        window.clearTimeout((_a = refs.poll.current) == null ? void 0 : _a.timeout);
+      };
+    }, []);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Body,
+        {
+          oAuthMethods,
+          twoFactorAuthEnabled,
+          disableEmailLogin: !!disableEmailLogin,
+          disablePhoneLogin: !!disablePhoneLogin,
+          isGuestModeEnabled,
+          onClose: handleClose
+        }
+      ),
+      /* @__PURE__ */ jsx(Footer, {})
+    ] });
+  }
+);
+export {
+  ModalContent
+};

package/dist/modal/components/OAuth/FarcasterOAuthStep.d.ts

@@ -0,0 +1,3 @@
+export declare function FarcasterConnectQR(): import("react/jsx-runtime").JSX.Element;
+declare const FarcasterOAuthStep: () => import("react/jsx-runtime").JSX.Element;
+export default FarcasterOAuthStep;

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

@@ -0,0 +1,31 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
+import { CenteredText, Heading, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
+import { useModalStore } from "../../stores/index.js";
+import { isMobile } from "@getpara/web-sdk";
+function FarcasterConnectQR() {
+  const farcasterConnectUri = useModalStore((state) => state.farcasterConnectUri);
+  return /* @__PURE__ */ jsx(Fragment, { children: isMobile() ? /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+    /* @__PURE__ */ jsx(CpslText, { weight: "medium", color: "secondary", children: `Don\u2019t have Farcaster` }),
+    /* @__PURE__ */ jsxs(CpslButton, { as: "a", href: "https://link.warpcast.com/download-qr", target: "_blank", variant: "secondary", children: [
+      /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "linkExternal" }),
+      `Get Farcaster`
+    ] })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Sign in using Farcaster" }),
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(CenteredText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan the QR code with your phone's camera to proceed." }),
+      /* @__PURE__ */ jsx(QRContainer, { children: !farcasterConnectUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: farcasterConnectUri }) })
+    ] })
+  ] }) });
+}
+const FarcasterOAuthStep = () => {
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: /* @__PURE__ */ jsx(FarcasterConnectQR, {}) });
+};
+var FarcasterOAuthStep_default = FarcasterOAuthStep;
+export {
+  FarcasterConnectQR,
+  FarcasterOAuthStep_default as default
+};

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

@@ -0,0 +1,6 @@
+import { TOAuthMethod } from '@getpara/web-sdk';
+interface OAuthProps {
+    methods: TOAuthMethod[];
+}
+export declare const OAuth: ({ methods }: OAuthProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,81 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { safeStyled } from "@getpara/react-common";
+import { useModalStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { getTileButtonFlex } from "../../utils/getTileButtonFlex.js";
+import { StyledCpslTileButton } from "../common.js";
+import { ACCOUNT_TYPES } from "../../constants/oAuthLogos.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+const HAS_MORE_LENGTH = 3;
+const OAuth = ({ methods }) => {
+  const oAuthLogoVariant = useStore((state) => state.oAuthLogoVariant);
+  const isDark = useStore((state) => state.isDarkTheme);
+  const setStep = useModalStore((state) => state.setStep);
+  const showAll = useModalStore((state) => state.step === ModalStep.AUTH_MORE || state.step === ModalStep.AUTH_GUEST_SIGNUP);
+  const { verifyFarcaster, verifyOAuth, isOAuthReady } = useAuthActions();
+  const hasMore = methods.length > HAS_MORE_LENGTH;
+  const methodsToShow = showAll || !hasMore ? methods : methods.slice(0, HAS_MORE_LENGTH - 1);
+  const handleShowAll = () => {
+    setStep(ModalStep.AUTH_MORE);
+  };
+  const handleMethodClick = (method) => () => __async(void 0, null, function* () {
+    switch (method) {
+      case "FARCASTER":
+        verifyFarcaster();
+        break;
+      case "TELEGRAM":
+        setStep(ModalStep.TELEGRAM_OAUTH);
+        break;
+      default:
+        verifyOAuth(method);
+        break;
+    }
+  });
+  const useBrandedLogos = oAuthLogoVariant === "default";
+  const useDarkLogos = useBrandedLogos ? isDark : oAuthLogoVariant !== "dark";
+  const showMoreButton = !showAll && hasMore;
+  return /* @__PURE__ */ jsxs(OAuthContainer, { children: [
+    methodsToShow.map((method, index) => /* @__PURE__ */ jsx(
+      OAuthButton,
+      {
+        $isDark: useDarkLogos,
+        icon: ACCOUNT_TYPES[method][useBrandedLogos ? "logoBranded" : "logo"],
+        onClick: handleMethodClick(method),
+        $index: index,
+        $totalItems: showMoreButton ? HAS_MORE_LENGTH : methodsToShow.length,
+        disabled: !isOAuthReady
+      },
+      method
+    )),
+    showMoreButton && /* @__PURE__ */ jsx(
+      OAuthButton,
+      {
+        $isDark: useDarkLogos,
+        icon: "moreLoginOptions",
+        onClick: handleShowAll,
+        $index: HAS_MORE_LENGTH - 1,
+        $totalItems: HAS_MORE_LENGTH,
+        disabled: !isOAuthReady
+      }
+    )
+  ] });
+};
+const OAuthContainer = safeStyled.div`
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+const OAuthButton = safeStyled(StyledCpslTileButton)`
+  flex: ${({ $index, $totalItems }) => getTileButtonFlex($index, $totalItems)};
+
+  --button-icon-color: ${({ $isDark }) => $isDark ? "white" : "black"};
+`;
+export {
+  OAuth
+};

package/dist/modal/components/OAuth/TelegramOAuthStep.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare function TelegramOAuthStep(): import("react/jsx-runtime").JSX.Element;
+export declare function TelegramIFrame({ url, isLoaded, setIsLoaded, isVisible, }: {
+    url?: string;
+    isLoaded: boolean;
+    setIsLoaded: React.Dispatch<React.SetStateAction<boolean>>;
+    isVisible?: boolean;
+}): import("react/jsx-runtime").JSX.Element | null;

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

@@ -0,0 +1,74 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { safeStyled } from "@getpara/react-common";
+import { HeroSpinner } from "@getpara/react-common";
+import { CpslSpinner } from "@getpara/react-components";
+import { useTelegramLogin } from "../../hooks/useTelegramLogin.js";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { AccountTypeIcon } from "../common.js";
+import { useModalStore } from "../../stores/index.js";
+function TelegramOAuthStep() {
+  const { verifyTelegramStatus, verifyTelegram } = useAuthActions();
+  const { url, status, isLoaded, setIsLoaded } = useTelegramLogin({
+    isActive: true,
+    status: verifyTelegramStatus,
+    onSubmit: verifyTelegram
+  });
+  const isError = status === "error", isPending = status === "pending";
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(HeroContainer, { children: /* @__PURE__ */ jsx(
+      HeroSpinner,
+      {
+        icon: /* @__PURE__ */ jsx(AccountTypeIcon, { accountType: "TELEGRAM", size: "48px" }),
+        status: isPending ? "pending" : isError ? "error" : "idle",
+        text: isPending ? "Follow the on-screen prompts." : isError ? "Login Failed" : void 0
+      }
+    ) }),
+    /* @__PURE__ */ jsx(TelegramIFrame, { url, isLoaded, setIsLoaded, isVisible: isLoaded })
+  ] });
+}
+function TelegramIFrame({
+  url,
+  isLoaded,
+  setIsLoaded,
+  isVisible = false
+}) {
+  const refs = useModalStore((state) => state.refs);
+  if (!url) return null;
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    url && /* @__PURE__ */ jsx(
+      IFrame,
+      {
+        ref: refs.telegramIFrame,
+        style: { display: isLoaded && isVisible ? "block" : "none" },
+        src: url,
+        onLoad: () => setIsLoaded(true)
+      }
+    ),
+    (!url || !isLoaded) && /* @__PURE__ */ jsx(CpslSpinner, {})
+  ] });
+}
+const Container = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+`;
+const HeroContainer = safeStyled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+  flex: 1;
+`;
+const IFrame = safeStyled.iframe`
+  width: 100%;
+  height: 52px;
+  border: none;
+`;
+export {
+  TelegramIFrame,
+  TelegramOAuthStep
+};

package/dist/modal/components/OnRampComponents/AddingFunds.d.ts

@@ -0,0 +1 @@
+export declare const AddingFunds: () => import("react/jsx-runtime").JSX.Element;

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 && (onRampPurchase == null ? void 0 : onRampPurchase.provider) ? ON_RAMP_PROVIDERS[onRampPurchase.provider].name : "the provider",
+      "."
+    ] })
+  ] });
+};
+export {
+  AddingFunds
+};

package/dist/modal/components/OnRampComponents/OnRampProviderButton.d.ts

@@ -0,0 +1,9 @@
+import { OnRampConfig } from '@getpara/web-sdk';
+interface OnRampButtonProps {
+    config: OnRampConfig;
+    index: number;
+    isLoading?: boolean;
+    onClick: () => Promise<void>;
+}
+export declare const OnRampProviderButton: ({ config, index, onClick: _onClick }: OnRampButtonProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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 { safeStyled } from "@getpara/react-common";
+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 = safeStyled(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 = safeStyled(motion.div)`
+  display: flex;
+  gap: 8px;
+  flex: 1;
+  align-items: center;
+
+  & cpsl-spinner {
+    --background-color: ${({ $backgroundColor }) => `${$backgroundColor}`};
+  }
+`;
+const ProviderInfoContainer = safeStyled.div`
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 2px;
+`;
+const ProviderInfoInnerContainer = safeStyled.div`
+  display: flex;
+  gap: 16px;
+`;
+const IconContainer = safeStyled.span`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #fff;
+  border-radius: 100%;
+  height: 48px;
+  width: 48px;
+`;
+const Text = safeStyled(CpslText)`
+  &::part(text-element) {
+    color: #fff;
+  }
+`;
+const Chevron = safeStyled(CpslIcon)`
+  transform: rotate(90deg);
+  --icon-color: #fff;
+`;
+export {
+  OnRampProviderButton
+};

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

@@ -0,0 +1,6 @@
+export declare const SaveRecoverySecret: ({ email, value, onComplete, }: {
+    email?: string;
+    value: string;
+    onComplete: () => void;
+}) => import("react/jsx-runtime").JSX.Element;
+export declare const RecoverySecretStep: () => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,107 @@
+"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 } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { Heading, InnerStepContainer, StepContainer, StyledCpslTileButton } from "../common.js";
+import { safeStyled } from "@getpara/react-common";
+import { useCopyToClipboard } from "@getpara/react-common";
+import { getMailtoLink } from "../../utils/getMailtoLink.js";
+import { useState } from "react";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+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 para = useInternalClient();
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
+  const setStep = useModalStore((state) => state.setStep);
+  const authInfo = para.authInfo;
+  const recoveryShare = useModalStore((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 = safeStyled(StyledCpslTileButton)`
+  flex: 1;
+
+  --button-icon-color: var(--cpsl-color-text-primary);
+`;
+const ButtonContainer = safeStyled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  width: 100%;
+`;
+const InlineText = safeStyled(CpslText)`
+  text-align: center;
+  display: inline-block;
+`;
+export {
+  RecoverySecretStep,
+  SaveRecoverySecret
+};

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

@@ -0,0 +1,5 @@
+interface Setup2FAStepProps {
+    onClose: () => void;
+}
+export declare const Setup2FAStep: ({ onClose }: Setup2FAStepProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,132 @@
+"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 { safeStyled } from "@getpara/react-common";
+import { useCopyToClipboard } from "@getpara/react-common";
+import { useEnable2fa } from "../../../provider/index.js";
+const Setup2FAStep = ({ onClose }) => {
+  const isLogin = useModalStore((state) => state.isLogin());
+  const setStep = useModalStore((state) => state.setStep);
+  const twoFactorStatus = useModalStore((state) => state.twoFactorStatus);
+  const { enable2fa, isPending } = useEnable2fa();
+  const isVerifying = useModalStore((state) => state.step === ModalStep.VERIFY_2FA);
+  const [copied, copy] = useCopyToClipboard();
+  const inputRef = useRef(null);
+  const [code, setCode] = useState("");
+  const [codeError, setCodeError] = useState("");
+  const params = (twoFactorStatus == null ? void 0 : twoFactorStatus.uri) ? new URL(twoFactorStatus.uri).searchParams : void 0;
+  const secret = params == null ? void 0 : params.get("secret");
+  useEffect(() => {
+    setTimeout(() => {
+      var _a, _b, _c, _d;
+      (_d = (_c = (_b = (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelectorAll("input")) == null ? void 0 : _c[0]) == null ? void 0 : _d.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* () {
+    if (code.length === 6 && /^\d+$/.test(code)) {
+      enable2fa(
+        { verificationCode: code },
+        {
+          onSuccess: () => {
+            setStep(ModalStep.TWO_FACTOR_DONE);
+          },
+          onError: () => {
+            setCodeError("Incorrect Code");
+          }
+        }
+      );
+    } else {
+      setCodeError("Incorrect Code");
+    }
+  });
+  const handleCopy = () => {
+    if (secret) {
+      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: isPending ? /* @__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: !(twoFactorStatus == null ? void 0 : twoFactorStatus.uri) ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: twoFactorStatus.uri }) })
+    ] }) }),
+    !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 != null ? 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 = safeStyled(CpslCodeInput)`
+  align-self: center;
+`;
+const SkipButton = safeStyled(CpslButton)`
+  margin-top: 8px;
+  text-decoration: underline;
+`;
+export {
+  Setup2FAStep
+};