From 1e173f0cc8c58bd29a2d2ad72e5d7747bd7b3441 Mon Sep 17 00:00:00 2001
From: Rob Knight <mail@robknight.org.uk>
Date: Thu, 26 Sep 2024 13:01:30 +0200
Subject: [PATCH] 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             |  7 +-
 apps/passport-client/build.ts                 |  5 +
 .../EmbeddedAddSubscription.tsx               | 99 -------------------
 .../EmbeddedGPCProofScreen.tsx                |  2 +
 .../EmbeddedScreens/EmbeddedScreen.tsx        | 12 +--
 .../screens/HomeScreen/HomeScreen.tsx         | 14 +++
 .../screens/ZappScreens/ZappScreen.tsx        | 36 +++++++
 apps/passport-client/pages/index.tsx          |  4 +-
 apps/passport-client/src/appConfig.ts         | 19 +++-
 apps/passport-client/src/embedded.ts          |  9 +-
 .../passport-client/src/zapp/useZappServer.ts | 25 ++++-
 examples/test-zapp/package.json               |  2 +-
 examples/test-zapp/src/apis/GPC.tsx           |  2 +-
 examples/test-zapp/src/apis/PODSection.tsx    |  4 +-
 .../test-zapp/src/hooks/useParcnetClient.tsx  | 26 ++++-
 turbo.json                                    |  1 +
 yarn.lock                                     | 21 ++--
 17 files changed, 142 insertions(+), 146 deletions(-)
 delete mode 100644 apps/passport-client/components/screens/EmbeddedScreens/EmbeddedAddSubscription.tsx
 create mode 100644 apps/passport-client/components/screens/ZappScreens/ZappScreen.tsx

diff --git a/apps/passport-client/.env.example b/apps/passport-client/.env.example
index 4b31eba68d..5576d0b7c3 100644
--- a/apps/passport-client/.env.example
+++ b/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"]'
\ No newline at end of file
+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=
diff --git a/apps/passport-client/build.ts b/apps/passport-client/build.ts
index 573c8c85c8..4f5ed65c09 100644
--- a/apps/passport-client/build.ts
+++ b/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)
+      }
     : {})
 };
 
