@getpara/react-sdk 1.12.0 → 2.0.0-alpha.5

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

@@ -1,66 +1,12 @@
 "use client";
-import {
-  __async
-} from "../../../chunk-MMUBH76A.js";
+import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect } from "react";
 import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
 import { CenteredText, Heading, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
-import { useModalStore, useThemeStore, useUserInfoStore } from "../../stores/index.js";
-import { ModalStep } from "../../utils/steps.js";
-import { AuthMethod, isMobile } from "@getpara/web-sdk";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useSetLoginURLs } from "../../hooks/useSetLoginURLs.js";
+import { useModalStore } from "../../stores/index.js";
+import { isMobile } from "@getpara/web-sdk";
 const FarcasterOAuthStep = () => {
-  const setAuthInfo = useUserInfoStore((state) => state.setAuthInfo);
-  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 setBiometricLocationHints = useModalStore((state) => state.setBiometricLocationHints);
-  const para = useInternalClient();
-  const setFlow = useModalStore((state) => state.setFlow);
   const farcasterConnectUri = useModalStore((state) => state.farcasterConnectUri);
-  const setFarcasterConnectUri = useModalStore((state) => state.setFarcasterConnectUri);
-  const theme = useThemeStore((state) => state.theme);
-  const setLoginURLs = useSetLoginURLs();
-  useEffect(() => {
-    if (farcasterConnectUri) {
-      const pollStatus = () => __async(void 0, null, function* () {
-        const { userExists, username, pfpUrl } = yield para.waitForFarcasterStatus();
-        setAuthInfo({ farcasterUsername: username, pfpUrl });
-        if (userExists) {
-          const supportedAuthMethods = yield para.initiateUserLoginV2({ farcasterUsername: username });
-          if (supportedAuthMethods.size > 0) {
-            const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY) ? yield para.getUserBiometricLocationHints() : [];
-            yield setLoginURLs({ supportedAuthMethods, authType: "farcaster", displayName: username, pfpUrl });
-            setFlow("login");
-            setStep(ModalStep.BIOMETRIC_LOGIN);
-            setBiometricLocationHints(biometricLocationHints);
-            return;
-          }
-        }
-        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: "farcaster" })));
-          setStep(ModalStep.BIOMETRIC_CREATION);
-        }
-        if (supportedCreateAuthMethods.has(AuthMethod.PASSWORD)) {
-          setIFrameUrl(yield para.shortenLoginLink(yield para.getSetupPasswordURL({ authType: "farcaster", theme })));
-          setAuthStepRoute(supportsPasskey ? ModalStep.BIOMETRIC_CREATION : ModalStep.PASSWORD_CREATION);
-        }
-        return;
-      });
-      pollStatus();
-      return () => {
-        setFarcasterConnectUri(void 0);
-      };
-    }
-  }, [farcasterConnectUri]);
   return /* @__PURE__ */ jsx(StepContainer, { $wide: true, 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: [

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

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

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

@@ -3,50 +3,21 @@ import {
   __async
 } from "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AuthMethod, OAuthMethod } from "@getpara/web-sdk";
 import { styled } from "styled-components";
-import { useModalStore, useUserInfoStore } from "../../stores/index.js";
+import { useModalStore } from "../../stores/index.js";
 import { ModalStep } from "../../utils/steps.js";
-import { openPopup } from "../../utils/openPopup.js";
-import { useThemeStore } from "../../stores/theme/useThemeStore.js";
 import { getTileButtonFlex } from "../../utils/getTileButtonFlex.js";
 import { StyledCpslTileButton } from "../common.js";
 import { brandedOAuthLogos, oAuthLogos } from "../../constants/oAuthLogos.js";
-import { useEffect } from "react";
-import { routeMobileExternalWallet } from "../../utils/routeMobileExternalWallet.js";
-import { useGoBack } from "../../hooks/useGoBack.js";
-import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useSetLoginURLs } from "../../hooks/useSetLoginURLs.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
 const HAS_MORE_LENGTH = 3;
 const OAuth = ({ methods }) => {
-  const goBack = useGoBack();
-  const oAuthLogoVariant = useThemeStore((state) => state.oAuthLogoVariant);
-  const isDark = useThemeStore((state) => state.isDark);
-  const para = useInternalClient();
-  const refs = useModalStore((state) => state.refs);
-  const setFlow = useModalStore((state) => state.setFlow);
+  const oAuthLogoVariant = useStore((state) => state.oAuthLogoVariant);
+  const isDark = useStore((state) => state.isDarkTheme);
   const setStep = useModalStore((state) => state.setStep);
-  const setAuthInfo = useUserInfoStore((state) => state.setAuthInfo);
-  const setBiometricLocationHints = useModalStore((state) => state.setBiometricLocationHints);
-  const setFarcasterConnectUri = useModalStore((state) => state.setFarcasterConnectUri);
-  const farcasterConnectUri = useModalStore((state) => state.farcasterConnectUri);
-  const showAll = useModalStore((state) => state.step === ModalStep.AUTH_MORE);
-  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();
-  useEffect(() => {
-    const initializeFarcaster = () => __async(void 0, null, function* () {
-      if (!methods.includes(OAuthMethod.FARCASTER)) {
-        return;
-      }
-      const connectUri = yield para.getFarcasterConnectURL();
-      setFarcasterConnectUri(connectUri);
-    });
-    initializeFarcaster();
-  }, []);
+  const showAll = useModalStore((state) => state.step === ModalStep.AUTH_MORE || state.step === ModalStep.AUTH_GUEST_SIGNUP);
+  const { verifyFarcaster, verifyOAuth } = useAuthActions();
   const hasMore = methods.length > HAS_MORE_LENGTH;
   const methodsToShow = showAll || !hasMore ? methods : methods.slice(0, HAS_MORE_LENGTH - 1);
   const handleShowAll = () => {
@@ -54,59 +25,14 @@ const OAuth = ({ methods }) => {
   };
   const handleMethodClick = (method) => () => __async(void 0, null, function* () {
     switch (method) {
-      case OAuthMethod.FARCASTER:
-        if (!farcasterConnectUri) {
-          return;
-        }
-        routeMobileExternalWallet(farcasterConnectUri);
-        setStep(ModalStep.FARCASTER_OAUTH);
+      case "FARCASTER":
+        verifyFarcaster();
         break;
-      case OAuthMethod.TELEGRAM:
+      case "TELEGRAM":
         setStep(ModalStep.TELEGRAM_OAUTH);
         break;
       default:
-        setStep(ModalStep.AWAITING_OAUTH);
-        const oAuthURL = yield para.getOAuthURL({ method });
-        refs.popupWindow.current = openPopup({
-          url: oAuthURL,
-          target: `${method}AuthPopup`,
-          type: "OAUTH",
-          current: refs.popupWindow.current
-        });
-        const { email, isError, userExists } = yield para.waitForOAuth({ popupWindow: refs.popupWindow.current });
-        refs.popupWindow.current = void 0;
-        if ((isError || !email) && refs.currentStep.current === ModalStep.AWAITING_OAUTH) {
-          goBack();
-          return;
-        }
-        setAuthInfo({ email });
-        if (userExists) {
-          const supportedAuthMethods = yield para.initiateUserLoginV2({ email });
-          if (supportedAuthMethods.size > 0) {
-            const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY) ? yield para.getUserBiometricLocationHints() : [];
-            yield setLoginURLs({ supportedAuthMethods, authType: "email" });
-            setFlow("login");
-            setStep(ModalStep.BIOMETRIC_LOGIN);
-            setBiometricLocationHints(biometricLocationHints);
-            return;
-          }
-        }
-        const supportedCreateAuthMethods = yield para.getSupportedCreateAuthMethods();
-        setIsIFrameReady(false);
-        setFlow("signUp");
-        const supportsPasskey = supportedCreateAuthMethods.has(AuthMethod.PASSKEY);
-        const supportsPassword = supportedCreateAuthMethods.has(AuthMethod.PASSWORD);
-        if (supportsPasskey) {
-          setWebAuthURLForCreate(yield para.shortenLoginLink(yield para.getSetUpBiometricsURL({ authType: "email" })));
-          if (!supportsPassword) {
-            setStep(ModalStep.BIOMETRIC_CREATION);
-            return;
-          }
-        }
-        if (supportsPassword) {
-          setIFrameUrl(yield para.shortenLoginLink(yield para.getSetupPasswordURL({ authType: "email", theme })));
-        }
-        setAuthStepRoute(supportsPasskey ? ModalStep.BIOMETRIC_CREATION : ModalStep.PASSWORD_CREATION);
+        verifyOAuth(method);
         break;
     }
   });

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

@@ -3,37 +3,29 @@ 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 { constructUrl, getPortalBaseURL } from "@getpara/web-sdk";
 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";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.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 { verifyTelegram } = useAuthActions();
+  const [url, setUrl] = useState();
   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);
-      });
+      setUrl(
+        constructUrl({
+          base: getPortalBaseURL(para.ctx, true),
+          path: "/auth/telegram"
+        })
+      );
     }
   }, [url]);
   useEffect(() => {
@@ -50,48 +42,7 @@ function TelegramOAuthStep() {
         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);
-            }
+            verifyTelegram(authObject);
           }
           break;
       }

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

