Embedded Zapps in Zupass (#1899)

This adds functionality for Zapps to be embedded in Zupass.

This can be enabled by configuring the `EMBEDDED_ZAPPS` environment
variable for `passport-client`. This is a stringified JavaScript object,
of the form:
```json
{ "Zapp name": "http://zapp-url.com" }
```

A folder will appear in Zupass using the given name, and clicking on the
folder will take the user to the Zapp.

Zapps will require some minimal changes to be able to support embedding,
which are shown in the `test-zapp` example code.

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]);
 }