diff --git a/apps/passport-client/components/screens/EmbeddedScreens/EmbeddedAddSubscription.tsx b/apps/passport-client/components/screens/EmbeddedScreens/EmbeddedAddSubscription.tsx
deleted file mode 100644
index c9db3fedd1..0000000000
--- a/apps/passport-client/components/screens/EmbeddedScreens/EmbeddedAddSubscription.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { Feed } from "@pcd/passport-interface";
-import { ReactNode, useEffect, useState } from "react";
-import { useSubscriptions } from "../../../src/appHooks";
-import { SubscriptionInfoRow } from "../AddSubscriptionScreen";
-
-enum FeedFetchStates {
-  Idle,
-  Fetching,
-  Fetched
-}
-
-type FeedFetch =
-  | {
-      state: FeedFetchStates.Idle;
-    }
-  | {
-      state: FeedFetchStates.Fetching;
-    }
-  | {
-      state: FeedFetchStates.Fetched;
-      success: true;
-      feeds: Feed[];
-      providerUrl: string;
-      providerName: string;
-    }
-  | {
-      state: FeedFetchStates.Fetched;
-      success: false;
-      error: string;
-    };
-
-export function EmbeddedAddSubscription({
-  feedUrl,
-  feedId
-}: {
-  feedUrl: string;
-  feedId: string;
-}): ReactNode {
-  const [feedFetch, setFeedFetch] = useState<FeedFetch>({
-    state: FeedFetchStates.Idle
-  });
-  const { value: subs } = useSubscriptions();
-  useEffect(() => {
-    if (feedFetch.state === FeedFetchStates.Fetching) {
-      return;
-    }
-
-    setFeedFetch({ state: FeedFetchStates.Fetching });
-
-    subs
-      .listFeeds(feedUrl)
-      .then((response) => {
-        setFeedFetch({
-          state: FeedFetchStates.Fetched,
-          success: true,
-          feeds: response.feeds,
-          providerName: response.providerName,
-          providerUrl: response.providerUrl
-        });
-      })
-      .catch((e) => {
-        console.log(`error fetching subscription infos ${e}`);
-        setFeedFetch({
-          state: FeedFetchStates.Fetched,
-          success: false,
-          error:
-            "Unable to fetch subscriptions. Check that the URL is correct, or try again later."
-        });
-      });
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  if (feedFetch.state === FeedFetchStates.Idle) {
-    return <div>Fetching feeds...</div>;
-  } else if (feedFetch.state === FeedFetchStates.Fetching) {
-    return <div>Fetching feeds...</div>;
-  } else if (feedFetch.state === FeedFetchStates.Fetched && feedFetch.success) {
-    const feed = feedFetch.feeds.find((f) => f.id === feedId);
-    if (!feed) {
-      return <div>Feed not found</div>;
-    }
-    return (
-      <SubscriptionInfoRow
-        subscriptions={subs}
-        providerUrl={feedFetch.providerUrl}
-        providerName={feedFetch.providerName}
-        info={feed}
-        showErrors={false}
-        isDeepLink={false}
-        isExpanded={true}
-      />
-    );
-  } else if (
-    feedFetch.state === FeedFetchStates.Fetched &&
-    !feedFetch.success
-  ) {
-    return <div>{feedFetch.error}</div>;
-  }
-}
diff --git a/apps/passport-client/components/screens/EmbeddedScreens/EmbeddedGPCProofScreen.tsx b/apps/passport-client/components/screens/EmbeddedScreens/EmbeddedGPCProofScreen.tsx
index a491ae1690..183a921ab8 100644
--- a/apps/passport-client/components/screens/EmbeddedScreens/EmbeddedGPCProofScreen.tsx
+++ b/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]);
diff --git a/apps/passport-client/components/screens/EmbeddedScreens/EmbeddedScreen.tsx b/apps/passport-client/components/screens/EmbeddedScreens/EmbeddedScreen.tsx
index 58d4303fe7..7e9c484c31 100644
--- a/apps/passport-client/components/screens/EmbeddedScreens/EmbeddedScreen.tsx
+++ b/apps/passport-client/components/screens/EmbeddedScreens/EmbeddedScreen.tsx
@@ -6,7 +6,6 @@ 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";
 
 /**
@@ -14,7 +13,6 @@ import { EmbeddedGPCProofScreen } from "./EmbeddedGPCProofScreen";
  */
 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,
diff --git a/apps/passport-client/components/screens/HomeScreen/HomeScreen.tsx b/apps/passport-client/components/screens/HomeScreen/HomeScreen.tsx
index 1a9088755f..9329220d08 100644
--- a/apps/passport-client/components/screens/HomeScreen/HomeScreen.tsx
+++ b/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 />}
diff --git a/apps/passport-client/components/screens/ZappScreens/ZappScreen.tsx b/apps/passport-client/components/screens/ZappScreens/ZappScreen.tsx
new file mode 100644
index 0000000000..bc8967b3f7
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/passport-client/pages/index.tsx b/apps/passport-client/pages/index.tsx
index 0214ecb497..6a237ee888 100644
--- a/apps/passport-client/pages/index.tsx
+++ b/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;
diff --git a/apps/passport-client/src/appConfig.ts b/apps/passport-client/src/appConfig.ts
index 7431dfe1a6..80767382fe 100644
--- a/apps/passport-client/src/appConfig.ts
+++ b/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));
diff --git a/apps/passport-client/src/embedded.ts b/apps/passport-client/src/embedded.ts
index d61934bfcd..326cecf689 100644
--- a/apps/passport-client/src/embedded.ts
+++ b/apps/passport-client/src/embedded.ts
@@ -5,7 +5,6 @@ import { SerializedPCD } from "@pcd/pcd-types";
 
 export enum EmbeddedScreenType {
   EmbeddedGetRequest,
-  EmbeddedAddSubscription,
   EmbeddedGPCProof
 }
 
