[V0_FILE]typescriptreact:file="lib/theme.ts" isQuickEdit="true" export const theme = { colors: { background: { light: '#F0F4F8', dark: '#121212', }, text: { light: '#1A202C', dark: '#E2E8F0', }, primary: { light: '#FFD700', dark: '#FFC107', }, secondary: { light: '#718096', dark: '#A0AEC0', }, accent: { light: '#ED8936', dark: '#F6AD55', }, card: { light: '#FFFFFF', dark: '#1E1E1E', }, }, gradients: { gold: 'linear-gradient(45deg, #FFD700, #FFA500)', silver: 'linear-gradient(45deg, #C0C0C0, #A9A9A9)', platinum: 'linear-gradient(45deg, #E5E4E2, #CECECE)', palladium: 'linear-gradient(45deg, #B9F2FF, #89CFF0)', }, }; [V0_FILE]typescriptreact:file="components/ScrollingHeadline.tsx" isQuickEdit="true" import React from 'react'; import { ArrowUpIcon, ArrowDownIcon } from 'lucide-react'; import { theme } from '@/lib/theme'; import { useChat } from '@/components/DappLayout'; import { useMetalPrices } from '@/contexts/MetalPricesContext'; interface NFTPrice { metal: string; type: 'Nugget' | 'Coin' | 'Bar'; weight: number; price: number; } export const ScrollingHeadline: React.FC = () => { const { isChatOpen } = useChat(); const { prices, loading, error } = useMetalPrices(); const items: NFTPrice[] = React.useMemo(() => { if (loading || error) return []; const metals = ['Silver', 'Gold', 'Platinum', 'Palladium']; const types = [ { name: 'Nugget', weight: 0.5 }, { name: 'Coin', weight: 1 }, { name: 'Bar', weight: 10 }, ]; return metals.flatMap(metal => types.map(type => ({ metal, type: type.name as 'Nugget' | 'Coin' | 'Bar', weight: type.weight, price: (prices[metal.toLowerCase()] || 0) * type.weight })) ); }, [prices, loading, error]); if (loading) { return

Loading metal prices...

; } if (error) { return

Error: {error}

; } return (

{items.concat(items).map((item, index) => ( {item.metal} {item.type} ({item.weight}oz): ${item.price.toFixed(2)} ))}

); }; [V0_FILE]typescriptreact:file="components/ui/custom-button.tsx" isQuickEdit="true" import React from 'react'; import { Button } from "@/components/ui/button" import { theme } from '@/lib/theme'; interface CustomButtonProps extends React.ComponentProps { variant: 'gold' | 'outline' | 'secondary'; size?: 'default' | 'sm' | 'lg'; children: React.ReactNode; loading?: boolean; } export const CustomButton: React.FC = ({ children, variant, size = 'default', className = '', loading = false, ...props }) => { const baseStyle = 'rounded-full font-bold transition-all duration-300'; let variantStyle = ''; let sizeClass = ''; switch (size) { case 'sm': sizeClass = 'px-3 py-1 text-sm'; break; case 'lg': sizeClass = 'px-8 py-4 text-xl'; break; default: sizeClass = 'px-6 py-3 text-lg'; } switch (variant) { case 'gold': variantStyle = 'bg-gradient-to-r from-yellow-400 to-yellow-600 text-black hover:shadow-lg hover:scale-105 dark:from-yellow-500 dark:to-yellow-700'; break; case 'outline': variantStyle = 'border-2 border-primary text-primary hover:bg-primary hover:text-black'; break; case 'secondary': variantStyle = 'bg-secondary text-secondary-foreground hover:bg-secondary/80'; break; default: variantStyle = 'bg-primary text-primary-foreground hover:bg-primary/90'; } return ( ); }; [V0_FILE]typescriptreact:file="components/MetalIcon.tsx" import React from 'react'; interface MetalIconProps { metal: 'Silver' | 'Gold' | 'Platinum' | 'Palladium'; className?: string; } export const MetalIcon: React.FC = ({ metal, className = '' }) => { const colors = { Silver: '#C0C0C0', Gold: '#FFD700', Platinum: '#E5E4E2', Palladium: '#CED0DD', }; return ( ); }; [V0_FILE]typescriptreact:file="components/CountdownTimer.tsx" import React, { useState, useEffect } from 'react'; interface CountdownTimerProps { targetDate: Date; } export const CountdownTimer: React.FC = ({ targetDate }) => { const [timeLeft, setTimeLeft] = useState(calculateTimeLeft()); function calculateTimeLeft() { const difference = +targetDate - +new Date(); let timeLeft = {}; if (difference > 0) { timeLeft = { days: Math.floor(difference / (1000 * 60 * 60 * 24)), hours: Math.floor((difference / (1000 * 60 * 60)) % 24), minutes: Math.floor((difference / 1000 / 60) % 60), seconds: Math.floor((difference / 1000) % 60), }; } return timeLeft; } useEffect(() => { const timer = setTimeout(() => { setTimeLeft(calculateTimeLeft()); }, 1000); return () => clearTimeout(timer); }); const timerComponents = Object.keys(timeLeft).map((interval) => { if (!timeLeft[interval]) { return null; } return ( {timeLeft[interval]} {interval}{" "} ); }); return (

{timerComponents.length ? timerComponents : Time's up!}

); }; [V0_FILE]typescriptreact:file="app/analytics/page.tsx" isQuickEdit="true" 'use client' import React, { useEffect } from 'react'; import { useRouter } from 'next/navigation'; import { DappLayout } from '@/components/DappLayout'; import { GlassCard } from '@/components/ui/glass-card'; import { PerformanceChart } from '@/components/PerformanceChart'; import { Leaderboard } from '@/components/Leaderboard'; import { theme } from '@/lib/theme'; // Mock data for charts (unchanged) const metalPricesData = [ { date: '2023-01', Silver: 22, Gold: 1800, Platinum: 1000, Palladium: 1700 }, { date: '2023-02', Silver: 23, Gold: 1850, Platinum: 1050, Palladium: 1750 }, { date: '2023-03', Silver: 24, Gold: 1900, Platinum: 1100, Palladium: 1800 }, { date: '2023-04', Silver: 25, Gold: 1950, Platinum: 1150, Palladium: 1850 }, { date: '2023-05', Silver: 26, Gold: 2000, Platinum: 1200, Palladium: 1900 }, { date: '2023-06', Silver: 27, Gold: 2050, Platinum: 1250, Palladium: 1950 }, ]; const tradingVolumeData = [ { date: '2023-01', volume: 1000000 }, { date: '2023-02', volume: 1200000 }, { date: '2023-03', volume: 1500000 }, { date: '2023-04', volume: 1800000 }, { date: '2023-05', volume: 2200000 }, { date: '2023-06', volume: 2500000 }, ]; const tvlGrowthData = [ { date: '2023-01', tvl: 5000000 }, { date: '2023-02', tvl: 6000000 }, { date: '2023-03', tvl: 7500000 }, { date: '2023-04', tvl: 9000000 }, { date: '2023-05', tvl: 11000000 }, { date: '2023-06', tvl: 13000000 }, ]; const stakingRewardsData = [ { date: '2023-01', rewards: 50000 }, { date: '2023-02', rewards: 60000 }, { date: '2023-03', rewards: 75000 }, { date: '2023-04', rewards: 90000 }, { date: '2023-05', rewards: 110000 }, { date: '2023-06', rewards: 130000 }, ]; // Mock data for leaderboards (unchanged) const topHoldersData = [ { rank: 1, address: '0x1234...5678', weight: 10000 }, { rank: 2, address: '0xabcd...efgh', weight: 9500 }, { rank: 3, address: '0x9876...5432', weight: 9000 }, { rank: 4, address: '0xijkl...mnop', weight: 8500 }, { rank: 5, address: '0xqrst...uvwx', weight: 8000 }, ]; const highestMultipliersData = [ { rank: 1, address: '0x2468...1357', multiplier: 2.5 }, { rank: 2, address: '0xfedc...ba98', multiplier: 2.4 }, { rank: 3, address: '0x1357...2468', multiplier: 2.3 }, { rank: 4, address: '0xabcd...1234', multiplier: 2.2 }, { rank: 5, address: '0x9876...dcba', multiplier: 2.1 }, ]; const mostValuableCollectionsData = [ { rank: 1, address: '0x1111...2222', value: 500000 }, { rank: 2, address: '0x3333...4444', value: 450000 }, { rank: 3, address: '0x5555...6666', value: 400000 }, { rank: 4, address: '0x7777...8888', value: 350000 }, { rank: 5, address: '0x9999...0000', value: 300000 }, ]; const mostActiveTraders = [ { rank: 1, address: '0xaaaa...bbbb', trades: 500 }, { rank: 2, address: '0xcccc...dddd', trades: 450 }, { rank: 3, address: '0xeeee...ffff', trades: 400 }, { rank: 4, address: '0xgggg...hhhh', trades: 350 }, { rank: 5, address: '0xiiii...jjjj', trades: 300 }, ]; export default function Analytics() { const router = useRouter(); useEffect(() => { window.scrollTo(0, 0); }, []); return (

Analytics Dashboard

); } [V0_FILE]typescriptreact:file="components/PerformanceChart.tsx" isQuickEdit="true" import React from 'react'; import { Line, LineChart, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts'; import { theme } from '@/lib/theme'; interface PerformanceChartProps { data: any[]; dataKeys: string[]; xAxisDataKey: string; yAxisLabel: string; } export const PerformanceChart: React.FC = ({ data, dataKeys, xAxisDataKey, yAxisLabel }) => { const colors = [theme.colors.primary, theme.colors.secondary, theme.colors.tertiary, theme.colors.quaternary]; return ( {dataKeys.map((key, index) => ( ))} ); }; [V0_FILE]typescriptreact:file="components/Leaderboard.tsx" import React from 'react'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" interface LeaderboardProps { data: Array<{ rank: number; address: string; [key: string]: any; }>; valueKey: string; valuePrefix?: string; valueSuffix?: string; } export const Leaderboard: React.FC = ({ data, valueKey, valuePrefix = '', valueSuffix = '' }) => { return ( Rank Address Value {data.map((item) => ( {item.rank} {item.address} {valuePrefix}{item[valueKey].toLocaleString()}{valueSuffix} ))}

); }; [V0_FILE]typescriptreact:file="components/AnimatedSection.tsx" import React, { useEffect, useRef } from 'react'; import { motion, useAnimation, Variants } from 'framer-motion'; interface AnimatedSectionProps { children: React.ReactNode; delay?: number; } const sectionVariants: Variants = { hidden: { opacity: 0, y: 50 }, visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } } }; export const AnimatedSection: React.FC = ({ children, delay = 0 }) => { const controls = useAnimation(); const ref = useRef(null); useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { controls.start("visible"); } }, { threshold: 0.1 } ); if (ref.current) { observer.observe(ref.current); } return () => { if (ref.current) { observer.unobserve(ref.current); } }; }, [controls]); return ( {children} ); }; [V0_FILE]typescriptreact:file="components/BuyStep.tsx" import React, { forwardRef } from 'react'; import { motion } from 'framer-motion'; interface BuyStepProps { icon: React.ReactNode; title: string; description: string; isActive: boolean; index: number; } export const BuyStep = forwardRef( ({ icon, title, description, isActive, index }, ref) => { const variants = { hidden: { opacity: 0, y: 50 }, visible: (i: number) => ({ opacity: 1, y: 0, transition: { delay: i * 0.3, duration: 0.8, ease: "easeOut" } }) }; return (

{icon}

{title}

{description}

); } ); BuyStep.displayName = 'BuyStep'; [V0_FILE]typescriptreact:file="components/SwapInterface.tsx" 'use client' import React, { useState, useEffect } from 'react' import { GlassCard } from '@/components/ui/glass-card' import { CustomButton } from '@/components/ui/custom-button' import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Switch } from "@/components/ui/switch" import { ArrowDownUp, Settings2 } from 'lucide-react' import Image from 'next/image' import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger, } from "@/components/ui/sheet" import { Label } from '@/components/ui/label' import { Skeleton } from '@/components/ui/skeleton' import { toast } from 'react-hot-toast' // Mock token list - in production, fetch from Jupiter API const tokens = [ { symbol: 'SOL', name: 'Solana', image: '/placeholder.svg?height=32&width=32' }, { symbol: 'USDC', name: 'USD Coin', image: '/placeholder.svg?height=32&width=32' }, { symbol: 'METAL', name: 'Crypto Commodity Coin', image: '/placeholder.svg?height=32&width=32' }, ] interface SwapInterfaceProps { className?: string } export function SwapInterface({ className = '' }: SwapInterfaceProps) { const [inputAmount, setInputAmount] = useState('') const [outputAmount, setOutputAmount] = useState('') const [inputToken, setInputToken] = useState('USDC') const [outputToken, setOutputToken] = useState('SOL') const [slippage, setSlippage] = useState('1') const [autoRouting, setAutoRouting] = useState(true) const [loading, setLoading] = useState(false) const [walletConnected, setWalletConnected] = useState(false) // Mock quote fetching useEffect(() => { if (inputAmount && inputToken && outputToken) { setLoading(true) // Simulate API delay setTimeout(() => { setOutputAmount((parseFloat(inputAmount) * 0.5).toString()) setLoading(false) }, 500) } else { setOutputAmount('') } }, [inputAmount, inputToken, outputToken]) const handleSwapTokens = () => { const tempToken = inputToken setInputToken(outputToken) setOutputToken(tempToken) setInputAmount(outputAmount) setOutputAmount(inputAmount) } const handleConnectWallet = async () => { // Simulate wallet connection setWalletConnected(true) toast.success('Wallet connected successfully!') } const handleSwap = async () => { if (!walletConnected) { handleConnectWallet() return } // Handle swap execution toast.success('Swap executed successfully!') } return (

{/* Input Token */}

You Pay Balance: 0.00

setInputAmount(e.target.value)} />

{/* Swap Button */}

{/* Output Token */}

You Receive Balance: 0.00

{loading ? ( ) : ( )}

{/* Settings */}

Swap Settings Configure your swap parameters

Slippage Tolerance (%) setSlippage(e.target.value)} />

Auto Routing

{!loading && inputAmount && outputAmount && ( 1 {inputToken} ≈ {(parseFloat(outputAmount) / parseFloat(inputAmount)).toFixed(6)} {outputToken} )}

{/* Swap Button */} {!walletConnected ? 'Connect Wallet' : 'Swap'}

) } [V0_FILE]typescriptreact:file="components/TokenChart.tsx" export default function TokenChart() { return (

About

About