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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/modal/components/IFrameStep/IFrameStep.js +24 -13
  2. package/dist/modal/constants/constants.js +1 -1
  3. package/package.json +8 -8
package/dist/modal/components/IFrameStep/IFrameStep.js CHANGED
@@ -1,13 +1,16 @@
1
1
  "use client";
2
2
  import "../../../chunk-MMUBH76A.js";
3
3
  import { jsx, jsxs } from "react/jsx-runtime";
4
+ import { useEffect } from "react";
4
5
  import { useModalStore } from "../../stores/index.js";
5
6
  import { IFrameSteps } from "../../utils/steps.js";
6
7
  import { safeStyled } from "@getpara/react-common";
7
8
  import { SpinnerContainer } from "@getpara/react-common";
8
9
  import { CpslSpinner } from "@getpara/react-components";
10
+ import { getPortalBaseURL } from "@getpara/web-sdk";
9
11
  import { MOBILE_SIZE } from "../../constants/constants.js";
10
12
  import { useStore } from "../../../provider/stores/useStore.js";
13
+ import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
11
14
  const IFrameStep = () => {
12
15
  const iFrameUrl = useModalStore((state) => state.iFrameUrl);
13
16
  const setIsReady = useModalStore((state) => state.setIsIFrameReady);
@@ -17,21 +20,28 @@ const IFrameStep = () => {
17
20
  var _a;
18
21
  return (_a = state.modalConfig) == null ? void 0 : _a.embeddedModal;
19
22
  });
20
- return /* @__PURE__ */ jsxs(OuterContainer, { $isVisible: IFrameSteps.includes(currentStep), $embeddedModal: !!embeddedModal, children: [
21
- /* @__PURE__ */ jsx(Container, { $isReady: !!isReady, children: /* @__PURE__ */ jsx(
22
- "iframe",
23
- {
24
- src: iFrameUrl,
25
- onLoad: () => {
26
- setIsReady(true);
27
- }
23
+ const para = useInternalClient();
24
+ useEffect(() => {
25
+ const handleMessage = (event) => {
26
+ const portalBase = getPortalBaseURL(para.ctx);
27
+ if (!event.origin.startsWith(portalBase)) {
28
+ return;
29
+ }
30
+ if (event.data && event.data.type === "LOADED") {
31
+ setIsReady(true);
28
32
  }
29
- ) }),
30
- !isReady && /* @__PURE__ */ jsx(SpinnerContainer, { style: { width: "100%", height: "100%", flex: 1 }, children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) })
33
+ };
34
+ window.addEventListener("message", handleMessage);
35
+ return () => window.removeEventListener("message", handleMessage);
36
+ }, [setIsReady]);
37
+ return /* @__PURE__ */ jsxs(OuterContainer, { $isVisible: IFrameSteps.includes(currentStep), $embeddedModal: !!embeddedModal, children: [
38
+ /* @__PURE__ */ jsx(Container, { $isReady: !!isReady, children: /* @__PURE__ */ jsx("iframe", { src: iFrameUrl }) }),
39
+ !isReady && /* @__PURE__ */ jsx(SpinnerContainer, { style: { width: "100%", height: "100%", flex: 1, position: "absolute" }, children: /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) })
31
40
  ] });
32
41
  };
33
42
  const OuterContainer = safeStyled.div`
34
- height: ${({ $isVisible }) => $isVisible ? "100%" : "0px"};
43
+ position: relative;
44
+ height: ${({ $isVisible }) => $isVisible ? "528px" : "0px"};
35
45
  width: ${({ $isVisible }) => $isVisible ? "100%" : "0px"};
36
46
  flex: ${({ $isVisible }) => $isVisible ? 1 : "auto"};
37
47
  padding: ${({ $embeddedModal, $isVisible }) => !$isVisible ? "0px" : $embeddedModal ? "12px 0px 0px" : "72px 72px 32px"};
@@ -44,14 +54,15 @@ const OuterContainer = safeStyled.div`
44
54
  }
45
55
  `;
46
56
  const Container = safeStyled.div`
47
- height: 100%;
57
+ height: 360px;
48
58
  width: 100%;
49
- display: ${({ $isReady }) => $isReady ? "block" : "none"};
59
+ opacity: ${({ $isReady }) => $isReady ? 1 : 0};
50
60
 
51
61
  & > iframe {
52
62
  height: 360px;
53
63
  width: 100%;
54
64
  border: none;
65
+ background: transparent;
55
66
  }
56
67
  `;
57
68
  export {
package/dist/modal/constants/constants.js CHANGED
@@ -121,7 +121,7 @@ const BODY_MOTION_VARIANTS = {
121
121
  const BODY_TRANSITION = {
122
122
  duration: 0.2
123
123
  };
124
- const SDK_VERSION = "2.0.0-alpha.31";
124
+ const SDK_VERSION = "2.0.0-alpha.32";
125
125
  export {
126
126
  BODY_MOTION_VARIANTS,
127
127
  BODY_TRANSITION,
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@getpara/react-sdk",
3
- "version": "2.0.0-alpha.31",
3
+ "version": "2.0.0-alpha.32",
4
4
  "bin": {
5
5
  "setup-para": "dist/cli/cli.mjs"
6
6
  },
7
7
  "dependencies": {
8
- "@getpara/react-common": "2.0.0-alpha.31",
9
- "@getpara/react-components": "2.0.0-alpha.31",
10
- "@getpara/web-sdk": "2.0.0-alpha.31",
8
+ "@getpara/react-common": "2.0.0-alpha.32",
9
+ "@getpara/react-components": "2.0.0-alpha.32",
10
+ "@getpara/web-sdk": "2.0.0-alpha.32",
11
11
  "date-fns": "^3.6.0",
12
12
  "framer-motion": "^11.3.31",
13
13
  "libphonenumber-js": "^1.11.7",
@@ -16,9 +16,9 @@
16
16
  "zustand-sync-tabs": "^0.2.2"
17
17
  },
18
18
  "devDependencies": {
19
- "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.31",
20
- "@getpara/evm-wallet-connectors": "2.0.0-alpha.31",
21
- "@getpara/solana-wallet-connectors": "2.0.0-alpha.31",
19
+ "@getpara/cosmos-wallet-connectors": "2.0.0-alpha.32",
20
+ "@getpara/evm-wallet-connectors": "2.0.0-alpha.32",
21
+ "@getpara/solana-wallet-connectors": "2.0.0-alpha.32",
22
22
  "@tanstack/react-query": "^5.74.0",
23
23
  "@testing-library/dom": "^10.4.0",
24
24
  "@testing-library/react": "^16.3.0",
@@ -38,7 +38,7 @@
38
38
  "package.json",
39
39
  "styles.css"
40
40
  ],
41
- "gitHead": "54aac22b2d0b4cc730ab7f2e82cdd8a96729b039",
41
+ "gitHead": "2c1a4e1ef169c177238c8b0358e84dc86f614614",
42
42
  "main": "dist/index.js",
43
43
  "peerDependencies": {
44
44
  "@getpara/cosmos-wallet-connectors": "^2.0.0-alpha.26",