zh-web-sdk 2.16.1 → 3.0.0

package/src/iframe-container/AppContainer.tsx

@@ -1,495 +0,0 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { connect, useSelector } from "react-redux";
-import { Auth } from "@connect-xyz/auth-react";
-import { createAuthToFundCallbacks } from "../utils/auth-to-fund-mapper";
-
-import {
-  containerMediaStyles,
-  containerStyle,
-  minWidthMatcher,
-  screenSizes,
-  appWrapperStyle as defaultAppWrapperStyle,
-  modalStyle as defaultModalStyle,
-  iframeWrapperStyle as defaultIframeWrapperStyle,
-  iframeStyle as defaultIframeStyle,
-} from "../styles";
-import { closeModal } from "../redux/actions";
-import {
-  AppIdentifier,
-  appIdentifierToActionPrefixMap,
-  AuthSettings,
-  Filters,
-  IncomingMessageType,
-  OnboardingPage,
-  Page,
-} from "../types";
-import { useWindowSize } from "../hooks/use-window-size";
-import { isInsideWorldApp } from "../utils/world-app-utils";
-import {
-  PayCommandInput,
-  Tokens,
-  tokenToDecimals,
-} from "@worldcoin/minikit-js";
-import { useStyleUpdates } from "./hooks/use-style-updates";
-
-interface AppContainerProps {
-  isAppActive?: boolean;
-  isAppLoaded?: boolean;
-  jwt?: string;
-  zeroHashAppURL: string;
-  appIdentifier: AppIdentifier;
-  filters?: Filters;
-  navigate?: Page;
-  useAuth?: boolean;
-  authSettings?: AuthSettings;
-}
-
-interface AppContainerMappedProps {
-  [AppIdentifier.CRYPTO_WITHDRAWALS]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-  };
-  [AppIdentifier.ONBOARDING]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-    navigate?: OnboardingPage;
-  };
-  [AppIdentifier.FIAT_DEPOSITS]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-  };
-  [AppIdentifier.FIAT_WITHDRAWALS]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-  };
-  [AppIdentifier.CRYPTO_BUY]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-  };
-  [AppIdentifier.CRYPTO_SELL]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-  };
-  [AppIdentifier.CSP_CRYPTO_WITHDRAWALS]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-  };
-  [AppIdentifier.CSP_FIAT_WITHDRAWALS]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-  };
-  [AppIdentifier.CSP_CRYPTO_SELL]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-  };
-  [AppIdentifier.FUND]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-    useAuth?: boolean;
-    authSettings?: AuthSettings;
-  };
-  [AppIdentifier.PROFILE]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-  };
-  [AppIdentifier.CRYPTO_ACCOUNT_LINK]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-  };
-  [AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-  };
-  [AppIdentifier.PAYOUTS]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-  };
-  [AppIdentifier.PAY]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-  };
-  [AppIdentifier.FIAT_ACCOUNT_LINK]: {
-    isAppActive: boolean;
-    isAppLoaded: boolean;
-    jwt: string;
-    filters?: Filters;
-  };
-}
-
-const appLoadTime = Date.now();
-
-const mapAppToTitle = {
-  [AppIdentifier.ONBOARDING]: "Onboarding",
-  [AppIdentifier.CRYPTO_WITHDRAWALS]: "Crypto Withdrawals",
-  [AppIdentifier.FIAT_DEPOSITS]: "Fiat Deposits",
-  [AppIdentifier.FIAT_WITHDRAWALS]: "Fiat Withdrawals",
-  [AppIdentifier.CRYPTO_BUY]: "Crypto Buy",
-  [AppIdentifier.CRYPTO_SELL]: "Crypto Sell",
-  [AppIdentifier.CSP_CRYPTO_WITHDRAWALS]: "CBP Crypto Withdrawals",
-  [AppIdentifier.CSP_FIAT_WITHDRAWALS]: "CBP Fiat Withdrawals",
-  [AppIdentifier.CSP_CRYPTO_SELL]: "Crypto Sell",
-  [AppIdentifier.FUND]: "Fund",
-  [AppIdentifier.PROFILE]: "Profile",
-  [AppIdentifier.CRYPTO_ACCOUNT_LINK]: "Crypto Account Link",
-  [AppIdentifier.CRYPTO_ACCOUNT_LINK_PAYOUTS]: "Crypto Account Link Payouts",
-  [AppIdentifier.PAYOUTS]: "Payouts",
-  [AppIdentifier.PAY]: "Pay",
-  [AppIdentifier.FIAT_ACCOUNT_LINK]: "Fiat Account Link",
-};
-
-const AppContainer = ({
-  isAppActive,
-  isAppLoaded,
-  jwt,
-  zeroHashAppURL,
-  appIdentifier,
-  navigate,
-  useAuth,
-  authSettings,
-}: AppContainerProps) => {
-  const title = mapAppToTitle[appIdentifier];
-  const hasJwt = !!jwt;
-  const [container, setContainerStyle] = useState(containerStyle);
-  const allAppsState = useSelector((state) => state as AppContainerMappedProps);
-  const { height } = useWindowSize();
-
-  // Styles received from iframe via postMessage
-  const { styles, stylesLoaded, handleStyleConfig } = useStyleUpdates(
-    zeroHashAppURL,
-    {
-      appWrapperStyle: defaultAppWrapperStyle,
-      modalStyle: defaultModalStyle,
-      iframeWrapperStyle: defaultIframeWrapperStyle,
-      iframeStyle: defaultIframeStyle,
-    },
-  );
-
-  // Determine environment from zeroHashAppURL
-  const authEnv =
-    zeroHashAppURL.includes("sandbox") || zeroHashAppURL.includes("cert")
-      ? "sandbox"
-      : "production";
-
-  /**
-   * setContainer sets the CSS styles based on the current matching media queries
-   */
-  const setContainer = () => {
-    const sizeId = minWidthMatcher();
-    const containerMediaStyle = containerMediaStyles[sizeId];
-    setContainerStyle({ ...containerStyle, ...containerMediaStyle });
-  };
-
-  const iRef: React.MutableRefObject<HTMLIFrameElement | null> =
-    useRef<HTMLIFrameElement | null>(null);
-  useEffect(() => {
-    // Send events to the iframe when Apps are ready
-    if (
-      zeroHashAppURL &&
-      isAppLoaded &&
-      hasJwt &&
-      iRef.current?.contentWindow
-    ) {
-      // This loops all registered apps and send events listed below.
-      Object.keys(allAppsState).forEach((key: string) => {
-        if (!allAppsState[key as AppIdentifier].jwt) return;
-
-        // Send JWT token
-        iRef.current?.contentWindow?.postMessage(
-          {
-            type: `${appIdentifierToActionPrefixMap.get(
-              key as AppIdentifier,
-            )}SEND_JWT_TOKEN`,
-            jwt: allAppsState[key as AppIdentifier].jwt,
-          },
-          zeroHashAppURL,
-        );
-
-        // If the zh-web-sdk is being run inside the WorldApp, we must send the WorldApp object
-        // to the iframe.
-        if (isInsideWorldApp()) {
-          iRef.current?.contentWindow?.postMessage(
-            { type: `WORLD_APP_OBJECT`, WorldApp: window.WorldApp },
-            zeroHashAppURL,
-          );
-        }
-
-        // Send filters
-        if (allAppsState[key as AppIdentifier].filters) {
-          iRef.current?.contentWindow?.postMessage(
-            {
-              type: `${appIdentifierToActionPrefixMap.get(
-                key as AppIdentifier,
-              )}SEND_FILTERS`,
-              filters: allAppsState[key as AppIdentifier].filters,
-            },
-            zeroHashAppURL,
-          );
-        }
-        // Send navigate to Onboarding App
-        if (appIdentifier === AppIdentifier.ONBOARDING && navigate) {
-          iRef.current?.contentWindow?.postMessage(
-            {
-              type: `${appIdentifierToActionPrefixMap.get(
-                AppIdentifier.ONBOARDING,
-              )}NAVIGATE`,
-              navigate,
-            },
-            zeroHashAppURL,
-          );
-        }
-      });
-    }
-  }, [
-    appIdentifier,
-    hasJwt,
-    isAppLoaded,
-    jwt,
-    zeroHashAppURL,
-    allAppsState,
-    navigate,
-  ]);
-
-  useEffect(() => {
-    // set the styles when the screen size changes
-    setContainer();
-    if (window) {
-      screenSizes.forEach(({ size }) => {
-        window
-          .matchMedia(`(min-width: ${size}px)`)
-          .addEventListener("change", setContainer);
-      });
-      return () =>
-        screenSizes.forEach(({ size }) => {
-          window
-            .matchMedia(`(min-width: ${size}px)`)
-            .removeEventListener("change", setContainer);
-        });
-    }
-  }, []);
-
-  /**
-   * Handles MiniKit pay command processing
-   */
-  const handleMiniKitPayCommand = useCallback(
-    async (event: MessageEvent) => {
-      const zhAppsURL = new URL(zeroHashAppURL);
-      iRef.current?.contentWindow?.postMessage(
-        {
-          type: "MINIKIT_PAY_COMMAND_RECEIVED",
-          payload: {
-            origin: event.origin,
-            zhAppsURLOrigin: zhAppsURL.origin,
-            data: event.data,
-          },
-        },
-        zeroHashAppURL,
-      );
-
-      if (!window.MiniKit) {
-        iRef.current?.contentWindow?.postMessage(
-          {
-            type: "MINIKIT_PAY_COMMAND_CANCELED",
-            payload: { reason: "window.Minikit not found" },
-          },
-          zeroHashAppURL,
-        );
-        return;
-      }
-
-      try {
-        if (event.data?.type === "MINIKIT_PAY_COMMAND") {
-          const payload = event.data.payload;
-          const minikitPayload: PayCommandInput = {
-            reference: payload.reference,
-            to: payload.to,
-            tokens: [
-              {
-                symbol: payload.token as Tokens,
-                token_amount: tokenToDecimals(
-                  Number(payload.amount),
-                  payload.token,
-                ).toString(),
-              },
-            ],
-            description: payload.description,
-          };
-          iRef.current?.contentWindow?.postMessage(
-            {
-              type: "MINIKIT_PAY_COMMAND_SUBMITTING_PAYMENT",
-              payload: { minikitPayload },
-            },
-            zeroHashAppURL,
-          );
-          const { finalPayload } =
-            await window.MiniKit.commandsAsync.pay(minikitPayload);
-
-          iRef.current?.contentWindow?.postMessage(
-            { type: "MINIKIT_PAY_COMMAND_RESULT", payload: { finalPayload } },
-            zeroHashAppURL,
-          );
-        }
-      } catch (error) {
-        iRef.current?.contentWindow?.postMessage(
-          {
-            type: "MINIKIT_PAY_COMMAND_ERROR",
-            payload: { error, status: "error" },
-          },
-          zeroHashAppURL,
-        );
-      }
-    },
-    [zeroHashAppURL],
-  );
-
-  /**
-   * Main postMessage event handler that routes messages to appropriate handlers
-   */
-  const postMessageEventHandler = useCallback(
-    async (event: MessageEvent) => {
-      // Handle style configuration messages
-      if (event.data.type === IncomingMessageType.StyleConfig) {
-        handleStyleConfig(event.data, event.origin);
-        return;
-      }
-
-      // Handle MiniKit pay commands
-      await handleMiniKitPayCommand(event);
-    },
-    [handleStyleConfig, handleMiniKitPayCommand],
-  );
-
-  useEffect(() => {
-    window.addEventListener("message", postMessageEventHandler);
-    return () => window.removeEventListener("message", postMessageEventHandler);
-  }, [postMessageEventHandler, zeroHashAppURL]);
-
-  const iframeURL = new URL(zeroHashAppURL);
-  iframeURL.searchParams.set("name", appLoadTime.toString());
-  if (window) {
-    iframeURL.searchParams.set("origin", window.location.origin);
-  }
-
-  if (!isAppActive) {
-    return <></>;
-  }
-  const { appWrapperStyle, modalStyle, iframeWrapperStyle, iframeStyle } =
-    styles;
-
-  // If useAuth is true, render Auth component instead of iframe
-  if (useAuth && hasJwt) {
-    const authCallbacks = createAuthToFundCallbacks(window.location.origin);
-    const theme = authSettings?.theme || "auto";
-
-    return (
-      <div
-        style={{
-          ...appWrapperStyle,
-          maxHeight: CSS.supports("height: 100dvh") ? "100dvh" : `${height}px`,
-          height: CSS.supports("height: 100dvh") ? "100dvh" : `${height}px`,
-        }}
-        onClick={() => closeModal(appIdentifier)}
-      >
-        <div
-          style={{
-            ...modalStyle,
-            ...container,
-            backgroundColor: "transparent",
-            zIndex: "9999",
-            opacity: stylesLoaded ? 1 : 0,
-          }}
-          onClick={(e) => e.stopPropagation()}
-        >
-          <div style={{ ...iframeWrapperStyle, ...iframeStyle }}>
-            <Auth jwt={jwt} env={authEnv} theme={theme} {...authCallbacks} />
-          </div>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      style={{
-        ...appWrapperStyle,
-        /**
-         * If browser does not support 100dvh, use height in pixels that is recalculated when
-         * the window is resized.
-         */
-        maxHeight: CSS.supports("height: 100dvh") ? "100dvh" : `${height}px`,
-        height: CSS.supports("height: 100dvh") ? "100dvh" : `${height}px`,
-      }}
-      onClick={() => closeModal(appIdentifier)}
-    >
-      <div
-        style={{ ...modalStyle, ...container, opacity: stylesLoaded ? 1 : 0 }}
-      >
-        <div style={iframeWrapperStyle}>
-          <iframe
-            ref={iRef}
-            title={title}
-            src={iframeURL.toString()}
-            allow="camera *; fullscreen *; accelerometer *; gyroscope *; magnetometer *; local-network-access *;"
-            sandbox="allow-downloads allow-forms allow-modals allow-popups allow-popups-to-escape-sandbox allow-same-origin allow-scripts allow-top-navigation"
-            style={iframeStyle}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const mapStateToProps = (
-  state: AppContainerMappedProps,
-  ownProps: AppContainerProps,
-) => {
-  return {
-    isAppActive: state[ownProps.appIdentifier].isAppActive,
-    isAppLoaded: state[ownProps.appIdentifier].isAppLoaded,
-    jwt: state[ownProps.appIdentifier].jwt,
-    filters: state[ownProps.appIdentifier].filters,
-    navigate:
-      ownProps.appIdentifier === AppIdentifier.ONBOARDING
-        ? state[ownProps.appIdentifier].navigate
-        : undefined,
-    useAuth:
-      ownProps.appIdentifier === AppIdentifier.FUND
-        ? state[ownProps.appIdentifier].useAuth
-        : undefined,
-    authSettings:
-      ownProps.appIdentifier === AppIdentifier.FUND
-        ? state[ownProps.appIdentifier].authSettings
-        : undefined,
-  };
-};
-
-export default connect(mapStateToProps)(AppContainer);