From 6c7ee7f484467c65496d014e773c3a3faf50cc8e Mon Sep 17 00:00:00 2001
From: BenKurrek <bkurrek@uwaterloo.ca>
Date: Fri, 8 Mar 2024 16:57:53 -0500
Subject: [PATCH 1/2] qr codes finished

---
 src/constants/common.ts                       |   2 +-
 .../claim/components/ticket/QrDetails.tsx     |  16 +--
 src/features/ticket-qr/TicketQRCode.tsx       |   5 -
 src/features/ticket-qr/TicketQRPage.tsx       | 117 ++++++++++++++++++
 src/hooks/useTicketClaimParams.tsx            |  28 +++++
 src/router.tsx                                |   2 +-
 6 files changed, 153 insertions(+), 17 deletions(-)
 delete mode 100644 src/features/ticket-qr/TicketQRCode.tsx
 create mode 100644 src/features/ticket-qr/TicketQRPage.tsx
 create mode 100644 src/hooks/useTicketClaimParams.tsx

diff --git a/src/constants/common.ts b/src/constants/common.ts
index 9b572136..c9606ca7 100644
--- a/src/constants/common.ts
+++ b/src/constants/common.ts
@@ -23,4 +23,4 @@ export const MAX_FILE_SIZE = 10000000;
 export const PAGE_SIZE_LIMIT = 5;
 export const NFT_ATTEMPT_KEY = 'NFT_ATTEMPT';
 export const PAGE_QUERY_PARAM = 'page';
-export const KEYPOM_EVENTS_CONTRACT = '1709855966879-kp-ticketing.testnet';
+export const KEYPOM_EVENTS_CONTRACT = '1709933659487-kp-ticketing.testnet';
diff --git a/src/features/claim/components/ticket/QrDetails.tsx b/src/features/claim/components/ticket/QrDetails.tsx
index 97dcf435..8c402e25 100644
--- a/src/features/claim/components/ticket/QrDetails.tsx
+++ b/src/features/claim/components/ticket/QrDetails.tsx
@@ -4,9 +4,10 @@ import QRCode from 'react-qr-code';
 interface QrDetailsProps {
   qrValue: string;
   ticketName: string;
+  eventName: string;
 }
 