@@ -15,12 +14,6 @@ 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;
@@ -28,5 +21,5 @@ export interface EmbeddedGPCProof {
 }
 
 export interface EmbeddedScreenState {
-  screen?: EmbeddedGetRequest | EmbeddedAddSubscription | EmbeddedGPCProof;
+  screen?: EmbeddedGetRequest | EmbeddedGPCProof;
 }
diff --git a/apps/passport-client/src/zapp/useZappServer.ts b/apps/passport-client/src/zapp/useZappServer.ts
index 9d3ff7794c..46ea9b26ed 100644
--- a/apps/passport-client/src/zapp/useZappServer.ts
+++ b/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]);
 }
diff --git a/examples/test-zapp/package.json b/examples/test-zapp/package.json
index faf72c429a..ebc8da6874 100644
--- a/examples/test-zapp/package.json
+++ b/examples/test-zapp/package.json
@@ -13,7 +13,7 @@
     "@parcnet-js/podspec": "^0.0.3",
     "@parcnet-js/ticket-spec": "^0.0.2",
     "@parcnet-js/client-rpc": "^0.0.4",
-    "@parcnet-js/app-connector": "^0.0.6",
+    "@parcnet-js/app-connector": "^0.0.7",
     "@pcd/pod": "0.1.7",
     "json-bigint": "^1.0.0",
     "lodash": "^4.17.21",
diff --git a/examples/test-zapp/src/apis/GPC.tsx b/examples/test-zapp/src/apis/GPC.tsx
index 137728099f..4fa4a8fe85 100644
--- a/examples/test-zapp/src/apis/GPC.tsx
+++ b/examples/test-zapp/src/apis/GPC.tsx
@@ -308,7 +308,7 @@ const gpcProof = await z.gpc.prove(request.schema);
                 console.log(e);
               }
             }}
