[V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Badge } from "@/components/ui/badge" import { TrendingUp, TrendingDown, Trophy, Zap, Coins, Target } from "lucide-react" import { BettingModal } from "@/components/betting-modal" import { PortfolioCard } from "@/components/portfolio-card" import { MarketCard } from "@/components/market-card" import { SolanaConversionModal } from "@/components/solana-conversion-modal" import Link from "next/link" // Mock data for streamers and markets const streamers = [ { id: 1, name: "xQc", avatar: "/gaming-streamer-avatar.png", tokenSymbol: "XQC", price: 24.5, change24h: 12.3, volume: 156000, marketCap: 2450000, }, { id: 2, name: "Pokimane", avatar: "/female-streamer-avatar.png", tokenSymbol: "POKI", price: 18.2, change24h: -4.2, volume: 98000, marketCap: 1820000, }, { id: 3, name: "shroud", avatar: "/fps-gamer-avatar.png", tokenSymbol: "SHRD", price: 32.8, change24h: 8.7, volume: 203000, marketCap: 3280000, }, { id: 4, name: "Valkyrae", avatar: "/streamer-avatar-girl.jpg", tokenSymbol: "VAL", price: 21.4, change24h: 5.6, volume: 124000, marketCap: 2140000, }, ] const markets = [ { id: 1, streamer: streamers[0], type: "viewership", question: "Will xQc exceed 80k avg viewers today?", endTime: "23:59 EST", yesOdds: 1.65, noOdds: 2.35, poolSize: 45000, yesVolume: 28000, noVolume: 17000, }, { id: 2, streamer: streamers[1], type: "game", question: "Will Pokimane play Valorant today?", endTime: "20:00 EST", yesOdds: 2.1, noOdds: 1.8, poolSize: 32000, yesVolume: 14000, noVolume: 18000, }, { id: 3, streamer: streamers[2], type: "metric", question: "Will shroud get 500+ kills in stream?", endTime: "21:30 EST", yesOdds: 1.45, noOdds: 2.85, poolSize: 67000, yesVolume: 42000, noVolume: 25000, }, { id: 4, streamer: streamers[3], type: "viewership", question: "Will Valkyrae reach 50k peak viewers?", endTime: "22:00 EST", yesOdds: 1.95, noOdds: 1.95, poolSize: 28000, yesVolume: 14000, noVolume: 14000, }, ] export default function Home() { const [selectedMarket, setSelectedMarket] = useState<(typeof markets)[0] | null>(null) const [showConversionModal, setShowConversionModal] = useState(false) const [userPoints, setUserPoints] = useState(1250) const [userBalance, setUserBalance] = useState(5000) return (

{/* Header */}

StreamerBet

Beta

{userPoints.toLocaleString()} pts

${userBalance.toLocaleString()}

{/* Main Content */}

{/* Hero Stats */}

Total Volume 24h

$581K

+23.4%

Active Markets

124

Across 45 streamers

Your Positions

+$234 unrealized

{/* Markets Section */} Live Markets Upcoming Settled {markets.map((market) => ( setSelectedMarket(market)} /> ))}

No upcoming markets yet

No settled markets to display

{/* Sidebar */}

setShowConversionModal(true)} /> {/* Top Streamer Coins */}

Top Streamer Coins

