@getpara/react-sdk 2.0.0-alpha.30 → 2.0.0-alpha.32

package/dist/modal/ParaModal.js

@@ -49,6 +49,8 @@ const ParaModal = forwardRef((props, ref) => {
   const setAuthStepRoute = useModalStore((state) => state.setAuthStepRoute);
   const { signUpOrLogIn, isCreateGuestWalletsPending } = useAuthActions();
   const { isLoading: isAccountLoading, isConnected } = useAccount();
+  const setIFrameUrl = useModalStore((state) => state.setIFrameUrl);
+  const setIsIFrameReady = useModalStore((state) => state.setIsIFrameReady);
   const [isModalMounted, setIsModalMounted] = useState(false);
   const externalWallets = useStore((state) => state.externalWallets);
   const providerProps = useStore((state) => state.providerProps);
@@ -136,6 +138,8 @@ const ParaModal = forwardRef((props, ref) => {
     if (!para.isReady) {
       return;
     }
+    setIFrameUrl(void 0);
+    setIsIFrameReady(false);
     const isAccount = isConnected, isGuest = isAccount && para.isGuestMode || isCreateGuestWalletsPending;
     switch (true) {
       case !!currentStepOverride:

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

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

package/dist/modal/components/AwaitingIFrameStep/AwaitingIFrameStep.js

@@ -0,0 +1,12 @@
+"use client";
+import "../../../chunk-MMUBH76A.js";
+import { jsx } from "react/jsx-runtime";
+import { useModalStore } from "../../stores/index.js";
+import { Waiting } from "../Waiting/Waiting.js";
+const AwaitingIFrameStep = () => {
+  const isLogin = useModalStore((state) => state.isLogin());
+  return /* @__PURE__ */ jsx(Waiting, { heading: isLogin ? "Logging you in..." : "Creating your account..." });
+};
+export {
+  AwaitingIFrameStep
+};

package/dist/modal/components/Body/Body.js

@@ -43,6 +43,7 @@ import { AccountProfileLinkOptions } from "../Account/AccountProfileLinkOptions.
 import { AccountProfileLink } from "../Account/AccountProfileLink.js";
 import { AccountProfileUnlink } from "../Account/AccountProfileUnlink.js";
 import { ExternalWalletNetworkSelectStep } from "../ExternalWalletNetworkSelectStep/ExternalWalletNetworkSelectStep.js";
+import { AwaitingIFrameStep } from "../AwaitingIFrameStep/AwaitingIFrameStep.js";
 const MIN_HEIGHT = {
   [ModalStep.ADD_FUNDS_AWAITING]: "680px"
 };
@@ -192,6 +193,9 @@ const Body = ({
       case ModalStep.EX_WALLET_NETWORK_SELECT: {
         return /* @__PURE__ */ jsx(ExternalWalletNetworkSelectStep, {});
       }
+      case ModalStep.AWAITING_IFRAME: {
+        return /* @__PURE__ */ jsx(AwaitingIFrameStep, {});
+      }
       default: {
         if (IFrameSteps.includes(currentStep)) {
           return null;

package/dist/modal/components/Header/hooks/useStepTitle.js

@@ -50,7 +50,8 @@ const useStepTitle = () => {
       [ModalStep.ACCOUNT_PROFILE]: isAccountLinkingEnabled ? "Profile" : "Settings",
       [ModalStep.ACCOUNT_PROFILE_LIST]: "Link Account",
       [ModalStep.ACCOUNT_PROFILE_ADD]: "Link Account",
-      [ModalStep.ACCOUNT_PROFILE_REMOVE]: "Unlink Account"
+      [ModalStep.ACCOUNT_PROFILE_REMOVE]: "Unlink Account",
+      [ModalStep.AWAITING_IFRAME]: isLogin ? "Login" : "Sign Up"
     }),
     [isLogin, chainId, hideWallets]
   );

package/dist/modal/components/IFrameStep/IFrameStep.js

@@ -1,13 +1,16 @@
 "use client";
 import "../../../chunk-MMUBH76A.js";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { useModalStore } from "../../stores/index.js";
 import { IFrameSteps } from "../../utils/steps.js";
 import { safeStyled } from "@getpara/react-common";
 import { SpinnerContainer } from "@getpara/react-common";
 import { CpslSpinner } from "@getpara/react-components";
+import { getPortalBaseURL } from "@getpara/web-sdk";
 import { MOBILE_SIZE } from "../../constants/constants.js";
 import { useStore } from "../../../provider/stores/useStore.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
 const IFrameStep = () => {
   const iFrameUrl = useModalStore((state) => state.iFrameUrl);
   const setIsReady = useModalStore((state) => state.setIsIFrameReady);
@@ -17,21 +20,28 @@ const IFrameStep = () => {
     var _a;
     return (_a = state.modalConfig) == null ? void 0 : _a.embeddedModal;
   });
-  return /* @__PURE__ */ jsxs(OuterContainer, { $isVisible: IFrameSteps.includes(currentStep), $embeddedModal: !!embeddedModal, children: [
-    /* @__PURE__ */ jsx(Container, { $isReady: !!isReady, children: /* @__PURE__ */ jsx(
-      "iframe",
-      {
-        src: iFrameUrl,
-        onLoad: () => {
-          setIsReady(true);
-        }
+  const para = useInternalClient();
+  useEffect(() => {
+    const handleMessage = (event) => {
+      const portalBase = getPortalBaseURL(para.ctx);
+      if (!event.origin.startsWith(portalBase)) {
+        return;
+      }
+      if (event.data && event.data.type === "LOADED") {
+        setIsReady(true);
       }
-    ) }),
-    !isReady && /* @__PURE__ */ jsx(SpinnerContainer, { style: { width: "100%", height: "100%", flex: 1 }, children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) })
+    };
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [setIsReady]);
+  return /* @__PURE__ */ jsxs(OuterContainer, { $isVisible: IFrameSteps.includes(currentStep), $embeddedModal: !!embeddedModal, children: [
+    /* @__PURE__ */ jsx(Container, { $isReady: !!isReady, children: /* @__PURE__ */ jsx("iframe", { src: iFrameUrl }) }),
+    !isReady && /* @__PURE__ */ jsx(SpinnerContainer, { style: { width: "100%", height: "100%", flex: 1, position: "absolute" }, children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) })
   ] });
 };
 const OuterContainer = safeStyled.div`
-  height: ${({ $isVisible }) => $isVisible ? "100%" : "0px"};
+  position: relative;
+  height: ${({ $isVisible }) => $isVisible ? "528px" : "0px"};
   width: ${({ $isVisible }) => $isVisible ? "100%" : "0px"};
   flex: ${({ $isVisible }) => $isVisible ? 1 : "auto"};
   padding: ${({ $embeddedModal, $isVisible }) => !$isVisible ? "0px" : $embeddedModal ? "12px 0px 0px" : "72px 72px 32px"};
@@ -44,14 +54,15 @@ const OuterContainer = safeStyled.div`
   }
 `;
 const Container = safeStyled.div`
-  height: 100%;
+  height: 360px;
   width: 100%;
-  display: ${({ $isReady }) => $isReady ? "block" : "none"};
+  opacity: ${({ $isReady }) => $isReady ? 1 : 0};
 
   & > iframe {
     height: 360px;
     width: 100%;
     border: none;
+    background: transparent;
   }
 `;
 export {

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

@@ -1,6 +1,6 @@
 interface WaitingProps {
     heading: string;
-    subheading: string;
+    subheading?: string;
 }
 export declare const Waiting: ({ heading, subheading }: WaitingProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/modal/components/Waiting/Waiting.js

@@ -8,7 +8,7 @@ const Waiting = ({ heading, subheading }) => {
     /* @__PURE__ */ jsx(SpinnerContainer, { children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) }),
     /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
       /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: heading }),
-      /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: subheading })
+      subheading && /* @__PURE__ */ jsx(CpslText, { variant: "bodyS", color: "secondary", weight: "medium", children: subheading })
     ] })
   ] });
 };

package/dist/modal/constants/constants.js

@@ -121,7 +121,7 @@ const BODY_MOTION_VARIANTS = {
 const BODY_TRANSITION = {
   duration: 0.2
 };
-const SDK_VERSION = "2.0.0-alpha.29";
+const SDK_VERSION = "2.0.0-alpha.32";
 export {
   BODY_MOTION_VARIANTS,
   BODY_TRANSITION,

package/dist/modal/utils/steps.d.ts

@@ -38,7 +38,8 @@ export declare enum ModalStep {
     ACCOUNT_PROFILE = "ACCOUNT_PROFILE",
     ACCOUNT_PROFILE_ADD = "ACCOUNT_PROFILE_ADD",
     ACCOUNT_PROFILE_LIST = "ACCOUNT_PROFILE_LIST",
-    ACCOUNT_PROFILE_REMOVE = "ACCOUNT_PROFILE_REMOVE"
+    ACCOUNT_PROFILE_REMOVE = "ACCOUNT_PROFILE_REMOVE",
+    AWAITING_IFRAME = "AWAITING_IFRAME"
 }
 export type ModalStepPropU = keyof typeof ModalStep | ModalStep;
 export type ModalStepPropL = Lowercase<ModalStepPropU>;
@@ -89,7 +90,8 @@ declare enum SignUpModalStep {
     ADD_FUNDS_WITHDRAW = "ADD_FUNDS_WITHDRAW",
     ADD_FUNDS_AWAITING = "ADD_FUNDS_AWAITING",
     ADD_FUNDS_SUCCESS = "ADD_FUNDS_SUCCESS",
-    ADD_FUNDS_FAILURE = "ADD_FUNDS_FAILURE"
+    ADD_FUNDS_FAILURE = "ADD_FUNDS_FAILURE",
+    AWAITING_IFRAME = "AWAITING_IFRAME"
 }
 export declare const SignUpPreviousStep: {
     [key in SignUpModalStep]: ModalStep | undefined;
@@ -122,7 +124,8 @@ declare enum LoginModalStep {
     ADD_FUNDS_WITHDRAW = "ADD_FUNDS_WITHDRAW",
     ADD_FUNDS_AWAITING = "ADD_FUNDS_AWAITING",
     ADD_FUNDS_SUCCESS = "ADD_FUNDS_SUCCESS",
-    ADD_FUNDS_FAILURE = "ADD_FUNDS_FAILURE"
+    ADD_FUNDS_FAILURE = "ADD_FUNDS_FAILURE",
+    AWAITING_IFRAME = "AWAITING_IFRAME"
 }
 export declare const LoginPreviousStep: {
     [key in LoginModalStep]: ModalStep | undefined;

package/dist/modal/utils/steps.js

@@ -40,6 +40,7 @@ var ModalStep = /* @__PURE__ */ ((ModalStep2) => {
   ModalStep2["ACCOUNT_PROFILE_ADD"] = "ACCOUNT_PROFILE_ADD";
   ModalStep2["ACCOUNT_PROFILE_LIST"] = "ACCOUNT_PROFILE_LIST";
   ModalStep2["ACCOUNT_PROFILE_REMOVE"] = "ACCOUNT_PROFILE_REMOVE";
+  ModalStep2["AWAITING_IFRAME"] = "AWAITING_IFRAME";
   return ModalStep2;
 })(ModalStep || {});
 var AccountStep = /* @__PURE__ */ ((AccountStep2) => {
@@ -71,6 +72,7 @@ const RESET_TO_AUTH_STEPS = [
   "AWAITING_BIOMETRIC_CREATION" /* AWAITING_BIOMETRIC_CREATION */,
   "PASSWORD_CREATION" /* PASSWORD_CREATION */,
   "AWAITING_PASSWORD_CREATION" /* AWAITING_PASSWORD_CREATION */,
+  "AWAITING_IFRAME" /* AWAITING_IFRAME */,
   "BIOMETRIC_LOGIN" /* BIOMETRIC_LOGIN */,
   "EMBEDDED_PASSWORD_LOGIN" /* EMBEDDED_PASSWORD_LOGIN */,
   "AWAITING_BIOMETRIC_LOGIN" /* AWAITING_BIOMETRIC_LOGIN */,
@@ -139,6 +141,7 @@ var SignUpModalStep = /* @__PURE__ */ ((SignUpModalStep2) => {
   SignUpModalStep2["ADD_FUNDS_AWAITING"] = "ADD_FUNDS_AWAITING";
   SignUpModalStep2["ADD_FUNDS_SUCCESS"] = "ADD_FUNDS_SUCCESS";
   SignUpModalStep2["ADD_FUNDS_FAILURE"] = "ADD_FUNDS_FAILURE";
+  SignUpModalStep2["AWAITING_IFRAME"] = "AWAITING_IFRAME";
   return SignUpModalStep2;
 })(SignUpModalStep || {});
 const SignUpPreviousStep = {
@@ -167,7 +170,8 @@ const SignUpPreviousStep = {
   ["ADD_FUNDS_WITHDRAW" /* ADD_FUNDS_WITHDRAW */]: "WALLET_CREATION_DONE" /* WALLET_CREATION_DONE */,
   ["ADD_FUNDS_AWAITING" /* ADD_FUNDS_AWAITING */]: "ADD_FUNDS_BUY" /* ADD_FUNDS_BUY */,
   ["ADD_FUNDS_SUCCESS" /* ADD_FUNDS_SUCCESS */]: void 0,
-  ["ADD_FUNDS_FAILURE" /* ADD_FUNDS_FAILURE */]: void 0
+  ["ADD_FUNDS_FAILURE" /* ADD_FUNDS_FAILURE */]: void 0,
+  ["AWAITING_IFRAME" /* AWAITING_IFRAME */]: "BIOMETRIC_CREATION" /* BIOMETRIC_CREATION */
 };
 const GuestPreviousStep = Object.fromEntries([
   ...Object.entries(SignUpPreviousStep).map(([key, value]) => {
@@ -204,6 +208,7 @@ var LoginModalStep = /* @__PURE__ */ ((LoginModalStep2) => {
   LoginModalStep2["ADD_FUNDS_AWAITING"] = "ADD_FUNDS_AWAITING";
   LoginModalStep2["ADD_FUNDS_SUCCESS"] = "ADD_FUNDS_SUCCESS";
   LoginModalStep2["ADD_FUNDS_FAILURE"] = "ADD_FUNDS_FAILURE";
+  LoginModalStep2["AWAITING_IFRAME"] = "AWAITING_IFRAME";
   return LoginModalStep2;
 })(LoginModalStep || {});
 const LoginPreviousStep = {
@@ -231,7 +236,8 @@ const LoginPreviousStep = {
   ["ADD_FUNDS_WITHDRAW" /* ADD_FUNDS_WITHDRAW */]: "LOGIN_DONE" /* LOGIN_DONE */,
   ["ADD_FUNDS_AWAITING" /* ADD_FUNDS_AWAITING */]: "ADD_FUNDS_BUY" /* ADD_FUNDS_BUY */,
   ["ADD_FUNDS_SUCCESS" /* ADD_FUNDS_SUCCESS */]: void 0,
-  ["ADD_FUNDS_FAILURE" /* ADD_FUNDS_FAILURE */]: void 0
+  ["ADD_FUNDS_FAILURE" /* ADD_FUNDS_FAILURE */]: void 0,
+  ["AWAITING_IFRAME" /* AWAITING_IFRAME */]: "BIOMETRIC_LOGIN" /* BIOMETRIC_LOGIN */
 };
 const getStepHasFooter = (step) => {
   switch (step) {

package/dist/provider/providers/AuthProvider.js

@@ -26,7 +26,8 @@ import { DEFAULTS } from "../../modal/constants/defaults.js";
 import { openPopup } from "../../modal/utils/openPopup.js";
 import {
   AuthMethod,
-  entityToWallet
+  entityToWallet,
+  getPortalBaseURL
 } from "@getpara/web-sdk";
 import { useInternalClient } from "../../provider/hooks/utils/useInternalClient.js";
 import { useGoBack } from "../../modal/hooks/useGoBack.js";
@@ -84,6 +85,7 @@ function AuthProvider({
   const setStep = useModalStore((state) => state.setStep);
   const setAuthStepRoute = useModalStore((state) => state.setAuthStepRoute);
   const setIFrameUrl = useModalStore((state) => state.setIFrameUrl);
+  const setIsIFrameReady = useModalStore((state) => state.setIsIFrameReady);
   const iFrameUrl = useModalStore((state) => state.iFrameUrl);
   const loginState = useModalStore((state) => state.getLoginState());
   const signupState = useModalStore((state) => state.getSignupState());
@@ -121,6 +123,24 @@ function AuthProvider({
     const stepNow = refs.currentStep.current;
     return !!stepNow && !steps.includes(stepNow);
   };
+  const setupListener = () => {
+    window.addEventListener("message", function handleMessage(event) {
+      var _a;
+      const portalBase = getPortalBaseURL(para.ctx);
+      if (!event.origin.startsWith(portalBase)) {
+        return;
+      }
+      if (((_a = event.data) == null ? void 0 : _a.type) === "CLOSE_WINDOW") {
+        if (event.data.success) {
+          setAuthStepRoute();
+          setIFrameUrl();
+          setIsIFrameReady(false);
+          setStep(ModalStep.AWAITING_IFRAME);
+        }
+        window.removeEventListener("message", handleMessage);
+      }
+    });
+  };
   const signup = () => {
     if (typeof window !== "undefined") {
       refs.poll.current = {
@@ -131,7 +151,10 @@ function AuthProvider({
               isCanceled: () => cancelIfExitedSteps([
                 ModalStep.BIOMETRIC_CREATION,
                 ModalStep.AWAITING_BIOMETRIC_CREATION,
-                ModalStep.PASSWORD_CREATION
+                ModalStep.PASSWORD_CREATION,
+                ModalStep.AWAITING_IFRAME,
+                ModalStep.VERIFICATIONS,
+                ModalStep.EXTERNAL_WALLET_VERIFICATION
               ]),
               onPoll: () => {
                 goBackIfPopupClosedOnSteps([ModalStep.AWAITING_BIOMETRIC_CREATION]);
@@ -180,10 +203,12 @@ function AuthProvider({
           });
           break;
         case AuthMethod.PASSWORD:
+          setupListener();
           if (isIFrameReady) {
             setStep(ModalStep.PASSWORD_CREATION);
           } else {
             setIFrameUrl(authState.passwordUrl);
+            setIsIFrameReady(false);
             setAuthStepRoute(ModalStep.PASSWORD_CREATION);
           }
           break;
@@ -195,7 +220,9 @@ function AuthProvider({
     if (authState.isWalletSelectionNeeded || authState.passkeyUrl) {
       setStep(ModalStep.BIOMETRIC_LOGIN);
     } else {
+      setupListener();
       setIFrameUrl(authState.passwordUrl);
+      setIsIFrameReady(false);
       setStep(ModalStep.EMBEDDED_PASSWORD_LOGIN);
     }
     refs.poll.current = {
@@ -207,7 +234,8 @@ function AuthProvider({
               ModalStep.BIOMETRIC_LOGIN,
               ModalStep.EMBEDDED_PASSWORD_LOGIN,
               ModalStep.AWAITING_BIOMETRIC_LOGIN,
-              ModalStep.AWAITING_PASSWORD_LOGIN
+              ModalStep.AWAITING_PASSWORD_LOGIN,
+              ModalStep.AWAITING_IFRAME
             ]),
             onPoll: () => {
               goBackIfPopupClosedOnSteps([
@@ -265,6 +293,7 @@ function AuthProvider({
     [loginState, biometricHints]
   );
   const onNewAuthState = (authState) => __async(this, null, function* () {
+    refs.popupWindow.current = null;
     setAuthState(authState);
     switch (authState.stage) {
       case "verify":
@@ -282,6 +311,7 @@ function AuthProvider({
           const isPassword = !!authState.passwordUrl, isPasswordOnly = isPassword && (!authState.passkeyUrl || (userAgent == null ? void 0 : userAgent.device.type) === "mobile" && !authState.isPasskeySupported);
           if (isPassword) {
             setIFrameUrl(authState.passwordUrl);
+            setIsIFrameReady(false);
           }
           signup();
           if (isPasswordOnly) {

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@getpara/react-sdk",
-  "version": "2.0.0-alpha.30",
+  "version": "2.0.0-alpha.32",
   "bin": {
     "setup-para": "dist/cli/cli.mjs"
   },
   "dependencies": {
-    "@getpara/react-common": "2.0.0-alpha.30",
-    "@getpara/react-components": "2.0.0-alpha.30",
-    "@getpara/web-sdk": "2.0.0-alpha.30",
+    "@getpara/react-common": "2.0.0-alpha.32",
+    "@getpara/react-components": "2.0.0-alpha.32",
+    "@getpara/web-sdk": "2.0.0-alpha.32",
     "date-fns": "^3.6.0",
     "framer-motion": "^11.3.31",
     "libphonenumber-js": "^1.11.7",
@@ -16,9 +16,9 @@
     "zustand-sync-tabs": "^0.2.2"
   },
   "devDependencies": {
-    "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.30",
-    "@getpara/evm-wallet-connectors": "2.0.0-alpha.30",
-    "@getpara/solana-wallet-connectors": "2.0.0-alpha.30",
+    "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.32",
+    "@getpara/evm-wallet-connectors": "2.0.0-alpha.32",
+    "@getpara/solana-wallet-connectors": "2.0.0-alpha.32",
     "@tanstack/react-query": "^5.74.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.0",
@@ -38,7 +38,7 @@
     "package.json",
     "styles.css"
   ],
-  "gitHead": "8b06219b9c248a3fbdbd05dc7501e8042c369301",
+  "gitHead": "2c1a4e1ef169c177238c8b0358e84dc86f614614",
   "main": "dist/index.js",
   "peerDependencies": {
     "@getpara/cosmos-wallet-connectors": "^2.0.0-alpha.26",