Fixed Flicker on Popup and ETH LATAM event ID

packages/nextjs/package.json

@@ -38,7 +38,7 @@
     "usehooks-ts": "^2.7.2",
     "viem": "^1.16.6",
     "wagmi": "1.4.4",
-    "zupass-auth": "^0.0.4",
+    "zuauth": "^0.4.0",
     "zustand": "^4.1.2"
   },
   "devDependencies": {

packages/nextjs/pages/_app.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import type { AppProps } from "next/app";
+import { useRouter } from "next/router";
 import { RainbowKitProvider, darkTheme, lightTheme } from "@rainbow-me/rainbowkit";
 import "@rainbow-me/rainbowkit/styles.css";
 import NextNProgress from "nextjs-progressbar";
@@ -22,6 +23,9 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
   const [isDarkTheme, setIsDarkTheme] = useState(true);
   const { isDarkMode } = useDarkMode();
 
+  const router = useRouter();
+  const currentPath = router.pathname;
+
   useEffect(() => {
     if (price > 0) {
       setNativeCurrencyPrice(price);
@@ -32,6 +36,15 @@ const ScaffoldEthApp = ({ Component, pageProps }: AppProps) => {
     setIsDarkTheme(isDarkMode);
   }, [isDarkMode]);
 
+  if (currentPath === "/popup") {
+    return (
+      <div className="zupass-popup">
+        {/* "Empty" route (no header, footer) */}
+        <Component {...pageProps} />
+      </div>
+    );
+  }
+
   return (
     <WagmiConfig config={wagmiConfig}>
       <NextNProgress />

packages/nextjs/pages/api/verify.ts

@@ -3,7 +3,7 @@ import { NextApiRequest, NextApiResponse } from "next";
 import { hexToBigInt } from "viem";
 import { createWalletClient, http, isAddress, parseEther } from "viem";
 import { hardhat } from "viem/chains";
-import { isZupassPublicKey } from "zupass-auth";
+import { isZupassPublicKey } from "zuauth";
 
 const localWalletClient = createWalletClient({
   chain: hardhat,

packages/nextjs/pages/index.tsx

@@ -3,7 +3,7 @@ import { ZKEdDSAEventTicketPCDPackage } from "@pcd/zk-eddsa-event-ticket-pcd";
 import type { NextPage } from "next";
 import { hexToBigInt } from "viem";
 import { useAccount } from "wagmi";
-import { isZupassPublicKey, useZuAuth } from "zupass-auth";
+import { isZupassPublicKey, useZuAuth } from "zuauth";
 import { MetaHeader } from "~~/components/MetaHeader";
 import { useScaffoldContractRead, useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
 import { notification } from "~~/utils/scaffold-eth";
@@ -30,7 +30,7 @@ const Home: NextPage = () => {
       notification.error("Please connect wallet");
       return;
     }
-    authenticate(fieldsToReveal, connectedAddress, validEventIds);
+    authenticate(fieldsToReveal, connectedAddress, "", validEventIds, []);
   }, [authenticate, connectedAddress]);
 
   const verifyProofFrontend = async () => {

packages/nextjs/pages/popup.tsx

@@ -1,9 +1,8 @@
-import { usePopup } from "zupass-auth";
+import { usePopup } from "zuauth";
 
 /**
  * This popup sends requests and receives PCDs from the passport.
  */
-// TODO: Fix the flickering
 export default function Popup() {
   const error = usePopup();
 

packages/nextjs/styles/globals.css

@@ -30,3 +30,8 @@ p {
 .btn.btn-ghost {
   @apply shadow-none;
 }
+
+.zupass-popup{
+    background-color: #19473f;
+    min-height: 100vh;
+}

packages/nextjs/utils/zupassConstants.ts

@@ -9,4 +9,5 @@ export const DEVCONNECT_VALID_EVENT_IDS = [
   "e1423686-6cc7-11ee-98f3-7ebd6aca95cd", // Next Billion
   "140b208c-6d1d-11ee-8320-126a2f5f3c5e", // Wallet Unconference
   "b03bca82-2d63-11ee-9929-0e084c48e15f", // TEST event
+  "be4dbf9c-abc9-4bc2-a731-3464b84ce3fb", // ETH LATAM
 ];

yarn.lock

@@ -3947,7 +3947,7 @@ __metadata:
     vercel: ^28.15.1
     viem: ^1.16.6
     wagmi: 1.4.4
-    zupass-auth: ^0.0.4
+    zuauth: ^0.4.0
     zustand: ^4.1.2
   languageName: unknown
   linkType: soft
@@ -18915,17 +18915,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"zupass-auth@npm:^0.0.4":
-  version: 0.0.4
-  resolution: "zupass-auth@npm:0.0.4"
+"zuauth@npm:^0.4.0":
+  version: 0.4.0
+  resolution: "zuauth@npm:0.4.0"
   dependencies:
     "@pcd/eddsa-ticket-pcd": ^0.3.0
     "@pcd/pcd-types": ^0.8.0
     "@pcd/semaphore-identity-pcd": ^0.8.0
     "@pcd/zk-eddsa-event-ticket-pcd": ^0.2.1
     react: ^18
     react-dom: ^18
-  checksum: 46ce13fcd01183733741606fcbe40017254d761d7f0fb304641aa635aa983935e41458b248542ebff1a5e443963b28cf5aa87ef928eb11dac7ec5e0f9ced258f
+  checksum: 265ec51aba09cf0ae76003cbd914316a3d07d105cf5289fad456f171fe15e06a13144ff3bb49d96304b1993e24950b826cebe2d624c3f8ecd2ae7061c6767668
   languageName: node
   linkType: hard