{streamers.map((streamer) => (

{streamer.tokenSymbol}

{streamer.name}

${streamer.price}

0 ? "text-green-500" : "text-red-500"}`} > {streamer.change24h > 0 ? ( ) : ( )} {Math.abs(streamer.change24h)}%

))}

{/* Betting Modal */} {selectedMarket && ( setSelectedMarket(null)} userBalance={userBalance} /> )} {/* Solana Conversion Modal */} setShowConversionModal(false)} userPoints={userPoints} conversionRate={0.00002} />

) } [V0_FILE]typescriptreact:file="components/market-card.tsx" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Clock, Users } from "lucide-react" interface Market { id: number streamer: { name: string avatar: string tokenSymbol: string } type: string question: string endTime: string yesOdds: number noOdds: number poolSize: number yesVolume: number noVolume: number } interface MarketCardProps { market: Market onBet: () => void } export function MarketCard({ market, onBet }: MarketCardProps) { const yesPercentage = (market.yesVolume / market.poolSize) * 100 const noPercentage = (market.noVolume / market.poolSize) * 100 const getTypeBadge = (type: string) => { const variants: Record = { viewership: { label: "Viewership", variant: "default" }, game: { label: "Game", variant: "secondary" }, metric: { label: "Metric", variant: "outline" }, } return variants[type] || variants.viewership } const badge = getTypeBadge(market.type) return (

{market.streamer.name}

{badge.label}

{market.endTime}

{market.question}

{/* Pool Distribution */}

Pool Distribution ${market.poolSize.toLocaleString()}

{/* Betting Options */}

) } [V0_FILE]typescriptreact:file="components/betting-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" import { Slider } from "@/components/ui/slider" import { AlertCircle, TrendingUp } from "lucide-react" interface Market { streamer: { name: string avatar: string } question: string yesOdds: number noOdds: number poolSize: number } interface BettingModalProps { market: Market isOpen: boolean onClose: () => void userBalance: number } export function BettingModal({ market, isOpen, onClose, userBalance }: BettingModalProps) { const [betSide, setBetSide] = useState<"yes" | "no">("yes") const [amount, setAmount] = useState("100") const [sliderValue, setSliderValue] = useState([20]) const numericAmount = Number.parseFloat(amount) || 0 const currentOdds = betSide === "yes" ? market.yesOdds : market.noOdds const potentialReturn = numericAmount * currentOdds const potentialProfit = potentialReturn - numericAmount const handleQuickAmount = (percentage: number) => { const quickAmount = (userBalance * percentage) / 100 setAmount(quickAmount.toFixed(2)) setSliderValue([percentage]) } const handleSliderChange = (value: number[]) => { setSliderValue(value) const newAmount = (userBalance * value[0]) / 100 setAmount(newAmount.toFixed(2)) } const handlePlaceBet = () => { // TODO: Implement bet placement logic console.log("[v0] Placing bet:", { market, betSide, amount: numericAmount }) onClose() } return ( ) } [V0_FILE]typescriptreact:file="components/portfolio-card.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Progress } from "@/components/ui/progress" import { TrendingUp, Award, Coins } from "lucide-react" interface PortfolioCardProps { userPoints: number userBalance: number onConvertClick?: () => void } export function PortfolioCard({ userPoints, userBalance, onConvertClick }: PortfolioCardProps) { const nextRewardAt = 2000 const progressToReward = (userPoints / nextRewardAt) * 100 return (

Your Portfolio

{/* Balance */}

Total Balance

${userBalance.toLocaleString()}

+12.5% this week

{/* Points Progress */}

Reward Points

{userPoints} / {nextRewardAt}

{nextRewardAt - userPoints} points until next reward

{/* Quick Actions */}

{/* Active Positions */}

Active Positions

Open Bets 8

Total Staked $1,240

Unrealized P&L +$234

) } [V0_FILE]png:file="public/gaming-streamer-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/gaming-streamer-avatar-qIoue51j1VqrmCUM3EvO2qoHVKYDLE.png" isMerged="true" [V0_FILE]png:file="public/female-streamer-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/female-streamer-avatar-3rZdl5Sp10VETXK2x2ktcvzgxhwend.png" isMerged="true" [V0_FILE]png:file="public/fps-gamer-avatar.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/fps-gamer-avatar-XcJZpafMFIlHgKcGAKz8J5DFeFLJiR.png" isMerged="true" [V0_FILE]jpg:file="public/streamer-avatar-girl.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/streamer-avatar-girl-9I4cy93aNOyfhnKoczfRKNR6lVxaEu.jpg" isMerged="true" [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.7", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/trade/page.tsx" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { TrendingUp, TrendingDown, Zap, Coins, ArrowLeft, ArrowUpRight, ArrowDownRight } from "lucide-react" import Link from "next/link" import { TradeModal } from "@/components/trade-modal" import { TradingChart } from "@/components/trading-chart" const streamers = [ { id: 1, name: "xQc", avatar: "/gaming-streamer-avatar.png", tokenSymbol: "XQC", price: 24.5, change24h: 12.3, volume: 156000, marketCap: 2450000, holders: 3420, avgViewers: 78000, chartData: [22.1, 22.5, 23.2, 22.8, 24.1, 23.7, 24.5], }, { id: 2, name: "Pokimane", avatar: "/female-streamer-avatar.png", tokenSymbol: "POKI", price: 18.2, change24h: -4.2, volume: 98000, marketCap: 1820000, holders: 2840, avgViewers: 52000, chartData: [19.0, 18.8, 18.9, 18.5, 18.3, 18.4, 18.2], }, { id: 3, name: "shroud", avatar: "/fps-gamer-avatar.png", tokenSymbol: "SHRD", price: 32.8, change24h: 8.7, volume: 203000, marketCap: 3280000, holders: 4120, avgViewers: 95000, chartData: [30.2, 30.8, 31.5, 31.2, 32.1, 32.4, 32.8], }, { id: 4, name: "Valkyrae", avatar: "/streamer-avatar-girl.jpg", tokenSymbol: "VAL", price: 21.4, change24h: 5.6, volume: 124000, marketCap: 2140000, holders: 2950, avgViewers: 61000, chartData: [20.3, 20.5, 20.8, 21.0, 21.2, 21.3, 21.4], }, ] export default function TradePage() { const [selectedStreamer, setSelectedStreamer] = useState(streamers[0]) const [tradeModalOpen, setTradeModalOpen] = useState(false) const [tradeDirection, setTradeDirection] = useState<"long" | "short">("long") const handleTrade = (direction: "long" | "short") => { setTradeDirection(direction) setTradeModalOpen(true) } return (

{/* Header */}

Token Trading

$5,000

{/* Token List Sidebar */}

Streamer Tokens

{streamers.map((streamer) => ( ))}

{/* Main Trading Area */}

{/* Token Header */}

{selectedStreamer.tokenSymbol}

{selectedStreamer.name}

${selectedStreamer.price}

0 ? "text-green-500" : "text-red-500" }`} > {selectedStreamer.change24h > 0 ? ( ) : ( )} {selectedStreamer.change24h > 0 ? "+" : ""} {selectedStreamer.change24h}%

{/* Stats Grid */}

Market Cap

${(selectedStreamer.marketCap / 1000000).toFixed(2)}M

24h Volume

${(selectedStreamer.volume / 1000).toFixed(0)}K

Holders

{selectedStreamer.holders.toLocaleString()}

Avg Viewers

{(selectedStreamer.avgViewers / 1000).toFixed(0)}K

{/* Chart and Trading */}

{/* Chart */}

Price Chart

1D 7D 30D All

{/* Trade Panel */}

Trade {selectedStreamer.tokenSymbol}

{/* Long Button */} {/* Short Button */} {/* Info */}

Your Position 0 {selectedStreamer.tokenSymbol}

Position Value $0.00

Unrealized P&L $0.00

{/* Open Positions */}

Your Open Positions

All Positions Long Short

No open positions yet

Start trading to build your portfolio

{/* Trade Modal */} setTradeModalOpen(false)} direction={tradeDirection} userBalance={5000} />

) } [V0_FILE]typescriptreact:file="components/trade-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Badge } from "@/components/ui/badge" import { ArrowUpRight, ArrowDownRight, AlertCircle } from "lucide-react" interface Streamer { name: string avatar: string tokenSymbol: string price: number } interface TradeModalProps { streamer: Streamer isOpen: boolean onClose: () => void direction: "long" | "short" userBalance: number } export function TradeModal({ streamer, isOpen, onClose, direction, userBalance }: TradeModalProps) { const [amount, setAmount] = useState("100") const [leverage, setLeverage] = useState([1]) const numericAmount = Number.parseFloat(amount) || 0 const leverageValue = leverage[0] const positionSize = numericAmount * leverageValue const tokensReceived = positionSize / streamer.price const liquidationPrice = direction === "long" ? streamer.price * (1 - (1 / leverageValue) * 0.95) : streamer.price * (1 + (1 / leverageValue) * 0.95) const handleQuickAmount = (percentage: number) => { const quickAmount = (userBalance * percentage) / 100 setAmount(quickAmount.toFixed(2)) } const handleTrade = () => { console.log("[v0] Executing trade:", { streamer: streamer.tokenSymbol, direction, amount: numericAmount, leverage: leverageValue, }) onClose() } return ( ) } [V0_FILE]typescriptreact:file="components/trading-chart.tsx" isMerged="true" "use client" import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts" interface TradingChartProps { data: number[] currentPrice: number } export function TradingChart({ data, currentPrice }: TradingChartProps) { const chartData = data.map((value, index) => ({ time: index, price: value, })) const isPositive = data[data.length - 1] > data[0] return (

`$${value}`} /> { if (active && payload && payload.length) { return (

${payload[0].value?.toFixed(2)}

) } return null }} />

) } [V0_FILE]typescriptreact:file="app/stake/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Coins, ArrowLeft, Lock, TrendingUp, Award, Gift, Sparkles } from "lucide-react" import Link from "next/link" import { StakeModal } from "@/components/stake-modal" import { RewardTierCard } from "@/components/reward-tier-card" import { SolanaConversionModal } from "@/components/solana-conversion-modal" const stakingPools = [ { id: 1, name: "xQc Staking Pool", tokenSymbol: "XQC", avatar: "/gaming-streamer-avatar.png", apr: 24.5, totalStaked: 1245000, myStaked: 500, rewards: 12.45, lockPeriod: 7, }, { id: 2, name: "Pokimane Staking Pool", tokenSymbol: "POKI", avatar: "/female-streamer-avatar.png", apr: 18.2, totalStaked: 876000, myStaked: 0, rewards: 0, lockPeriod: 7, }, { id: 3, name: "shroud Staking Pool", tokenSymbol: "SHRD", avatar: "/fps-gamer-avatar.png", apr: 32.8, totalStaked: 1890000, myStaked: 1000, rewards: 28.32, lockPeriod: 14, }, ] const rewardTiers = [ { tier: 1, name: "Bronze Bettor", pointsRequired: 1000, benefits: ["5% bonus on winnings", "Access to daily markets", "Basic analytics"], color: "from-amber-700 to-amber-600", }, { tier: 2, name: "Silver Trader", pointsRequired: 5000, benefits: ["10% bonus on winnings", "Early market access", "Advanced analytics", "1 free token airdrop"], color: "from-gray-400 to-gray-300", }, { tier: 3, name: "Gold Whale", pointsRequired: 15000, benefits: [ "15% bonus on winnings", "VIP market access", "Pro analytics", "5% cashback on losses", "Monthly token rewards", ], color: "from-yellow-500 to-yellow-400", }, { tier: 4, name: "Diamond Legend", pointsRequired: 50000, benefits: [ "25% bonus on winnings", "Private markets", "Custom analytics", "10% cashback", "Weekly SOL rewards", "Priority support", ], color: "from-cyan-500 to-blue-500", }, ] export default function StakePage() { const [selectedPool, setSelectedPool] = useState<(typeof stakingPools)[0] | null>(null) const [showConversionModal, setShowConversionModal] = useState(false) const [userPoints, setUserPoints] = useState(8250) const [userBalance, setUserBalance] = useState(5000) const currentTier = rewardTiers.reduce((acc, tier) => { return userPoints >= tier.pointsRequired ? tier : acc }, rewardTiers[0]) const nextTier = rewardTiers.find((tier) => tier.pointsRequired > userPoints) const progressToNextTier = nextTier ? ((userPoints - currentTier.pointsRequired) / (nextTier.pointsRequired - currentTier.pointsRequired)) * 100 : 100 return (

