@getpara/react-sdk-lite 2.11.0 → 2.13.0

package/dist/css/modal.css

@@ -20,7 +20,4 @@
 html {
   --cpsl-default-font: 'Inter', sans-serif;
   -webkit-overflow-scrolling: touch;
-
-  --wcm-z-index: 99999 !important;
-  --w3m-z-index: 99999 !important;
 }

package/dist/index.d.ts

@@ -4,3 +4,4 @@ export * from '@getpara/web-sdk';
 export type { Theme } from '@getpara/react-components';
 import ParaWeb from '@getpara/web-sdk';
 export default ParaWeb;
+export type { StepOverride } from './modal/types/modalProps.js';

package/dist/modal/ParaModal.js

@@ -9,8 +9,6 @@ import { jsx } from "react/jsx-runtime";
 import { CpslAuthModal, defineCustomElements, generateTheme } from "@getpara/react-components";
 import { ModalContent } from "./components/index.js";
 import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from "react";
-import { useModalStore } from "./stores/index.js";
-import { ModalStep, RESET_TO_ACCOUNT_STEPS, RESET_TO_AUTH_STEPS } from "./utils/steps.js";
 import { AuthLayout } from "./types/modalProps.js";
 import { DEFAULTS } from "./constants/defaults.js";
 import { useGoBack } from "./hooks/useGoBack.js";
@@ -20,44 +18,37 @@ import { useAccount, useModal, useParaStatus, useWalletState } from "../provider
 import { useInternalClient } from "../provider/hooks/utils/useInternalClient.js";
 import { useExternalWallets } from "../provider/providers/ExternalWalletProvider.js";
 import { useStore } from "../provider/stores/useStore.js";
-import parsePhoneNumberFromString from "libphonenumber-js";
-import { useAuthActions } from "../provider/providers/AuthProvider.js";
-import { validateInput } from "./utils/authInputHelpers.js";
 import { useTransactionMonitoring } from "./hooks/useTransactionMonitoring.js";
