Merge pull request #36 from Ayush272002/components

Components

.eslintrc.json

@@ -2,6 +2,8 @@
   "extends": ["next/core-web-vitals", "next/typescript"],
   "rules": {
     "@next/next/no-img-element": "off",
-    "@typescript-eslint/no-explicit-any": "off"
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-empty-object-type": "off",
+    "@typescript-eslint/no-unused-vars":"off"
   }
 }

README.md

@@ -1,9 +1,11 @@
 # TicketChain
 
 ## Problem
+
 Many popular ticket sites exist, that allow customers to browse different upcoming events in their area and book tickets, however we identified several issues with these centralised service model:
+
 - Tickets cannot be easily transferred
-  - Many existing platforms make it difficult if not impossible to transfer tickets between different users. This means people don't have *true* ownership over their purchased tickets.
+  - Many existing platforms make it difficult if not impossible to transfer tickets between different users. This means people don't have _true_ ownership over their purchased tickets.
 - Complex user interfaces
   - User interfaces on many of these websites can be quite complex and complicated, which can make it hard to book the right ticket and can often lead to customers making costly mistakes.
 - Scalability issues
@@ -12,8 +14,9 @@ Many popular ticket sites exist, that allow customers to browse different upcomi
   - These central services consolidate all of the data and compute for their services in one spot. One possible risk to consider is a cyberattack - if the central organisation is compromised, all customer data is at risk of being stolen and leaked. Another possible risk is the central server going down, meaning ticket services would go down, which is not ideal if thousands of attendees are trying to verify themselves at an event.
 
 ## Proposal
+
 We propose to build a solution which tackles these issues head-on. TicketChain is a decentralised website which allows users to browse upcoming events, and book tickets for these events through verifiable, immutable blockchain transactions. This allows users to purchase tickets. Functionality also exists for users to transfer their tickets to other users.
 
 This is made possible through the use of smart contracts deployed on the blockchain which expose several public read and write methods, which can be invoked through our front-end user interface. A record of transactions are kept secure on the blockchain, and no central entity can tamper with these transactions.
 
-Because the main application logic is on the blockchain, this means we can exploit the blockchains' scalability and durability during high levels of demand. The workload of execution is split between nodes and transaction gas fees pay for the compute required during levels of high demand for the service, solving the issue of central services being unscalable and avoiding us from having a single point of failure.
+Because the main application logic is on the blockchain, this means we can exploit the blockchains' scalability and durability during high levels of demand. The workload of execution is split between nodes and transaction gas fees pay for the compute required during levels of high demand for the service, solving the issue of central services being unscalable and avoiding us from having a single point of failure.

components/PreviousTickets.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { PreviousTicketComponent } from '@/components/custom/previousTicket';
+
+const PreviousTickets = () => {
+  return (
+    <div className="flex flex-col space-y-4">
+      <PreviousTicketComponent
+        name="Concert Ticket"
+        status={true}
+        description="This is a previous ticket for a concert event."
+        capacity={500}
+        ticketPrice={50}
+        eventStartDate={new Date('2023-09-15T19:00:00')}
+        eventHost="0x1234567890abcdef1234567890abcdef12345678"
+      />
+      <PreviousTicketComponent
+        name="Festival Ticket"
+        status={false}
+        description="This is a previous ticket for a festival event."
+        capacity={1000}
+        ticketPrice={100}
+        eventStartDate={new Date('2023-07-10T12:00:00')}
+        eventEndDate={new Date('2023-07-12T23:59:00')} // Optional, passed here
+        eventHost="0xabcdef1234567890abcdef1234567890abcdef12"
+      />
+    </div>
+  );
+};
+
+export default PreviousTickets;

components/custom/EventForm.tsx