{/* Header */}

Staking & Rewards

{userPoints.toLocaleString()} pts

${userBalance.toLocaleString()}

{/* Main Content */}

{/* Current Tier */}

Your Current Tier

{currentTier.name}

{currentTier.benefits.map((benefit, index) => (

{benefit}

))}

{nextTier && (

Progress to {nextTier.name} {userPoints.toLocaleString()} / {nextTier.pointsRequired.toLocaleString()}

)} {/* Staking Pools */}

Staking Pools

{stakingPools.map((pool) => (

{pool.name}

{pool.tokenSymbol} {pool.lockPeriod} days lock

APR

{pool.apr}%

Total Staked

${(pool.totalStaked / 1000).toFixed(0)}K

Your Stake

${pool.myStaked}

Rewards

+${pool.rewards}

{pool.myStaked > 0 && ( <> )}

))}

{/* DeFi Yield Loops */}

DeFi Yield Loops

Maximize your returns by participating in automated yield strategies

Auto-Compound

42.3%

Effective APY

Liquidity Mining

38.7%

Base APY + Rewards

{/* Sidebar */}

{/* Points Summary */}

Points Summary

Total Points

{userPoints.toLocaleString()}

From Betting 4,250 pts

From Trading 2,800 pts

From Staking 1,200 pts

