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

package/dist/modal/components/AuthInput/AuthInput.js

@@ -12,44 +12,46 @@ import {
   CpslSpinner,
   CpslText
 } from "@getpara/react-components";
-import { useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import styled from "styled-components";
-import countryCodes from "./countryCodes.js";
-import { useModalStore, useUserInfoStore } from "../../stores/index.js";
-import { EMAIL_REGEX, MOBILE_SIZE } from "../../constants/constants.js";
+import countryCodes from "../../utils/countryCodes.js";
+import { MOBILE_SIZE } from "../../constants/constants.js";
 import { useDropdownPosition } from "./hooks/useDropdownPosition.js";
-import { ModalStep } from "../../utils/steps.js";
 import { defaultPhoneMask, phoneMasks } from "./phoneMasks.js";
-import { AuthMethod } from "@getpara/web-sdk";
 import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
-import { useSetLoginURLs } from "../../hooks/useSetLoginURLs.js";
+import parsePhoneNumberFromString from "libphonenumber-js";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { isCcMatch, validateAuth } from "../../utils/authInputHelpers.js";
 const DEFAULT_COUNTRY = { label: "United States", value: "+1", selectedLabel: "US", icon: "US" };
-function isCcMatch(countryCode, option) {
-  return countryCode === "+1" ? option.selectedLabel === "US" : option.value === countryCode;
-}
 const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
-  var _a, _b;
+  var _a, _b, _c;
   const inputRef = useRef(null);
   const { dropdownMaxHeight, dropdownWidth } = useDropdownPosition(inputRef);
+  const defaultAuthIdentifier = useStore((state) => {
+    var _a2;
+    return (_a2 = state.modalConfig) == null ? void 0 : _a2.defaultAuthIdentifier;
+  });
   const para = useInternalClient();
-  const setAuthInfo = useUserInfoStore((state) => state.setAuthInfo);
-  const authInfo = useUserInfoStore((state) => state.getAuthInfo());
-  const setFlow = useModalStore((state) => state.setFlow);
-  const setStep = useModalStore((state) => state.setStep);
-  const setBiometricLocationHints = useModalStore((state) => state.setBiometricLocationHints);
-  const setLoginURLs = useSetLoginURLs();
-  const [countryCode, setCountryCode] = useState(
-    (authInfo == null ? void 0 : authInfo.authType) === "phone" ? authInfo.auth.countryCode || "+1" : "+1"
-  );
+  const { signUpOrLogIn, isSignUpOrLogInPending } = useAuthActions();
+  const authInfo = para.authInfo;
+  const [storedNationalNumber, storedCountryCode] = useMemo(() => {
+    if ((authInfo == null ? void 0 : authInfo.authType) !== "phone") {
+      return [void 0, void 0];
+    }
+    const parsed = parsePhoneNumberFromString(authInfo.identifier);
+    return [parsed == null ? void 0 : parsed.nationalNumber, parsed == null ? void 0 : parsed.countryCallingCode];
+  }, [authInfo == null ? void 0 : authInfo.authType, authInfo == null ? void 0 : authInfo.identifier]);
+  const [countryCode, setCountryCode] = useState(storedCountryCode != null ? storedCountryCode : "+1");
   const [identifier, setIdentifier] = useState(
     (() => {
-      if (!authInfo || ["telegram", "farcaster"].includes(authInfo.authType)) {
+      if (!(authInfo == null ? void 0 : authInfo.authType) || ["telegram", "farcaster", "externalWallet"].includes(authInfo == null ? void 0 : authInfo.authType)) {
         return "";
       }
       if (authInfo.authType !== "phone") {
         return authInfo.identifier;
       }
-      return authInfo.auth.phone;
+      return storedNationalNumber != null ? storedNationalNumber : "";
     })()
   );
   const [identifierType, setIdentifierType] = useState(
@@ -58,9 +60,28 @@ const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
   const [matchedCountryCode, setMatchedCountryCode] = useState(
     (_a = countryCodes.find((option) => isCcMatch(countryCode, option))) != null ? _a : DEFAULT_COUNTRY
   );
-  const [isLoggingIn, setIsLoggingIn] = useState(false);
   const [error, setError] = useState("");
+  const [isPending, setIsPending] = useState(isSignUpOrLogInPending);
   const [search, setSearch] = useState("");
+  const setCountryCodes = (countyCodeInput) => {
+    setCountryCode(countyCodeInput.value);
+    setMatchedCountryCode(countyCodeInput);
+  };
+  useEffect(() => {
+    if (defaultAuthIdentifier && !authInfo) {
+      const number = parsePhoneNumberFromString(defaultAuthIdentifier);
+      if (number) {
+        const countryCode2 = `+${number.countryCallingCode}`;
+        const countryCodeInputMatch = countryCodes.find((option) => isCcMatch(countryCode2, option));
+        if (countryCodeInputMatch) {
+          setCountryCodes(countryCodeInputMatch);
+        }
+      }
+      handleIdentifierInput({
+        detail: { value: number ? number.nationalNumber : defaultAuthIdentifier }
+      });
+    }
+  }, [authInfo]);
   const isEmail = identifierType === "email";
   const isPhone = identifierType === "phone";
   const isUnknown = !identifierType;
@@ -71,13 +92,13 @@ const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
     setSearch(ev.detail);
   };
   const handleIdentifierInput = (ev) => {
-    const newIdentifier = ev.detail.value;
+    var _a2;
+    const newIdentifier = (_a2 = ev.detail.value) != null ? _a2 : "";
     let isNewPhone = false, isNewEmail = false;
     if (!disablePhoneLogin) {
       const countryCodeInputMatch = countryCodes.find((option) => isCcMatch(newIdentifier, option));
       if (countryCodeInputMatch) {
-        setCountryCode(countryCodeInputMatch.value);
-        setMatchedCountryCode(countryCodeInputMatch);
+        setCountryCodes(countryCodeInputMatch);
         setIdentifierType("phone");
         setIdentifier("");
         return;
@@ -92,70 +113,28 @@ const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
   };
   const handleCountryCodeInput = (ev) => {
     const matchedCountryCode2 = countryCodes.find((code) => code.selectedLabel === ev.detail);
-    setCountryCode(matchedCountryCode2.value);
-    setMatchedCountryCode(matchedCountryCode2);
+    if (matchedCountryCode2) {
+      setCountryCodes(matchedCountryCode2);
+    }
   };
-  const login = () => __async(void 0, null, function* () {
+  const onSubmit = () => __async(void 0, null, function* () {
     setError("");
-    if (isUnknown) {
-      setError("Please enter a valid email or phone number!");
-      return;
-    }
     let auth;
-    if (isEmail) {
-      if (!EMAIL_REGEX.test(identifier)) {
-        setError("Please enter a valid email!");
-        return;
-      }
-      yield para.logout();
-      auth = { email: identifier };
-      setAuthInfo(auth);
-      const userExists = yield para.checkIfUserExists({ email: identifier });
-      if (userExists) {
-        const supportedAuthMethods = yield para.initiateUserLoginV2(auth);
-        const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY) ? yield para.getUserBiometricLocationHints() : [];
-        yield setLoginURLs({ supportedAuthMethods, authType: "email" });
-        setFlow("login");
-        setStep(ModalStep.BIOMETRIC_LOGIN);
-        setBiometricLocationHints(biometricLocationHints);
-        return;
-      }
-      yield para.createUser(auth);
-      setFlow("signUp");
-      setStep(ModalStep.VERIFICATIONS);
-      return;
-    }
-    if (isPhone) {
-      yield para.logout();
-      let userExists = false;
-      try {
-        userExists = yield para.checkIfUserExistsByPhone({ phone: identifier, countryCode });
-      } catch (error2) {
-        setError("Please enter a valid phone number!");
-        return;
-      }
-      auth = { phone: identifier, countryCode };
-      setAuthInfo(auth);
-      if (userExists) {
-        const supportedAuthMethods = yield para.initiateUserLoginV2(auth);
-        const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY) ? yield para.getUserBiometricLocationHints() : [];
-        yield setLoginURLs({ supportedAuthMethods, authType: "phone" });
-        setFlow("login");
-        setStep(ModalStep.BIOMETRIC_LOGIN);
-        setBiometricLocationHints(biometricLocationHints);
-        return;
-      }
-      yield para.createUserByPhone(auth);
-      setFlow("signUp");
-      setStep(ModalStep.VERIFICATIONS);
-      return;
+    try {
+      auth = validateAuth(identifier, countryCode, identifierType);
+      signUpOrLogIn(auth);
+    } catch (err) {
+      setError(err.message);
     }
   });
-  const handleSubmit = () => __async(void 0, null, function* () {
-    setIsLoggingIn(true);
-    yield login();
-    setIsLoggingIn(false);
-  });
+  useEffect(() => {
+    if (isSignUpOrLogInPending) {
+      setIsPending(true);
+    }
+  }, [isSignUpOrLogInPending]);
+  useEffect(() => {
+    setIsPending(false);
+  }, [error]);
   if (disableEmailLogin && disablePhoneLogin) {
     return null;
   }
@@ -164,7 +143,7 @@ const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
     {
       onSubmit: (e) => __async(void 0, null, function* () {
         e.preventDefault();
-        yield handleSubmit();
+        onSubmit();
       }),
       children: /* @__PURE__ */ jsxs(
         StyledInput,
@@ -178,14 +157,14 @@ const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
           autofocus: true,
           inputMode: "email",
           onKeyDown: (e) => __async(void 0, null, function* () {
-            return e.key === "Enter" && handleSubmit();
+            return e.key === "Enter" && onSubmit();
           }),
           contrastText: true,
           isPhone,
-          mask: identifierType === "phone" ? (_b = phoneMasks[matchedCountryCode.selectedLabel]) != null ? _b : defaultPhoneMask : void 0,
+          mask: identifierType === "phone" ? (_c = phoneMasks[(_b = matchedCountryCode.selectedLabel) != null ? _b : ""]) != null ? _c : defaultPhoneMask : void 0,
           enterkeyhint: "go",
           noAutoDisable: true,
-          disabled: isLoggingIn,
+          disabled: isPending,
           "data-testid": "auth-input",
           children: [
             /* @__PURE__ */ jsxs(IconContainer, { slot: "start", children: [
@@ -200,7 +179,7 @@ const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
                   autoWidth: true,
                   dropdownMaxHeight,
                   anchorElId: "authInput",
-                  $width: dropdownWidth,
+                  $width: dropdownWidth != null ? dropdownWidth : 0,
                   showSearch: true,
                   searchPlaceholder: "Search Countries",
                   onCpslSearchChange: handleSearchInput,
@@ -218,7 +197,7 @@ const AuthInput = ({ disableEmailLogin, disablePhoneLogin }) => {
                 }
               )
             ] }),
-            identifier && /* @__PURE__ */ jsx(CpslButton, { slot: "end", size: "small", fullWidth: true, disabled: isLoggingIn, onClick: handleSubmit, children: isLoggingIn ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsx(CpslIcon, { icon: "arrowNarrow" }) })
+            identifier && /* @__PURE__ */ jsx(CpslButton, { slot: "end", size: "small", fullWidth: true, disabled: isPending, onClick: onSubmit, children: isPending ? /* @__PURE__ */ jsx(CpslSpinner, { size: 16 }) : /* @__PURE__ */ jsx(CpslIcon, { icon: "arrowNarrow" }) })
           ]
         },
         "email"

package/dist/modal/components/AuthInput/hooks/useDropdownPosition.d.ts

@@ -1,7 +1,7 @@
 import { MutableRefObject } from 'react';
-export declare const useDropdownPosition: (inputRef: MutableRefObject<HTMLCpslInputElement | HTMLDivElement>) => {
-    dropdownMaxHeight: number;
-    dropdownWidth: number;
-    mobileAnchor: number;
+export declare const useDropdownPosition: (inputRef: MutableRefObject<HTMLCpslInputElement | HTMLDivElement | null>) => {
+    dropdownMaxHeight: number | undefined;
+    dropdownWidth: number | undefined;
+    mobileAnchor: number | undefined;
     resize: () => void;
 };

package/dist/modal/components/AuthInput/hooks/useDropdownPosition.js

@@ -6,15 +6,15 @@ const useDropdownPosition = (inputRef) => {
   const [dropdownWidth, setDropdownWidth] = useState();
   const [mobileAnchor, setMobileAnchor] = useState();
   const resize = () => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     if (typeof window !== "undefined") {
       const newMaxHeight = Math.max(
-        window.innerHeight - ((_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.getBoundingClientRect().bottom) - 20,
+        window.innerHeight - ((_b = (_a = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _a.getBoundingClientRect().bottom) != null ? _b : 0) - 20,
         window.innerHeight * 0.25
       );
       setDropdownMaxHeight(newMaxHeight);
-      setDropdownWidth((_b = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _b.getBoundingClientRect().width);
-      setMobileAnchor((_c = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _c.getBoundingClientRect().height);
+      setDropdownWidth((_c = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _c.getBoundingClientRect().width);
+      setMobileAnchor((_d = inputRef == null ? void 0 : inputRef.current) == null ? void 0 : _d.getBoundingClientRect().height);
     }
   };
   if (inputRef.current && !dropdownMaxHeight) {

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

@@ -1,8 +1,9 @@
-import { OAuthMethod } from '@getpara/web-sdk';
+import { TOAuthMethod } from '@getpara/web-sdk';
 interface AuthMainStepProps {
-    oAuthMethods?: OAuthMethod[];
+    oAuthMethods?: TOAuthMethod[];
     disableEmailLogin: boolean;
     disablePhoneLogin: boolean;
+    isGuestModeEnabled?: boolean;
 }
-export declare const AuthMainStep: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }: AuthMainStepProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AuthMainStep: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, }: AuthMainStepProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modal/components/AuthMainStep/AuthMainStep.js

@@ -2,15 +2,27 @@
 import "../../../chunk-MMUBH76A.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
-import { useThemeStore } from "../../stores/theme/useThemeStore.js";
 import { AuthMainStepContent } from "./AuthMainStepContent.js";
 import { CenteredText } from "../common.js";
-const AuthMainStep = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) => {
-  const logo = useThemeStore((state) => state.getLogo());
-  const appName = useThemeStore((state) => state.appName);
-  const authLayout = useThemeStore((state) => state.authLayout);
-  const embeddedModal = useThemeStore((state) => state.embeddedModal);
-  const firstLayoutType = authLayout[0].split(":")[0];
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useModalStore } from "../../stores/index.js";
+const AuthMainStep = ({
+  oAuthMethods,
+  disableEmailLogin,
+  disablePhoneLogin,
+  isGuestModeEnabled = false
+}) => {
+  const authLayout = useModalStore((state) => state.authLayout);
+  const embeddedModal = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.embeddedModal;
+  });
+  const logo = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.logo;
+  });
+  const appName = useStore((state) => state.appName);
+  const firstLayoutType = authLayout == null ? void 0 : authLayout[0].split(":")[0];
   const heading = firstLayoutType === "AUTH" ? "Sign Up or Login" : "Connect Wallet";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     logo && /* @__PURE__ */ jsx(Logo, { src: logo, alt: `${appName ? `${appName} -` : ""}logo` }),
@@ -20,6 +32,7 @@ const AuthMainStep = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) =>
       {
         disableEmailLogin,
         disablePhoneLogin,
+        isGuestModeEnabled,
         oAuthMethods
       }
     )

package/dist/modal/components/AuthMainStep/AuthMainStepContent.d.ts

@@ -1,8 +1,9 @@
-import { OAuthMethod } from '@getpara/web-sdk';
+import { TOAuthMethod } from '@getpara/web-sdk';
 interface AuthMainStepContentProps {
-    oAuthMethods?: OAuthMethod[];
+    oAuthMethods?: TOAuthMethod[];
     disableEmailLogin: boolean;
     disablePhoneLogin: boolean;
+    isGuestModeEnabled?: boolean;
 }
-export declare const AuthMainStepContent: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }: AuthMainStepContentProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AuthMainStepContent: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, }: AuthMainStepContentProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modal/components/AuthMainStep/AuthMainStepContent.js

@@ -4,19 +4,33 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Fragment as Fragment2, useMemo } from "react";
 import { CpslButton, CpslDivider, CpslIconGroup } from "@getpara/react-components";
 import styled from "styled-components";
-import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
 import { ExternalWallets } from "../ExternalWallets/ExternalWallets.js";
-import { useModalStore, useThemeStore } from "../../stores/index.js";
+import { useModalStore } from "../../stores/index.js";
 import { ModalStep } from "../../utils/steps.js";
 import { AuthLayout } from "../../types/modalProps.js";
 import { brandedOAuthLogos, oAuthLogos } from "../../constants/oAuthLogos.js";
 import { AuthOptions } from "../AuthOptions/AuthOptions.js";
-const AuthMainStepContent = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) => {
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useAuthActions } from "../../../provider/providers/AuthProvider.js";
+import { useAccount } from "../../../provider/index.js";
+const AuthMainStepContent = ({
+  oAuthMethods,
+  disableEmailLogin,
+  disablePhoneLogin,
+  isGuestModeEnabled = false
+}) => {
   const { wallets } = useExternalWallets();
-  const authLayout = useThemeStore((state) => state.authLayout);
+  const { createGuestWallets } = useAuthActions();
+  const { data: account } = useAccount();
+  const authLayout = useModalStore((state) => state.authLayout);
   const setStep = useModalStore((state) => state.setStep);
-  const oAuthLogoVariant = useThemeStore((state) => state.oAuthLogoVariant);
-  const isDark = useThemeStore((state) => state.isDark);
+  const oAuthLogoVariant = useStore((state) => state.oAuthLogoVariant);
+  const isDark = useStore((state) => {
+    var _a, _b;
+    return ((_b = (_a = state.modalConfig) == null ? void 0 : _a.theme) == null ? void 0 : _b.mode) === "dark";
+  });
+  const isGuestMode = (account == null ? void 0 : account.isConnected) && account.isGuestMode;
   const useBrandedLogos = oAuthLogoVariant === "default";
   const useDarkLogos = useBrandedLogos ? isDark : oAuthLogoVariant !== "dark";
   const handleCondensedAuthClick = () => {
@@ -27,7 +41,7 @@ const AuthMainStepContent = ({ oAuthMethods, disableEmailLogin, disablePhoneLogi
   };
   const Content = useMemo(() => {
     const methods = [];
-    authLayout.forEach((layout) => {
+    authLayout == null ? void 0 : authLayout.forEach((layout) => {
       switch (layout) {
         case AuthLayout.AUTH_FULL: {
           methods.push([
@@ -36,7 +50,8 @@ const AuthMainStepContent = ({ oAuthMethods, disableEmailLogin, disablePhoneLogi
               {
                 oAuthMethods,
                 disableEmailLogin,
-                disablePhoneLogin
+                disablePhoneLogin,
+                isGuestModeEnabled
               },
               "authFull"
             ),
@@ -85,8 +100,22 @@ const AuthMainStepContent = ({ oAuthMethods, disableEmailLogin, disablePhoneLogi
       reactNode,
       methods.length > 1 && index < methods.length - 1 && /* @__PURE__ */ jsx(CpslDivider, { children: "or" }, "or")
     ] }, key)) });
-  }, [oAuthMethods, disableEmailLogin, disablePhoneLogin, wallets, authLayout]);
-  return /* @__PURE__ */ jsx(Container, { "data-testid": "main-auth-step-content", children: Content });
+  }, [oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, wallets, authLayout]);
+  return /* @__PURE__ */ jsxs(Container, { "data-testid": "main-auth-step-content", children: [
+    Content,
+    isGuestModeEnabled && !isGuestMode && /* @__PURE__ */ jsx(
+      GuestMode,
+      {
+        href: "#",
+        isDark,
+        onClick: (e) => {
+          e.preventDefault();
+          createGuestWallets();
+        },
+        children: "Continue as Guest"
+      }
+    )
+  ] });
 };
 const Container = styled.div`
   display: flex;
@@ -108,6 +137,21 @@ const CondensedButton = styled(CpslButton)`
     max-height: 50px;
   }
 `;
+const GuestMode = styled.a`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 50px;
+  color: ${({ isDark }) => isDark ? "white" : "black"};
+  text-decoration: underline;
+  font-size: 16px;
+  font-weight: 500;
+
+  &:hover {
+    text-decoration: underline;
+  }
+`;
 export {
   AuthMainStepContent
 };

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

@@ -1,8 +1,9 @@
-import { OAuthMethod } from '@getpara/web-sdk';
+import { TOAuthMethod } from '@getpara/web-sdk';
 interface AuthOptionsProps {
-    oAuthMethods?: OAuthMethod[];
+    oAuthMethods?: TOAuthMethod[];
     disableEmailLogin: boolean;
     disablePhoneLogin: boolean;
+    isGuestModeEnabled: boolean;
 }
-export declare const AuthOptions: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }: AuthOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AuthOptions: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, }: AuthOptionsProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modal/components/AuthOptions/AuthOptions.js

@@ -1,16 +1,27 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
-import { Fragment, jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo } from "react";
 import styled from "styled-components";
 import { OAuth } from "../OAuth/OAuth.js";
 import { AuthInput } from "../AuthInput/AuthInput.js";
-import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
+import { useExternalWallets } from "../../../provider/providers/ExternalWalletProvider.js";
 import { useModalStore } from "../../stores/index.js";
-import { ModalStep } from "../../utils/steps.js";
-const AuthOptions = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) => {
+import { CpslIcon } from "@getpara/react-components";
+import { useStore } from "../../../provider/stores/useStore.js";
+const AuthOptions = ({
+  oAuthMethods,
+  disableEmailLogin,
+  disablePhoneLogin,
+  isGuestModeEnabled = false
+}) => {
   const { wallets } = useExternalWallets();
-  const showAllOAuth = useModalStore((state) => state.step === ModalStep.AUTH_MORE);
+  const isDark = useStore((state) => {
+    var _a, _b;
+    return ((_b = (_a = state.modalConfig) == null ? void 0 : _a.theme) == null ? void 0 : _b.mode) === "dark";
+  });
+  const guestAddFundsTab = useModalStore((state) => state.guestAddFundsTab);
+  const setGuestAddFundsTab = useModalStore((state) => state.setGuestAddFundsTab);
   const Content = useMemo(() => {
     const Methods = [];
     if (!!(oAuthMethods == null ? void 0 : oAuthMethods.length)) {
@@ -20,14 +31,37 @@ const AuthOptions = ({ oAuthMethods, disableEmailLogin, disablePhoneLogin }) =>
       Methods.push(/* @__PURE__ */ jsx(AuthInput, { disableEmailLogin, disablePhoneLogin }, "input"));
     }
     return /* @__PURE__ */ jsx(Fragment, { children: Methods });
-  }, [showAllOAuth, oAuthMethods, disableEmailLogin, disablePhoneLogin, wallets]);
-  return /* @__PURE__ */ jsx(Container, { children: Content });
+  }, [oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, wallets]);
+  useEffect(() => {
+    return () => {
+      setGuestAddFundsTab();
+    };
+  }, []);
+  return /* @__PURE__ */ jsxs(Container, { children: [
+    guestAddFundsTab && /* @__PURE__ */ jsxs(CompleteAccountSetup, { isDark, children: [
+      /* @__PURE__ */ jsx(CpslIcon, { icon: "stars02", size: "16px" }),
+      "Complete account setup to",
+      " ",
+      guestAddFundsTab === "BUY" ? "buy assets" : guestAddFundsTab === "WITHDRAW" ? "sell assets" : "continue",
+      "."
+    ] }),
+    Content
+  ] });
 };
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   gap: 8px;
 `;
+const CompleteAccountSetup = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  color: ${({ isDark }) => isDark ? "white" : "black"};
+  font-weight: 500;
+  font-size: 14px;
+`;
 export {
   AuthOptions
 };

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

@@ -1 +1,5 @@
-export declare const AwaitingWalletCreationStep: () => import("react/jsx-runtime").JSX.Element;
+type Props = {
+    isGuestMode?: boolean;
+};
+export declare const AwaitingWalletCreationStep: ({ isGuestMode }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/modal/components/AwaitingWalletCreationStep/AwaitingWalletCreationStep.js

@@ -5,11 +5,16 @@ import { CpslIcon, CpslInfoBox, CpslText } from "@getpara/react-components";
 import { InfoBoxContent, InfoBoxHeader, StepContainer } from "../common.js";
 import { useEffect, useRef, useState } from "react";
 import { Waiting } from "../Waiting/Waiting.js";
-import { useThemeStore } from "../../stores/index.js";
-const AwaitingWalletCreationStep = () => {
-  const hideWallets = useThemeStore((state) => state.hideWallets);
+import { useStore } from "../../../provider/stores/useStore.js";
+import { useAccount } from "../../../provider/index.js";
+const AwaitingWalletCreationStep = ({ isGuestMode = false }) => {
+  const hideWallets = useStore((state) => {
+    var _a;
+    return (_a = state.modalConfig) == null ? void 0 : _a.hideWallets;
+  });
   const [showInfoBox, setShowInfoBox] = useState(false);
   const showInfoBoxTimeout = useRef();
+  const { data: account } = useAccount();
   useEffect(() => {
     if (typeof window !== "undefined") {
       showInfoBoxTimeout.current = window.setTimeout(() => {
@@ -22,7 +27,7 @@ const AwaitingWalletCreationStep = () => {
     /* @__PURE__ */ jsx(
       Waiting,
       {
-        heading: hideWallets ? "Creating Your Account" : "Creating Your Wallet",
+        heading: isGuestMode ? "Creating Guest Account" : (account == null ? void 0 : account.isGuestMode) ? hideWallets ? "Linking Guest Account" : "Linking Guest Wallet" : hideWallets ? "Creating Your Account" : "Creating Your Wallet",
         subheading: "This should only take a couple of seconds."
       }
     ),

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

@@ -1,3 +1 @@
-export declare const BiometricCreationStep: ({ twoFactorAuthEnabled }: {
-    twoFactorAuthEnabled?: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const BiometricCreationStep: () => import("react/jsx-runtime").JSX.Element | null;