@@ -0,0 +1,223 @@
+'use client';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+
+// Define the schema using Zod
+const eventSchema = z
+  .object({
+    name: z.string().min(1, { message: 'Event name is required' }),
+    description: z.string().min(1, { message: 'Description is required' }),
+    capacity: z
+      .number({ invalid_type_error: 'Capacity must be a number' })
+      .min(1, { message: 'Capacity must be at least 1' })
+      .refine(Number.isInteger, { message: 'Capacity must be an integer' }),
+    ticketPrice: z
+      .number({ invalid_type_error: 'Ticket price must be a number' })
+      .min(0, { message: 'Ticket price must be at least 0' })
+      .refine(Number.isInteger, { message: 'Ticket price must be in cents' }),
+    location: z.string().min(1, { message: 'Location is required' }),
+    eventStartTime: z.preprocess(
+      (val) =>
+        typeof val === 'string' && val !== '' ? new Date(val) : undefined,
+      z
+        .date({ required_error: 'Event start time is required' })
+        .min(new Date(), { message: 'Event start time must be in the future' })
+    ),
+    eventEndTime: z.preprocess(
+      (val) =>
+        typeof val === 'string' && val !== '' ? new Date(val) : undefined,
+      z.date().optional()
+    ),
+    images: z.preprocess(
+      (val) => {
+        if (Array.isArray(val)) {
+          // Filter out empty strings
+          return val.filter((v) => v !== '');
+        }
+        return [];
+      },
+      z
+        .array(z.string().url({ message: 'Invalid image URL format' }))
+        .optional()
+    ),
+  })
+  .superRefine((data, ctx) => {
+    if (data.eventEndTime && data.eventEndTime <= data.eventStartTime) {
+      ctx.addIssue({
+        code: 'custom',
+        message: 'Event end time must be after the start time',
+        path: ['eventEndTime'],
+      });
+    }
+  });
+
+// Define the TypeScript type based on the Zod schema
+type EventFormData = z.infer<typeof eventSchema>;
+
+interface EventFormProps {
+  onSubmit: (data: EventFormData) => void;
+}
+
+const EventForm = ({ onSubmit }: EventFormProps) => {
+  const [imageFields, setImageFields] = useState<string[]>(['']);
+
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+    watch,
+  } = useForm<EventFormData>({
+    resolver: zodResolver(eventSchema),
+    mode: 'onChange',
+    defaultValues: {
+      images: [''],
+    },
+  });
+
+  const images = watch('images') || [];
+
+  const handleAddImageField = () => {
+    setImageFields((prev) => [...prev, '']);
+  };
+
+  const handleRemoveImageField = (index: number) => {
+    const updatedImages = [...imageFields];
+    updatedImages.splice(index, 1);
+    setImageFields(updatedImages);
+    // Also update the form values
+    setValue('images', updatedImages);
+  };
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+      {/* Name Field */}
+      <div>
+        <Label htmlFor="name">Event Name</Label>
+        <Input id="name" {...register('name')} />
+        {errors.name && <p className="text-red-500">{errors.name.message}</p>}
+      </div>
+
+      {/* Description Field */}
+      <div>
+        <Label htmlFor="description">Description</Label>
+        <Textarea id="description" {...register('description')} />
+        {errors.description && (
+          <p className="text-red-500">{errors.description.message}</p>
+        )}
+      </div>
+
+      {/* Capacity Field */}
+      <div>
+        <Label htmlFor="capacity">Capacity</Label>
+        <Input
+          type="number"
+          id="capacity"
+          {...register('capacity', { valueAsNumber: true })}
+        />
+        {errors.capacity && (
+          <p className="text-red-500">{errors.capacity.message}</p>
+        )}
+      </div>
+
+      {/* Ticket Price Field */}
+      <div>
+        <Label htmlFor="ticketPrice">Ticket Price (in USD cents)</Label>
+        <Input
+          type="number"
+          id="ticketPrice"
+          {...register('ticketPrice', { valueAsNumber: true })}
+        />
+        {errors.ticketPrice && (
+          <p className="text-red-500">{errors.ticketPrice.message}</p>
+        )}
+      </div>
+
+      {/* Location Field */}
+      <div>
+        <Label htmlFor="description">Location</Label>
+        <Textarea id="description" {...register('location')} />
+        {errors.description && (
+          <p className="text-red-500">{errors.description.message}</p>
+        )}
+      </div>
+
+      {/* Event Start Time Field */}
+      <div>
+        <Label htmlFor="eventStartTime">Event Start Date & Time</Label>
+        <Input
+          type="datetime-local"
+          id="eventStartTime"
+          {...register('eventStartTime')}
+        />
+        {errors.eventStartTime && (
+          <p className="text-red-500">{errors.eventStartTime.message}</p>
+        )}
+      </div>
+
+      {/* Event End Time Field */}
+      <div>
+        <Label htmlFor="eventEndTime">Event End Date & Time (Optional)</Label>
+        <Input
+          type="datetime-local"
+          id="eventEndTime"
+          {...register('eventEndTime')}
+        />
+        {errors.eventEndTime && (
+          <p className="text-red-500">{errors.eventEndTime.message}</p>
+        )}
+      </div>
+
+      {/* Images Field */}
+      <div>
+        <Label>Event Images (Optional)</Label>
+        {imageFields.map((_, index) => (
+          <div key={index} className="flex items-center space-x-2 mt-2">
+            <Input
+              type="text"
+              placeholder="Enter image URL"
+              {...register(`images.${index}`)}
+            />
+            {imageFields.length > 1 && (
+              <Button
+                type="button"
+                variant="destructive"
+                onClick={() => handleRemoveImageField(index)}
+              >
+                Remove
+              </Button>
+            )}
+          </div>
+        ))}
+        <Button type="button" onClick={handleAddImageField}>
+          Add URL
+        </Button>
+        {/* Display individual image URL errors */}
+        {errors.images &&
+          Array.isArray(errors.images) &&
+          errors.images.map((imgError, index) => {
+            if (imgError) {
+              const message = imgError.message || 'Invalid image URL';
+              return (
+                <p key={index} className="text-red-500">
+                  Image {index + 1}: {message}
+                </p>
+              );
+            }
+            return null;
+          })}
+      </div>
+
+      {/* Submit Button */}
+      <Button type="submit">Create Event</Button>
+    </form>
+  );
+};
+
+export default EventForm;

components/custom/previousTicket.tsx

@@ -0,0 +1,104 @@
+'use client';
+import * as React from 'react';
+import { motion } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card';
+
+export interface PreviousTicket {
+  name: string;
+  status: boolean;
+  description: string;
+  capacity: number;
+  ticketPrice: number;
+  eventStartDate: Date;
+  eventEndDate?: Date;
+  eventHost: string; // metamask address
+}
+
+const cardVariants = {
+  hidden: { opacity: 0, y: 10 },
+  visible: { opacity: 1, y: 0 },
+};
+
+export const PreviousTicketComponent = ({
+  name,
+  status,
+  description,
+  capacity,
+  ticketPrice,
+  eventStartDate,
+  eventEndDate,
+  eventHost,
+}: PreviousTicket) => {
+  return (
+    <motion.div
+      initial="hidden"
+      animate="visible"
+      variants={cardVariants}
+      transition={{ duration: 0.5, ease: 'easeOut' }}
+    >
+      <Card className="w-[350px] bg-[#1e2a3a] text-white shadow-lg">
+        <CardHeader>
+          <motion.div
+            initial={{ opacity: 0, y: -10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.1, duration: 0.5 }}
+          >
+            <CardTitle className="text-lg font-semibold">{name}</CardTitle>
+            <CardDescription className="text-gray-400">
+              Status: {status ? 'Active' : 'Inactive'}
+            </CardDescription>
+          </motion.div>
+        </CardHeader>
+        <CardContent>
+          <div className="grid gap-4 wrap">
+            <motion.div
+              initial={{ opacity: 0, x: -10 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 0.2, duration: 0.4 }}
+            >
+              <p className="text-gray-300 mb-2 whitespace-normal break-words">
+                {description}
+              </p>
+              <p className="text-gray-400">
+                <strong>Capacity:</strong> {capacity}
+              </p>
+              <p className="text-gray-400">
+                <strong>Ticket Price:</strong> ${ticketPrice.toFixed(2)}
+              </p>
+              <p className="text-gray-400">
+                <strong>Event Start:</strong> {eventStartDate.toLocaleString()}
+              </p>
+              {eventEndDate && (
+                <p className="text-gray-400">
+                  <strong>Event End:</strong> {eventEndDate.toLocaleString()}
+                </p>
+              )}
+              <p className="text-gray-400 whitespace-normal break-all">
+                <strong>Host:</strong> {eventHost}
+              </p>
+            </motion.div>
+          </div>
+        </CardContent>
+        <CardFooter className="flex justify-end">
+          <motion.div
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ delay: 0.4, duration: 0.4 }}
+          >
+            <Button className="bg-[#365b85] text-white hover:bg-[#2b4a70]">
+              View Details
+            </Button>
+          </motion.div>
+        </CardFooter>
+      </Card>
+    </motion.div>
+  );
+};

components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Textarea.displayName = 'Textarea';
+
+export { Textarea };

package.json

@@ -12,6 +12,7 @@
     "prepare": "husky"
   },
   "dependencies": {
+    "@hookform/resolvers": "^3.9.0",
     "@flarenetwork/flare-periphery-contracts": "^0.1.16",
     "@metamask/sdk-react": "^0.30.0",
     "@radix-ui/react-icons": "^1.3.0",
@@ -24,11 +25,14 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "embla-carousel-react": "^8.3.0",
+    "ethers": "^6.13.4",
     "framer-motion": "^11.11.10",
     "lucide-react": "^0.446.0",
     "next": "14.2.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-hook-form": "^7.53.1",
+    "zod": "^3.23.8",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7"
   },

tailwind.config.ts

@@ -72,6 +72,14 @@ const config: Config = {
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
       },
+      typography: {
+        wrap: {
+          '*': {
+            wordBreak: 'break-word',
+            overflowWrap: 'break-word',
+          },
+        },
+      },
     },
   },
   plugins: [tailwindcssAnimate, addVariablesForColors],

test/EventManager.test.ts

@@ -39,8 +39,8 @@ describe('EventManager', function () {
     );
   }
 
-  describe("Event Creation", function () {
+  describe('Event Creation', function () {
-    it("Should create an event with correct details", async function () {
+    it('Should create an event with correct details', async function () {
       await createTestEvent();
 
       const event = await eventManager.events(0);

tsconfig.json

@@ -23,4 +23,4 @@
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
   "exclude": ["node_modules", "test", "scripts", "hardhat.config.ts"]
-}
+}