Embedded Zapps in Zupass

apps/passport-client/.env.example

@@ -46,4 +46,9 @@ GPC_ARTIFACTS_CONFIG_OVERRIDE=
 # If Zapp POD signing is to be restricted, set this to "true".
 ZAPP_RESTRICT_ORIGINS=true
 # If Zapp POD signing is to be restricted, set this to the allowed origins as a JSON-stringified array.
-ZAPP_ALLOWED_SIGNER_ORIGINS='["http://example.com","http://localhost:3200"]'
+ZAPP_ALLOWED_SIGNER_ORIGINS='["http://example.com","http://localhost:3200"]'
+
+# To configure Zapps, set this to a JSON object with folder names as keys and URLs as values.
+# These will appear as folders in Zupass.
+#EMBEDDED_ZAPPS={"Pondcrypto": "http://localhost:3200", "Meerkat": "http://localhost:3201"}
+EMBEDDED_ZAPPS=

apps/passport-client/build.ts

@@ -78,6 +78,11 @@ const define = {
           process.env.ZAPP_ALLOWED_SIGNER_ORIGINS
         )
       }
+    : {}),
+  ...(process.env.EMBEDDED_ZAPPS !== undefined
+    ? {
+        "process.env.EMBEDDED_ZAPPS": JSON.stringify(process.env.EMBEDDED_ZAPPS)
+      }
     : {})
 };
 

apps/passport-client/components/screens/EmbeddedScreens/EmbeddedGPCProofScreen.tsx

@@ -9,6 +9,7 @@ import { v3tov4Identity } from "@pcd/semaphore-identity-pcd";
 import { Fragment, ReactNode, useMemo, useState } from "react";
 import styled from "styled-components";
 import { useIdentityV3, usePCDsInFolder } from "../../../src/appHooks";
+import { useSyncE2EEStorage } from "../../../src/useSyncE2EEStorage";
 import { ZAPP_POD_SPECIAL_FOLDER_NAME } from "../../../src/zapp/ZappServer";
 import { H2 } from "../../core";
 import { AppContainer } from "../../shared/AppContainer";
