zh-web-sdk 2.1.4 → 2.2.0

package/dist/styles.d.ts

@@ -9,7 +9,6 @@ export declare const containerMediaStyles: {
     [id: string]: CSSProperties;
 };
 export declare const appWrapperStyle: CSSProperties;
-export declare const height: CSSProperties;
 export declare const appWrapperHiddenStyle: CSSProperties;
 export declare const modalStyle: CSSProperties;
 export declare const iframeWrapperStyle: CSSProperties;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zh-web-sdk",
-  "version": "2.1.4",
+  "version": "2.2.0",
   "private": false,
   "description": "ZeroHash Web SDK",
   "homepage": "https://github.com/seedcx/zh-web-sdk",

package/src/iframe-container/AppContainer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from "react";
-import { connect } from "react-redux";
+import { connect, useSelector } from "react-redux";
 
 import {
   appWrapperStyle,
@@ -11,15 +11,9 @@ import {
   modalStyle,
   screenSizes,
   appWrapperHiddenStyle,
-  height
 } from "../styles";
-import {
-  MESSAGE_TYPE_SEND_JWT_TOKEN_ACH_DEPOSITS,
-  MESSAGE_TYPE_SEND_JWT_TOKEN_ONBOARDING,
-  MESSAGE_TYPE_SEND_JWT_TOKEN_WITHDRAWALS,
-} from "./constants";
 import { closeModal } from "../redux/actions";
-import { AppIdentifier } from "../types";
+import { AppIdentifier, appIdentifierToActionPrefixMap } from "../types";
 
 interface AppContainerProps {
   isAppActive?: boolean;
@@ -60,12 +54,14 @@ const AppContainer = ({
   isAppLoaded,
   jwt,
   zeroHashAppURL,
-  appIdentifier,
+  appIdentifier
 }: AppContainerProps) => {
   const title = mapAppToTitle[appIdentifier];
   const hasJwt = !!jwt;
   const [container, setContainerStyle] = useState(containerStyle);
 
+  const allAppsState = useSelector(state => state as AppContainerMappedProps);
+
   /**
    * setContainer sets the CSS styles based on the current matching media queries
    */
@@ -88,39 +84,21 @@ const AppContainer = ({
       hasJwt &&
       iRef.current?.contentWindow
     ) {
-      switch (appIdentifier) {
-        case AppIdentifier.CRYPTO_WITHDRAWALS:
-          iRef.current.contentWindow.postMessage(
-            {
-              type: MESSAGE_TYPE_SEND_JWT_TOKEN_WITHDRAWALS,
-              cryptoWithdrawalsJWT: jwt,
-            },
-            zeroHashAppURL
-          );
-          break;
-        case AppIdentifier.ONBOARDING:
-          iRef.current.contentWindow.postMessage(
-            {
-              type: MESSAGE_TYPE_SEND_JWT_TOKEN_ONBOARDING,
-              userOnboardingJWT: jwt,
-            },
-            zeroHashAppURL
-          );
-          break;
-          case AppIdentifier.ACH_DEPOSITS:
-            iRef.current.contentWindow.postMessage(
-              {
-                type: MESSAGE_TYPE_SEND_JWT_TOKEN_ACH_DEPOSITS,
-                achDepositsJWT: jwt,
-              },
-              zeroHashAppURL
-            );
-            break;
-        default:
-          break;
-      }
+
+      // This loops all registered apps and sends their JWT tokens.
+      Object.keys(allAppsState).forEach((key: string) => {
+        if (!allAppsState[key as AppIdentifier].jwt) return;
+
+        iRef.current?.contentWindow?.postMessage(
+          {
+            type: `${appIdentifierToActionPrefixMap.get(key as AppIdentifier)}SEND_JWT_TOKEN`,
+            jwt: allAppsState[key as AppIdentifier].jwt,
+          },
+          zeroHashAppURL
+        );
+      })
     }
-  }, [appIdentifier, hasJwt, isAppLoaded, jwt, zeroHashAppURL]);
+  }, [appIdentifier, hasJwt, isAppLoaded, jwt, zeroHashAppURL, allAppsState]);
 
   useEffect(() => {
     // set the styles when the screen size changes
@@ -149,7 +127,6 @@ const AppContainer = ({
     <div
       style={isAppActive ? {
         ...appWrapperStyle,
-        ...height
       } : appWrapperHiddenStyle}
       onClick={() => closeModal(appIdentifier)}
     >

package/src/styles.ts

@@ -48,15 +48,12 @@ export const appWrapperStyle: CSSProperties = {
     alignItems: "center",
     flexDirection: "column",
     width: "100vw",
-    height: "100vh",
+    height: CSS.supports("height: 100dvh") ? "100dvh" : window.innerHeight + "px",
+    maxHeight: window.innerHeight + "px",
     background: "rgba(0,0,0,0.5)",
     cursor: "pointer",
 }
 
-export const height: CSSProperties = {
-    height: "100dvh",
-}
-
 export const appWrapperHiddenStyle: CSSProperties = {
     display: "none",
     width: 0,

package/dist/iframe-container/constants.d.ts

@@ -1,3 +0,0 @@
-export declare const MESSAGE_TYPE_SEND_JWT_TOKEN_ONBOARDING: string;
-export declare const MESSAGE_TYPE_SEND_JWT_TOKEN_WITHDRAWALS: string;
-export declare const MESSAGE_TYPE_SEND_JWT_TOKEN_ACH_DEPOSITS: string;

package/src/iframe-container/constants.ts

@@ -1,13 +0,0 @@
-import { AppIdentifier } from "../types"
-import { appIdentifierToActionPrefixMap } from "../types"
-
-const ONBOARDING_MESSAGE_TYPE_PREFIX = appIdentifierToActionPrefixMap.get(AppIdentifier.ONBOARDING)
-const CRYPTO_WITHDRAWALS_MESSAGE_TYPE_PREFIX = appIdentifierToActionPrefixMap.get(AppIdentifier.CRYPTO_WITHDRAWALS)
-const ACH_DEPOSITS_MESSAGE_TYPE_PREFIX = appIdentifierToActionPrefixMap.get(AppIdentifier.ACH_DEPOSITS)
-
-const SEND_JWT_TOKEN = "SEND_JWT_TOKEN"
-
-
-export const MESSAGE_TYPE_SEND_JWT_TOKEN_ONBOARDING = ONBOARDING_MESSAGE_TYPE_PREFIX + SEND_JWT_TOKEN
-export const MESSAGE_TYPE_SEND_JWT_TOKEN_WITHDRAWALS = CRYPTO_WITHDRAWALS_MESSAGE_TYPE_PREFIX + SEND_JWT_TOKEN
-export const MESSAGE_TYPE_SEND_JWT_TOKEN_ACH_DEPOSITS = ACH_DEPOSITS_MESSAGE_TYPE_PREFIX + SEND_JWT_TOKEN