mirror of
https://github.com/0xShay/ticketchain.git
synced 2026-01-11 05:03:26 +00:00
Merge branch 'main' into homepage-revamp
This commit is contained in:
GitHub
3
.gitignore
vendored
3
.gitignore
vendored
@@ -26,7 +26,8 @@ yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
# local env files
|
||||
.env*.local
|
||||
.env*
|
||||
.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
49
app/events/[...eventId]/page.tsx
Normal file
49
app/events/[...eventId]/page.tsx
Normal file
@@ -0,0 +1,49 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import Header from '../../../components/custom/header';
|
||||
import Footer from '../../../components/custom/footer';
|
||||
import EventDescription from '../../../components/custom/EventDescription';
|
||||
|
||||
// Dummy function to simulate a GET request
|
||||
const fetchEventDetails = (eventID: number) => {
|
||||
alert(`Fetching details for event ID: ${eventID}`);
|
||||
// Simulated JSON response for the event
|
||||
return {
|
||||
EventID: eventID,
|
||||
name: 'Example Event Name',
|
||||
date: '2023-12-01',
|
||||
location: 'Example Location',
|
||||
ticketPrice: 100,
|
||||
description: 'Detailed description of the event.',
|
||||
capacity: 300,
|
||||
ticketsSold: 150,
|
||||
imageUrl: [
|
||||
'https://via.placeholder.com/150',
|
||||
'https://via.placeholder.com/150',
|
||||
],
|
||||
host: 'Example Host',
|
||||
tickets: [1, 2, 3, 4],
|
||||
};
|
||||
};
|
||||
|
||||
const ListingPage: React.FC = () => {
|
||||
const searchParams = useSearchParams();
|
||||
const eventID = searchParams.get('eventID');
|
||||
|
||||
// Simulate fetching data from backend
|
||||
if (eventID) {
|
||||
const eventDetails = fetchEventDetails(Number(eventID));
|
||||
console.log('Event Details:', eventDetails);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<EventDescription eventId={eventID!} />
|
||||
<Footer />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default ListingPage;
|
||||
@@ -1,21 +1,21 @@
|
||||
'use client';
|
||||
import React, { useEffect, useState, useRef, Suspense } from 'react';
|
||||
import { useRouter } from 'next/navigation'; // Import useRouter for routing
|
||||
import Header from '../../components/custom/header';
|
||||
import Footer from '../../components/custom/footer';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
|
||||
// Define the Event interface including new fields
|
||||
interface Event {
|
||||
EventID: number;
|
||||
name: string;
|
||||
date: string; // Should ideally be a Date object for better handling
|
||||
date: string;
|
||||
location: string;
|
||||
ticketPrice: number; // Changed to number for sorting
|
||||
ticketPrice: number;
|
||||
description: string;
|
||||
capacity: number;
|
||||
ticketsSold: number;
|
||||
imageUrl: string;
|
||||
host: string; // New field for host
|
||||
host: string;
|
||||
}
|
||||
|
||||
// Dummy function to fetch events
|
||||
@@ -65,14 +65,15 @@ const EventsPage: React.FC = () => {
|
||||
const [filteredEvents, setFilteredEvents] = useState<Event[]>([]);
|
||||
const [searchQuery, setSearchQuery] = useState<string>("");
|
||||
const [hoveredEventId, setHoveredEventId] = useState<number | null>(null);
|
||||
const [sortOption, setSortOption] = useState<string>(''); // Track sorting option
|
||||
const [filterOptions, setFilterOptions] = useState<string[]>([]); // Track applied filters
|
||||
const [selectedHost, setSelectedHost] = useState<string>(''); // For host filtering
|
||||
const [sortOption, setSortOption] = useState<string>('');
|
||||
const [filterOptions, setFilterOptions] = useState<string[]>([]);
|
||||
const [selectedHost, setSelectedHost] = useState<string>('');
|
||||
const [showSortMenu, setShowSortMenu] = useState<boolean>(false);
|
||||
const [showFilterMenu, setShowFilterMenu] = useState<boolean>(false);
|
||||
|
||||
const sortRef = useRef<HTMLDivElement>(null);
|
||||
const filterRef = useRef<HTMLDivElement>(null);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
const eventsData = fetchEvents();
|
||||
@@ -157,6 +158,10 @@ const EventsPage: React.FC = () => {
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleEventClick = (eventID: number) => {
|
||||
router.push(`/events/${eventID}`); // You may replace this with a Link from Next.js
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative min-h-screen overflow-hidden">
|
||||
<Header />
|
||||
@@ -314,9 +319,10 @@ const EventsPage: React.FC = () => {
|
||||
</h2>
|
||||
<div className="grid grid-cols-1 gap-6">
|
||||
{filteredEvents.map((event) => (
|
||||
<div
|
||||
<button
|
||||
key={event.EventID}
|
||||
className="relative flex bg-white p-4 rounded-lg shadow-lg"
|
||||
className="relative flex bg-white p-4 rounded-lg shadow-lg text-left"
|
||||
onClick={() => handleEventClick(event.EventID)}
|
||||
onMouseEnter={() => setHoveredEventId(event.EventID)}
|
||||
onMouseLeave={() => setHoveredEventId(null)}
|
||||
>
|
||||
@@ -346,7 +352,7 @@ const EventsPage: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -4,6 +4,7 @@ import './globals.css';
|
||||
|
||||
import { Inter } from 'next/font/google';
|
||||
import './globals.css';
|
||||
import { Toaster } from '@/components/ui/toaster';
|
||||
|
||||
const inter = Inter({ subsets: ['latin'] });
|
||||
|
||||
@@ -30,7 +31,10 @@ export default function RootLayout({
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={inter.className}>{children}</body>
|
||||
<body className={inter.className}>
|
||||
<main>{children}</main>
|
||||
<Toaster />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
'use client';
|
||||
import React from 'react';
|
||||
import {
|
||||
Card,
|
||||
@@ -11,8 +10,15 @@ import { Badge } from '@/components/ui/badge';
|
||||
import { Separator } from '@/components/ui/separator';
|
||||
import ImageCarousel from './ImageCarousel';
|
||||
import TicketButton from './TicketButton';
|
||||
import { buyHandler } from '@/lib/buyHandler';
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
|
||||
const EventDescription = ({ eventId }: { eventId: string }) => {
|
||||
const { toast } = useToast();
|
||||
const handleBuyNow = () => {
|
||||
buyHandler(Number(eventId), toast);
|
||||
};
|
||||
|
||||
const EventDescription = () => {
|
||||
return (
|
||||
<Card className="pt-10 pb-16 px-6 bg-gradient-to-r from-blue-50 to-gray-50 rounded-xl shadow-lg max-w-4xl mx-auto">
|
||||
<CardHeader className="flex flex-col items-start space-y-4">
|
||||
@@ -47,6 +53,7 @@ const EventDescription = () => {
|
||||
<Button
|
||||
variant="default"
|
||||
className="w-full md:w-auto bg-gradient-to-r from-blue-500 to-purple-600 text-white font-semibold rounded-lg hover:from-blue-600 hover:to-purple-700"
|
||||
onClick={handleBuyNow}
|
||||
>
|
||||
Buy now Using MetaMask
|
||||
</Button>
|
||||
|
||||
@@ -3,8 +3,8 @@ import React from 'react';
|
||||
const Footer = () => {
|
||||
return (
|
||||
<footer className="text-center mt-8">
|
||||
<p className="text-gray-500">
|
||||
© 2024 Ticket Chain. All rights reserved.
|
||||
<p className="text-light-purple text-opacity-75">
|
||||
© 2024 TicketChain. All rights reserved.
|
||||
</p>
|
||||
</footer>
|
||||
);
|
||||
|
||||
@@ -36,14 +36,16 @@ const Header = () => {
|
||||
></div>
|
||||
<div className="container mx-auto px-6 py-4 flex justify-between items-center">
|
||||
<Link href="/" legacyBehavior>
|
||||
<a className="text-2xl font-semibold text-white">TicketChain</a>
|
||||
<a className="text-2xl font-semibold text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300">
|
||||
TicketChain
|
||||
</a>
|
||||
</Link>
|
||||
<nav className="nav">
|
||||
<ul className="flex space-x-6">
|
||||
<li>
|
||||
<Link href="/" legacyBehavior>
|
||||
<a
|
||||
className="text-white hover:text-blue-500 transition-colors duration-300"
|
||||
className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
|
||||
style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
|
||||
>
|
||||
Home
|
||||
@@ -53,7 +55,7 @@ const Header = () => {
|
||||
<li>
|
||||
<Link href="/events" legacyBehavior>
|
||||
<a
|
||||
className="text-white hover:text-blue-500 transition-colors duration-300"
|
||||
className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
|
||||
style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
|
||||
>
|
||||
Events
|
||||
@@ -63,7 +65,7 @@ const Header = () => {
|
||||
<li>
|
||||
<Link href="/contact" legacyBehavior>
|
||||
<a
|
||||
className="text-white hover:text-blue-500 transition-colors duration-300"
|
||||
className="text-white hover:text-light-purple hover:text-opacity-75 transition-colors duration-300"
|
||||
style={{ textShadow: '1px 1px 2px rgba(0, 0, 0, 0.5)' }}
|
||||
>
|
||||
Contact
|
||||
|
||||
@@ -64,7 +64,9 @@ function MetaMaskConnect() {
|
||||
{isConnected ? (
|
||||
<Popover>
|
||||
<PopoverTrigger asChild>
|
||||
<Button>{formatAddress(account)}</Button>
|
||||
<Button variant="link" className="text-white">
|
||||
{formatAddress(account)}
|
||||
</Button>
|
||||
</PopoverTrigger>
|
||||
<PopoverContent className="w-44">
|
||||
<Button
|
||||
@@ -77,7 +79,11 @@ function MetaMaskConnect() {
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
) : (
|
||||
<Button disabled={connecting} onClick={connect}>
|
||||
<Button
|
||||
disabled={connecting}
|
||||
onClick={connect}
|
||||
className="bg-light-purple bg-opacity-75 hover:bg-purple border-0 hover:border-0"
|
||||
>
|
||||
<WalletIcon className="mr-2 h-4 w-4" /> Connect Wallet
|
||||
</Button>
|
||||
)}
|
||||
|
||||
129
components/ui/toast.tsx
Normal file
129
components/ui/toast.tsx
Normal file
@@ -0,0 +1,129 @@
|
||||
'use client';
|
||||
|
||||
import * as React from 'react';
|
||||
import { Cross2Icon } from '@radix-ui/react-icons';
|
||||
import * as ToastPrimitives from '@radix-ui/react-toast';
|
||||
import { cva, type VariantProps } from 'class-variance-authority';
|
||||
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
const ToastProvider = ToastPrimitives.Provider;
|
||||
|
||||
const ToastViewport = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Viewport>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Viewport
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
|
||||
|
||||
const toastVariants = cva(
|
||||
'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: 'border bg-background text-foreground',
|
||||
destructive:
|
||||
'destructive group border-destructive bg-destructive text-destructive-foreground',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: 'default',
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
const Toast = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Root>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
|
||||
VariantProps<typeof toastVariants>
|
||||
>(({ className, variant, ...props }, ref) => {
|
||||
return (
|
||||
<ToastPrimitives.Root
|
||||
ref={ref}
|
||||
className={cn(toastVariants({ variant }), className)}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
});
|
||||
Toast.displayName = ToastPrimitives.Root.displayName;
|
||||
|
||||
const ToastAction = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Action>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Action
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
ToastAction.displayName = ToastPrimitives.Action.displayName;
|
||||
|
||||
const ToastClose = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Close>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Close
|
||||
ref={ref}
|
||||
className={cn(
|
||||
'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
|
||||
className
|
||||
)}
|
||||
toast-close=""
|
||||
{...props}
|
||||
>
|
||||
<Cross2Icon className="h-4 w-4" />
|
||||
</ToastPrimitives.Close>
|
||||
));
|
||||
ToastClose.displayName = ToastPrimitives.Close.displayName;
|
||||
|
||||
const ToastTitle = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Title>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Title
|
||||
ref={ref}
|
||||
className={cn('text-sm font-semibold [&+div]:text-xs', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
ToastTitle.displayName = ToastPrimitives.Title.displayName;
|
||||
|
||||
const ToastDescription = React.forwardRef<
|
||||
React.ElementRef<typeof ToastPrimitives.Description>,
|
||||
React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<ToastPrimitives.Description
|
||||
ref={ref}
|
||||
className={cn('text-sm opacity-90', className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
ToastDescription.displayName = ToastPrimitives.Description.displayName;
|
||||
|
||||
type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
|
||||
|
||||
type ToastActionElement = React.ReactElement<typeof ToastAction>;
|
||||
|
||||
export {
|
||||
type ToastProps,
|
||||
type ToastActionElement,
|
||||
ToastProvider,
|
||||
ToastViewport,
|
||||
Toast,
|
||||
ToastTitle,
|
||||
ToastDescription,
|
||||
ToastClose,
|
||||
ToastAction,
|
||||
};
|
||||
35
components/ui/toaster.tsx
Normal file
35
components/ui/toaster.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
'use client';
|
||||
|
||||
import { useToast } from '@/hooks/use-toast';
|
||||
import {
|
||||
Toast,
|
||||
ToastClose,
|
||||
ToastDescription,
|
||||
ToastProvider,
|
||||
ToastTitle,
|
||||
ToastViewport,
|
||||
} from '@/components/ui/toast';
|
||||
|
||||
export function Toaster() {
|
||||
const { toasts } = useToast();
|
||||
|
||||
return (
|
||||
<ToastProvider>
|
||||
{toasts.map(function ({ id, title, description, action, ...props }) {
|
||||
return (
|
||||
<Toast key={id} {...props}>
|
||||
<div className="grid gap-1">
|
||||
{title && <ToastTitle>{title}</ToastTitle>}
|
||||
{description && (
|
||||
<ToastDescription>{description}</ToastDescription>
|
||||
)}
|
||||
</div>
|
||||
{action}
|
||||
<ToastClose />
|
||||
</Toast>
|
||||
);
|
||||
})}
|
||||
<ToastViewport />
|
||||
</ToastProvider>
|
||||
);
|
||||
}
|
||||
191
hooks/use-toast.ts
Normal file
191
hooks/use-toast.ts
Normal file
@@ -0,0 +1,191 @@
|
||||
'use client';
|
||||
|
||||
// Inspired by react-hot-toast library
|
||||
import * as React from 'react';
|
||||
|
||||
import type { ToastActionElement, ToastProps } from '@/components/ui/toast';
|
||||
|
||||
const TOAST_LIMIT = 1;
|
||||
const TOAST_REMOVE_DELAY = 1000000;
|
||||
|
||||
type ToasterToast = ToastProps & {
|
||||
id: string;
|
||||
title?: React.ReactNode;
|
||||
description?: React.ReactNode;
|
||||
action?: ToastActionElement;
|
||||
};
|
||||
|
||||
const actionTypes = {
|
||||
ADD_TOAST: 'ADD_TOAST',
|
||||
UPDATE_TOAST: 'UPDATE_TOAST',
|
||||
DISMISS_TOAST: 'DISMISS_TOAST',
|
||||
REMOVE_TOAST: 'REMOVE_TOAST',
|
||||
} as const;
|
||||
|
||||
let count = 0;
|
||||
|
||||
function genId() {
|
||||
count = (count + 1) % Number.MAX_SAFE_INTEGER;
|
||||
return count.toString();
|
||||
}
|
||||
|
||||
type ActionType = typeof actionTypes;
|
||||
|
||||
type Action =
|
||||
| {
|
||||
type: ActionType['ADD_TOAST'];
|
||||
toast: ToasterToast;
|
||||
}
|
||||
| {
|
||||
type: ActionType['UPDATE_TOAST'];
|
||||
toast: Partial<ToasterToast>;
|
||||
}
|
||||
| {
|
||||
type: ActionType['DISMISS_TOAST'];
|
||||
toastId?: ToasterToast['id'];
|
||||
}
|
||||
| {
|
||||
type: ActionType['REMOVE_TOAST'];
|
||||
toastId?: ToasterToast['id'];
|
||||
};
|
||||
|
||||
interface State {
|
||||
toasts: ToasterToast[];
|
||||
}
|
||||
|
||||
const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
|
||||
|
||||
const addToRemoveQueue = (toastId: string) => {
|
||||
if (toastTimeouts.has(toastId)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const timeout = setTimeout(() => {
|
||||
toastTimeouts.delete(toastId);
|
||||
dispatch({
|
||||
type: 'REMOVE_TOAST',
|
||||
toastId: toastId,
|
||||
});
|
||||
}, TOAST_REMOVE_DELAY);
|
||||
|
||||
toastTimeouts.set(toastId, timeout);
|
||||
};
|
||||
|
||||
export const reducer = (state: State, action: Action): State => {
|
||||
switch (action.type) {
|
||||
case 'ADD_TOAST':
|
||||
return {
|
||||
...state,
|
||||
toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
|
||||
};
|
||||
|
||||
case 'UPDATE_TOAST':
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.map((t) =>
|
||||
t.id === action.toast.id ? { ...t, ...action.toast } : t
|
||||
),
|
||||
};
|
||||
|
||||
case 'DISMISS_TOAST': {
|
||||
const { toastId } = action;
|
||||
|
||||
// ! Side effects ! - This could be extracted into a dismissToast() action,
|
||||
// but I'll keep it here for simplicity
|
||||
if (toastId) {
|
||||
addToRemoveQueue(toastId);
|
||||
} else {
|
||||
state.toasts.forEach((toast) => {
|
||||
addToRemoveQueue(toast.id);
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.map((t) =>
|
||||
t.id === toastId || toastId === undefined
|
||||
? {
|
||||
...t,
|
||||
open: false,
|
||||
}
|
||||
: t
|
||||
),
|
||||
};
|
||||
}
|
||||
case 'REMOVE_TOAST':
|
||||
if (action.toastId === undefined) {
|
||||
return {
|
||||
...state,
|
||||
toasts: [],
|
||||
};
|
||||
}
|
||||
return {
|
||||
...state,
|
||||
toasts: state.toasts.filter((t) => t.id !== action.toastId),
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
const listeners: Array<(state: State) => void> = [];
|
||||
|
||||
let memoryState: State = { toasts: [] };
|
||||
|
||||
function dispatch(action: Action) {
|
||||
memoryState = reducer(memoryState, action);
|
||||
listeners.forEach((listener) => {
|
||||
listener(memoryState);
|
||||
});
|
||||
}
|
||||
|
||||
type Toast = Omit<ToasterToast, 'id'>;
|
||||
|
||||
function toast({ ...props }: Toast) {
|
||||
const id = genId();
|
||||
|
||||
const update = (props: ToasterToast) =>
|
||||
dispatch({
|
||||
type: 'UPDATE_TOAST',
|
||||
toast: { ...props, id },
|
||||
});
|
||||
const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
|
||||
|
||||
dispatch({
|
||||
type: 'ADD_TOAST',
|
||||
toast: {
|
||||
...props,
|
||||
id,
|
||||
open: true,
|
||||
onOpenChange: (open) => {
|
||||
if (!open) dismiss();
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
return {
|
||||
id: id,
|
||||
dismiss,
|
||||
update,
|
||||
};
|
||||
}
|
||||
|
||||
function useToast() {
|
||||
const [state, setState] = React.useState<State>(memoryState);
|
||||
|
||||
React.useEffect(() => {
|
||||
listeners.push(setState);
|
||||
return () => {
|
||||
const index = listeners.indexOf(setState);
|
||||
if (index > -1) {
|
||||
listeners.splice(index, 1);
|
||||
}
|
||||
};
|
||||
}, [state]);
|
||||
|
||||
return {
|
||||
...state,
|
||||
toast,
|
||||
dismiss: (toastId?: string) => dispatch({ type: 'DISMISS_TOAST', toastId }),
|
||||
};
|
||||
}
|
||||
|
||||
export { useToast, toast };
|
||||
66
lib/buyHandler.ts
Normal file
66
lib/buyHandler.ts
Normal file
@@ -0,0 +1,66 @@
|
||||
import { ethers } from 'ethers';
|
||||
import { getContract } from '@/lib/ethers';
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
ethereumProvider?: ethers.providers.ExternalProvider & {
|
||||
isMetaMask?: boolean;
|
||||
request?: (method: string, params?: unknown[]) => Promise<unknown>;
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
type ToastFunction = (options: {
|
||||
title: string;
|
||||
variant?: 'default' | 'destructive' | null | undefined;
|
||||
}) => void;
|
||||
|
||||
export const buyHandler = async (
|
||||
eventId: number,
|
||||
toast: ToastFunction
|
||||
): Promise<void> => {
|
||||
if (eventId < 0) {
|
||||
toast({ title: 'Please enter a valid Event ID.', variant: 'destructive' });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
if (typeof window.ethereum === 'undefined') {
|
||||
toast({
|
||||
title: 'Please install MetaMask or another Ethereum wallet',
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// @ts-expect-error: window.ethereum might not match ExternalProvider exactly
|
||||
const provider = new ethers.providers.Web3Provider(window.ethereum);
|
||||
const signer = provider.getSigner();
|
||||
const contract = getContract().connect(signer);
|
||||
|
||||
let ticketCost = await contract.getEventPriceFlare(eventId);
|
||||
ticketCost = ticketCost.mul(105).div(100);
|
||||
const balance = await provider.getBalance(await signer.getAddress());
|
||||
|
||||
if (balance.lt(ticketCost)) {
|
||||
toast({
|
||||
title: 'Insufficient balance to cover ticket cost and gas fees.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
const tx = await contract.buyTicket(eventId, { value: ticketCost });
|
||||
const receipt = await tx.wait();
|
||||
|
||||
toast({
|
||||
title: `Ticket purchased successfully! Transaction Hash: ${receipt.transactionHash}`,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error buying ticket:', error);
|
||||
toast({
|
||||
title: 'Transaction failed. Please try again.',
|
||||
variant: 'destructive',
|
||||
});
|
||||
}
|
||||
};
|
||||
520
lib/ethers.ts
Normal file
520
lib/ethers.ts
Normal file
@@ -0,0 +1,520 @@
|
||||
import { ethers } from 'ethers';
|
||||
|
||||
const FLARE_TESTNET_RPC_URL = process.env.NEXT_PUBLIC_RPC_URL;
|
||||
const CONTRACT_ADDRESS = process.env.NEXT_PUBLIC_CONTRACT_ADDRESS;
|
||||
|
||||
export function getFlareProvider() {
|
||||
const flareRpcUrl = FLARE_TESTNET_RPC_URL;
|
||||
const provider = new ethers.providers.JsonRpcProvider(flareRpcUrl);
|
||||
return provider;
|
||||
}
|
||||
|
||||
export function getContract() {
|
||||
const provider = getFlareProvider();
|
||||
const contractAddress = CONTRACT_ADDRESS;
|
||||
const contractABI = [
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_ticketId',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
internalType: 'address',
|
||||
name: '_to',
|
||||
type: 'address',
|
||||
},
|
||||
{
|
||||
internalType: 'bool',
|
||||
name: '_allowed',
|
||||
type: 'bool',
|
||||
},
|
||||
],
|
||||
name: 'approveTicket',
|
||||
outputs: [],
|
||||
stateMutability: 'nonpayable',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_eventId',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
name: 'buyTicket',
|
||||
outputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_ticketId',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
stateMutability: 'payable',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: 'string',
|
||||
name: '_name',
|
||||
type: 'string',
|
||||
},
|
||||
{
|
||||
internalType: 'string',
|
||||
name: '_description',
|
||||
type: 'string',
|
||||
},
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_capacity',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_ticketPrice',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_eventDate',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
internalType: 'string[]',
|
||||
name: '_images',
|
||||
type: 'string[]',
|
||||
},
|
||||
],
|
||||
name: 'createEvent',
|
||||
outputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_eventId',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
stateMutability: 'nonpayable',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [],
|
||||
stateMutability: 'nonpayable',
|
||||
type: 'constructor',
|
||||
},
|
||||
{
|
||||
anonymous: false,
|
||||
inputs: [
|
||||
{
|
||||
indexed: false,
|
||||
internalType: 'uint256',
|
||||
name: 'eventId',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
indexed: false,
|
||||
internalType: 'string',
|
||||
name: 'name',
|
||||
type: 'string',
|
||||
},
|
||||
{
|
||||
indexed: false,
|
||||
internalType: 'uint256',
|
||||
name: 'eventDate',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
name: 'EventCreated',
|
||||
type: 'event',
|
||||
},
|
||||
{
|
||||
anonymous: false,
|
||||
inputs: [
|
||||
{
|
||||
indexed: false,
|
||||
internalType: 'uint256',
|
||||
name: 'ticketId',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
indexed: false,
|
||||
internalType: 'uint256',
|
||||
name: 'eventId',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
indexed: false,
|
||||
internalType: 'address',
|
||||
name: 'buyer',
|
||||
type: 'address',
|
||||
},
|
||||
{
|
||||
indexed: false,
|
||||
internalType: 'uint256',
|
||||
name: 'price',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
name: 'TicketPurchased',
|
||||
type: 'event',
|
||||
},
|
||||
{
|
||||
anonymous: false,
|
||||
inputs: [
|
||||
{
|
||||
indexed: false,
|
||||
internalType: 'uint256',
|
||||
name: 'ticketId',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
indexed: false,
|
||||
internalType: 'address',
|
||||
name: 'owner',
|
||||
type: 'address',
|
||||
},
|
||||
{
|
||||
indexed: false,
|
||||
internalType: 'address',
|
||||
name: 'trustee',
|
||||
type: 'address',
|
||||
},
|
||||
],
|
||||
name: 'TicketTransferApproved',
|
||||
type: 'event',
|
||||
},
|
||||
{
|
||||
anonymous: false,
|
||||
inputs: [
|
||||
{
|
||||
indexed: false,
|
||||
internalType: 'uint256',
|
||||
name: 'ticketId',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
indexed: false,
|
||||
internalType: 'address',
|
||||
name: 'from',
|
||||
type: 'address',
|
||||
},
|
||||
{
|
||||
indexed: false,
|
||||
internalType: 'address',
|
||||
name: 'to',
|
||||
type: 'address',
|
||||
},
|
||||
],
|
||||
name: 'TicketTransferred',
|
||||
type: 'event',
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_ticketId',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
internalType: 'address',
|
||||
name: '_to',
|
||||
type: 'address',
|
||||
},
|
||||
],
|
||||
name: 'transferTicket',
|
||||
outputs: [],
|
||||
stateMutability: 'nonpayable',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_ticketId',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
internalType: 'address',
|
||||
name: '_to',
|
||||
type: 'address',
|
||||
},
|
||||
],
|
||||
name: 'transferTicketFrom',
|
||||
outputs: [],
|
||||
stateMutability: 'nonpayable',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_cents',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
name: 'centsToFlare',
|
||||
outputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_flr',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
stateMutability: 'view',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [],
|
||||
name: 'eventCounter',
|
||||
outputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
stateMutability: 'view',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
name: 'events',
|
||||
outputs: [
|
||||
{
|
||||
internalType: 'string',
|
||||
name: 'name',
|
||||
type: 'string',
|
||||
},
|
||||
{
|
||||
internalType: 'string',
|
||||
name: 'description',
|
||||
type: 'string',
|
||||
},
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: 'capacity',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: 'ticketsSold',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: 'ticketPrice',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: 'eventDate',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
internalType: 'address payable',
|
||||
name: 'eventHost',
|
||||
type: 'address',
|
||||
},
|
||||
],
|
||||
stateMutability: 'view',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
name: 'feedIds',
|
||||
outputs: [
|
||||
{
|
||||
internalType: 'bytes21',
|
||||
name: '',
|
||||
type: 'bytes21',
|
||||
},
|
||||
],
|
||||
stateMutability: 'view',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_eventId',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
name: 'getEventImages',
|
||||
outputs: [
|
||||
{
|
||||
internalType: 'string[]',
|
||||
name: '',
|
||||
type: 'string[]',
|
||||
},
|
||||
],
|
||||
stateMutability: 'view',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_eventId',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
name: 'getEventPriceFlare',
|
||||
outputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_flr',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
stateMutability: 'view',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_eventId',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
name: 'getEventTickets',
|
||||
outputs: [
|
||||
{
|
||||
internalType: 'uint256[]',
|
||||
name: '',
|
||||
type: 'uint256[]',
|
||||
},
|
||||
],
|
||||
stateMutability: 'view',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [],
|
||||
name: 'getFlareFeed',
|
||||
outputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '_feedValue',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
internalType: 'int8',
|
||||
name: '_decimals',
|
||||
type: 'int8',
|
||||
},
|
||||
{
|
||||
internalType: 'uint64',
|
||||
name: '_timestamp',
|
||||
type: 'uint64',
|
||||
},
|
||||
],
|
||||
stateMutability: 'view',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [],
|
||||
name: 'getFtsoV2CurrentFeedValues',
|
||||
outputs: [
|
||||
{
|
||||
internalType: 'uint256[]',
|
||||
name: '_feedValues',
|
||||
type: 'uint256[]',
|
||||
},
|
||||
{
|
||||
internalType: 'int8[]',
|
||||
name: '_decimals',
|
||||
type: 'int8[]',
|
||||
},
|
||||
{
|
||||
internalType: 'uint64',
|
||||
name: '_timestamp',
|
||||
type: 'uint64',
|
||||
},
|
||||
],
|
||||
stateMutability: 'view',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [],
|
||||
name: 'ticketCounter',
|
||||
outputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
stateMutability: 'view',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
name: 'tickets',
|
||||
outputs: [
|
||||
{
|
||||
internalType: 'address',
|
||||
name: 'holder',
|
||||
type: 'address',
|
||||
},
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: 'boughtTime',
|
||||
type: 'uint256',
|
||||
},
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: 'eventId',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
stateMutability: 'view',
|
||||
type: 'function',
|
||||
},
|
||||
{
|
||||
inputs: [
|
||||
{
|
||||
internalType: 'address',
|
||||
name: '',
|
||||
type: 'address',
|
||||
},
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
name: 'userTickets',
|
||||
outputs: [
|
||||
{
|
||||
internalType: 'uint256',
|
||||
name: '',
|
||||
type: 'uint256',
|
||||
},
|
||||
],
|
||||
stateMutability: 'view',
|
||||
type: 'function',
|
||||
},
|
||||
];
|
||||
return new ethers.Contract(contractAddress!, contractABI, provider);
|
||||
}
|
||||
48
package-lock.json
generated
48
package-lock.json
generated
@@ -16,16 +16,16 @@
|
||||
"@radix-ui/react-select": "^2.1.2",
|
||||
"@radix-ui/react-separator": "^1.1.0",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@radix-ui/react-toast": "^1.2.2",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"embla-carousel-react": "^8.3.0",
|
||||
"ethers": "^5.7.2",
|
||||
"framer-motion": "^11.11.10",
|
||||
"lucide-react": "^0.446.0",
|
||||
"next": "14.2.13",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwind-merge": "^2.5.4",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -39,6 +39,7 @@
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"@types/tailwindcss": "^3.0.11",
|
||||
"chai": "^4.2.0",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.2.13",
|
||||
@@ -5950,6 +5951,40 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-toast": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-toast/-/react-toast-1.2.2.tgz",
|
||||
"integrity": "sha512-Z6pqSzmAP/bFJoqMAston4eSNa+ud44NSZTiZUmUen+IOZ5nBY8kzuU5WDBVyFXPtcW6yUalOHsxM/BP6Sv8ww==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@radix-ui/primitive": "1.1.0",
|
||||
"@radix-ui/react-collection": "1.1.0",
|
||||
"@radix-ui/react-compose-refs": "1.1.0",
|
||||
"@radix-ui/react-context": "1.1.1",
|
||||
"@radix-ui/react-dismissable-layer": "1.1.1",
|
||||
"@radix-ui/react-portal": "1.1.2",
|
||||
"@radix-ui/react-presence": "1.1.1",
|
||||
"@radix-ui/react-primitive": "2.0.0",
|
||||
"@radix-ui/react-use-callback-ref": "1.1.0",
|
||||
"@radix-ui/react-use-controllable-state": "1.1.0",
|
||||
"@radix-ui/react-use-layout-effect": "1.1.0",
|
||||
"@radix-ui/react-visually-hidden": "1.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@types/react": "*",
|
||||
"@types/react-dom": "*",
|
||||
"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
|
||||
"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@types/react-dom": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@radix-ui/react-use-callback-ref": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
|
||||
@@ -7461,6 +7496,13 @@
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@types/tailwindcss": {
|
||||
"version": "3.0.11",
|
||||
"resolved": "https://registry.npmjs.org/@types/tailwindcss/-/tailwindcss-3.0.11.tgz",
|
||||
"integrity": "sha512-PR+BOIrI+rxteHwFvkfIOty+PDJwTG4ute3alxSSXpF/xKpryO1room265m46Auyae0VwqUYs3PuVEOF9Oil3w==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/yargs": {
|
||||
"version": "17.0.33",
|
||||
"resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-17.0.33.tgz",
|
||||
@@ -13016,7 +13058,6 @@
|
||||
"resolved": "https://registry.npmjs.org/bufferutil/-/bufferutil-4.0.5.tgz",
|
||||
"integrity": "sha512-HTm14iMQKK2FjFLRTM5lAVcyaUzOnqbPtesFIvREgXpJHdQm8bWS+GkQgIkfaBYRHuCnea7w8UVNfwiAQhlr9A==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"node-gyp-build": "^4.3.0"
|
||||
@@ -13379,7 +13420,6 @@
|
||||
"resolved": "https://registry.npmjs.org/utf-8-validate/-/utf-8-validate-5.0.7.tgz",
|
||||
"integrity": "sha512-vLt1O5Pp+flcArHGIyKEQq883nBt8nN8tVBcoL0qUXj2XT1n7p70yGIq2VK98I5FdZ1YHc0wk/koOnHjnXWk1Q==",
|
||||
"dev": true,
|
||||
"hasInstallScript": true,
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"node-gyp-build": "^4.3.0"
|
||||
|
||||
@@ -20,16 +20,16 @@
|
||||
"@radix-ui/react-select": "^2.1.2",
|
||||
"@radix-ui/react-separator": "^1.1.0",
|
||||
"@radix-ui/react-slot": "^1.1.0",
|
||||
"@radix-ui/react-toast": "^1.2.2",
|
||||
"class-variance-authority": "^0.7.0",
|
||||
"clsx": "^2.1.1",
|
||||
"embla-carousel-react": "^8.3.0",
|
||||
"ethers": "^5.7.2",
|
||||
"framer-motion": "^11.11.10",
|
||||
"lucide-react": "^0.446.0",
|
||||
"next": "14.2.13",
|
||||
"react": "^18.3.1",
|
||||
"react-dom": "^18.3.1",
|
||||
"tailwind-merge": "^2.5.2",
|
||||
"tailwind-merge": "^2.5.4",
|
||||
"tailwindcss-animate": "^1.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -43,6 +43,7 @@
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
"@types/tailwindcss": "^3.0.11",
|
||||
"chai": "^4.2.0",
|
||||
"eslint": "^8",
|
||||
"eslint-config-next": "14.2.13",
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
import type { Config } from 'tailwindcss';
|
||||
import tailwindcssAnimate from 'tailwindcss-animate';
|
||||
|
||||
type ColorValue = string | ColorDictionary;
|
||||
interface ColorDictionary {
|
||||
[colorName: string]: ColorValue;
|
||||
}
|
||||
|
||||
const config: Config = {
|
||||
darkMode: ['class'],
|
||||
@@ -14,6 +20,12 @@ const config: Config = {
|
||||
DEFAULT: '#000',
|
||||
100: '#000319',
|
||||
},
|
||||
'darkest-purple': '#240046',
|
||||
'darker-purple': '#3C096C',
|
||||
'dark-purple': '#5A189A',
|
||||
purple: '#7B2CBF',
|
||||
'light-purple': '#9D4EDD',
|
||||
|
||||
background: 'hsl(var(--background))',
|
||||
foreground: 'hsl(var(--foreground))',
|
||||
card: {
|
||||
@@ -62,6 +74,44 @@ const config: Config = {
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require('tailwindcss-animate')],
|
||||
plugins: [tailwindcssAnimate, addVariablesForColors],
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
// Plugin to add each Tailwind color as a CSS variable
|
||||
function addVariablesForColors({
|
||||
addBase,
|
||||
theme,
|
||||
}: {
|
||||
addBase: (styles: Record<string, Record<string, string>>) => void;
|
||||
theme: (path: string) => unknown;
|
||||
}) {
|
||||
const colors = theme('colors') as ColorDictionary;
|
||||
const flattenedColors = flattenColors(colors);
|
||||
const newVars = Object.fromEntries(
|
||||
Object.entries(flattenedColors).map(([key, val]) => [`--${key}`, val])
|
||||
);
|
||||
|
||||
addBase({
|
||||
':root': newVars,
|
||||
});
|
||||
}
|
||||
|
||||
// Recursive function to flatten nested color objects
|
||||
function flattenColors(
|
||||
colors: ColorDictionary,
|
||||
prefix = ''
|
||||
): Record<string, string> {
|
||||
const result: Record<string, string> = {};
|
||||
for (const [key, value] of Object.entries(colors)) {
|
||||
if (typeof value === 'string') {
|
||||
// If the value is a string, add it to the result
|
||||
result[prefix + key] = value;
|
||||
} else if (typeof value === 'object' && value !== null) {
|
||||
// If the value is an object, recursively flatten it
|
||||
Object.assign(result, flattenColors(value, `${prefix}${key}-`));
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user