@@ -21,6 +22,7 @@ export function EmbeddedGPCProofScreen({
   proofRequestSchema: PodspecProofRequest;
   callback: (result: ProveResult) => void;
 }): ReactNode {
+  useSyncE2EEStorage();
   const prs = useMemo(() => {
     return p.proofRequest(proofRequestSchema);
   }, [proofRequestSchema]);

apps/passport-client/components/screens/EmbeddedScreens/EmbeddedScreen.tsx

@@ -6,15 +6,13 @@ import { useEmbeddedScreenState } from "../../../src/appHooks";
 import { EmbeddedScreenType } from "../../../src/embedded";
 import { useSyncE2EEStorage } from "../../../src/useSyncE2EEStorage";
 import { GenericProveScreen } from "../ProveScreen/GenericProveScreen";
-import { EmbeddedAddSubscription } from "./EmbeddedAddSubscription";
 import { EmbeddedGPCProofScreen } from "./EmbeddedGPCProofScreen";
 
 /**
  * EmbeddedScreen is used to control the UI when embedded in an iframe.
  */
 export function EmbeddedScreen(): ReactNode {
   const embeddedScreen = useEmbeddedScreenState();
-  useSyncE2EEStorage();
   if (!embeddedScreen) {
     return null;
   }
@@ -25,15 +23,6 @@ export function EmbeddedScreen(): ReactNode {
         callback={embeddedScreen.screen.callback}
       />
     );
-  } else if (
-    embeddedScreen.screen?.type === EmbeddedScreenType.EmbeddedAddSubscription
-  ) {
-    return (
-      <EmbeddedAddSubscription
-        feedUrl={embeddedScreen.screen.feedUrl}
-        feedId={embeddedScreen.screen.feedId}
-      />
-    );
   } else if (
     embeddedScreen.screen?.type === EmbeddedScreenType.EmbeddedGPCProof
   ) {
@@ -56,6 +45,7 @@ function EmbeddedGetRequest({
   request: PCDGetRequest;
   callback: (serialized: SerializedPCD) => void;
 }): ReactNode {
+  useSyncE2EEStorage();
   const onProve = useCallback(
     (
       pcd: PCD,

apps/passport-client/components/screens/HomeScreen/HomeScreen.tsx

@@ -13,6 +13,7 @@ import React, {
 } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import styled, { CSSProperties } from "styled-components";
+import { appConfig } from "../../../src/appConfig";
 import {
   useDispatch,
   useFolders,
@@ -38,6 +39,7 @@ import { EdgeCityHome } from "../EdgeCityScreens/EdgeCityHome";
 import { FrogCryptoHomeSection } from "../FrogScreens/FrogCryptoHomeSection";
 import { FrogFolder } from "../FrogScreens/FrogFolder";
 import { ProtocolWorldsHome } from "../ProtocolWorldsScreens/ProtocolWorldsHome";
+import { ZappScreen } from "../ZappScreens/ZappScreen";
 import {
   FolderCard,
   FolderDetails,
@@ -127,6 +129,8 @@ export function HomeScreenImpl(): JSX.Element | null {
   const isFrogCrypto = isFrogCryptoFolder(browsingFolder);
   const isEdgeCity = isEdgeCityFolder(browsingFolder);
   const isProtocolWorlds = isProtocolWorldsFolder(browsingFolder);
+  const isZappFolder = !!appConfig.embeddedZapps[browsingFolder];
+
   const shouldShowFrogCrypto = useMemo(() => {
     const folders = pcdCollection.value.getAllFolderNames();
     const goodFolders = [
@@ -211,6 +215,14 @@ export function HomeScreenImpl(): JSX.Element | null {
                   onFolderClick={onFolderClick}
                 />
               )}
+              {isRoot &&
+                Object.keys(appConfig.embeddedZapps).map((folder) => (
+                  <FolderCard
+                    key={folder}
+                    onFolderClick={onFolderClick}
+                    folder={folder}
+                  />
+                ))}
             </FolderExplorerContainer>
           )}
 
@@ -220,6 +232,8 @@ export function HomeScreenImpl(): JSX.Element | null {
             <ProtocolWorldsHome />
           ) : isEdgeCity ? (
             <EdgeCityHome />
+          ) : isZappFolder ? (
+            <ZappScreen url={appConfig.embeddedZapps[browsingFolder]} />
           ) : (
             <>
               {!(foldersInFolder.length === 0 && isRoot) && <Separator />}

apps/passport-client/components/screens/ZappScreens/ZappScreen.tsx

@@ -0,0 +1,36 @@
+import { ReactNode } from "react";
+import { useDispatch, useEmbeddedScreenState } from "../../../src/appHooks";
+import { ListenMode, useZappServer } from "../../../src/zapp/useZappServer";
+import { AdhocModal } from "../../modals/AdhocModal";
+import { EmbeddedScreen } from "../EmbeddedScreens/EmbeddedScreen";
+
+export function ZappScreen({ url }: { url: string }): ReactNode {
+  return (
+    <>
+      <ZappModal />
+      <iframe
+        style={{ width: "100%", height: "100%", borderRadius: "10px" }}
+        src={url}
+        sandbox="allow-downloads allow-same-origin allow-scripts allow-popups allow-modals allow-forms allow-storage-access-by-user-activation allow-popups-to-escape-sandbox"
+      />
+    </>
+  );
+}
+
+function ZappModal(): ReactNode {
+  useZappServer(ListenMode.LISTEN_IF_NOT_EMBEDDED);
+  const embeddedScreen = useEmbeddedScreenState();
+  const dispatch = useDispatch();
+  return (
+    <AdhocModal
+      open={embeddedScreen?.screen !== undefined}
+      onClose={() => {
+        dispatch({
+          type: "hide-embedded-screen"
+        });
+      }}
+    >
+      <EmbeddedScreen />
+    </AdhocModal>
+  );
+}

apps/passport-client/pages/index.tsx

@@ -62,11 +62,11 @@ import { Emitter } from "../src/emitter";
 import { loadInitialState } from "../src/loadInitialState";
 import { registerServiceWorker } from "../src/registerServiceWorker";
 import { AppState, StateEmitter } from "../src/state";
-import { useZappServer } from "../src/zapp/useZappServer";
+import { ListenMode, useZappServer } from "../src/zapp/useZappServer";
 
 function App(): JSX.Element {
   useBackgroundJobs();
-  useZappServer();
+  useZappServer(ListenMode.LISTEN_IF_EMBEDDED);
   const state = useStateContext().getState();
 
   const hasStack = !!state.error?.stack;

apps/passport-client/src/appConfig.ts

@@ -19,6 +19,8 @@ interface AppConfig {
   zappRestrictOrigins: boolean;
   // origins that are allowed to sign PODs
   zappAllowedSignerOrigins: string[];
+  // folder name -> zapp URL
+  embeddedZapps: Record<string, string>;
 }
 
 if (
@@ -49,9 +51,6 @@ if (
 let zappAllowedSignerOrigins: string[];
 
 try {
-  console.log(
-    "ZAPP_ALLOWED_SIGNER_ORIGINS: " + process.env.ZAPP_ALLOWED_SIGNER_ORIGINS
-  );
   zappAllowedSignerOrigins = process.env.ZAPP_ALLOWED_SIGNER_ORIGINS
     ? JSON.parse(process.env.ZAPP_ALLOWED_SIGNER_ORIGINS)
     : [];
@@ -63,6 +62,17 @@ try {
   zappAllowedSignerOrigins = [];
 }
 
+let embeddedZapps: Record<string, string> = {};
+
+try {
+  embeddedZapps = process.env.EMBEDDED_ZAPPS
+    ? JSON.parse(process.env.EMBEDDED_ZAPPS)
+    : {};
+} catch (e) {
+  console.error("Failed to parse EMBEDDED_ZAPPS", e);
+  embeddedZapps = {};
+}
+
 export const appConfig: AppConfig = {
   devMode: process.env.NODE_ENV !== "production",
   zupassServer: process.env.PASSPORT_SERVER_URL as string,
@@ -72,7 +82,8 @@ export const appConfig: AppConfig = {
   rollbarEnvName: process.env.ROLLBAR_ENV_NAME,
   strichLicenseKey: process.env.STRICH_LICENSE_KEY,
   zappRestrictOrigins: process.env.ZAPP_RESTRICT_ORIGINS === "true",
-  zappAllowedSignerOrigins: zappAllowedSignerOrigins
+  zappAllowedSignerOrigins: zappAllowedSignerOrigins,
+  embeddedZapps: embeddedZapps
 };
 
 console.log("App Config: " + JSON.stringify(appConfig));

apps/passport-client/src/embedded.ts

@@ -5,7 +5,6 @@ import { SerializedPCD } from "@pcd/pcd-types";
 
 export enum EmbeddedScreenType {
   EmbeddedGetRequest,
-  EmbeddedAddSubscription,
   EmbeddedGPCProof
 }
 
@@ -15,18 +14,12 @@ export interface EmbeddedGetRequest {
   callback: (serialized: SerializedPCD) => void;
 }
 
-export interface EmbeddedAddSubscription {
-  type: EmbeddedScreenType.EmbeddedAddSubscription;
-  feedUrl: string;
-  feedId: string;
-}
-
 export interface EmbeddedGPCProof {
   type: EmbeddedScreenType.EmbeddedGPCProof;
   proofRequest: PodspecProofRequest;
   callback: (result: ProveResult) => void;
 }
 
 export interface EmbeddedScreenState {
-  screen?: EmbeddedGetRequest | EmbeddedAddSubscription | EmbeddedGPCProof;
+  screen?: EmbeddedGetRequest | EmbeddedGPCProof;
 }

apps/passport-client/src/zapp/useZappServer.ts

@@ -8,10 +8,27 @@ import { v4 as uuidv4 } from "uuid";
 import { useStateContext } from "../appHooks";
 import { ZupassRPCProcessor } from "./ZappServer";
 
-export function useZappServer(): void {
+export enum ListenMode {
+  LISTEN_IF_EMBEDDED,
+  LISTEN_IF_NOT_EMBEDDED
+}
+
+export function useZappServer(mode: ListenMode): void {
   const context = useStateContext();
 
   useEffect(() => {
+    if (
+      mode === ListenMode.LISTEN_IF_EMBEDDED &&
+      window.parent === window.self
+    ) {
+      return;
+    }
+    if (
+      mode === ListenMode.LISTEN_IF_NOT_EMBEDDED &&
+      window.parent !== window.self
+    ) {
+      return;
+    }
     (async (): Promise<void> => {
       const { zapp, advice, origin } = await listen();
 
@@ -89,10 +106,12 @@ export function useZappServer(): void {
 
         // @todo handle this with an action
         context.update({ embeddedScreen: undefined });
-        window.location.hash = "embedded";
+        if (window.parent !== window.self) {
+          window.location.hash = "embedded";
+        }
 
         advice.ready(server);
       }
     })();
-  }, [context]);
+  }, [context, mode]);
 }