feat: TicketCard component

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

@@ -2,12 +2,11 @@ import {
   PCDAddRequest,
   ProtocolWorldsFolderName
 } from "@pcd/passport-interface";
-import { ErrorContainer } from "@pcd/passport-ui";
+import { ErrorContainer, NewLoader } from "@pcd/passport-ui";
 import { getErrorMessage } from "@pcd/util";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { BottomModal } from "../../../new-components/shared/BottomModal";
 import { Button2 } from "../../../new-components/shared/Button";
-import { NewLoader } from "../../../new-components/shared/NewLoader";
 import { Typography } from "../../../new-components/shared/Typography";
 import {
   useCredentialManager,

apps/passport-client/components/screens/ClaimScreen.tsx

@@ -7,6 +7,7 @@ import {
   NetworkFeedApi,
   PODBOX_CREDENTIAL_REQUEST
 } from "@pcd/passport-interface";
+import { NewLoader } from "@pcd/passport-ui";
 import { ReplaceInFolderAction } from "@pcd/pcd-collection";
 import {
   PODTicketPCD,
@@ -25,7 +26,6 @@ import * as v from "valibot";
 import { BottomModal } from "../../new-components/shared/BottomModal";
 import { Button2 } from "../../new-components/shared/Button";
 import { NewModals } from "../../new-components/shared/Modals/NewModals";
-import { NewLoader } from "../../new-components/shared/NewLoader";
 import { Typography } from "../../new-components/shared/Typography";
 import { appConfig } from "../../src/appConfig";
 import {

apps/passport-client/components/screens/EmbeddedScreens/EmbeddedGPCProofScreen.tsx

@@ -2,6 +2,7 @@ import { ProveResult } from "@parcnet-js/client-rpc";
 import * as p from "@parcnet-js/podspec";
 import { EntriesSchema, PodspecProofRequest } from "@parcnet-js/podspec";
 import { GPCIdentifier, gpcProve } from "@pcd/gpc";
+import { NewLoader } from "@pcd/passport-ui";
 import { POD, POD_INT_MAX, POD_INT_MIN } from "@pcd/pod";
 import {
   PODTicketPCD,
@@ -13,7 +14,6 @@ import { ReactNode, useMemo, useState } from "react";
 import styled from "styled-components";
 import { BottomModalHeader } from "../../../new-components/shared/BottomModal";
 import { Button2 } from "../../../new-components/shared/Button";
-import { NewLoader } from "../../../new-components/shared/NewLoader";
 import { Typography } from "../../../new-components/shared/Typography";
 import { hideScrollCSS } from "../../../new-components/shared/utils";
 import {

apps/passport-client/components/screens/FrogScreens/Button.tsx

@@ -267,7 +267,7 @@ const TextureSearchButton = forwardRef(
       ...props
     }: React.ComponentPropsWithRef<"button"> & {
       pending?: boolean;
-      backgroundImage: string;
+      backgroundImage?: string;
       buttonStyle?: CSSProperties;
     },
     buttonRef: React.Ref<HTMLButtonElement>

apps/passport-client/components/screens/FrogScreens/FrogsModal.tsx

@@ -19,7 +19,7 @@ export function FrogsModal({
   const focusedPCD = pcds[focused ?? 0];
 
   const onSwipeLeft = useCallback(() => {
-    setFocused((prev) => Math.min(pcds?.length - 1 ?? 0, (prev ?? 0) + 1));
+    setFocused((prev) => Math.min(pcds.length - 1, (prev ?? 0) + 1));
   }, [pcds]);
   const onSwipeRight = useCallback(() => {
     setFocused((prev) => Math.max(0, (prev ?? 0) - 1));

apps/passport-client/components/screens/FrogScreens/useFrogParticles.tsx

@@ -431,7 +431,7 @@ export function useWrithingVoidParticles(
     }
 
     const absorberBaseSize =
-      Math.min(window.innerWidth, window.innerHeight) / 5 ?? 50;
+      Math.min(window.innerWidth, window.innerHeight) / 5;
     const particles: RecursivePartial<ParticlesOptions> = {
       shape: {
         type: "image",

apps/passport-client/components/screens/ProveScreen/GenericProveSection.tsx

@@ -10,6 +10,7 @@ import {
   ProveOptions,
   requestProveOnServer
 } from "@pcd/passport-interface";
+import { NewLoader } from "@pcd/passport-ui";
 import {
   ArgsOf,
   PCDOf,
@@ -32,7 +33,6 @@ import { useCallback, useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
 import { Accordion } from "../../../new-components/shared/Accordion";
 import { Button2 } from "../../../new-components/shared/Button";
-import { NewLoader } from "../../../new-components/shared/NewLoader";
 import { Typography } from "../../../new-components/shared/Typography";
 import { appConfig } from "../../../src/appConfig";
 import {

apps/passport-client/components/screens/ProveScreen/ProveScreen.tsx

@@ -1,12 +1,12 @@
 import { PCDGetRequest, PCDRequestType } from "@pcd/passport-interface";
+import { NewLoader } from "@pcd/passport-ui";
 import { SemaphoreGroupPCDPackage } from "@pcd/semaphore-group-pcd";
 import { SemaphoreSignaturePCDPackage } from "@pcd/semaphore-signature-pcd";
 import { ReactElement } from "react";
 import { useSearchParams } from "react-router-dom";
 import styled from "styled-components";
 import { ManageEmailModal } from "../../../new-components/shared/Modals/ManageEmailsModal";
 import { ProveModal } from "../../../new-components/shared/Modals/ProveModal";
-import { NewLoader } from "../../../new-components/shared/NewLoader";
 import { Typography } from "../../../new-components/shared/Typography";
 import {
   useDispatch,

apps/passport-client/components/screens/ProveScreen/SemaphoreGroupProveScreen.tsx

@@ -5,6 +5,7 @@ import {
   requestProveOnServer,
   requestSemaphoreGroup
 } from "@pcd/passport-interface";
+import { NewLoader } from "@pcd/passport-ui";
 import { ArgumentTypeName } from "@pcd/pcd-types";
 import {
   SemaphoreGroupPCDArgs,
@@ -16,16 +17,15 @@ import { getErrorMessage } from "@pcd/util";
 import { Identity } from "@semaphore-protocol/identity";
 import { ReactNode, useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
+import { Button2 } from "../../../new-components/shared/Button";
+import { Typography } from "../../../new-components/shared/Typography";
 import { appConfig } from "../../../src/appConfig";
 import { useIdentityV3 } from "../../../src/appHooks";
 import {
   safeRedirect,
   safeRedirectPending
 } from "../../../src/passportRequest";
 import { getHost, nextFrame } from "../../../src/util";
-import { Button2 } from "../../../new-components/shared/Button";
-import { Typography } from "../../../new-components/shared/Typography";
-import { NewLoader } from "../../../new-components/shared/NewLoader";
 
 export function SemaphoreGroupProveScreen({
   req

apps/passport-client/components/screens/ProveScreen/SemaphoreSignatureProveScreen.tsx

@@ -6,6 +6,7 @@ import {
   requestProveOnServer,
   SignInMessagePayload
 } from "@pcd/passport-interface";
+import { NewLoader } from "@pcd/passport-ui";
 import { ArgumentTypeName } from "@pcd/pcd-types";
 import {
   IdentityV3,
@@ -18,16 +19,15 @@ import {
 import { cloneDeep } from "lodash";
 import { ReactNode, useCallback, useState } from "react";
 import styled from "styled-components";
+import { Button2 } from "../../../new-components/shared/Button";
+import { Typography } from "../../../new-components/shared/Typography";
 import { appConfig } from "../../../src/appConfig";
 import { useIdentityV3, useSelf } from "../../../src/appHooks";
 import {
   safeRedirect,
   safeRedirectPending
 } from "../../../src/passportRequest";
 import { getHost, getOrigin, nextFrame } from "../../../src/util";
-import { Typography } from "../../../new-components/shared/Typography";
-import { Button2 } from "../../../new-components/shared/Button";
-import { NewLoader } from "../../../new-components/shared/NewLoader";
 
 export function SemaphoreSignatureProveScreen({
   req

apps/passport-client/components/screens/ZappScreens/ConnectPopupScreen.tsx

@@ -1,11 +1,11 @@
 import { requestDownloadAndDecryptStorage } from "@pcd/passport-interface";
+import { NewLoader } from "@pcd/passport-ui";
 import { ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 import urljoin from "url-join";
 import * as v from "valibot";
 import { BottomModalHeader } from "../../../new-components/shared/BottomModal";
 import { Button2 } from "../../../new-components/shared/Button";
-import { NewLoader } from "../../../new-components/shared/NewLoader";
 import { Typography } from "../../../new-components/shared/Typography";
 import { appConfig } from "../../../src/appConfig";
 import { useDispatch } from "../../../src/appHooks";

apps/passport-client/components/shared/ScreenLoader.tsx

@@ -1,5 +1,5 @@
+import { NewLoader } from "@pcd/passport-ui";
 import { useEffect, useState } from "react";
-import { NewLoader } from "../../new-components/shared/NewLoader";
 import { Typography } from "../../new-components/shared/Typography";
 
 const textDisplayTimeout = 2000;

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

@@ -23,7 +23,6 @@ import { useSyncE2EEStorage } from "../../../src/useSyncE2EEStorage";
 import { nextFrame } from "../../../src/util";
 import { FloatingMenu } from "../../shared/FloatingMenu";
 import { NewModals } from "../../shared/Modals/NewModals";
-import { NewLoader } from "../../shared/NewLoader";
 import { SwipeViewContainer } from "../../shared/SwipeViewContainer";
 import { TicketCard, TicketCardHeight } from "../../shared/TicketCard";
 import { Typography } from "../../shared/Typography";
@@ -43,7 +42,7 @@ import { TicketPack } from "./types";
 import { ChevronLeftIcon, ChevronRightIcon } from "@heroicons/react/16/solid";
 import { isEmailPCD } from "@pcd/email-pcd";
 import { PCDGetRequest } from "@pcd/passport-interface";
-import { Spacer } from "@pcd/passport-ui";
+import { NewLoader, Spacer } from "@pcd/passport-ui";
 import { isPODEmailPCD } from "@pcd/pod-email-pcd";
 import { isSemaphoreIdentityPCD } from "@pcd/semaphore-identity-pcd";
 import {

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

@@ -1,9 +1,9 @@
+import { NewLoader } from "@pcd/passport-ui";
 import { ReactElement, useEffect, useState } from "react";
 import {
   useExtraSubscriptionFetchRequested,
   useIsSyncSettled
 } from "../../../src/appHooks";
-import { NewLoader } from "../../shared/NewLoader";
 import { Typography } from "../../shared/Typography";
 
 const syncStates = {

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

@@ -2,6 +2,7 @@ import {
   EdDSATicketPCDTypeName,
   isEdDSATicketPCD
 } from "@pcd/eddsa-ticket-pcd";
+import { parseDateRange } from "@pcd/passport-interface";
 import { PCD } from "@pcd/pcd-types";
 import { isPODTicketPCD } from "@pcd/pod-ticket-pcd";
 import uniqWith from "lodash/uniqWith";
@@ -16,6 +17,7 @@ export const isEventTicketPCD = (
     !!pcd.claim.ticket.eventStartDate
   );
 };
+
 export const useTickets = (): Array<[string, TicketPack[]]> => {
   const allPCDs = usePCDs();
   const tickets = allPCDs.filter(isEventTicketPCD).reverse();
@@ -27,18 +29,15 @@ export const useTickets = (): Array<[string, TicketPack[]]> => {
       t1.type === EdDSATicketPCDTypeName
     );
   }).sort((t1, t2) => {
-    // if one of the tickets doesnt have a date, immidiatly retrun the other one as the bigger one
-    if (!t1.claim.ticket.eventStartDate) return 1;
-    if (!t2.claim.ticket.eventStartDate) return -1;
+    const range1 = parseDateRange(t1.claim.ticket.eventStartDate);
+    const range2 = parseDateRange(t2.claim.ticket.eventStartDate);
+    if (!range1.date_from) return 1;
+    if (!range2.date_from) return -1;
 
-    // parse the date
-    const date1 = Date.parse(t1.claim.ticket.eventStartDate);
-    const date2 = Date.parse(t2.claim.ticket.eventStartDate);
     const now = Date.now();
-    // const now = Date.parse("2024-03-15T08:00:00.000");
 
-    const timeToDate1 = date1 - now;
-    const timeToDate2 = date2 - now;
+    const timeToDate1 = new Date(range1.date_from).getTime() - now;
+    const timeToDate2 = new Date(range2.date_from).getTime() - now;
 
     // 1. both events are upcoming
     // the smaller timeToDate should be first - ordering by nearest upcoming event first.

apps/passport-client/new-components/screens/Login/NewLoginInterstitialScreen.tsx

@@ -1,3 +1,4 @@
+import { NewLoader } from "@pcd/passport-ui";
 import { assertUnreachable } from "@pcd/util";
 import { useLayoutEffect } from "react";
 import { useNavigate } from "react-router-dom";
@@ -9,7 +10,6 @@ import {
   getPendingRequest
 } from "../../../src/sessionStorage";
 import { useSyncE2EEStorage } from "../../../src/useSyncE2EEStorage";
-import { NewLoader } from "../../shared/NewLoader";
 import { Typography } from "../../shared/Typography";
 
 export function NewLoginInterstitialScreen(): JSX.Element {

apps/passport-client/new-components/screens/Login/NewLoginScreen.tsx

@@ -1,4 +1,5 @@
 import { requestLogToServer } from "@pcd/passport-interface";
+import { NewLoader } from "@pcd/passport-ui";
 import { validateEmail } from "@pcd/util";
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import styled from "styled-components";
@@ -28,7 +29,6 @@ import {
   LoginForm,
   LoginTitleContainer
 } from "../../shared/Login/LoginComponents";
-import { NewLoader } from "../../shared/NewLoader";
 import { Typography } from "../../shared/Typography";
 
 export const NewLoginScreen = (): JSX.Element => {

apps/passport-client/new-components/screens/Login/NewPassportScreen.tsx

@@ -6,6 +6,7 @@ import {
   requestPasswordSalt,
   requestVerifyToken
 } from "@pcd/passport-interface";
+import { NewLoader } from "@pcd/passport-ui";
 import { getErrorMessage, sleep } from "@pcd/util";
 import { FormEvent, useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
@@ -21,7 +22,6 @@ import {
   LoginForm,
   LoginTitleContainer
 } from "../../shared/Login/LoginComponents";
-import { NewLoader } from "../../shared/NewLoader";
 import { ResendCodeButton2 } from "../../shared/ResendCodeButton";
 import { Typography } from "../../shared/Typography";
 

apps/passport-client/new-components/screens/NewOneClickLoginScreen2.tsx

@@ -1,4 +1,5 @@
 import { requestGenericIssuanceTicketPreviews } from "@pcd/passport-interface";
+import { NewLoader } from "@pcd/passport-ui";
 import { IPODTicketData } from "@pcd/pod-ticket-pcd";
 import { TicketQR } from "@pcd/pod-ticket-pcd-ui";
 import { ReactNode, useCallback, useEffect, useState } from "react";
@@ -8,7 +9,6 @@ import { AppContainer } from "../../components/shared/AppContainer";
 import { appConfig } from "../../src/appConfig";
 import { useDispatch, useSelf } from "../../src/appHooks";
 import { Button2 } from "../shared/Button";
-import { NewLoader } from "../shared/NewLoader";
 import { TicketCard } from "../shared/TicketCard";
 import { Typography } from "../shared/Typography";
 

apps/passport-client/new-components/shared/Login/NewPasswordForm2.tsx

@@ -1,9 +1,9 @@
+import { NewLoader } from "@pcd/passport-ui";
 import { Dispatch, ReactNode, SetStateAction, useRef, useState } from "react";
 import styled from "styled-components";
 import { checkPasswordStrength } from "../../../src/checkPasswordStrength";
 import { PASSWORD_MINIMUM_LENGTH } from "../../../src/password";
 import { Button2 } from "../Button";
-import { NewLoader } from "../NewLoader";
 import { Typography } from "../Typography";
 import { PasswordInput2 } from "./PasswordInput2";
 

apps/passport-client/new-components/shared/Modals/ChangePasswordModal.tsx

@@ -3,6 +3,7 @@ import {
   CredentialManager,
   requestPasswordSalt
 } from "@pcd/passport-interface";
+import { NewLoader } from "@pcd/passport-ui";
 import { getErrorMessage } from "@pcd/util";
 import React, { Suspense, useCallback, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
@@ -21,7 +22,6 @@ import { loadEncryptionKey } from "../../../src/localstorage";
 import { setPassword } from "../../../src/password";
 import { useSyncE2EEStorage } from "../../../src/useSyncE2EEStorage";
 import { BottomModal } from "../BottomModal";
-import { NewLoader } from "../NewLoader";
 import { Typography } from "../Typography";
 
 const NewPasswordForm2 = React.lazy(() =>

apps/passport-client/new-components/shared/Modals/DeleteAccountModal.tsx

@@ -1,10 +1,10 @@
+import { NewLoader } from "@pcd/passport-ui";
 import { ReactElement, useCallback, useState } from "react";
 import styled from "styled-components";
 import { useBottomModal, useDispatch, useSelf } from "../../../src/appHooks";
 import { BottomModal, BottomModalHeader } from "../BottomModal";
 import { Button2 } from "../Button";
 import { Input2 } from "../Input";
-import { NewLoader } from "../NewLoader";
 import { Typography } from "../Typography";
 
 export const DeleteAccountModal = (): ReactElement => {

apps/passport-client/new-components/shared/Modals/ImportModal.tsx

@@ -1,5 +1,6 @@
 import { EmailPCDTypeName } from "@pcd/email-pcd";
 import { deserializeStorage } from "@pcd/passport-interface";
+import { NewLoader } from "@pcd/passport-ui";
 import { PCDCollection } from "@pcd/pcd-collection";
 import { PCD } from "@pcd/pcd-types";
 import { SemaphoreGroupPCDTypeName } from "@pcd/semaphore-group-pcd";
@@ -17,7 +18,6 @@ import { AppState } from "../../../src/state";
 import { useSelector } from "../../../src/subscribe";
 import { BottomModal } from "../BottomModal";
 import { Button2 } from "../Button";
-import { NewLoader } from "../NewLoader";
 import { Typography } from "../Typography";
 
 const Container = styled.div`

apps/passport-client/new-components/shared/Modals/ManageEmailsModal.tsx

@@ -5,6 +5,7 @@ import {
   requestChangeUserEmail,
   requestRemoveUserEmail
 } from "@pcd/passport-interface";
+import { NewLoader } from "@pcd/passport-ui";
 import { getErrorMessage } from "@pcd/util";
 import { validate } from "email-validator";
 import {
@@ -28,7 +29,6 @@ import { AppState } from "../../../src/state";
 import { BottomModal, BottomModalHeader } from "../BottomModal";
 import { Button2 } from "../Button";
 import { Input2 } from "../Input";
-import { NewLoader } from "../NewLoader";
 import { Typography } from "../Typography";
 
 enum EmailManagerState {

apps/passport-client/pages/index.tsx

@@ -38,6 +38,7 @@ import { LocalStorageNotAccessibleScreen } from "../components/screens/LocalStor
 import { MissingScreen } from "../components/screens/MissingScreen";
 import { NoWASMScreen } from "../components/screens/NoWASMScreen";
 // import { RemoveEmailScreen } from "../components/screens/RemoveEmailScreen";
+import { NewLoader } from "@pcd/passport-ui";
 import * as localForage from "localforage";
 import styled from "styled-components";
 import { ProveScreen } from "../components/screens/ProveScreen/ProveScreen";
@@ -64,7 +65,6 @@ import { NewSyncExistingScreen } from "../new-components/screens/Login/NewSyncEx
 import { NewPrivacyNoticeScreen } from "../new-components/screens/NewPrivacyNoticeScreen";
 import { NewTermsScreen } from "../new-components/screens/NewTermsScreen";
 import { NewUpdatedTermsScreen } from "../new-components/screens/NewUpdatedTermsScreen";
-import { NewLoader } from "../new-components/shared/NewLoader";
 import { Typography } from "../new-components/shared/Typography";
 import { appConfig } from "../src/appConfig";
 import {