Add minting

apps/consumer-client/src/pages/examples/add-pcd.tsx

@@ -14,6 +14,7 @@ import {
 import { GPCPCDArgs, GPCPCDPackage } from "@pcd/gpc-pcd";
 import {
   constructZupassPcdAddRequestUrl,
+  constructZupassPcdMintRequestUrl,
   constructZupassPcdProveAndAddRequestUrl,
   openSignedZuzaluSignInPopup,
   useZupassPopupMessages
@@ -91,6 +92,9 @@ export default function Page(): JSX.Element {
     _setPODPrivateKey2(key);
     setPODPublicKey2(encodePublicKey(derivePublicKey(decodePrivateKey(key))));
   };
+  const [podMintUrl, setPODMintUrl] = useState(
+    "http://localhost:4000/api/mintPOD"
+  );
   const [gpcConfig, setGPCConfig] = useState(EXAMPLE_GPC_CONFIG);
   const [membershipLists, setMembershipLists] = useState(
     EXAMPLE_MEMBERSHIP_LISTS
@@ -234,7 +238,7 @@ export default function Page(): JSX.Element {
         </label>
         <br />
         <br />
-        Card POD content to sign: <br />
+        Card POD content to sign and/or mint: <br />
         <br />
         <textarea
           cols={45}
@@ -269,6 +273,19 @@ export default function Page(): JSX.Element {
           add a new POD to Zupass (redirect)
         </button>
         <br />
+        <button
+          onClick={() =>
+            mintPODPCD(
+              podMintUrl,
+              podContent2,
+              podPrivateKey2,
+              podFolder2.length > 0 ? podFolder2 : undefined
+            )
+          }
+        >
+          mint a new POD in Zupass (popup)
+        </button>
+        <br />
         <label>
           Private key to sign POD with:
           <input
@@ -297,6 +314,19 @@ export default function Page(): JSX.Element {
           />
         </label>
         <br />
+        <label>
+          Mint URL:
+          <input
+            type="text"
+            value={podMintUrl}
+            placeholder="Enter mint URL..."
+            style={{ marginLeft: "16px" }}
+            onChange={(e): void => {
+              setPODMintUrl(e.target.value);
+            }}
+          />
+        </label>
+        <br />
         <br />
         GPC Proof config: <br />
         <textarea
@@ -734,6 +764,37 @@ async function addPODPCD(
   }
 }
 
+async function mintPODPCD(
+  mintUrl: string,
+  podContent: string,
+  podPrivateKey: string,
+  podFolder: string | undefined,
+  redirectToFolder?: boolean
+): Promise<void> {
+  const newPOD = new PODPCD(
+    uuid(),
+    POD.sign(podEntriesFromSimplifiedJSON(podContent), podPrivateKey)
+  );
+
+  const serializedPODPCD = await PODPCDPackage.serialize(newPOD);
+
+  const url = constructZupassPcdMintRequestUrl(
+    ZUPASS_URL,
+    mintUrl,
+    window.location.origin + "#/popup",
+    serializedPODPCD,
+    podFolder,
+    false,
+    redirectToFolder
+  );
+
+  if (redirectToFolder) {
+    open(url);
+  } else {
+    sendZupassRequest(url);
+  }
+}
+
 async function addGPCPCD(
   podContent: string,
   podContent2: string,

apps/passport-client/components/screens/AddScreen/JustAddScreen.tsx

@@ -8,7 +8,13 @@ import { getErrorMessage } from "@pcd/util";
 import { useCallback, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import { appConfig } from "../../../src/appConfig";
-import { useDispatch, useIsSyncSettled, useSelf } from "../../../src/appHooks";
+import {
+  useCredentialManager,
+  useDispatch,
+  useIsSyncSettled,
+  useSelf
+} from "../../../src/appHooks";
+import { mintPODPCD } from "../../../src/mintUtils";
 import {
   clearAllPendingRequests,
   pendingRequestKeys
@@ -40,8 +46,14 @@ export function JustAddScreen({
   const dispatch = useDispatch();
   const [added, setAdded] = useState(false);
   const { error, pcd } = useDeserialized(request.pcd);
+  console.log("Error: ", error);
   const syncSettled = useIsSyncSettled();
   const self = useSelf();
+  const isMintable =
+    request.pcd.type === "pod-pcd" && request.mintUrl !== undefined;
+  const semaphoreSignaturePCD = useCredentialManager().requestCredential({
+    signatureType: "sempahore-signature-pcd"
+  });
   const isProtocolWorlds = request.folder === ProtocolWorldsFolderName;
   const [ref, setRef] = useState<HTMLElement | null>(null);
   const confetti = useTensionConfetti(ref);
@@ -59,12 +71,23 @@ export function JustAddScreen({
       }=${encodeURIComponent(stringifiedRequest)}`;
       return;
     }
+
     try {
       // This is mostly for typechecking and should never throw
       // because <AddScreen /> checks if the user is logged in
+
+      // If the (POD)PCD is mintable, mint it first.
+      const maybeSerialisedMintedPCD = isMintable
+        ? await mintPODPCD(
+            request.mintUrl as string,
+            request.pcd,
+            await semaphoreSignaturePCD
+          )
+        : request.pcd;
+
       await dispatch({
         type: "add-pcds",
-        pcds: [request.pcd],
+        pcds: [maybeSerialisedMintedPCD],
         folder: request.folder
       });
       if (isProtocolWorlds) {
@@ -80,7 +103,16 @@ export function JustAddScreen({
     } catch (e) {
       await err(dispatch, "Error Adding PCD", getErrorMessage(e));
     }
-  }, [confetti, dispatch, self, pcd, isProtocolWorlds, request]);
+  }, [
+    confetti,
+    dispatch,
+    self,
+    pcd,
+    isMintable,
+    isProtocolWorlds,
+    request,
+    semaphoreSignaturePCD
+  ]);
 
   useEffect(() => {
     if (autoAdd && !hasAutoAdded.current) {
@@ -115,7 +147,7 @@ export function JustAddScreen({
         {error && JSON.stringify(error)}
         <Spacer h={16} />
         <Button onClick={onAddClick}>
-          {isProtocolWorlds ? "Collect" : "Add"}
+          {isProtocolWorlds ? "Collect" : isMintable ? "Mint" : "Add"}
         </Button>
       </>
     );

packages/lib/passport-interface/src/PassportInterface.ts

@@ -53,6 +53,7 @@ export interface PCDGetWithoutProvingRequest extends PCDRequest {
 export interface PCDAddRequest extends PCDRequest {
   type: PCDRequestType.Add;
   pcd: SerializedPCD;
+  mintUrl?: string;
   folder?: string;
   redirectToFolder?: boolean;
 }
@@ -113,7 +114,29 @@ export function constructZupassPcdAddRequestUrl(
 ): string {
   const req: PCDAddRequest = {
     type: PCDRequestType.Add,
-    returnUrl: returnUrl,
+    returnUrl,
+    pcd,
+    folder,
+    postMessage,
+    redirectToFolder
+  };
+  const eqReq = encodeURIComponent(JSON.stringify(req));
+  return `${zupassClientUrl}#/add?request=${eqReq}`;
+}
+
+export function constructZupassPcdMintRequestUrl(
+  zupassClientUrl: string,
+  mintUrl: string,
+  returnUrl: string,
+  pcd: SerializedPCD,
+  folder?: string,
+  postMessage: boolean = false,
+  redirectToFolder?: boolean
+): string {
+  const req: PCDAddRequest = {
+    type: PCDRequestType.Add,
+    mintUrl,
+    returnUrl,
     pcd,
     folder,
     postMessage,