Weekly Earned +540 pts

{/* Reward Tiers */}

All Reward Tiers

{rewardTiers.map((tier) => ( = tier.pointsRequired} isCurrent={tier.tier === currentTier.tier} /> ))}

{/* Stake Modal */} {selectedPool && ( setSelectedPool(null)} userBalance={userBalance} /> )} {/* Solana Conversion Modal */} setShowConversionModal(false)} userPoints={userPoints} conversionRate={0.00002} />

) } [V0_FILE]typescriptreact:file="components/stake-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Lock, AlertCircle, Calendar, TrendingUp } from "lucide-react" interface Pool { name: string tokenSymbol: string avatar: string apr: number lockPeriod: number myStaked: number } interface StakeModalProps { pool: Pool isOpen: boolean onClose: () => void userBalance: number } export function StakeModal({ pool, isOpen, onClose, userBalance }: StakeModalProps) { const [amount, setAmount] = useState("100") const numericAmount = Number.parseFloat(amount) || 0 const dailyReward = (numericAmount * pool.apr) / 100 / 365 const estimatedYearlyReward = (numericAmount * pool.apr) / 100 const unlockDate = new Date() unlockDate.setDate(unlockDate.getDate() + pool.lockPeriod) const handleQuickAmount = (percentage: number) => { const quickAmount = (userBalance * percentage) / 100 setAmount(quickAmount.toFixed(2)) } const handleStake = () => { console.log("[v0] Staking:", { pool: pool.tokenSymbol, amount: numericAmount, }) onClose() } return ( ) } [V0_FILE]typescriptreact:file="components/reward-tier-card.tsx" isMerged="true" import { Badge } from "@/components/ui/badge" import { Lock, CheckCircle2 } from "lucide-react" interface RewardTier { tier: number name: string pointsRequired: number benefits: string[] color: string } interface RewardTierCardProps { tier: RewardTier isUnlocked: boolean isCurrent: boolean } export function RewardTierCard({ tier, isUnlocked, isCurrent }: RewardTierCardProps) { return (