-            label="Get GPC Proof"
+            label="Get Ticket Proof"
           />
           {proveResult && (
             <pre className="whitespace-pre-wrap">
diff --git a/examples/test-zapp/src/apis/PODSection.tsx b/examples/test-zapp/src/apis/PODSection.tsx
index 30acd88121..7d339fafc9 100644
--- a/examples/test-zapp/src/apis/PODSection.tsx
+++ b/examples/test-zapp/src/apis/PODSection.tsx
@@ -33,7 +33,7 @@ export function PODSection(): ReactNode {
 }
 
 function QueryPODs({ z }: { z: ParcnetAPI }): ReactNode {
-  const [pods, setPODs] = useState<POD[]>([]);
+  const [pods, setPODs] = useState<POD[] | undefined>(undefined);
 
   return (
     <div>
@@ -79,7 +79,7 @@ const pods = await z.pod.query(q);
         }}
         label="Query PODs"
       />
-      {pods.length > 0 && (
+      {pods !== undefined && (
         <pre className="whitespace-pre-wrap">
           {JSONBig.stringify(
             pods.map((p) => ({
diff --git a/examples/test-zapp/src/hooks/useParcnetClient.tsx b/examples/test-zapp/src/hooks/useParcnetClient.tsx
index c79cdc0b6b..70e7f8bf70 100644
--- a/examples/test-zapp/src/hooks/useParcnetClient.tsx
+++ b/examples/test-zapp/src/hooks/useParcnetClient.tsx
@@ -1,5 +1,5 @@
 import type { ParcnetAPI, Zapp } from "@parcnet-js/app-connector";
-import { connect } from "@parcnet-js/app-connector";
+import { connect, connectToHost } from "@parcnet-js/app-connector";
 import type { ReactNode } from "react";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 
@@ -59,6 +59,7 @@ export function ParcnetIframeProvider({
   children: React.ReactNode;
 }): ReactNode {
   const ref = useRef<HTMLDivElement>(null);
+  const isMounted = useRef(false);
 
   const [value, setValue] = useState<ClientState>({
     state: ClientConnectionState.CONNECTING,
@@ -66,8 +67,22 @@ export function ParcnetIframeProvider({
   });
 
   useEffect(() => {
-    if (ref.current) {
-      void connect(zapp, ref.current, url).then((zupass) => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+      return;
+    }
+    if (window.parent === window.self) {
+      if (ref.current) {
+        void connect(zapp, ref.current, url).then((zupass) => {
+          setValue({
+            state: ClientConnectionState.CONNECTED,
+            z: zupass,
+            ref
+          });
+        });
+      }
+    } else {
+      void connectToHost(zapp).then((zupass) => {
         setValue({
           state: ClientConnectionState.CONNECTED,
           z: zupass,
@@ -75,6 +90,11 @@ export function ParcnetIframeProvider({
         });
       });
     }
+
+    return () => {
+      isMounted.current = false;
+    };
+
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
diff --git a/turbo.json b/turbo.json
index d3df0d26db..635ffaa2c7 100644
--- a/turbo.json
+++ b/turbo.json
@@ -116,6 +116,7 @@
     "ZAPP_RESTRICT_ORIGINS",
     "ZAPP_ALLOWED_SIGNER_ORIGINS",
     "CLIENT_URL",
+    "EMBEDDED_ZAPPS",
     "//// add env vars above this line ////"
   ],
   "globalEnv": [
diff --git a/yarn.lock b/yarn.lock
index ab5f0b331a..f7e1edc906 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5059,18 +5059,17 @@
     browser-or-node "^2.0.0"
     cross-fetch "^3.0.6"
 
-"@parcnet-js/app-connector@^0.0.6":
-  version "0.0.6"
-  resolved "https://registry.yarnpkg.com/@parcnet-js/app-connector/-/app-connector-0.0.6.tgz#11f1d9b0cd474dfa52f84de2e03d430939f70b8f"
-  integrity sha512-xpgHzOZ5lUk0ZzkZ4jxxRXcBtsdvGGT+Htn8PFVRrGZIF0j5O5dL/xSR0gJJbWLRoXGx6oNu4qmX5c2udut40A==
+"@parcnet-js/app-connector@^0.0.7":
+  version "0.0.7"
+  resolved "https://registry.yarnpkg.com/@parcnet-js/app-connector/-/app-connector-0.0.7.tgz#15cb93b55c206a5aa4697bdeb3cab5d2d40f8bfd"
+  integrity sha512-nmw5gE700JsFR01ErkzUGbsE81Z+bKLMapRlw4JjptXmOLMR+o1e3eafNc9CA8M4wHJ2M6Ik2LTh1VHaOK9j0A==
   dependencies:
     "@brenoroosevelt/toast" "^2.0.3"
     "@parcnet-js/client-rpc" "0.0.4"
     "@parcnet-js/podspec" "0.0.3"
     "@pcd/gpc" "^0.0.8"
     "@pcd/pod" "^0.1.7"
-    eventemitter3 "^5.0.1"
-    json-bigint "^1.0.0"
+    nanoevents "^9.0.0"
     valibot "^0.42.0"
 
 "@parcnet-js/client-helpers@^0.0.5":
@@ -12266,11 +12265,6 @@ eventemitter3@^4.0.4:
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
 
-eventemitter3@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-5.0.1.tgz#53f5ffd0a492ac800721bb42c66b841de96423c4"
-  integrity sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==
-
 events@^3.0.0, events@^3.2.0, events@^3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
@@ -16695,6 +16689,11 @@ nanoclone@^0.2.1:
   resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
   integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
 
+nanoevents@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/nanoevents/-/nanoevents-9.0.0.tgz#c44fa7dde1615ac092023d5c881a3ee0b0a8c8fd"
+  integrity sha512-X8pU7IOpgKXVLPxYUI55ymXc8XuBE+uypfEyEFBtHkD1EX9KavYTVc+vXZHFyHKzA1TaZoVDqklLdQBBrxIuAw==
+
 nanoid@3.3.3:
   version "3.3.3"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"