+import { useAuthView } from "./hooks/useAuthView.js";
 defineCustomElements();
 const ParaModal = forwardRef((props, ref) => {
   const storedModalConfig = useStore((state) => state.modalConfig);
-  const refs = useStore((state) => state.refs);
   const modalContentRef = useRef(null);
-  const modalRefs = useModalStore((state) => state.refs);
-  const flow = useModalStore((state) => state.flow);
-  const currentStep = useModalStore((state) => state.step);
-  const setAuthState = useModalStore((state) => state.setAuthState);
-  const setOnModalStepChange = useModalStore((state) => state.setOnModalStepChange);
-  const setStep = useModalStore((state) => state.setStep);
-  const hasPreviousStep = useModalStore((state) => state.hasPreviousStep());
-  const setFlow = useModalStore((state) => state.setFlow);
-  const goBack = useGoBack();
-  const setAuthLayout = useModalStore((state) => state.setAuthLayout);
-  const storedAuthLayout = useModalStore((state) => state.authLayout);
-  const resetModalState = useModalStore((state) => state.resetState);
-  const setRecoveryShare = useModalStore((state) => state.setRecoveryShare);
+  const modalRef = useRef(null);
+  const modalRefs = useStore((state) => state.refs);
+  const { goBack, canGoBack } = useGoBack();
+  const setAuthLayout = useStore((state) => state.setAuthLayout);
+  const storedAuthLayout = useStore((state) => state.authLayout);
   const { disconnectExternalWallet } = useExternalWallets();
   const { isOpen: storedIsOpen, closeModal } = useModal();
   const para = useInternalClient();
   const { setSelectedWallet, updateSelectedWallet } = useWalletState();
-  const setAuthStepRoute = useModalStore((state) => state.setAuthStepRoute);
-  const { signUpOrLogIn, isCreateGuestWalletsPending } = useAuthActions();
   const { isReady, isFarcasterMiniApp } = useParaStatus();
   const { isLoading: isAccountLoading, isConnected, embedded } = useAccount();
-  const setIFrameUrl = useModalStore((state) => state.setIFrameUrl);
-  const setIsIFrameReady = useModalStore((state) => state.setIsIFrameReady);
+  const setIFrameUrl = useStore((state) => state.setIFrameUrl);
   const [isModalMounted, setIsModalMounted] = useState(false);
   const [isDisconnecting, setIsDisconnecting] = useState(false);
   const externalWallets = useStore((state) => state.externalWallets);
   const providerProps = useStore((state) => state.providerProps);
-  const setAccountLinkOptions = useModalStore((state) => state.setAccountLinkOptions);
-  const selectedExternalWallet = useModalStore((state) => state.selectedExternalWallet);
+  const setAccountLinkOptions = useStore((state) => state.setAccountLinkOptions);
+  const setShowPostAuthFlow = useStore((state) => state.setShowPostAuthFlow);
+  const resetAuthFlow = useStore((state) => state.resetAuthFlow);
+  const resetAccountFlow = useStore((state) => state.resetAccountFlow);
+  const setAccountView = useStore((state) => state.setAccountView);
+  const setSelectedAuthView = useStore((state) => state.setSelectedAuthView);
+  const selectedAuthView = useStore((state) => state.selectedAuthView);
+  const accountView = useStore((state) => state.accountView);
+  const { authView } = useAuthView();
   const isInitialized = useRef(false);
   const _a = __spreadValues(__spreadValues({}, storedModalConfig), props), {
     isOpen: configIsOpen,
@@ -71,7 +62,6 @@ const ParaModal = forwardRef((props, ref) => {
     currentStepOverride,
     authLayout = [AuthLayout.AUTH_FULL, AuthLayout.EXTERNAL_FULL],
     embeddedModal,
-    onModalStepChange,
     onClose,
     defaultAuthIdentifier,
     supportedAccountLinks: propsSupportedAccountLinks
@@ -87,7 +77,6 @@ const ParaModal = forwardRef((props, ref) => {
     "currentStepOverride",
     "authLayout",
     "embeddedModal",
-    "onModalStepChange",
     "onClose",
     "defaultAuthIdentifier",
     "supportedAccountLinks"
@@ -107,11 +96,10 @@ const ParaModal = forwardRef((props, ref) => {
             currentStepOverride,
             authLayout,
             embeddedModal,
-            onModalStepChange,
             onClose,
             defaultAuthIdentifier
           }), rest),
-          reactSdkVersion: "2.11.0"
+          reactSdkVersion: "2.13.0"
         });
       } catch (e) {
       }
@@ -125,80 +113,49 @@ const ParaModal = forwardRef((props, ref) => {
         goBack();
       },
       canGoBack() {
-        return hasPreviousStep;
+        return canGoBack;
       },
       currentStep() {
-        return currentStep;
+        return authView || accountView;
       },
       handleModalClose() {
         var _a2;
         (_a2 = modalContentRef == null ? void 0 : modalContentRef.current) == null ? void 0 : _a2.handleModalClose();
       }
     };
-  }, [hasPreviousStep, currentStep]);
-  const initModal = (shouldAutoLogin) => __async(void 0, null, function* () {
-    var _a2;
+  }, [canGoBack, authView, accountView]);
+  const initModal = () => __async(void 0, null, function* () {
     if (!isReady) {
       return;
     }
-    setIFrameUrl(void 0);
-    setIsIFrameReady(false);
-    const isAccount = isConnected, isGuest = isAccount && para.isGuestMode || isCreateGuestWalletsPending;
-    switch (true) {
-      case !!currentStepOverride:
-        setStep(ModalStep[currentStepOverride.toUpperCase()]);
-        break;
-      case isGuest:
-        setFlow("guest");
-        setStep(isCreateGuestWalletsPending ? ModalStep.AWAITING_GUEST_WALLET_CREATION : ModalStep.ACCOUNT_MAIN);
-        break;
-      case isAccount:
-        setFlow("account");
-        if (!refs.openedToStep.current) {
-          setStep(ModalStep.ACCOUNT_MAIN);
-        }
-        break;
-      default:
-        if (currentStep !== ModalStep.AUTH_MAIN && currentStep !== ModalStep.SECRET) {
-          setFlow(void 0);
-          setStep(para.isTelegram ? ModalStep.TELEGRAM_OAUTH : ModalStep.AUTH_MAIN);
-          setAuthState();
-          setAuthStepRoute();
-        }
-        if (!isFarcasterMiniApp) {
-          yield disconnectExternalWallet();
-          setSelectedWallet({ id: void 0, type: void 0 });
-        }
-        if (shouldAutoLogin) {
-          if (defaultAuthIdentifier && ((_a2 = para.authInfo) == null ? void 0 : _a2.identifier) !== defaultAuthIdentifier) {
-            const number = parsePhoneNumberFromString(defaultAuthIdentifier);
-            try {
-              const auth = validateInput(
-                number ? number.nationalNumber : defaultAuthIdentifier,
-                (number == null ? void 0 : number.countryCallingCode) ? `+${number == null ? void 0 : number.countryCallingCode}` : void 0,
-                number ? "phone" : "email"
-              );
-              para.setAuth(number ? { phone: defaultAuthIdentifier } : { email: defaultAuthIdentifier });
-              signUpOrLogIn(auth);
-            } catch (err) {
-              console.error("invalid user identifier:", err.message);
-            }
-          }
-        }
-        break;
+    setIFrameUrl(null);
+    if (!!currentStepOverride) {
+      if (currentStepOverride.startsWith("ACCOUNT_")) {
+        setAccountView(currentStepOverride);
+      } else if (currentStepOverride.startsWith("AUTH_")) {
+        setSelectedAuthView(currentStepOverride);
+      }
+      return;
+    }
+    if (!isConnected) {
+      if (!isFarcasterMiniApp) {
+        yield disconnectExternalWallet();
+        yield setSelectedWallet({ id: void 0, type: void 0 });
+      }
     }
   });
   useTransactionMonitoring();
   useEffect(() => {
     if (isReady && isOpen && !isAccountLoading && !isInitialized.current) {
-      initModal(isOpen);
+      initModal();
       isInitialized.current = true;
     }
     let timerId;
     if (!bareModal && isReady && !isOpen && isInitialized.current) {
+      setIFrameUrl(null);
+      isInitialized.current = false;
       timerId = setTimeout(() => {
         initModal();
-        isInitialized.current = false;
       }, 250);
     }
     return () => {
@@ -224,33 +181,30 @@ const ParaModal = forwardRef((props, ref) => {
       generateTheme(theme);
     }
   }, [theme]);
-  useEffect(() => {
-    setOnModalStepChange(onModalStepChange);
-  }, [onModalStepChange]);
   useEffect(() => {
     updateSelectedWallet();
   }, [para]);
   useEffect(() => {
-    if (bareModal && !selectedExternalWallet && !isAccountLoading && !isConnected && !["signup", "login"].includes(flow != null ? flow : "") && modalRefs.currentStep.current !== ModalStep.AUTH_MAIN) {
-      setStep(ModalStep.AUTH_MAIN);
+    if (bareModal && !isAccountLoading && !isConnected && selectedAuthView !== "AUTH_MAIN") {
+      setSelectedAuthView("AUTH_MAIN");
     }
-  }, [bareModal, flow, isConnected, isAccountLoading, selectedExternalWallet]);
+  }, [bareModal, isConnected, isAccountLoading, selectedAuthView]);
   useEffect(() => {
     setAccountLinkOptions(propsSupportedAccountLinks != null ? propsSupportedAccountLinks : para == null ? void 0 : para.supportedAccountLinks);
   }, [propsSupportedAccountLinks, para == null ? void 0 : para.supportedAccountLinks]);
   const handleClose = () => {
     closeModal();
     onClose == null ? void 0 : onClose();
+    setShowPostAuthFlow(false);
   };
   const handleDisconnect = () => __async(void 0, null, function* () {
     setIsDisconnecting(true);
     handleClose();
     const reset = () => __async(void 0, null, function* () {
       yield para.logout({ clearPregenWallets: embedded == null ? void 0 : embedded.isGuestMode });
-      yield disconnectExternalWallet();
-      setStep(ModalStep.AUTH_MAIN);
-      setFlow(void 0);
       setIsDisconnecting(false);
+      resetAuthFlow();
+      resetAccountFlow();
     });
     if (bareModal) {
       reset();
@@ -264,15 +218,18 @@ const ParaModal = forwardRef((props, ref) => {
     setIsModalMounted(true);
   };
   const handleModalExited = () => __async(void 0, null, function* () {
-    refs.openedToStep.current = null;
     setIsModalMounted(false);
-    if (RESET_TO_AUTH_STEPS.includes(currentStep)) {
-      resetModalState();
-      setRecoveryShare(null);
-    } else if (RESET_TO_ACCOUNT_STEPS.includes(currentStep)) {
-      setStep(ModalStep.LOGIN_DONE);
-    }
+    goBack();
   });
+  useEffect(() => {
+    var _a2;
+    if ((_a2 = modalRef.current) == null ? void 0 : _a2.shadowRoot) {
+      const container = modalRef.current.shadowRoot.getElementById("modal-container");
+      if (container && modalRefs.modalContainer) {
+        modalRefs.modalContainer.current = container;
+      }
+    }
+  }, [isModalMounted]);
   if (!para) {
     console.error("A Para instance is required.");
     return null;
@@ -297,6 +254,7 @@ const ParaModal = forwardRef((props, ref) => {
   return /* @__PURE__ */ jsx(
     StyledAuthModal,
     {
+      ref: modalRef,
       enterTransitionDuration: DEFAULTS.ANIMATION_DURATION,
       exitTransitionDuration: DEFAULTS.ANIMATION_DURATION,
       open: isOpen,
@@ -316,7 +274,8 @@ const ParaModal = forwardRef((props, ref) => {
           isGuestModeEnabled,
           onClose: handleClose,
           onDisconnect: handleDisconnect,
-          isDisconnecting
+          isDisconnecting,
+          defaultAuthIdentifier
         }, rest)
       )
     }

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

@@ -1,7 +1,6 @@
 import { TOAuthMethod } from '@getpara/web-sdk';
 interface BodyProps {
     oAuthMethods?: TOAuthMethod[];
-    twoFactorAuthEnabled?: boolean;
     disableEmailLogin: boolean;
     disablePhoneLogin: boolean;
     isGuestModeEnabled?: boolean;
@@ -9,5 +8,5 @@ interface BodyProps {
     isDisconnecting: boolean;
     onClose: () => void;
 }
-export declare const Body: ({ oAuthMethods, twoFactorAuthEnabled, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, onClose, onDisconnect, isDisconnecting, }: BodyProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Body: ({ oAuthMethods, disableEmailLogin, disablePhoneLogin, isGuestModeEnabled, onClose, onDisconnect, isDisconnecting, }: BodyProps) => import("react/jsx-runtime").JSX.Element;
 export {};