{tier.name}

{tier.pointsRequired.toLocaleString()} points

{isCurrent ? ( Current ) : isUnlocked ? ( ) : ( )}

{tier.benefits.length} benefits unlocked

) } [V0_FILE]typescriptreact:file="components/solana-conversion-modal.tsx" isMerged="true" "use client" import { useState } from "react" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Badge } from "@/components/ui/badge" import { ArrowRight, Wallet, AlertCircle, ExternalLink, Sparkles } from "lucide-react" interface SolanaConversionModalProps { isOpen: boolean onClose: () => void userPoints: number conversionRate: number } export function SolanaConversionModal({ isOpen, onClose, userPoints, conversionRate }: SolanaConversionModalProps) { const [points, setPoints] = useState("1000") const [walletConnected, setWalletConnected] = useState(false) const [walletAddress, setWalletAddress] = useState("") const numericPoints = Number.parseFloat(points) || 0 const solAmount = numericPoints * conversionRate const minPoints = 500 const handleQuickPoints = (amount: number) => { setPoints(amount.toString()) } const handleConnectWallet = () => { // Simulated wallet connection setWalletConnected(true) setWalletAddress("7xKXt...9xYpQ") } const handleConvert = () => { console.log("[v0] Converting points to SOL:", { points: numericPoints, solAmount, walletAddress, }) onClose() } return ( ) } [V0_FILE]png:file="public/solana-logo.png" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/solana-logo-xUmRH4rkHUEXFgLKkiIjs2c2ekKM0x.png" isMerged="true" [V0_FILE]css:file="app/globals.css" isEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } /* Updated dark mode colors for crypto/gaming theme */ .dark { --background: #0a0b0d; --foreground: #e8eaed; --card: #13151a; --card-foreground: #e8eaed; --popover: #1a1d24; --popover-foreground: #e8eaed; --primary: #00d4aa; --primary-foreground: #0a0b0d; --secondary: #6366f1; --secondary-foreground: #ffffff; --muted: #1f2229; --muted-foreground: #9ca3af; --accent: #f59e0b; --accent-foreground: #0a0b0d; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #27292f; --input: #27292f; --ring: #00d4aa; --chart-1: #00d4aa; --chart-2: #6366f1; --chart-3: #f59e0b; --chart-4: #ec4899; --chart-5: #8b5cf6; --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: "Geist", "Geist Fallback"; --font-mono: "Geist Mono", "Geist Mono Fallback"; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); /* Added custom radius value for crypto theme */ --radius: 0.5rem; } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } }