pre-launch styling followups

apps/passport-client/new-components/screens/Home/AddOnModal.tsx

@@ -1,3 +1,4 @@
+import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/16/solid";
 import { useCallback, useState } from "react";
 import SwipeableViews from "react-swipeable-views";
 import styled, { FlattenSimpleInterpolation, css } from "styled-components";
@@ -7,7 +8,6 @@ import { BottomModal } from "../../shared/BottomModal";
 import { Button2 } from "../../shared/Button";
 import { Typography } from "../../shared/Typography";
 import { useTrackpadSwipe } from "./hooks/useTrackpadSwipe";
-import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/16/solid";
 
 // @ts-expect-error TMP fix for bad lib
 const _SwipableViews = SwipeableViews.default;
@@ -116,7 +116,7 @@ export const AddOnsModal = (): JSX.Element | null => {
                   fontSize={16}
                   fontWeight={500}
                 >
-                  {addOn.claim.ticket.ticketName.toUpperCase()}
+                  {addOn.claim.ticket.ticketName}
                 </Typography>
               </QRContainer>
             );

apps/passport-client/new-components/screens/Home/NewHomeScreen.tsx

@@ -12,6 +12,7 @@ import { appConfig } from "../../../src/appConfig";
 import {
   useDispatch,
   useIsDownloaded,
+  useIsSyncSettled,
   usePCDCollection,
   useScrollTo,
   useSelf,
@@ -41,10 +42,7 @@ import { TicketPack } from "./types";
 
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/16/solid";
 import { isEmailPCD } from "@pcd/email-pcd";
-import {
-  PCDGetRequest,
-  requestGenericIssuanceTicketPreviews
-} from "@pcd/passport-interface";
+import { PCDGetRequest } from "@pcd/passport-interface";
 import { Spacer } from "@pcd/passport-ui";
 import { isSemaphoreIdentityPCD } from "@pcd/semaphore-identity-pcd";
 import {
@@ -180,9 +178,9 @@ export const NewHomeScreen = (): ReactElement => {
   const self = useSelf();
   const navigate = useNavigate();
   const isDownloaded = useIsDownloaded();
+  const isSyncSettled = useIsSyncSettled();
   const [params, setParams] = useSearchParams();
   const [zappUrl, setZappUrl] = useState("");
-  const [holding, setHolding] = useState(false);
   const isInvalidUser = useUserForcedToLogout();
   const location = useLocation();
   const regularParams = useParams();
@@ -204,9 +202,16 @@ export const NewHomeScreen = (): ReactElement => {
   });
   const showPodsList = tickets.length === 0 && !isLandscape && !noPods;
 
+  // default wait for full sync, but "short-circuit" this process
+  // if finished downloading and already fetched devcon tickets,
+  // similar to https://github.com/proofcarryingdata/zupass/pull/2120
+  const isReadyToLoadPage =
+    isSyncSettled ||
+    (isDownloaded && collection.getAllPCDsInFolder("Devcon SEA").length > 0);
+
   useLayoutEffect(() => {
     // if we haven't loaded all pcds yet, dont process the prove request
-    if (!isDownloaded) return;
+    if (!isReadyToLoadPage) return;
 
     const maybeExistingFolder = params.get("folder");
     if (maybeExistingFolder) {
@@ -244,7 +249,6 @@ export const NewHomeScreen = (): ReactElement => {
         type: "set-bottom-modal",
         modal: { request, modalType: "prove" }
       });
-      console.log(request);
       return;
     }
     if (params.size > 0) setParams("");
@@ -253,7 +257,7 @@ export const NewHomeScreen = (): ReactElement => {
     params,
     collection,
     setParams,
-    isDownloaded,
+    isReadyToLoadPage,
     location,
     dispatch,
     showPodsList,
@@ -267,8 +271,7 @@ export const NewHomeScreen = (): ReactElement => {
           : "";
         const params = new URLSearchParams(queryString);
         const redirectHash = params.get("redirectHash");
-        const { email, code, targetFolder, pipelineId, serverUrl } =
-          regularParams;
+        const { email, code, targetFolder } = regularParams;
 
         if (!email || !code) return;
 
@@ -280,13 +283,6 @@ export const NewHomeScreen = (): ReactElement => {
           return;
         }
 
-        const previewRes = await requestGenericIssuanceTicketPreviews(
-          serverUrl ?? appConfig.zupassServer,
-          email,
-          code,
-          pipelineId
-        );
-
         await dispatch({
           type: "one-click-login",
           email,
@@ -307,24 +303,14 @@ export const NewHomeScreen = (): ReactElement => {
           setZappUrl(zappEntry[1]);
           return;
         }
-
-        if (previewRes.success) {
-          dispatch({
-            type: "scroll-to-ticket",
-            scrollTo: {
-              attendee: previewRes.value.tickets[0].attendeeEmail,
-              eventId: previewRes.value.tickets[0].eventId
-            }
-          });
-        }
       }
     };
     handleOneClick();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   useEffect(() => {
-    if (scrollTo && isDownloaded && tickets.length > 0) {
+    if (scrollTo && isSyncSettled && tickets.length > 0) {
       // getting the pos of the event card
       const eventPos = tickets.findIndex(
         (pack) => pack[0] === scrollTo.eventId
@@ -349,14 +335,14 @@ export const NewHomeScreen = (): ReactElement => {
         dispatch({ type: "scroll-to-ticket", scrollTo: undefined });
       })();
     }
-  }, [dispatch, scrollTo, currentPos, setCurrentPos, tickets, isDownloaded]);
+  }, [dispatch, scrollTo, currentPos, setCurrentPos, tickets, isSyncSettled]);
 
   const cardWidth =
     (windowWidth > MAX_WIDTH_SCREEN ? MAX_WIDTH_SCREEN : windowWidth) -
     SCREEN_HORIZONTAL_PADDING * 2;
 
-  // if not loaded pcds yet and the user session is valid
-  if (!isDownloaded && !isInvalidUser) {
+  // if not ready yet and the user session is valid
+  if (!isReadyToLoadPage && !isInvalidUser) {
     return (
       <AppContainer fullscreen={true} bg="gray">
         <LoadingScreenContainer>
@@ -366,7 +352,7 @@ export const NewHomeScreen = (): ReactElement => {
             fontWeight={800}
             color="var(--text-tertiary)"
           >
-            GENERATING PODS
+            {isDownloaded ? "COLLECTING PODS" : "GENERATING PODS"}
           </Typography>
         </LoadingScreenContainer>
       </AppContainer>
@@ -402,14 +388,7 @@ export const NewHomeScreen = (): ReactElement => {
         <>
           <MaxWidthContainer>
             {!(showPodsList || noPods) && <Spacer h={96} />}
-            <SwipeViewContainer
-              onMouseDown={() => setHolding(true)}
-              onMouseUp={() => setHolding(false)}
-              onMouseLeave={() => setHolding(false)}
-              style={{
-                cursor: holding ? "grabbing" : "grab"
-              }}
-            >
+            <SwipeViewContainer>
               <_SwipableViews
                 style={{
                   padding: `0 ${SCREEN_HORIZONTAL_PADDING - CARD_GAP / 2}px`

apps/passport-client/new-components/screens/Home/hooks/useTickets.ts

@@ -2,12 +2,12 @@ import {
   EdDSATicketPCDTypeName,
   isEdDSATicketPCD
 } from "@pcd/eddsa-ticket-pcd";
+import { PCD } from "@pcd/pcd-types";
 import { isPODTicketPCD } from "@pcd/pod-ticket-pcd";
-import { TicketPack, TicketType, TicketTypeName } from "../types";
-import { usePCDs } from "../../../../src/appHooks";
 import uniqWith from "lodash/uniqWith";
-import { PCD } from "@pcd/pcd-types";
 import { useMemo } from "react";
+import { usePCDs } from "../../../../src/appHooks";
+import { TicketPack, TicketType, TicketTypeName } from "../types";
 export const isEventTicketPCD = (
   pcd: PCD<unknown, unknown>
 ): pcd is TicketType => {
@@ -80,12 +80,13 @@ export const useTickets = (): Array<[string, TicketPack[]]> => {
       const ticketPacks = eventsMap.get(ticket.claim.ticket.eventId);
       if (!ticketPacks) continue;
       const pack = ticketPacks.find(
-        (pack) => pack.attendeeEmail === ticket.claim.ticket.attendeeEmail
+        (pack) =>
+          pack.eventTicket.claim.ticket.ticketId ===
+          ticket.claim.ticket.parentTicketId
       );
       if (!pack) continue;
       pack.addOns.push(ticket);
     }
-    console.log(Array.from(eventsMap.entries()));
 
     return Array.from(eventsMap.entries());
   }, [uniqTickets]);

apps/passport-client/public/global-zupass.css

@@ -51,6 +51,9 @@ html {
     system-ui,
     sans-serif;
   line-height: 1.5;
+
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 body {

apps/passport-client/src/password.ts

@@ -41,7 +41,7 @@ export const setPassword = async (
       );
     } else if (res.error.name === "Conflict") {
       update({ extraDownloadRequested: true });
-      throw new Error(`Cannot change password while PCDs are syncing.  
+      throw new Error(`Cannot change password while PODs are syncing.  
         Wait for download to complete or reload the page and try again.`);
     } else {
       throw new Error(

apps/passport-server/resources/one-click-page/index.html

@@ -411,6 +411,7 @@
     align-self: stretch;
     border-radius: 200px;
     background: var(--core-accent);
+    user-select: none;
     /* shadow-sm */
     box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   }

apps/passport-server/src/routing/routes/genericIssuanceRoutes.ts

@@ -827,7 +827,7 @@ export function initGenericIssuanceRoutes(
             .filter((addon) => addon.parentTicketId === ticket.ticketId)
             .map(async (addon) => ({
               image: await getTicketImage(addon),
-              name: addon.ticketName.toUpperCase()
+              name: addon.ticketName
             }));
 
           return {

packages/ui/eddsa-ticket-pcd-ui/src/CardBody.tsx

@@ -122,7 +122,7 @@
             <QRIcon />
           </NEW_UI__ExtraSection>
         )}
-        <NEW_UI__ExtraSection style={{ justifyContent: "center" }}>
+        <NEW_UI__ExtraSection style={{ justifyContent: "center", cursor: "default" }}>
           <ExtraSectionSecondaryText>
             QR POD • ZK powered by ZUPASS
           </ExtraSectionSecondaryText>

packages/ui/pod-pcd-ui/src/CardBody.tsx

@@ -82,12 +82,13 @@ function PODPCDCardBody({
             style={{
               color: isValidSig ? "#5B952C" : undefined,
               textDecoration: isValidSig ? "none" : undefined
+              // TODO: remove cursor pointer when we have a valid signature
             }}
           >
             <Text
               style={{
                 paddingRight: isValidSig ? 2 : 8,
-                color: "var(--core-accent)"
+                color: isValidSig ? "#5B952C" : "var(--core-accent)"
               }}
             >
               {sigStatus === 0

packages/ui/pod-ticket-pcd-ui/src/CardBody.tsx

@@ -120,7 +120,9 @@ export function PODTicketCardBodyImpl({
             <QRIcon />
           </NEW_UI__ExtraSection>
         )}
-        <NEW_UI__ExtraSection style={{ justifyContent: "center" }}>
+        <NEW_UI__ExtraSection
+          style={{ justifyContent: "center", cursor: "default" }}
+        >
           <ExtraSectionSecondaryText>
             QR POD • ZK powered by ZUPASS
           </ExtraSectionSecondaryText>