-export const QrDetails = ({ qrValue, ticketName }: QrDetailsProps) => {
+export const QrDetails = ({ qrValue, ticketName, eventName }: QrDetailsProps) => {
   const handleDownloadQrCode = () => {
     const svg = document.getElementById('QRCode');
 
@@ -50,16 +51,11 @@ export const QrDetails = ({ qrValue, ticketName }: QrDetailsProps) => {
       >
         <QRCode id="QRCode" size={240} value={qrValue} />
       </Box>
-      <Text
-        color="gray.800"
-        fontWeight="500"
-        mb="4"
-        size={{ base: 'xl', md: '2xl' }}
-        textAlign="center"
-      >
-        {ticketName}
+      <Text color="gray.800" fontWeight="500" mb="1" size="xl" textAlign="center">
+        {eventName}
       </Text>
-      <Text color="gray.600" mb="6" size={{ base: 'sm', md: 'md' }} textAlign="center">
+
+      <Text color="gray.600" mb="6" size={{ base: 'sm', md: 'sm' }} textAlign="center">
         Save this QR code and show it at the event to gain entry.
       </Text>
       <Button variant="outline" w="full" onClick={handleDownloadQrCode}>
diff --git a/src/features/ticket-qr/TicketQRCode.tsx b/src/features/ticket-qr/TicketQRCode.tsx
deleted file mode 100644
index 75bad1fb..00000000
--- a/src/features/ticket-qr/TicketQRCode.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Box } from '@chakra-ui/react';
-
-export default function TicketQrCode() {
-  return <Box>Hello World</Box>;
-}
diff --git a/src/features/ticket-qr/TicketQRPage.tsx b/src/features/ticket-qr/TicketQRPage.tsx
new file mode 100644
index 00000000..f8264bfd
--- /dev/null
+++ b/src/features/ticket-qr/TicketQRPage.tsx
@@ -0,0 +1,117 @@
+import { Box, Center, Flex, Heading, Hide, Image, Text, VStack } from '@chakra-ui/react';
+import { useEffect, useState } from 'react';
+import { getPubFromSecret } from 'keypom-js';
+
+import { IconBox } from '@/components/IconBox';
+import { TicketIcon } from '@/components/Icons';
+import { BoxWithShape } from '@/components/BoxWithShape';
+import { QrDetails } from '@/features/claim/components/ticket/QrDetails';
+import { useTicketClaimParams } from '@/hooks/useTicketClaimParams';
+import { NotFound404 } from '@/components/NotFound404';
+import keypomInstance from '@/lib/keypom';
+import { type FunderEventMetadata, type EventDropMetadata } from '@/lib/eventsHelpers';
+
+export default function TicketQRPage() {
+  const { dropId, secretKey } = useTicketClaimParams();
+
+  const [isValid, setIsValid] = useState(true);
+  const [isLoading, setIsLoading] = useState(true);
+
+  const [ticketName, setTicketName] = useState('');
+  const [eventImage, setEventImage] = useState('');
+  const [eventName, setEventName] = useState('');
+
+  useEffect(() => {
+    const getEventInfo = async () => {
+      setIsLoading(true);
+      const pubKey = getPubFromSecret(secretKey);
+      const keyInfo: { drop_id: string } = await keypomInstance.viewCall({
+        methodName: 'get_key_information',
+        args: { key: pubKey },
+      });
+      const drop: { drop_id: string; funder_id: string; drop_config: { metadata: string } } =
+        await keypomInstance.viewCall({
+          methodName: 'get_drop_information',
+          args: { drop_id: keyInfo.drop_id },
+        });
+      const ticketMetadata: EventDropMetadata = JSON.parse(drop.drop_config.metadata);
+      const eventInfo: FunderEventMetadata = await keypomInstance.getEventInfo({
+        accountId: drop.funder_id,
+        eventId: ticketMetadata.eventId,
+      });
+      console.log('eventInfo', eventInfo);
+      console.log('ticketMetadata', ticketMetadata);
+      setTicketName(ticketMetadata.name);
+      setEventImage(eventInfo.artwork);
+      setEventName(eventInfo.name);
+      setIsLoading(false);
+    };
+    try {
+      getEventInfo();
+    } catch (e) {
+      console.error('Error getting event info: ', e);
+
+      setIsValid(false);
+    }
+  }, []);
+
+  if (!isValid) {
+    return (
+      <NotFound404 header="Ticket not found" subheader="Please check your email and try again" />
+    );
+  }
+
+  return (
+    <Center>
+      <VStack
+        gap={{ base: 'calc(24px + 8px)', md: 'calc(32px + 10px)' }}
+        paddingBottom="20"
+        paddingTop="20"
+      >
+        <Heading fontSize={{ base: '2xl', md: '3xl' }} fontWeight="500" textAlign="center">
+          {ticketName}
+        </Heading>
+
+        <IconBox
+          icon={<TicketIcon height={{ base: '8', md: '10' }} width={{ base: '8', md: '10' }} />}
+          maxW={{ base: '345px', md: '30rem' }}
+          minW={{ base: 'inherit', md: '345px' }}
+          p="0"
+          pb="0"
+        >
+          <Box>
+            <BoxWithShape bg="white" borderTopRadius="8xl" w="full">
+              <QrDetails eventName={eventName} qrValue={secretKey} ticketName={ticketName} />
+            </BoxWithShape>
+            <Flex
+              align="center"
+              bg="gray.50"
+              borderBottomRadius="8xl"
+              flexDir="column"
+              px="6"
+              py="8"
+            >
+              <Image
+                alt={`Event image for ${ticketName}`}
+                borderRadius="12px"
+                objectFit="contain"
+                src={eventImage}
+              />
+              <Hide above="md">
+                <Text
+                  color="gray.600"
+                  fontWeight="600"
+                  mb="2"
+                  size={{ base: 'sm', md: 'md' }}
+                  textAlign="center"
+                >
+                  {eventName}
+                </Text>
+              </Hide>
+            </Flex>
+          </Box>
+        </IconBox>
+      </VStack>
+    </Center>
+  );
+}
diff --git a/src/hooks/useTicketClaimParams.tsx b/src/hooks/useTicketClaimParams.tsx
new file mode 100644
index 00000000..af1be6a2
--- /dev/null
+++ b/src/hooks/useTicketClaimParams.tsx
@@ -0,0 +1,28 @@
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+
+export const useTicketClaimParams = () => {
+  const navigate = useNavigate();
+  const { id: dropId = '' } = useParams();
+  const { hash } = useLocation();
+
+  let secretKey = '';
+  if (hash !== undefined) {
+    secretKey = hash.replace('#', '');
+  }
+
+  if (dropId === undefined || dropId === '' || secretKey === undefined || secretKey === '') {
+    console.error(
+      'Navigating to home page. dropId or SecretKey are not found in the URL paramater',
+    );
+    navigate('/');
+    return {
+      dropId: '',
+      secretKey: '',
+    };
+  }
+
+  return {
+    dropId,
+    secretKey,
+  };
+};
diff --git a/src/router.tsx b/src/router.tsx
index 2fa67fe7..6f628e58 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -21,7 +21,7 @@ const AllDropsPage = React.lazy(
   async () => await import('./features/all-drops/routes/AllDropsPage'),
 );
 
-const TicketQRCodePage = React.lazy(async () => await import('./features/ticket-qr/TicketQRCode'));
+const TicketQRCodePage = React.lazy(async () => await import('./features/ticket-qr/TicketQRPage'));
 const AllEventsPage = React.lazy(
   async () => await import('./features/all-drops/routes/AllEventsPage'),
 );

From 398cb48b085b7dc6fe05a5b05b945f1ffd82e122 Mon Sep 17 00:00:00 2001
From: BenKurrek <bkurrek@uwaterloo.ca>
Date: Fri, 8 Mar 2024 17:14:42 -0500
Subject: [PATCH 2/2] implemented error checking and skeleton loaders

---
 .../claim/components/ticket/TicketQRPage.tsx  |   2 +-
 src/features/ticket-qr/TicketQRPage.tsx       | 111 ++++++++++--------
 2 files changed, 62 insertions(+), 51 deletions(-)

diff --git a/src/features/claim/components/ticket/TicketQRPage.tsx b/src/features/claim/components/ticket/TicketQRPage.tsx
index c49e0601..48536e64 100644
--- a/src/features/claim/components/ticket/TicketQRPage.tsx
+++ b/src/features/claim/components/ticket/TicketQRPage.tsx
@@ -57,7 +57,7 @@ export const TicketQRPage = () => {
           {isShowSummary ? (
             <Box>
               <BoxWithShape bg="white" borderTopRadius="8xl" w="full ">
-                <QrDetails qrValue={qrValue} ticketName={title} />
+                <QrDetails eventName={title} qrValue={qrValue} ticketName={title} />
               </BoxWithShape>
               <Flex
                 align="center"
diff --git a/src/features/ticket-qr/TicketQRPage.tsx b/src/features/ticket-qr/TicketQRPage.tsx
index f8264bfd..671d6a15 100644
--- a/src/features/ticket-qr/TicketQRPage.tsx
+++ b/src/features/ticket-qr/TicketQRPage.tsx
@@ -1,4 +1,4 @@
-import { Box, Center, Flex, Heading, Hide, Image, Text, VStack } from '@chakra-ui/react';
+import { Box, Center, Flex, Heading, Hide, Image, Skeleton, Text, VStack } from '@chakra-ui/react';
 import { useEffect, useState } from 'react';
 import { getPubFromSecret } from 'keypom-js';
 
@@ -12,7 +12,7 @@ import keypomInstance from '@/lib/keypom';
 import { type FunderEventMetadata, type EventDropMetadata } from '@/lib/eventsHelpers';
 
 export default function TicketQRPage() {
-  const { dropId, secretKey } = useTicketClaimParams();
+  const { secretKey } = useTicketClaimParams();
 
   const [isValid, setIsValid] = useState(true);
   const [isLoading, setIsLoading] = useState(true);
@@ -23,36 +23,33 @@ export default function TicketQRPage() {
 
   useEffect(() => {
     const getEventInfo = async () => {
-      setIsLoading(true);
-      const pubKey = getPubFromSecret(secretKey);
-      const keyInfo: { drop_id: string } = await keypomInstance.viewCall({
-        methodName: 'get_key_information',
-        args: { key: pubKey },
-      });
-      const drop: { drop_id: string; funder_id: string; drop_config: { metadata: string } } =
-        await keypomInstance.viewCall({
-          methodName: 'get_drop_information',
-          args: { drop_id: keyInfo.drop_id },
+      try {
+        setIsLoading(true);
+        const pubKey = getPubFromSecret(secretKey);
+        const keyInfo: { drop_id: string } = await keypomInstance.viewCall({
+          methodName: 'get_key_information',
+          args: { key: pubKey },
         });
-      const ticketMetadata: EventDropMetadata = JSON.parse(drop.drop_config.metadata);
-      const eventInfo: FunderEventMetadata = await keypomInstance.getEventInfo({
-        accountId: drop.funder_id,
-        eventId: ticketMetadata.eventId,
-      });
-      console.log('eventInfo', eventInfo);
-      console.log('ticketMetadata', ticketMetadata);
-      setTicketName(ticketMetadata.name);
-      setEventImage(eventInfo.artwork);
-      setEventName(eventInfo.name);
-      setIsLoading(false);
+        const drop: { drop_id: string; funder_id: string; drop_config: { metadata: string } } =
+          await keypomInstance.viewCall({
+            methodName: 'get_drop_information',
+            args: { drop_id: keyInfo.drop_id },
+          });
+        const ticketMetadata: EventDropMetadata = JSON.parse(drop.drop_config.metadata);
+        const eventInfo: FunderEventMetadata = await keypomInstance.getEventInfo({
+          accountId: drop.funder_id,
+          eventId: ticketMetadata.eventId,
+        });
+        setTicketName(ticketMetadata.name);
+        setEventImage(eventInfo.artwork);
+        setEventName(eventInfo.name);
+        setIsLoading(false);
+      } catch (e) {
+        console.error('Error getting event info: ', e);
+        setIsValid(false);
+      }
     };
-    try {
-      getEventInfo();
-    } catch (e) {
-      console.error('Error getting event info: ', e);
-
-      setIsValid(false);
-    }
+    getEventInfo();
   }, []);
 
   if (!isValid) {
@@ -68,12 +65,18 @@ export default function TicketQRPage() {
         paddingBottom="20"
         paddingTop="20"
       >
-        <Heading fontSize={{ base: '2xl', md: '3xl' }} fontWeight="500" textAlign="center">
-          {ticketName}
-        </Heading>
+        <Skeleton fadeDuration={1} isLoaded={!isLoading}>
+          <Heading fontSize={{ base: '2xl', md: '3xl' }} fontWeight="500" textAlign="center">
+            {isLoading ? 'Loading ticket...' : ticketName}
+          </Heading>
+        </Skeleton>
 
         <IconBox
-          icon={<TicketIcon height={{ base: '8', md: '10' }} width={{ base: '8', md: '10' }} />}
+          icon={
+            <Skeleton isLoaded={!isLoading}>
+              <TicketIcon height={{ base: '8', md: '10' }} width={{ base: '8', md: '10' }} />
+            </Skeleton>
+          }
           maxW={{ base: '345px', md: '30rem' }}
           minW={{ base: 'inherit', md: '345px' }}
           p="0"
@@ -81,7 +84,11 @@ export default function TicketQRPage() {
         >
           <Box>
             <BoxWithShape bg="white" borderTopRadius="8xl" w="full">
-              <QrDetails eventName={eventName} qrValue={secretKey} ticketName={ticketName} />
+              {isLoading ? (
+                <Skeleton height="200px" width="full" />
+              ) : (
+                <QrDetails eventName={eventName} qrValue={secretKey} ticketName={ticketName} />
+              )}
             </BoxWithShape>
             <Flex
               align="center"
@@ -91,22 +98,26 @@ export default function TicketQRPage() {
               px="6"
               py="8"
             >
-              <Image
-                alt={`Event image for ${ticketName}`}
-                borderRadius="12px"
-                objectFit="contain"
-                src={eventImage}
-              />
+              <Skeleton borderRadius="12px" isLoaded={!isLoading}>
+                <Image
+                  alt={`Event image for ${ticketName}`}
+                  borderRadius="12px"
+                  objectFit="contain"
+                  src={eventImage}
+                />
+              </Skeleton>
               <Hide above="md">
-                <Text
-                  color="gray.600"
-                  fontWeight="600"
-                  mb="2"
-                  size={{ base: 'sm', md: 'md' }}
-                  textAlign="center"
-                >
-                  {eventName}
-                </Text>
+                <Skeleton isLoaded={!isLoading} mt="4">
+                  <Text
+                    color="gray.600"
+                    fontWeight="600"
+                    mb="2"
+                    size={{ base: 'sm', md: 'md' }}
+                    textAlign="center"
+                  >
+                    {eventName}
+                  </Text>
+                </Skeleton>
               </Hide>
             </Flex>
           </Box>