setup signing with ethereum and zupass only with proof

packages/nextjs/components/SignMessageButton.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { recoverMessageAddress } from "viem";
+import { useSignMessage } from "wagmi";
+import { notification } from "~~/utils/scaffold-eth";
+
+export const SignMessageButton = () => {
+  const {
+    data: signMessageData,
+    error,
+    isLoading,
+    signMessageAsync,
+    variables,
+  } = useSignMessage({
+    message: "Welcome to Limonade",
+  });
+  const [recorveredAddress, setRecoveredAddress] = React.useState<string>("");
+
+  React.useEffect(() => {
+    (async () => {
+      if (variables?.message && signMessageData) {
+        const recoveredAddress = await recoverMessageAddress({
+          message: variables?.message,
+          signature: signMessageData,
+        });
+        setRecoveredAddress(recoveredAddress);
+      }
+    })();
+  }, [signMessageData, variables?.message]);
+
+  const handleSign = async () => {
+    try {
+      await signMessageAsync();
+      notification.success("Message signed successfully");
+    } catch (e) {
+      notification.error("An Error happend while signing the message");
+      console.log("An Error happend while signing the message", e);
+      console.log("Error", error?.cause);
+    }
+  };
+
+  return (
+    <>
+      <button className={`btn btn-primary ${isLoading ? "loading" : ""}`} onClick={() => handleSign()}>
+        {isLoading ? "Check Wallet" : "Sign Message"}
+      </button>
+      {signMessageData && (
+        <div>
+          <div>Recovered Address: {recorveredAddress}</div>
+          <div>Signature: {signMessageData}</div>
+        </div>
+      )}
+    </>
+  );
+};

packages/nextjs/package.json

@@ -16,6 +16,8 @@
   "dependencies": {
     "@ethersproject/providers": "^5.7.2",
     "@heroicons/react": "^2.0.11",
+    "@pcd/pcd-types": "^0.8.0",
+    "@pcd/semaphore-identity-pcd": "^0.8.0",
     "@rainbow-me/rainbowkit": "1.1.2",
     "@uniswap/sdk-core": "^4.0.1",
     "@uniswap/v2-sdk": "^3.0.1",

packages/nextjs/pages/index.tsx

@@ -1,60 +1,94 @@
-import Link from "next/link";
+import { useEffect } from "react";
+import { useRouter } from "next/router";
+import { ArgumentTypeName } from "@pcd/pcd-types";
+import { SemaphoreIdentityPCDPackage } from "@pcd/semaphore-identity-pcd";
 import type { NextPage } from "next";
-import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { MetaHeader } from "~~/components/MetaHeader";
+import { SignMessageButton } from "~~/components/SignMessageButton";
+import { notification } from "~~/utils/scaffold-eth";
+
+const pcdArgs = {
+  identity: {
+    argumentType: ArgumentTypeName.PCD,
+    pcdType: SemaphoreIdentityPCDPackage.name,
+    value: undefined,
+    userProvided: true,
+  },
+  fieldsToReveal: {
+    argumentType: ArgumentTypeName.ToggleList,
+    value: {},
+    userProvided: false,
+    hideIcon: true,
+  },
+};
+
+function constructZupassPcdGetRequestUrl(
+  zupassClientUrl: string,
+  returnUrl: string,
+  pcdType: any,
+  args: any,
+  options?: any,
+) {
+  const req: any = {
+    type: "Get",
+    returnUrl: returnUrl,
+    args: args,
+    pcdType,
+    options,
+  };
+  const encReq = encodeURIComponent(JSON.stringify(req));
+  return `${zupassClientUrl}#/prove?request=${encReq}`;
+}
 
 const Home: NextPage = () => {
+  const { query } = useRouter();
+
+  const proof = query && query.proof && JSON.parse(decodeURIComponent(query.proof as string));
+
+  useEffect(() => {
+    const doDeserialization = async () => {
+      const deserialized = proof && (await SemaphoreIdentityPCDPackage.deserialize(proof.pcd));
+      const verified = await SemaphoreIdentityPCDPackage.verify(deserialized);
+      console.log("PRC IS:", JSON.parse(proof.pcd));
+      notification.success("Verfied");
+      console.log("Deserialized", deserialized);
+      console.log("Commitment", deserialized.claim.identity.commitment);
+      console.log("verified", verified);
+    };
+    if (proof) {
+      doDeserialization();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [JSON.stringify(proof)]);
+
   return (
     <>
       <MetaHeader />
       <div className="flex items-center flex-col flex-grow pt-10">
         <div className="px-5">
           <h1 className="text-center mb-8">
             <span className="block text-2xl mb-2">Welcome to</span>
-            <span className="block text-4xl font-bold">Scaffold-ETH 2</span>
+            <span className="block text-4xl font-bold">Lemonade ZuPass NFT Verification</span>
           </h1>
-          <p className="text-center text-lg">
-            Get started by editing{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/nextjs/pages/index.tsx
-            </code>
-          </p>
-          <p className="text-center text-lg">
-            Edit your smart contract{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              YourContract.sol
-            </code>{" "}
-            in{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/hardhat/contracts
-            </code>
-          </p>
         </div>
+        <SignMessageButton />
+        <button
+          className="btn btn-primary m-4"
+          onClick={() => {
+            const result = constructZupassPcdGetRequestUrl(
+              "https://zupass.org",
+              "http://localhost:3000/",
+              SemaphoreIdentityPCDPackage.name,
+              pcdArgs,
+            );
 
-        <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
-          <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <BugAntIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Tinker with your smart contract using the{" "}
-                <Link href="/debug" passHref className="link">
-                  Debug Contract
-                </Link>{" "}
-                tab.
-              </p>
-            </div>
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Explore your local transactions with the{" "}
-                <Link href="/blockexplorer" passHref className="link">
-                  Block Explorer
-                </Link>{" "}
-                tab.
-              </p>
-            </div>
-          </div>
-        </div>
+            console.log("result", result);
+
+            window.location.href = result; //or you could have a pop up but it's more complicated
+          }}
+        >
+          Get proof
+        </button>
       </div>
     </>
   );

packages/nextjs/pages/popup.tsx

@@ -0,0 +1,10 @@
+import { usePopup } from "zuauth";
+
+/**
+ * This popup sends requests and receives PCDs from the passport.
+ */
+export default function Popup() {
+  const error = usePopup();
+
+  return <div>{error}</div>;
+}