Merge branch 'chore/fresh-build-tests' into Gallery

keypom · Mar 22, 2024 · 1893317 · 1893317
2 parents 0aa273c + 01ab153
commit 1893317
Show file tree

Hide file tree

Showing 10 changed files with 3,081 additions and 2,445 deletions.
diff --git a/package.json b/package.json
@@ -33,11 +33,11 @@
     "@near-wallet-selector/near-wallet": "^7.6.1",
     "bn.js": "^5.2.1",
     "copy-to-clipboard": "^3.3.3",
-    "date-fns": "^3.3.1",
     "framer-motion": "^8.5.5",
     "idb-keyval": "^6.2.0",
     "ipfs-car": "^0.9.2",
     "keypom-js": "^1.4.7",
+    "luxon": "^3.4.4",
     "mathjs": "^11.5.1",
     "near-api-js": "^1.1.0",
     "react": "^18.2.0",
@@ -88,7 +88,8 @@
     "stream-browserify": "^3.0.0",
     "tslint-config-prettier": "^1.18.0",
     "typescript": "^4.9.5",
-    "util": "^0.12.3"
+    "util": "^0.12.3",
+    "vm-browserify": "^1.1.2"
   },
   "browserslist": [
     "last 2 Chrome versions"

diff --git a/src/components/DateRangePicker/helpers.tsx b/src/components/DateRangePicker/helpers.tsx
@@ -1,4 +1,4 @@
-import { format, parse } from 'date-fns';
+import { DateTime } from 'luxon';
 
 export const canClose = (
   startDate,
@@ -22,30 +22,12 @@ export const canClose = (
 };
 
 export const checkAndSetTime = (inputValue, setTimeText, setIsErr) => {
-  // If the input is empty, reset the error state and the time
-  if (!inputValue) {
-    setTimeText('');
+  const parsedTime = DateTime.fromFormat(inputValue, 'h:mm a');
+  if (parsedTime.isValid) {
+    setTimeText(parsedTime.toFormat('h:mm a'));
     setIsErr(false);
-    return;
-  }
-
-  // Adjusted regex to match XX:XX AM/PM, X:XX AM/PM, or 0X:XX AM/PM
-  const isValidTime = /^(1[0-2]|0?[1-9]):[0-5][0-9] [AP]M$/;
-
-  if (isValidTime.test(inputValue)) {
-    try {
-      // Assuming parse and format functions are imported from a date library like date-fns
-      const parsedTime = parse(inputValue, 'h:mm a', new Date());
-      // Format and set the valid time using 'h:mm a' to accommodate the flexible hour format
-      setTimeText(format(parsedTime, 'h:mm a'));
-      setIsErr(false);
-    } catch (error) {
-      // If parsing fails, set an error state
-      console.error('Error parsing time:', error);
-      setIsErr(true);
-    }
   } else {
-    // If the regex test fails, set an error state
+    console.error('Error parsing time:', parsedTime.invalidReason);
     setIsErr(true);
   }
 };
diff --git a/src/components/FormControl/FormControl.tsx b/src/components/FormControl/FormControl.tsx
@@ -14,6 +14,7 @@ export interface FormControlProps extends CFormControlProps {
   errorText?: string;
   labelProps?: FormLabelProps;
   helperTextProps?: Record<string, unknown>;
+  marginY?: string;
 }
 
 export const FormControlComponent = ({
@@ -23,10 +24,11 @@ export const FormControlComponent = ({
   children,
   labelProps,
   helperTextProps,
+  marginY = '5',
   ...props
 }: PropsWithChildren<FormControlProps>) => {
   return (
-    <CFormControl my="5" textAlign="left" {...props}>
+    <CFormControl my={marginY} textAlign="left" {...props}>
       <FormLabel color="gray.800" fontSize={{ base: 'sm', md: 'base' }} m="0" {...labelProps}>
         {label}
       </FormLabel>

diff --git a/src/components/ToggleColorModeButton/ToggleColorModeButton.tsx b/src/components/ToggleColorModeButton/ToggleColorModeButton.tsx
@@ -0,0 +1,12 @@
+import { useColorMode, Button } from '@chakra-ui/react';
+
+export const ToggleColorModeButton = () => {
+  const { colorMode, toggleColorMode } = useColorMode();
+  console.log('colorMode', colorMode);
+  console.log('toggleColorMode', toggleColorMode);
+  return (
+    <Button onClick={toggleColorMode}>
+      Switch to {colorMode === 'light' ? 'dark' : 'light'} mode
+    </Button>
+  );
+};
diff --git a/src/constants/common.ts b/src/constants/common.ts
@@ -22,6 +22,7 @@ export const MAX_FILE_SIZE = 10000000;
 
 export const WORKER_BASE_URL = 'https://keypom-nft-storage.keypom.workers.dev/';
 export const EVENTS_WORKER_IPFS_PINNING = 'https://stripe-worker.kp-capstone.workers.dev/ipfs-pin';
+export const EVENTS_WORKER_BASE = 'https://stripe-worker.kp-capstone.workers.dev';
 
 export const PAGE_SIZE_LIMIT = 5;
 export const NFT_ATTEMPT_KEY = 'NFT_ATTEMPT';

diff --git a/src/features/create-drop/components/ticket/EventInfoForm.tsx b/src/features/create-drop/components/ticket/EventInfoForm.tsx
@@ -145,8 +145,10 @@ const EventInfoForm = (props: EventStepFormProps) => {
     setDatePreviewText(datePreviewText);
   }, [formData.date]);
 
+  const margins = '2 !important';
+
   const datePickerCTA = (
-    <FormControlComponent errorText={formData.date.error} label="Date*">
+    <FormControlComponent errorText={formData.date.error} label="Date*" my={margins}>
       <Input
         readOnly
         isInvalid={!!formData.date.error}
@@ -173,12 +175,8 @@ const EventInfoForm = (props: EventStepFormProps) => {
 
   return (
     <HStack align="top" justifyContent="space-between">
-      <VStack spacing="4" w="100%">
-        <FormControlComponent
-          errorText={formData.eventName.error}
-          label="Event name*"
-          marginBottom="0"
-        >
+      <VStack spacing="0" w="100%">
+        <FormControlComponent errorText={formData.eventName.error} label="Event name*" my={margins}>
           <Input
             isInvalid={!!formData.eventName.error}
             maxLength={500}
@@ -198,6 +196,7 @@ const EventInfoForm = (props: EventStepFormProps) => {
         <FormControlComponent
           errorText={formData.eventDescription.error}
           label="Event description*"
+          my={margins}
         >
           <Input
             isInvalid={!!formData.eventDescription.error}
@@ -215,7 +214,11 @@ const EventInfoForm = (props: EventStepFormProps) => {
             }}
           />
         </FormControlComponent>
-        <FormControlComponent errorText={formData.eventLocation.error} label="Event location*">
+        <FormControlComponent
+          errorText={formData.eventLocation.error}
+          label="Event location*"
+          my={margins}
+        >
           <Input
             isInvalid={!!formData.eventLocation.error}
             maxLength={500}
@@ -279,7 +282,11 @@ const EventInfoForm = (props: EventStepFormProps) => {
             }}
           />
         </Hide>
-        <FormControlComponent helperText="Customize your event page" label="Event artwork">
+        <FormControlComponent
+          helperText="Customize your event page"
+          label="Event artwork"
+          my={margins}
+        >
           <ImageFileInput
             accept=" image/jpeg, image/png, image/gif"
             errorMessage={formData.eventArtwork.error}

diff --git a/src/features/create-drop/components/ticket/ModifyTicketModal.tsx b/src/features/create-drop/components/ticket/ModifyTicketModal.tsx
@@ -10,7 +10,7 @@ import {
   VStack,
 } from '@chakra-ui/react';
 import { useEffect, useRef, useState } from 'react';
-import { parse, isAfter } from 'date-fns';
+import { DateTime } from 'luxon';
 
 import { FormControlComponent } from '@/components/FormControl';
 import CustomDateRangePicker from '@/components/DateRangePicker/DateRangePicker';
@@ -37,12 +37,6 @@ export const isValidNonNegativeNumber = (value) => {
   return /^\d*\.?\d+$/.test(value);
 };
 
-// Helper function to parse time strings
-const parseTime = (timeString) => {
-  // Assuming timeString is in format "XX:XX AM" or "XX:XX PM"
-  return parse(timeString, 'hh:mm aa', new Date());
-};
-
 interface ModifyTicketModalProps {
   isOpen: boolean;
   onClose: (shouldAdd: boolean, editedTicket?: TicketInfoFormMetadata) => void;
@@ -53,6 +47,13 @@ interface ModifyTicketModalProps {
   editedTicket?: TicketInfoFormMetadata;
 }
 
+// Function to parse a time string and return a Luxon DateTime object
+const parseTime = (timeString) => {
+  // Assuming your time string format is "HH:mm" (e.g., "14:00" for 2:00 PM)
+  // Adjust the format as necessary to match your input format
+  return DateTime.fromFormat(timeString, 'H:mm');
+};
+
 export const ModifyTicketModal = ({
   isOpen,
   onClose,
@@ -102,9 +103,8 @@ export const ModifyTicketModal = ({
     if (currentTicket.salesValidThrough.endTime && currentTicket.salesValidThrough.startTime) {
       const startTime = parseTime(currentTicket.salesValidThrough.startTime);
       const endTime = parseTime(currentTicket.salesValidThrough.endTime);
-      console.log('startTime', startTime, 'endTime', endTime);
 
-      if (!isAfter(endTime, startTime)) {
+      if (endTime <= startTime) {
         newErrors.salesValidThrough = 'End time must be greater than start time';
         isErr = true;
       }
@@ -114,8 +114,9 @@ export const ModifyTicketModal = ({
       const startTime = parseTime(currentTicket.passValidThrough.startTime);
       const endTime = parseTime(currentTicket.passValidThrough.endTime);
 
-      if (!isAfter(endTime, startTime)) {
-        newErrors.salesValidThrough = 'End time must be greater than start time';
+      // Use Luxon's isAfter method to compare times
+      if (endTime <= startTime) {
+        newErrors.passValidThrough = 'End time must be greater than start time';
         isErr = true;
       }
     }
@@ -144,12 +145,14 @@ export const ModifyTicketModal = ({
     }
   };
 
+  const margins = '2';
+
   const datePickerCTA = (label: string, errorField: string, dateObject: EventDate, onClick) => (
     <FormControlComponent
       errorText={errorField}
       label={label}
       labelProps={{ fontSize: { base: 'xs', md: 'sm' } }}
-      marginBottom="4 !important"
+      marginY={margins}
     >
       <Input
         readOnly
@@ -260,7 +263,7 @@ export const ModifyTicketModal = ({
             errorText={errors.name}
             label="Ticket name*"
             labelProps={{ fontSize: { base: 'xs', md: 'sm' } }}
-            marginBottom="4"
+            marginY={margins}
           >
             <Input
               borderRadius="5xl"
@@ -287,7 +290,7 @@ export const ModifyTicketModal = ({
             errorText={errors.description}
             label="Description*"
             labelProps={{ fontSize: { base: 'xs', md: 'sm' } }}
-            marginBottom="4 !important"
+            marginY={margins}
           >
             <Textarea
               borderRadius="5xl"
@@ -440,7 +443,7 @@ export const ModifyTicketModal = ({
             helperTextProps={{ fontSize: { base: 'xs', md: 'xs' }, marginY: '-1' }}
             label="Number of tickets*"
             labelProps={{ fontSize: { base: 'xs', md: 'sm' } }}
-            marginBottom="4 !important"
+            marginY={margins}
           >
             <Input
               ref={inputRef}
@@ -477,7 +480,7 @@ export const ModifyTicketModal = ({
           <FormControlComponent
             label="Ticket artwork*"
             labelProps={{ fontSize: { base: 'xs', md: 'sm' } }}
-            marginBottom="4 !important"
+            marginY={margins}
           >
             <ImageFileInput
               accept=" image/jpeg, image/png, image/gif"

diff --git a/src/features/create-drop/components/ticket/TicketPriceSelector.tsx b/src/features/create-drop/components/ticket/TicketPriceSelector.tsx
@@ -40,7 +40,7 @@ export default function TicketPriceSelector({
       errorText={errors.price}
       label="Price per ticket (NEAR)*"
       labelProps={{ fontSize: { base: 'xs', md: 'sm' } }}
-      marginBottom="4 !important"
+      marginY="2"
     >
       <VStack alignItems="flex-start">
         <HStack justifyContent="space-between" width="100%">
@@ -101,7 +101,7 @@ export default function TicketPriceSelector({
             onChange={handleCustomPriceChange}
           />
         </HStack>
-        <Text color="gray.400" fontSize="xs" fontWeight="400" marginTop="0 !important">
+        <Text color="gray.400" fontSize="xs" fontWeight="400" marginTop="-2 !important">
           {parseInt(currentTicket.price) > 0
             ? `You receive ${
                 parseInt(currentTicket.price) -

diff --git a/src/features/create-drop/routes/CreateTicketDropPage.tsx b/src/features/create-drop/routes/CreateTicketDropPage.tsx
@@ -8,7 +8,7 @@ import { IconBox } from '@/components/IconBox';
 import { LinkIcon } from '@/components/Icons';
 import { Step } from '@/components/Step';
 import { useAuthWalletContext } from '@/contexts/AuthWalletContext';
-import { EVENTS_WORKER_IPFS_PINNING, KEYPOM_EVENTS_CONTRACT } from '@/constants/common';
+import { EVENTS_WORKER_BASE, KEYPOM_EVENTS_CONTRACT } from '@/constants/common';
 
 import { CreateTicketDropLayout } from '../components/CreateTicketDropLayout';
 import { CollectInfoForm } from '../components/ticket/CollectInfoForm';
@@ -264,7 +264,8 @@ export default function NewTicketDrop() {
 
     let response: Response | undefined;
     try {
-      response = await fetch(EVENTS_WORKER_IPFS_PINNING, {
+      const url = `${EVENTS_WORKER_BASE}/ipfs-pin`;
+      response = await fetch(url, {
         method: 'POST',
         body: JSON.stringify({ base64Data: serializedData }),
       });
@@ -370,7 +371,7 @@ export default function NewTicketDrop() {
           </HStack>
           {CurrentStepComponent}
         </IconBox>
-        <HStack justifyContent="flex-end" py={{ base: '4' }} spacing="auto">
+        <HStack justifyContent="space-between" py={{ base: '4' }} spacing="auto">
           <HStack>
             <Button
               fontSize={{ base: 'sm', md: 'base' }}