Merge branch 'main' of https://github.com/Ayush272002/Event-Chain into add_buy_button_handler

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/FeaturedEvent.tsx

@@ -1,44 +1,51 @@
 'use client';
 import React from 'react';
 import {
-    Card,
-    CardHeader,
-    CardFooter,
-    CardTitle,
-    CardDescription,
-    CardContent,
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
 } from '@/components/ui/card';
 
 interface props {
-    name: string;
-    description: string;
-    location: string;
-    eventStartDate: number;
-    eventHost: string;
-    imageURL: string | null;
+  name: string;
+  description: string;
+  location: string;
+  eventStartDate: number;
+  eventHost: string;
+  imageURL: string | null;
 }
 
 const FeaturedEvent = ({
-    name, description, location, eventStartDate, eventHost, imageURL
+  name,
+  description,
+  location,
+  eventStartDate,
+  eventHost,
+  imageURL,
 }: props) => {
-    return <Card>
-        <CardHeader>
-            {imageURL && <img src={imageURL} alt={name}></img>}
-            <CardTitle>
-            {name}
-            </CardTitle>
-            <CardDescription>
-            {location}<br />
-            {new Date(eventStartDate*1000).toLocaleString()}
-            </CardDescription>
-        </CardHeader>
-        <CardContent>
-            {description}
-        </CardContent>
-        <CardFooter>
-            <i>Host: {eventHost.substring(0, 8)}...{eventHost.substring(eventHost.length-3)}</i>
-        </CardFooter>
+  return (
+    <Card>
+      <CardHeader>
+        {imageURL && <img src={imageURL} alt={name}></img>}
+        <CardTitle>{name}</CardTitle>
+        <CardDescription>
+          {location}
+          <br />
+          {new Date(eventStartDate * 1000).toLocaleString()}
+        </CardDescription>
+      </CardHeader>
+      <CardContent>{description}</CardContent>
+      <CardFooter>
+        <i>
+          Host: {eventHost.substring(0, 8)}...
+          {eventHost.substring(eventHost.length - 3)}
+        </i>
+      </CardFooter>
     </Card>
-}
+  );
+};
 
-export default FeaturedEvent;
+export default FeaturedEvent;

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/scripts/MetaMask.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect, useState } from 'react';
-import { useSDK, MetaMaskProvider } from '@metamask/sdk-react';
+import { WalletIcon } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import {
   Popover,
@@ -9,54 +9,87 @@ import {
   PopoverTrigger,
 } from '@/components/ui/popover';
 
-function WalletIcon(props: React.SVGProps<SVGSVGElement>) {
-  return (
-    <svg
-      {...props}
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      strokeWidth="2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    >
-      <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4" />
-      <path d="M3 5v14a2 2 0 0 0 2 2h16v-5" />
-      <path d="M18 12a2 2 0 0 0 0 4h4v-4Z" />
-    </svg>
-  );
-}
-
-function formatAddress(address: string | undefined): string {
-  if (!address) return '';
-  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+declare global {
+  interface Window {
+    ethereum?: {
+      isMetaMask?: boolean;
+      request: (request: {
+        method: string;
+        params?: Array<unknown>; // Use `unknown` instead of `any`
+      }) => Promise<unknown>; // Specify a more accurate return type if possible
+    };
+  }
 }
 
 function MetaMaskConnect() {
-  const { sdk, connected, connecting, account } = useSDK();
-  const [isConnected, setIsConnected] = useState(false);
+  const [isConnected, setIsConnected] = useState<boolean>(false);
+  const [account, setAccount] = useState<string | null>(null);
 
+  // Initial check on load
   useEffect(() => {
-    setIsConnected(connected);
-  }, [connected]);
+    const checkConnection = async () => {
+      if (typeof window !== 'undefined' && window.ethereum) {
+        try {
+          // Check if there are any accounts already connected
+          const accounts = (await window.ethereum.request({
+            method: 'eth_accounts',
+          })) as string[];
+          if (accounts && accounts.length > 0) {
+            setIsConnected(true);
+            setAccount(accounts[0]);
+            localStorage.setItem('isConnected', JSON.stringify(true));
+            localStorage.setItem('account', accounts[0]);
+          } else {
+            // No connected accounts found; check `localStorage`
+            const storedIsConnected = JSON.parse(
+              localStorage.getItem('isConnected') || 'false'
+            );
+            const storedAccount = localStorage.getItem('account') || null;
+            setIsConnected(storedIsConnected);
+            setAccount(storedAccount);
+          }
+        } catch (error) {
+          console.error('Error checking MetaMask connection:', error);
+        }
+      }
+    };
+
+    checkConnection();
+  }, []);
+
+  // Update localStorage whenever connection state changes
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      localStorage.setItem('isConnected', JSON.stringify(isConnected));
+      localStorage.setItem('account', account || '');
+    }
+  }, [isConnected, account]);
 
   const connect = async () => {
     try {
-      await sdk?.connect();
-      setIsConnected(true);
-    } catch (err) {
-      console.warn(`No accounts found`, err);
+      const accounts = (await window.ethereum?.request({
+        method: 'eth_requestAccounts',
+      })) as string[];
+      if (accounts && accounts.length > 0) {
+        setIsConnected(true);
+        setAccount(accounts[0]);
+        localStorage.setItem('isConnected', JSON.stringify(true));
+        localStorage.setItem('account', accounts[0]);
+      }
+    } catch (error) {
+      console.error('MetaMask connection failed:', error);
     }
   };
 
-  const disconnect = () => {
-    if (sdk) {
-      sdk.terminate();
-      setIsConnected(false);
-    }
+  const disconnect = async () => {
+    setIsConnected(false);
+    setAccount(null);
+    localStorage.setItem('isConnected', JSON.stringify(false));
+    localStorage.removeItem('account');
+    await window.ethereum?.request({
+      method: 'wallet_revokePermissions',
+      params: [{ eth_accounts: {} }],
+    });
   };
 
   return (
@@ -65,7 +98,7 @@ function MetaMaskConnect() {
         <Popover>
           <PopoverTrigger asChild>
             <Button variant="link" className="text-white">
-              {formatAddress(account)}
+              {account && `${account.slice(0, 6)}...${account.slice(-4)}`}
             </Button>
           </PopoverTrigger>
           <PopoverContent className="w-44">
@@ -80,7 +113,6 @@ function MetaMaskConnect() {
         </Popover>
       ) : (
         <Button
-          disabled={connecting}
           onClick={connect}
           className="bg-light-purple bg-opacity-75 hover:bg-purple border-0 hover:border-0"
         >
@@ -91,18 +123,4 @@ function MetaMaskConnect() {
   );
 }
 
-export default function MetaMaskConnectWrapper() {
-  return (
-    <MetaMaskProvider
-      debug={false}
-      sdkOptions={{
-        dappMetadata: {
-          name: 'My dApp',
-          url: typeof window !== 'undefined' ? window.location.href : '',
-        },
-      }}
-    >
-      <MetaMaskConnect />
-    </MetaMaskProvider>
-  );
-}
+export default MetaMaskConnect;

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 };