@@ -13,7 +13,7 @@ const AddingFunds = () => {
     /* @__PURE__ */ jsxs(CpslText, { children: [
       "Follow the prompts presented by",
       " ",
-      OnRampPurchaseStatus ? ON_RAMP_PROVIDERS[onRampPurchase.provider].name : "the provider",
+      OnRampPurchaseStatus && (onRampPurchase == null ? void 0 : onRampPurchase.provider) ? ON_RAMP_PROVIDERS[onRampPurchase.provider].name : "the provider",
       "."
     ] })
   ] });

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

@@ -4,13 +4,15 @@ import {
 } 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 { useModalStore } 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";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 const SaveRecoverySecret = ({
   email,
   value,
@@ -48,10 +50,14 @@ const SaveRecoverySecret = ({
   ] });
 };
 const RecoverySecretStep = () => {
-  const hideWallets = useThemeStore((state) => state.hideWallets);
+  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 = useUserInfoStore((state) => state.getAuthInfo());
-  const recoveryShare = useUserInfoStore((state) => state.recoveryShare);
+  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);

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

@@ -18,37 +18,23 @@ import { Heading, QRContainer, FilledDisabledInput, StepContainer, InnerStepCont
 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";
+import { useEnable2fa } from "../../../provider/index.js";
 const Setup2FAStep = ({ onClose }) => {
   const isLogin = useModalStore((state) => state.isLogin());
   const setStep = useModalStore((state) => state.setStep);
-  const para = useInternalClient();
+  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 [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 params = (twoFactorStatus == null ? void 0 : twoFactorStatus.uri) ? new URL(twoFactorStatus.uri).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();
+      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(() => {
@@ -73,28 +59,33 @@ const Setup2FAStep = ({ onClose }) => {
     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");
-      }
+      enable2fa(
+        { verificationCode: code },
+        {
+          onSuccess: () => {
+            setStep(ModalStep.TWO_FACTOR_DONE);
+          },
+          onError: () => {
+            setCodeError("Incorrect Code");
+          }
+        }
+      );
     } else {
       setCodeError("Incorrect Code");
     }
-    setIsVerifyingCode(false);
   });
   const handleCopy = () => {
-    copy(secret);
+    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: isVerifyingCode ? /* @__PURE__ */ jsx(CpslSpinner, {}) : /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx(InnerStepContainer, { children: isVerifying ? /* @__PURE__ */ jsx(Fragment, { children: isPending ? /* @__PURE__ */ jsx(CpslSpinner, {}) : /* @__PURE__ */ jsx(
       "form",
       {
         onSubmit: (e) => __async(void 0, null, function* () {
@@ -117,11 +108,11 @@ const Setup2FAStep = ({ onClose }) => {
       }
     ) }) : /* @__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 }) })
+      /* @__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, noAutoDisable: true, children: /* @__PURE__ */ jsx(CpslButton, { slot: "end", variant: "ghost", onClick: handleCopy, children: /* @__PURE__ */ jsx(CpslIcon, { icon: copied ? "check" : "copy" }) }) }) }),
+      /* @__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" })

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

@@ -8,7 +8,7 @@ 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);
+const CryptoElementsContext = React.createContext({ onramp: null });
 CryptoElementsContext.displayName = "CryptoElementsContext";
 const CryptoElements = ({ stripeOnramp, children }) => {
   const [ctx, setContext] = React.useState(() => ({

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

@@ -3,9 +3,12 @@ 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";
+import { useStore } from "../../../provider/stores/useStore.js";
 const TwoFactorDoneStep = ({ onClose }) => {
-  const hideWallets = useThemeStore((state) => state.hideWallets);
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
   return /* @__PURE__ */ jsxs(StepContainer, { children: [
     /* @__PURE__ */ jsx(HeroIcon, { icon: "checkCircleFilled" }),
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [

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

@@ -6,92 +6,75 @@ 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 { displayPhoneNumber } from "@getpara/core-sdk";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { useResendVerificationCode } from "../../../provider/index.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 authInfo = para.authInfo;
+  const { verifyNewAccount, isVerifyNewAccountPending, verifyNewAccountError } = useAuthActions();
+  const { resendVerificationCode } = useResendVerificationCode();
   const inputRef = useRef(null);
   const [code, setCode] = useState("");
-  const [codeError, setCodeError] = useState("");
-  const [resendStatus, setResendStatus] = useState("Resend.");
+  const [isPending, setIsPending] = useState(false);
+  const [codeError, setCodeError] = useState(null);
   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();
+      var _a, _b, _c, _d;
+      (_d = (_c = (_b = (_a = inputRef.current) == null ? void 0 : _a.shadowRoot) == null ? void 0 : _b.querySelectorAll("input")) == null ? void 0 : _c[0]) == null ? void 0 : _d.focus();
     }, 10);
   }, []);
   useEffect(() => {
+    setCodeError(null);
     if (code.length === 6) {
       handleSubmitCode();
     }
   }, [code]);
+  useEffect(() => {
+    if (isVerifyNewAccountPending) {
+      setIsPending(isVerifyNewAccountPending);
+    }
+  }, [isVerifyNewAccountPending]);
   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);
+      resendVerificationCode(void 0, {
+        onSettled: () => {
+          setTimeout(() => {
+            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.");
-        }
-      }
+      verifyNewAccount(code);
     } else {
       setCodeError("Incorrect code.");
     }
-    setIsVerifying(false);
   });
+  useEffect(() => {
+    if (!!verifyNewAccountError) {
+      setIsPending(false);
+      const status = verifyNewAccountError.status;
+      switch (status) {
+        case 429:
+          setCodeError("Too many incorrect attempts. Please try again in 10 minutes.");
+          break;
+        default:
+          setCodeError("Incorrect code.");
+          break;
+      }
+    }
+  }, [verifyNewAccountError]);
   return /* @__PURE__ */ jsxs(StepContainer, { $wide: true, children: [
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
       /* @__PURE__ */ jsxs(Heading, { variant: "headingS", weight: "bold", children: [
@@ -99,11 +82,12 @@ const VerificationCodeStep = () => {
         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 })
+        "Please enter the code we sent to",
+        " ",
+        /* @__PURE__ */ jsx(InlineText, { variant: "bodyS", children: (authInfo == null ? void 0 : authInfo.authType) === "phone" ? displayPhoneNumber(authInfo.identifier) : authInfo.identifier })
       ] })
     ] }),
-    /* @__PURE__ */ jsx(InnerStepContainer, { children: isVerifying ? /* @__PURE__ */ jsx(CpslSpinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(InnerStepContainer, { children: isPending ? /* @__PURE__ */ jsx(CpslSpinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(
         "form",
         {
@@ -119,7 +103,7 @@ const VerificationCodeStep = () => {
               type: "number",
               code,
               onCpslInput: handleCodeInput,
-              errorText: codeError,
+              errorText: codeError || "",
               onKeyDown: (e) => __async(void 0, null, function* () {
                 return e.key === "Enter" && (yield handleSubmitCode());
               })
@@ -136,7 +120,7 @@ const VerificationCodeStep = () => {
             variant: "bodyS",
             style: { cursor: resendDisabled ? "default" : "pointer" },
             onClick: handleResendClick,
-            children: resendStatus
+            children: resendDisabled ? "Resent!" : "Resend."
           }
         )
       ] })