[V0_FILE]typescriptreact:file="app/page.tsx" import Dashboard from "@/components/dashboard" export default function Home() { return (

) } [V0_FILE]typescriptreact:file="components/market-overview.tsx" isQuickEdit="true" "use client" import { Card, CardContent } from "@/components/ui/card" import { ArrowUpIcon, ArrowDownIcon, TrendingUp, TrendingDown, BarChart3 } from "lucide-react" export function MarketOverview({ asset }: { asset: string }) { // In a real app, this data would come from an API const marketData = { "BTC/USD": { price: 42568.23, change: 2.34, high: 43100.0, low: 41800.5, volume: "3.2B", }, "ETH/USD": { price: 2345.67, change: -1.23, high: 2400.0, low: 2300.25, volume: "1.8B", }, "XRP/USD": { price: 0.5423, change: 0.87, high: 0.55, low: 0.53, volume: "450M", }, } const data = marketData[asset as keyof typeof marketData] || marketData["BTC/USD"] const isPositive = data.change > 0 return (

Current Price

$ {data.price.toLocaleString()}

24h Change

{isPositive ? "+" : ""} {data.change}%

{isPositive ? ( ) : ( )}

24h High / Low

$ {data.high.toLocaleString()} / $ {data.low.toLocaleString()}

24h Volume

$ {data.volume}

) } [V0_FILE]typescriptreact:file="components/price-chart.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Area, AreaChart, CartesianGrid, XAxis, YAxis, ResponsiveContainer } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" // Generate mock price data const generatePriceData = (asset: string, days: number, trend: "up" | "down" | "sideways") => { const data = [] let basePrice = asset === "BTC/USD" ? 42000 : asset === "ETH/USD" ? 2300 : 0.54 const volatility = asset === "BTC/USD" ? 1000 : asset === "ETH/USD" ? 100 : 0.02 for (let i = days; i >= 0; i--) { const date = new Date() date.setDate(date.getDate() - i) let trendFactor = 0 if (trend === "up") trendFactor = 0.005 else if (trend === "down") trendFactor = -0.005 const randomChange = (Math.random() - 0.5) * volatility * 0.05 const trendChange = basePrice * trendFactor basePrice = basePrice + randomChange + trendChange data.push({ date: date.toISOString().split("T")[0], price: basePrice, }) } return data } export function PriceChart({ asset, isDemoMode }: { asset: string; isDemoMode?: boolean }) { const [timeframe, setTimeframe] = useState("1W") // In a real app, this would fetch data from an API const getTrendForAsset = (asset: string) => { if (asset === "BTC/USD") return "up" if (asset === "ETH/USD") return "down" return "sideways" } const getDaysForTimeframe = (timeframe: string) => { switch (timeframe) { case "1D": return 1 case "1W": return 7 case "1M": return 30 case "3M": return 90 case "1Y": return 365 default: return 7 } } const data = generatePriceData(asset, getDaysForTimeframe(timeframe), getTrendForAsset(asset)) // Calculate min and max with more buffer space const minPrice = Math.min(...data.map((d) => d.price)) * 0.98 const maxPrice = Math.max(...data.map((d) => d.price)) * 1.02 return (

{["1D", "1W", "1M", "3M", "1Y"].map((tf) => ( ))}

{ if (timeframe === "1D") { return value } const date = new Date(value) return date.toLocaleDateString("en-US", { month: "short", day: "numeric", }) }} /> `$${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: asset === "XRP/USD" ? 4 : 0, })}` } padding={{ top: 20, bottom: 20 }} /> } />

) } [V0_FILE]typescriptreact:file="components/trading-recommendations.tsx" "use client" import { Badge } from "@/components/ui/badge" import { Card, CardContent } from "@/components/ui/card" import { ArrowUpRight, ArrowDownRight, TrendingUp, TrendingDown, AlertCircle } from "lucide-react" export function TradingRecommendations({ asset }: { asset: string }) { // In a real app, these recommendations would come from an algorithm or API const recommendations = { "BTC/USD": [ { action: "BUY", reason: "Bullish momentum with strong support at $41,500", confidence: "high" }, { action: "HOLD", reason: "Wait for confirmation of uptrend continuation", confidence: "medium" }, ], "ETH/USD": [ { action: "SELL", reason: "Bearish trend with resistance at $2,400", confidence: "medium" }, { action: "BUY", reason: "If price drops below $2,200, consider buying the dip", confidence: "low" }, ], "XRP/USD": [ { action: "HOLD", reason: "Sideways movement expected in the short term", confidence: "high" }, { action: "BUY", reason: "Accumulate on dips below $0.52", confidence: "medium" }, ], } const assetRecs = recommendations[asset as keyof typeof recommendations] || recommendations["BTC/USD"] const getActionIcon = (action: string) => { switch (action) { case "BUY": return case "SELL": return case "HOLD": return default: return null } } const getConfidenceBadge = (confidence: string) => { switch (confidence) { case "high": return High Confidence case "medium": return Medium Confidence case "low": return Low Confidence default: return null } } // Overall market sentiment const marketSentiment = { "BTC/USD": "bullish", "ETH/USD": "bearish", "XRP/USD": "neutral", } const sentiment = marketSentiment[asset as keyof typeof marketSentiment] || "neutral" return (

Market Sentiment:

{sentiment === "bullish" ? ( <> Bullish ) : sentiment === "bearish" ? ( <> Bearish ) : ( Neutral )}

{assetRecs.map((rec, index) => (

{getActionIcon(rec.action)}

{rec.action}

{getConfidenceBadge(rec.confidence)}

{rec.reason}

))}

* These recommendations are for demonstration purposes only and should not be considered financial advice.

) } [V0_FILE]typescriptreact:file="components/market-news.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Newspaper, ExternalLink } from "lucide-react" export function MarketNews({ asset }: { asset: string }) { // In a real app, this would fetch news from an API const news = [ { title: "Bitcoin Surges Past $42,000 as Institutional Interest Grows", source: "CryptoNews", time: "2 hours ago", url: "#", relevantTo: ["BTC/USD"], }, { title: "Ethereum Developers Announce Major Protocol Upgrade", source: "BlockchainToday", time: "5 hours ago", url: "#", relevantTo: ["ETH/USD"], }, { title: "Market Analysis: Crypto Set for Strong Q2 Performance", source: "TradingView", time: "1 day ago", url: "#", relevantTo: ["BTC/USD", "ETH/USD", "XRP/USD"], }, { title: "XRP Lawsuit: New Developments Could Impact Price", source: "CryptoLegal", time: "3 hours ago", url: "#", relevantTo: ["XRP/USD"], }, { title: "Fed Interest Rate Decision: Impact on Crypto Markets", source: "EconomicTimes", time: "6 hours ago", url: "#", relevantTo: ["BTC/USD", "ETH/USD", "XRP/USD"], }, ] // Filter news relevant to the selected asset const filteredNews = news.filter((item) => item.relevantTo.includes(asset) || item.relevantTo.includes("ALL")) return ( Market News Latest news affecting {asset}

{filteredNews.length > 0 ? ( filteredNews.map((item, index) => (

{item.title}

{item.source} • {item.time}

)) ) : (

No recent news for {asset}

)}

) } [V0_FILE]typescriptreact:file="components/asset-selector.tsx" isFixed="true" isQuickEdit="true" "use client" import { Check, ChevronsUpDown } from "lucide-react" import { Button } from "@/components/ui/button" import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command" import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover" import { cn } from "@/lib/utils" import { useState } from "react" const assets = [ { value: "BTC/USD", label: "Bitcoin (BTC/USD)" }, { value: "ETH/USD", label: "Ethereum (ETH/USD)" }, { value: "XRP/USD", label: "Ripple (XRP/USD)" }, ] export function AssetSelector({ value, onValueChange, }: { value: string onValueChange: (value: string) => void }) { const [open, setOpen] = useState(false) return ( No asset found. {assets.map((asset) => ( { onValueChange(currentValue) setOpen(false) }} > {asset.label} ))} ) } [V0_FILE]typescriptreact:file="lib/utils.ts" import { type ClassValue, clsx } from "clsx" import { twMerge } from "tailwind-merge" export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)) } [V0_FILE]css:file="app/globals.css" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 221.2 83.2% 53.3%; --primary-foreground: 210 40% 98%; --secondary: 210 40% 96.1%; --secondary-foreground: 222.2 47.4% 11.2%; --muted: 210 40% 96.1%; --muted-foreground: 215.4 16.3% 46.9%; --accent: 210 40% 96.1%; --accent-foreground: 222.2 47.4% 11.2%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 214.3 31.8% 91.4%; --input: 214.3 31.8% 91.4%; --ring: 221.2 83.2% 53.3%; --radius: 0.5rem; --chart-1: 221.2 83.2% 53.3%; --chart-2: 215 25% 27%; --chart-3: 217 33% 17%; --chart-4: 219 14% 51%; --chart-5: 218 11% 65%; --green-500: 142.1 76.2% 36.3%; --red-500: 0 84.2% 60.2%; --amber-500: 38 92% 50%; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 217.2 91.2% 59.8%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 217.2 32.6% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 217.2 32.6% 17.5%; --muted-foreground: 215 20.2% 65.1%; --accent: 217.2 32.6% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 217.2 32.6% 17.5%; --input: 217.2 32.6% 17.5%; --ring: 224.3 76.3% 48%; --chart-1: 217.2 91.2% 59.8%; --chart-2: 215 20.2% 65.1%; --chart-3: 217 33% 17%; --chart-4: 219 14% 51%; --chart-5: 218 11% 65%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="tailwind.config.js" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="components/ml-predictions.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Brain, TrendingUp, TrendingDown, AlertTriangle } from "lucide-react" import { Line, LineChart, CartesianGrid, XAxis, YAxis, ResponsiveContainer } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" // Generate prediction data const generatePredictionData = (asset: string, days = 7) => { const data = [] let basePrice = asset === "BTC/USD" ? 42500 : asset === "ETH/USD" ? 2350 : 0.55 const volatility = asset === "BTC/USD" ? 1000 : asset === "ETH/USD" ? 100 : 0.02 // Historical data (past 7 days) for (let i = days; i > 0; i--) { const date = new Date() date.setDate(date.getDate() - i) const randomChange = (Math.random() - 0.5) * volatility * 0.03 basePrice = basePrice + randomChange data.push({ date: date.toISOString().split("T")[0], actual: basePrice, predicted: null, }) } // Current day const today = new Date() data.push({ date: today.toISOString().split("T")[0], actual: basePrice, predicted: basePrice, }) // Future predictions (next 7 days) for (let i = 1; i <= days; i++) { const date = new Date() date.setDate(date.getDate() + i) // Add some trend based on the asset let trendFactor = 0 if (asset === "BTC/USD") trendFactor = 0.003 else if (asset === "ETH/USD") trendFactor = -0.002 const randomChange = (Math.random() - 0.5) * volatility * 0.04 const trendChange = basePrice * trendFactor basePrice = basePrice + randomChange + trendChange data.push({ date: date.toISOString().split("T")[0], actual: null, predicted: basePrice, }) } return data } export function MLPredictions({ asset, isDemoMode }: { asset: string; isDemoMode?: boolean }) { const predictionData = generatePredictionData(asset) // Calculate prediction metrics const lastActual = predictionData.filter((d) => d.actual !== null).pop()?.actual || 0 const futurePredictions = predictionData.filter((d) => d.predicted !== null && d.actual === null) const lastPrediction = futurePredictions[futurePredictions.length - 1]?.predicted || 0 const percentChange = ((lastPrediction - lastActual) / lastActual) * 100 const isPositive = percentChange > 0 // Prediction confidence based on asset const confidenceMap = { "BTC/USD": 78, "ETH/USD": 72, "XRP/USD": 65, } const confidence = confidenceMap[asset as keyof typeof confidenceMap] || 70 // Prediction accuracy (simulated) const accuracy = { "BTC/USD": { "1d": 92, "7d": 76 }, "ETH/USD": { "1d": 89, "7d": 71 }, "XRP/USD": { "1d": 85, "7d": 68 }, } const assetAccuracy = accuracy[asset as keyof typeof accuracy] || accuracy["BTC/USD"] // Calculate min and max with more buffer space const allValues = predictionData.flatMap((d) => [d.actual, d.predicted]).filter((v) => v !== null) as number[] const minValue = Math.min(...allValues) * 0.98 const maxValue = Math.max(...allValues) * 1.02 return (

ML Price Predictions AI-powered price forecasting for {asset}

75 ? "default" : confidence > 65 ? "secondary" : "outline"}> {confidence}% Confidence

7-Day Forecast

${" "} {lastPrediction.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: asset === "XRP/USD" ? 4 : 0, })}

{isPositive ? : } {Math.abs(percentChange).toFixed(2)}%

Model Accuracy

1-Day: {assetAccuracy["1d"]}%

7-Day: {assetAccuracy["7d"]}%

{ const date = new Date(value) return date.toLocaleDateString("en-US", { month: "short", day: "numeric", }) }} /> `$${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: asset === "XRP/USD" ? 4 : 0, })}` } /> } />

Predictions are based on historical data and market patterns. Past performance is not indicative of future results.

) } [V0_FILE]typescriptreact:file="components/risk-management.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Slider } from "@/components/ui/slider" import { Shield, DollarSign, PercentIcon, AlertTriangle, Calculator } from "lucide-react" export function RiskManagement({ asset }: { asset: string }) { // Current price based on asset const currentPrice = asset === "BTC/USD" ? 42568.23 : asset === "ETH/USD" ? 2345.67 : 0.5423 const [investmentAmount, setInvestmentAmount] = useState(10000) const [riskPercentage, setRiskPercentage] = useState(2) const [stopLossPercentage, setStopLossPercentage] = useState(5) const [takeProfitPercentage, setTakeProfitPercentage] = useState(10) // Calculate position size const maxRiskAmount = investmentAmount * (riskPercentage / 100) const potentialLoss = currentPrice * (stopLossPercentage / 100) const positionSize = maxRiskAmount / potentialLoss const positionSizeInUnits = positionSize / currentPrice // Calculate potential outcomes const stopLossPrice = currentPrice * (1 - stopLossPercentage / 100) const takeProfitPrice = currentPrice * (1 + takeProfitPercentage / 100) const potentialProfit = positionSizeInUnits * (takeProfitPrice - currentPrice) const potentialLossAmount = positionSizeInUnits * (currentPrice - stopLossPrice) const riskRewardRatio = potentialProfit / potentialLossAmount return ( Risk Management Calculator Optimize your position size and risk for {asset}

Total Investment Amount setInvestmentAmount(Number(e.target.value))} min={100} />

Risk Per Trade (%)

setRiskPercentage(value[0])} min={0.5} max={5} step={0.5} /> {riskPercentage}%

Stop Loss (%)

setStopLossPercentage(value[0])} min={1} max={15} step={0.5} /> {stopLossPercentage}%

Take Profit (%)

setTakeProfitPercentage(value[0])} min={1} max={30} step={0.5} /> {takeProfitPercentage}%

Position Sizing

Max Risk Amount: ${maxRiskAmount.toFixed(2)}

Position Size: ${positionSize.toFixed(2)}

Units to Trade: {positionSizeInUnits.toFixed(asset === "XRP/USD" ? 2 : 4)} {asset.split("/")[0]}

Risk/Reward Analysis

Stop Loss Price: ${stopLossPrice.toFixed(asset === "XRP/USD" ? 4 : 2)}

Take Profit Price: ${takeProfitPrice.toFixed(asset === "XRP/USD" ? 4 : 2)}

Potential Profit: ${potentialProfit.toFixed(2)}

Potential Loss: ${potentialLossAmount.toFixed(2)}

Risk/Reward Ratio: 1:{riskRewardRatio.toFixed(2)}

* This calculator is for educational purposes only. Always consult with a financial advisor before making investment decisions.

) } [V0_FILE]typescriptreact:file="components/alert-system.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Switch } from "@/components/ui/switch" import { Bell, Plus, Trash2, BellOff, Mail, MessageSquare } from "lucide-react" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" type AlertType = "price" | "volume" | "indicator" | "news" type AlertCondition = "above" | "below" | "crosses-above" | "crosses-below" | "percent-change" type AlertMethod = "app" | "email" | "sms" interface Alert { id: string asset: string type: AlertType condition: AlertCondition value: number methods: AlertMethod[] active: boolean } export function AlertSystem({ asset }: { asset: string }) { const [alerts, setAlerts] = useState([ { id: "1", asset: "BTC/USD", type: "price", condition: "above", value: 45000, methods: ["app", "email"], active: true, }, { id: "2", asset: "BTC/USD", type: "price", condition: "below", value: 40000, methods: ["app"], active: true, }, { id: "3", asset: "ETH/USD", type: "indicator", condition: "crosses-above", value: 70, methods: ["app", "email"], active: false, }, ]) const [newAlert, setNewAlert] = useState>({ asset: asset, type: "price", condition: "above", value: 0, methods: ["app"], }) const addAlert = () => { if (!newAlert.value) return const alert: Alert = { id: Date.now().toString(), asset: newAlert.asset || asset, type: newAlert.type as AlertType, condition: newAlert.condition as AlertCondition, value: newAlert.value as number, methods: newAlert.methods as AlertMethod[], active: true, } setAlerts([...alerts, alert]) setNewAlert({ asset: asset, type: "price", condition: "above", value: 0, methods: ["app"], }) } const toggleAlert = (id: string) => { setAlerts(alerts.map((alert) => (alert.id === id ? { ...alert, active: !alert.active } : alert))) } const deleteAlert = (id: string) => { setAlerts(alerts.filter((alert) => alert.id !== id)) } const toggleAlertMethod = (method: AlertMethod) => { setNewAlert((prev) => { const methods = prev.methods || [] if (methods.includes(method)) { return { ...prev, methods: methods.filter((m) => m !== method) } } else { return { ...prev, methods: [...methods, method] } } }) } const getConditionLabel = (condition: AlertCondition) => { switch (condition) { case "above": return "rises above" case "below": return "falls below" case "crosses-above": return "crosses above" case "crosses-below": return "crosses below" case "percent-change": return "changes by" default: return condition } } const getTypeLabel = (type: AlertType, value: number) => { switch (type) { case "price": return `$${value.toLocaleString()}` case "volume": return `$${value.toLocaleString()} volume` case "indicator": return `RSI ${value}` case "news": return "important news" default: return type } } const filteredAlerts = alerts.filter((alert) => alert.asset === asset) return ( Alert System Set up custom alerts for {asset} Create Alert Manage Alerts

Alert Type

Condition

Value setNewAlert({ ...newAlert, value: Number(e.target.value) })} placeholder={newAlert.type === "price" ? "Enter price..." : "Enter value..."} />

Notification Methods

toggleAlertMethod("app")} /> App Notifications

toggleAlertMethod("email")} /> Email Notifications

toggleAlertMethod("sms")} /> SMS Notifications

{filteredAlerts.length > 0 ? ( Alert Notifications Status Actions {filteredAlerts.map((alert) => (

{alert.asset} {getConditionLabel(alert.condition)} {getTypeLabel(alert.type, alert.value)}

{alert.methods.includes("app") && ( App )} {alert.methods.includes("email") && ( Email )} {alert.methods.includes("sms") && ( SMS )}

toggleAlert(alert.id)} /> {alert.active ? "Active" : "Inactive"}

))}

) : (

No alerts set

Create alerts to get notified about market changes

)} ) } [V0_FILE]typescriptreact:file="components/real-time-data.tsx" "use client" import { useEffect, useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Activity, Clock, RefreshCw } from "lucide-react" // Simulated real-time data interface TradeData { id: string price: number amount: number side: "buy" | "sell" timestamp: Date } export function RealTimeData({ asset }: { asset: string }) { const [trades, setTrades] = useState([]) const [lastUpdated, setLastUpdated] = useState(new Date()) const [isLive, setIsLive] = useState(true) // Simulate real-time data updates useEffect(() => { if (!isLive) return const generateTrade = () => { // Base price for the asset const basePrice = asset === "BTC/USD" ? 42500 : asset === "ETH/USD" ? 2350 : 0.55 // Random price variation const priceVariation = (Math.random() - 0.5) * basePrice * 0.002 const price = basePrice + priceVariation // Random amount const amount = asset === "BTC/USD" ? Math.random() * 0.5 : asset === "ETH/USD" ? Math.random() * 5 : Math.random() * 1000 // Random side const side = Math.random() > 0.5 ? "buy" : "sell" return { id: Date.now().toString(), price, amount, side, timestamp: new Date(), } } const interval = setInterval(() => { const newTrade = generateTrade() setTrades((prev) => [newTrade, ...prev.slice(0, 9)]) setLastUpdated(new Date()) }, 2000) return () => clearInterval(interval) }, [asset, isLive]) const toggleLive = () => { setIsLive(!isLive) } const formatTime = (date: Date) => { return date.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit", second: "2-digit" }) } return (

Real-Time Market Data Live trades for {asset}

{isLive ? ( Live ) : ( "Paused" )}

Last updated: {formatTime(lastUpdated)} { if (!isLive) { const newTrade = { id: Date.now().toString(), price: asset === "BTC/USD" ? 42500 + (Math.random() - 0.5) * 100 : asset === "ETH/USD" ? 2350 + (Math.random() - 0.5) * 10 : 0.55 + (Math.random() - 0.5) * 0.01, amount: Math.random() * 5, side: Math.random() > 0.5 ? "buy" : "sell", timestamp: new Date(), } setTrades((prev) => [newTrade, ...prev.slice(0, 9)]) setLastUpdated(new Date()) } }} />

{trades.length > 0 ? ( trades.map((trade) => (

{trade.side.toUpperCase()} ${trade.price.toFixed(asset === "XRP/USD" ? 4 : 2)}

{trade.amount.toFixed(asset === "BTC/USD" ? 4 : 2)} {asset.split("/")[0]} {formatTime(trade.timestamp)}

)) ) : (

No trades available. Waiting for data...

)}

) } [V0_FILE]typescriptreact:file="components/app-header.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { ThemeToggle } from "@/components/theme-toggle" import { PlayCircle, Lock, Bell, User, Menu, LogOut, Settings, HelpCircle } from "lucide-react" import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Badge } from "@/components/ui/badge" import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet" export function AppHeader({ isDemoMode, setIsDemoMode, }: { isDemoMode: boolean setIsDemoMode: (value: boolean) => void }) { const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false) return (

TradeWise {isDemoMode && ( Demo Mode )}

My Account Profile Settings Security Help & Support Log out

TradeWise

) } [V0_FILE]typescriptreact:file="components/theme-toggle.tsx" "use client" import { useTheme } from "next-themes" import { Button } from "@/components/ui/button" import { Moon, Sun } from "lucide-react" import { useEffect, useState } from "react" export function ThemeToggle() { const { theme, setTheme } = useTheme() const [mounted, setMounted] = useState(false) // Avoid hydration mismatch useEffect(() => { setMounted(true) }, []) if (!mounted) { return ( ) } return ( ) } [V0_FILE]typescriptreact:file="components/social-trading.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar" import { Badge } from "@/components/ui/badge" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Input } from "@/components/ui/input" import { Users, TrendingUp, Award, Search, MessageSquare, ThumbsUp, Share2, UserPlus, Filter } from "lucide-react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" interface Trader { id: string name: string username: string avatar: string performance: { monthly: number yearly: number } followers: number trades: number winRate: number verified: boolean following?: boolean } interface TradePost { id: string trader: { name: string username: string avatar: string verified: boolean } content: string asset: string action: "BUY" | "SELL" price: number target: number stopLoss: number timestamp: string likes: number comments: number liked?: boolean } export function SocialTrading({ asset }: { asset: string }) { const [searchQuery, setSearchQuery] = useState("") const [selectedTab, setSelectedTab] = useState("top-traders") // Mock data for top traders const topTraders: Trader[] = [ { id: "1", name: "Alex Thompson", username: "alextrader", avatar: "/placeholder.svg?height=40&width=40", performance: { monthly: 12.4, yearly: 87.3, }, followers: 15243, trades: 342, winRate: 68, verified: true, following: true, }, { id: "2", name: "Sarah Chen", username: "sarahtrading", avatar: "/placeholder.svg?height=40&width=40", performance: { monthly: 8.7, yearly: 62.1, }, followers: 8932, trades: 187, winRate: 71, verified: true, }, { id: "3", name: "Michael Rodriguez", username: "cryptomike", avatar: "/placeholder.svg?height=40&width=40", performance: { monthly: 15.2, yearly: 104.5, }, followers: 27651, trades: 523, winRate: 64, verified: true, following: true, }, { id: "4", name: "Emma Wilson", username: "emmatrader", avatar: "/placeholder.svg?height=40&width=40", performance: { monthly: 6.8, yearly: 43.2, }, followers: 5421, trades: 156, winRate: 59, verified: false, }, { id: "5", name: "David Kim", username: "davidtrades", avatar: "/placeholder.svg?height=40&width=40", performance: { monthly: 10.1, yearly: 76.8, }, followers: 12378, trades: 289, winRate: 66, verified: true, }, ] // Mock data for trade posts const tradePosts: TradePost[] = [ { id: "1", trader: { name: "Alex Thompson", username: "alextrader", avatar: "/placeholder.svg?height=40&width=40", verified: true, }, content: "Bitcoin looking bullish after breaking the key resistance level. I'm entering a long position with the following parameters:", asset: "BTC/USD", action: "BUY", price: 43250, target: 47500, stopLoss: 41800, timestamp: "2 hours ago", likes: 342, comments: 57, liked: true, }, { id: "2", trader: { name: "Sarah Chen", username: "sarahtrading", avatar: "/placeholder.svg?height=40&width=40", verified: true, }, content: "Ethereum showing weakness at current levels. The head and shoulders pattern suggests a potential drop. I'm shorting with tight stop loss:", asset: "ETH/USD", action: "SELL", price: 2340, target: 2150, stopLoss: 2420, timestamp: "5 hours ago", likes: 187, comments: 32, }, { id: "3", trader: { name: "Michael Rodriguez", username: "cryptomike", avatar: "/placeholder.svg?height=40&width=40", verified: true, }, content: "XRP forming a strong support zone. The recent regulatory clarity is positive for the asset. Looking for a bounce with these levels:", asset: "XRP/USD", action: "BUY", price: 0.54, target: 0.65, stopLoss: 0.5, timestamp: "1 day ago", likes: 523, comments: 98, liked: true, }, ] // Filter traders based on search query const filteredTraders = topTraders.filter( (trader) => trader.name.toLowerCase().includes(searchQuery.toLowerCase()) || trader.username.toLowerCase().includes(searchQuery.toLowerCase()), ) // Filter posts for the selected asset const assetPosts = asset ? tradePosts.filter((post) => post.asset === asset) : tradePosts const toggleFollow = (traderId: string) => { // In a real app, this would call an API to follow/unfollow console.log(`Toggle follow for trader ${traderId}`) } const toggleLike = (postId: string) => { // In a real app, this would call an API to like/unlike console.log(`Toggle like for post ${postId}`) } return (

Social Trading Learn from successful traders and share your own insights Top Traders Trade Ideas

setSearchQuery(e.target.value)} />

Trader Monthly Yearly Win Rate Followers {filteredTraders.map((trader) => (

{trader.name.charAt(0)}

{trader.name} {trader.verified && ( )}

@{trader.username}

0 ? "text-green-500" : "text-red-500"}> {trader.performance.monthly > 0 ? "+" : ""} {trader.performance.monthly}% 0 ? "text-green-500" : "text-red-500"}> {trader.performance.yearly > 0 ? "+" : ""} {trader.performance.yearly}% {trader.winRate}% {trader.followers.toLocaleString()} ))}

{assetPosts.length > 0 ? (

{assetPosts.map((post) => (

{post.trader.name.charAt(0)}

{post.trader.name} {post.trader.verified && ( )}

@{post.trader.username} • {post.timestamp}

{post.action}

{post.content}

Asset

{post.asset}

Entry Price

${post.price.toLocaleString()}

Target

${post.target.toLocaleString()}

Stop Loss

${post.stopLoss.toLocaleString()}

))}

) : (

No trade ideas for {asset} yet

Follow more traders or check other assets

)}

) } [V0_FILE]typescriptreact:file="components/education.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Progress } from "@/components/ui/progress" import { Badge } from "@/components/ui/badge" import { BookOpen, Video, FileText, GraduationCap, Clock, Star, Play, Lock, Search } from "lucide-react" import { Input } from "@/components/ui/input" interface Course { id: string title: string description: string level: "Beginner" | "Intermediate" | "Advanced" duration: string lessons: number completed?: number image: string rating: number instructor: string locked?: boolean } interface Article { id: string title: string description: string category: string readTime: string date: string image: string author: string } export function Education({ asset }: { asset: string }) { const [searchQuery, setSearchQuery] = useState("") // Mock data for courses const courses: Course[] = [ { id: "1", title: "Trading Fundamentals", description: "Learn the basics of trading, market analysis, and risk management", level: "Beginner", duration: "4 hours", lessons: 12, completed: 8, image: "/placeholder.svg?height=120&width=200", rating: 4.8, instructor: "Alex Thompson", }, { id: "2", title: "Technical Analysis Mastery", description: "Master chart patterns, indicators, and technical trading strategies", level: "Intermediate", duration: "6 hours", lessons: 18, completed: 3, image: "/placeholder.svg?height=120&width=200", rating: 4.9, instructor: "Sarah Chen", }, { id: "3", title: `Advanced ${asset.split("/")[0]} Trading`, description: `Deep dive into advanced trading strategies for ${asset.split("/")[0]}`, level: "Advanced", duration: "8 hours", lessons: 24, image: "/placeholder.svg?height=120&width=200", rating: 4.7, instructor: "Michael Rodriguez", locked: true, }, ] // Mock data for articles const articles: Article[] = [ { id: "1", title: `Understanding ${asset.split("/")[0]} Market Cycles`, description: "Learn how to identify market cycles and make better trading decisions", category: "Market Analysis", readTime: "8 min read", date: "2 days ago", image: "/placeholder.svg?height=120&width=200", author: "Emma Wilson", }, { id: "2", title: "5 Risk Management Strategies Every Trader Should Know", description: "Protect your capital with these essential risk management techniques", category: "Risk Management", readTime: "6 min read", date: "1 week ago", image: "/placeholder.svg?height=120&width=200", author: "David Kim", }, { id: "3", title: "The Psychology of Trading: Overcoming Emotional Biases", description: "Master your emotions and improve your trading performance", category: "Trading Psychology", readTime: "10 min read", date: "2 weeks ago", image: "/placeholder.svg?height=120&width=200", author: "Sarah Chen", }, ] // Filter courses and articles based on search query const filteredCourses = courses.filter( (course) => course.title.toLowerCase().includes(searchQuery.toLowerCase()) || course.description.toLowerCase().includes(searchQuery.toLowerCase()), ) const filteredArticles = articles.filter( (article) => article.title.toLowerCase().includes(searchQuery.toLowerCase()) || article.description.toLowerCase().includes(searchQuery.toLowerCase()), ) return (

Education Center Learn trading strategies and improve your skills

setSearchQuery(e.target.value)} />

Courses Articles

{filteredCourses.map((course) => (

{course.level}

{course.title} {course.description}

{course.duration}

{course.lessons} lessons

{course.rating}

{course.completed !== undefined && (

Progress {Math.round((course.completed / course.lessons) * 100)}%

)} {course.locked ? ( ) : course.completed ? ( ) : ( )} ))}

{filteredCourses.length === 0 && (

No courses found

Try a different search term

)}

{filteredArticles.map((article) => (

{article.category}

{article.title} {article.description}

{article.readTime}

{article.date}

))}

{filteredArticles.length === 0 && (

No articles found

Try a different search term

)}

) } [V0_FILE]typescriptreact:file="components/demo-mode.tsx" isQuickEdit="true" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { PlayCircle, DollarSign, TrendingUp, TrendingDown, BarChart, AlertTriangle } from "lucide-react" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" import { Badge } from "@/components/ui/badge" interface DemoTrade { id: string asset: string type: "BUY" | "SELL" openPrice: number currentPrice: number amount: number openDate: string pnl: number pnlPercentage: number status: "open" | "closed" } export function DemoMode({ asset }: { asset: string }) { const [balance, setBalance] = useState(10000) const [amount, setAmount] = useState("") const [trades, setTrades] = useState([ { id: "1", asset: "BTC/USD", type: "BUY", openPrice: 41250, currentPrice: 42568, amount: 0.05, openDate: "2 days ago", pnl: 65.9, pnlPercentage: 3.19, status: "open", }, { id: "2", asset: "ETH/USD", type: "SELL", openPrice: 2450, currentPrice: 2345, amount: 1.2, openDate: "1 day ago", pnl: 126, pnlPercentage: 4.29, status: "open", }, ]) const currentPrice = asset === "BTC/USD" ? 42568.23 : asset === "ETH/USD" ? 2345.67 : 0.5423 const executeTrade = (type: "BUY" | "SELL") => { if (!amount || isNaN(Number(amount)) || Number(amount) <= 0) return const tradeAmount = Number(amount) const tradeValue = tradeAmount * currentPrice if (tradeValue > balance) { alert("Insufficient balance for this trade") return } const newTrade: DemoTrade = { id: Date.now().toString(), asset, type, openPrice: currentPrice, currentPrice, amount: tradeAmount, openDate: "Just now", pnl: 0, pnlPercentage: 0, status: "open", } setTrades([newTrade, ...trades]) setBalance(balance - tradeValue) setAmount("") } const closeTrade = (tradeId: string) => { const tradeToClose = trades.find((trade) => trade.id === tradeId) if (!tradeToClose) return const tradeValue = tradeToClose.currentPrice * tradeToClose.amount const updatedBalance = balance + tradeValue setTrades(trades.map((trade) => (trade.id === tradeId ? { ...trade, status: "closed" } : trade))) setBalance(updatedBalance) } // Calculate total P&L const totalPnL = trades.filter((trade) => trade.status === "open").reduce((sum, trade) => sum + trade.pnl, 0) return ( Demo Trading Mode Practice trading without risking real money

Demo Balance

${balance.toLocaleString()}

Open Positions

{trades.filter((t) => t.status === "open").length}

Total P&L

{totalPnL >= 0 ? ( ) : ( )} = 0 ? "text-green-500" : "text-red-500"}`}> ${Math.abs(totalPnL).toFixed(2)}

Place Demo Trade Current price: ${currentPrice.toLocaleString()}

Amount ({asset.split("/")[0]}) setAmount(e.target.value)} />

{amount && !isNaN(Number(amount)) && Number(amount) > 0 && (

Total value: $ {(Number(amount) * currentPrice).toLocaleString()}

)} Demo Positions Your practice trades {trades.filter((t) => t.status === "open").length > 0 ? ( Asset Type Amount Open Price Current P&L {trades .filter((trade) => trade.status === "open") .map((trade) => ( {trade.asset} {trade.type} {trade.amount.toFixed(trade.asset === "BTC/USD" ? 4 : 2)} ${trade.openPrice.toLocaleString()} ${trade.currentPrice.toLocaleString()} = 0 ? "text-green-500" : "text-red-500"}> {trade.pnl >= 0 ? "+" : "-"}${Math.abs(trade.pnl).toFixed(2)} ( {Math.abs(trade.pnlPercentage).toFixed(2)}%) ))}

) : (

No open positions

Place a trade to get started

)}

Demo mode uses simulated data and does not involve real money or assets. Use this mode to practice trading strategies without financial risk.

) } [V0_FILE]typescriptreact:file="components/backtesting.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle, CardFooter } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { Slider } from "@/components/ui/slider" import { Switch } from "@/components/ui/switch" import { History, Play, BarChart, Settings, RefreshCw, Download } from "lucide-react" import { Line, LineChart, CartesianGrid, XAxis, YAxis, Bar, BarChart as RechartsBarChart, ResponsiveContainer, } from "recharts" import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart" import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table" interface BacktestResult { id: string strategy: string asset: string timeframe: string startDate: string endDate: string initialCapital: number finalCapital: number totalReturn: number annualizedReturn: number maxDrawdown: number winRate: number profitFactor: number sharpeRatio: number trades: number data: { date: string equity: number benchmark: number }[] monthlyReturns: { month: string return: number }[] } export function Backtesting({ asset }: { asset: string }) { const [selectedStrategy, setSelectedStrategy] = useState("moving-average-crossover") const [timeframe, setTimeframe] = useState("1d") const [startDate, setStartDate] = useState("2023-01-01") const [endDate, setEndDate] = useState("2023-12-31") const [initialCapital, setInitialCapital] = useState("10000") const [isRunning, setIsRunning] = useState(false) const [showAdvanced, setShowAdvanced] = useState(false) const [selectedResult, setSelectedResult] = useState(null) // Mock backtest results const backtestResults: BacktestResult[] = [ { id: "1", strategy: "Moving Average Crossover", asset: "BTC/USD", timeframe: "1d", startDate: "Jan 1, 2023", endDate: "Dec 31, 2023", initialCapital: 10000, finalCapital: 14250, totalReturn: 42.5, annualizedReturn: 42.5, maxDrawdown: 15.3, winRate: 58, profitFactor: 1.8, sharpeRatio: 1.2, trades: 24, data: Array.from({ length: 12 }, (_, i) => { const date = new Date(2023, i, 15) const equity = 10000 * (1 + (Math.random() * 0.1 + 0.02) * (i + 1)) const benchmark = 10000 * (1 + Math.random() * 0.08 * (i + 1)) return { date: date.toISOString().split("T")[0], equity, benchmark, } }), monthlyReturns: Array.from({ length: 12 }, (_, i) => { const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] return { month: monthNames[i], return: Math.random() * 10 - 3, } }), }, { id: "2", strategy: "RSI Oscillator", asset: "ETH/USD", timeframe: "4h", startDate: "Jan 1, 2023", endDate: "Dec 31, 2023", initialCapital: 10000, finalCapital: 13100, totalReturn: 31.0, annualizedReturn: 31.0, maxDrawdown: 18.7, winRate: 52, profitFactor: 1.5, sharpeRatio: 0.9, trades: 42, data: Array.from({ length: 12 }, (_, i) => { const date = new Date(2023, i, 15) const equity = 10000 * (1 + (Math.random() * 0.08 + 0.01) * (i + 1)) const benchmark = 10000 * (1 + Math.random() * 0.08 * (i + 1)) return { date: date.toISOString().split("T")[0], equity, benchmark, } }), monthlyReturns: Array.from({ length: 12 }, (_, i) => { const monthNames = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"] return { month: monthNames[i], return: Math.random() * 8 - 2, } }), }, ] const runBacktest = () => { setIsRunning(true) // Simulate backtest running setTimeout(() => { setIsRunning(false) setSelectedResult("1") }, 2000) } const currentResult = selectedResult ? backtestResults.find((result) => result.id === selectedResult) : null // Calculate min and max values for equity chart const getEquityChartDomain = () => { if (!currentResult) return [0, 0] const allValues = currentResult.data.flatMap((d) => [d.equity, d.benchmark]) const min = Math.min(...allValues) * 0.95 const max = Math.max(...allValues) * 1.05 return [min, max] } const [minEquity, maxEquity] = getEquityChartDomain() return (

Strategy Backtesting Test trading strategies against historical data Setup Results History

Trading Strategy

Asset

Timeframe

Start Date setStartDate(e.target.value)} />

End Date setEndDate(e.target.value)} />

Initial Capital ($) setInitialCapital(e.target.value)} />

Show Advanced Parameters

{showAdvanced && ( Advanced Strategy Parameters Customize your strategy settings {selectedStrategy === "moving-average-crossover" && (

Fast MA Period

Slow MA Period

)} {selectedStrategy === "rsi-oscillator" && (

RSI Period

Oversold Level

Overbought Level

)}

Position Size (%)

100%

Stop Loss (%)

Take Profit (%)

10%

)} {currentResult ? (

Total Return

= 0 ? "text-green-500" : "text-red-500"}`} > {currentResult.totalReturn >= 0 ? "+" : ""} {currentResult.totalReturn.toFixed(2)}%

Win Rate

{currentResult.winRate}%

Max Drawdown

-{currentResult.maxDrawdown}%

Profit Factor

{currentResult.profitFactor}

Equity Curve Strategy performance vs. Buy & Hold

{ const date = new Date(value) return date.toLocaleDateString("en-US", { month: "short", }) }} /> `$${value.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: 0, })}` } /> } />

Monthly Returns (%)

`${value}%`} domain={["auto", "auto"]} padding={{ top: 10, bottom: 10 }} /> } />

Performance Metrics

Initial Capital

$ {currentResult.initialCapital.toLocaleString()}

Final Capital

$ {currentResult.finalCapital.toLocaleString()}

Total Return

= 0 ? "text-green-500" : "text-red-500"}`} > {currentResult.totalReturn >= 0 ? "+" : ""} {currentResult.totalReturn.toFixed(2)}%

Annualized Return

= 0 ? "text-green-500" : "text-red-500"}`} > {currentResult.annualizedReturn >= 0 ? "+" : ""} {currentResult.annualizedReturn.toFixed(2)}%

Sharpe Ratio

{currentResult.sharpeRatio.toFixed(2)}

Total Trades

{currentResult.trades}

Win Rate

{currentResult.winRate}%

Max Drawdown

-{currentResult.maxDrawdown}%

) : (

{isRunning ? (

Running Backtest...

This may take a few moments

) : (

No Backtest Results

Configure your strategy and run a backtest

)}

Strategy Asset Timeframe Period Return {backtestResults.map((result) => ( {result.strategy} {result.asset} {result.timeframe} {result.startDate} - {result.endDate} = 0 ? "text-green-500" : "text-red-500"}> {result.totalReturn >= 0 ? "+" : ""} {result.totalReturn.toFixed(2)}% ))}

{!isRunning && ( )}

) } [V0_FILE]typescriptreact:file="components/security-center.tsx" isFixed="true" isQuickEdit="true" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Lock, Shield, CheckCircle, Info, Eye, FileText } from "lucide-react" import { Progress } from "@/components/ui/progress" export function SecurityCenter() { return ( Security & Compliance Your data protection and regulatory compliance information

Security Status

Protected

Your account has strong security measures in place.

Compliance Status

Compliant

TradeWise complies with all financial regulations and data protection standards.

End-to-End Encryption

All your data is encrypted in transit and at rest.

Two-Factor Authentication

Additional security layer for your account.

GDPR Compliant

Your data is handled according to GDPR regulations.

TradeWise is committed to maintaining the highest standards of security and regulatory compliance. We regularly update our systems to protect your data and ensure compliance with financial regulations.

) } [V0_FILE]typescriptreact:file="components/theme-provider.tsx" "use client" import { ThemeProvider as NextThemesProvider } from "next-themes" import type { ThemeProviderProps } from "next-themes" export function ThemeProvider({ children, ...props }: ThemeProviderProps) { return {children} } [V0_FILE]typescriptreact:file="components/onboarding.tsx" "use client" import { useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Checkbox } from "@/components/ui/checkbox" import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Progress } from "@/components/ui/progress" import { ArrowRight, CheckCircle2, CircleDashed, Lightbulb, Settings, UserCircle2 } from "lucide-react" export function Onboarding({ onComplete }: { onComplete: () => void }) { const [step, setStep] = useState(1) const [progress, setProgress] = useState(25) const [preferences, setPreferences] = useState({ name: "", experience: "beginner", assets: { bitcoin: true, ethereum: false, ripple: false, stocks: false, forex: false, commodities: false, }, riskTolerance: "medium", notifications: true, theme: "system", }) const handleNext = () => { const nextStep = step + 1 setStep(nextStep) setProgress(nextStep * 25) if (nextStep > 4) { onComplete() } } const updatePreference = (key: string, value: any) => { setPreferences((prev) => ({ ...prev, [key]: value, })) } const updateAssetPreference = (asset: string, checked: boolean) => { setPreferences((prev) => ({ ...prev, assets: { ...prev.assets, [asset]: checked, }, })) } return (

Welcome to TradeWise Let's personalize your experience in a few simple steps {step === 1 && (

Tell us about yourself

Your Name updatePreference("name", e.target.value)} />

Trading Experience updatePreference("experience", value)} > Beginner Intermediate Advanced

)} {step === 2 && (

Select assets you're interested in

updateAssetPreference("bitcoin", checked as boolean)} /> Bitcoin (BTC)

updateAssetPreference("ethereum", checked as boolean)} /> Ethereum (ETH)

updateAssetPreference("ripple", checked as boolean)} /> Ripple (XRP)

updateAssetPreference("stocks", checked as boolean)} /> Stocks

updateAssetPreference("forex", checked as boolean)} /> Forex

updateAssetPreference("commodities", checked as boolean)} /> Commodities

)} {step === 3 && (

Risk profile & preferences

Risk Tolerance updatePreference("riskTolerance", value)} > Conservative Moderate Aggressive

updatePreference("notifications", checked)} /> Enable price alerts and notifications

Theme Preference updatePreference("theme", value)} > Light Dark System

)} {step === 4 && (

You're all set!

Your dashboard is personalized

We've customized your dashboard based on your preferences. You can always change these settings later.

Educational resources ready

Based on your experience level, we've prepared relevant educational content to help you improve your trading skills.

Risk management tools configured

Your risk management tools have been configured according to your risk tolerance profile.

)} {step > 1 && ( )} {step === 1 &&

}

) } [V0_FILE]typescriptreact:file="components/ui/toast.tsx" import * as React from "react" import * as ToastPrimitives from "@radix-ui/react-toast" import { cva, type VariantProps } from "class-variance-authority" import { X } from "lucide-react" import { cn } from "@/lib/utils" const ToastProvider = ToastPrimitives.Provider const ToastViewport = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastViewport.displayName = ToastPrimitives.Viewport.displayName const toastVariants = cva( "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 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, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, ...props }, ref) => { return }) Toast.displayName = ToastPrimitives.Root.displayName const ToastAction = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastAction.displayName = ToastPrimitives.Action.displayName const ToastClose = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastClose.displayName = ToastPrimitives.Close.displayName const ToastTitle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastTitle.displayName = ToastPrimitives.Title.displayName const ToastDescription = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef >(({ className, ...props }, ref) => ( )) ToastDescription.displayName = ToastPrimitives.Description.displayName type ToastProps = React.ComponentPropsWithoutRef type ToastActionElement = React.ReactElement export { type ToastProps, type ToastActionElement, ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, } [V0_FILE]typescriptreact:file="components/performance-monitor.tsx" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Activity, Cpu, Database, Gauge, RefreshCw, Wifi } from "lucide-react" export function PerformanceMonitor() { const [isOpen, setIsOpen] = useState(false) const [metrics, setMetrics] = useState({ cpu: 12, memory: 28, network: 95, dataFreshness: 100, responseTime: 85, dataQuality: 98, }) // Simulate metrics changing over time useEffect(() => { const interval = setInterval(() => { setMetrics({ cpu: Math.floor(Math.random() * 30) + 5, memory: Math.floor(Math.random() * 40) + 20, network: Math.floor(Math.random() * 20) + 80, dataFreshness: Math.floor(Math.random() * 10) + 90, responseTime: Math.floor(Math.random() * 20) + 80, dataQuality: Math.floor(Math.random() * 5) + 95, }) }, 5000) return () => clearInterval(interval) }, []) if (!isOpen) { return (

setIsOpen(true)} >

) } return (

System Performance

setIsOpen(false)} > ×

Real-time system metrics System Data Quality

CPU Usage

{metrics.cpu}%

Memory Usage

{metrics.memory}%

Network Status

90 ? "outline" : "secondary"} className="text-xs h-5"> {metrics.network}%

Data Freshness

{metrics.dataFreshness}%

Response Time

{metrics.responseTime}%

Data Quality

{metrics.dataQuality}%

Last updated: {new Date().toLocaleTimeString()}

) } [V0_FILE]typescriptreact:file="components/ui/use-toast.tsx" isFixed="true" isQuickEdit="true" "use client" // This file should export a hook, not components import * as React from "react" import type { ToastActionElement, ToastProps } from "@/components/ui/toast" const TOAST_LIMIT = 5 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_VALUE return count.toString() } type ActionType = typeof actionTypes type Action = | { type: ActionType["ADD_TOAST"] toast: ToasterToast } | { type: ActionType["UPDATE_TOAST"] toast: Partial } | { type: ActionType["DISMISS_TOAST"] toastId?: string } | { type: ActionType["REMOVE_TOAST"] toastId?: string } interface State { toasts: ToasterToast[] } const toastTimeouts = new Map>() 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) { if (toastTimeouts.has(toastId)) { clearTimeout(toastTimeouts.get(toastId)) toastTimeouts.delete(toastId) } } else { for (const [id, timeout] of toastTimeouts.entries()) { clearTimeout(timeout) toastTimeouts.delete(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 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(memoryState) React.useEffect(() => { listeners.push(setState) return () => { const index = listeners.indexOf(setState) if (index > -1) { listeners.splice(index, 1) } } }, []) // Removed unnecessary dependency: [state] return { ...state, toast, dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }), } } export { useToast, toast } [V0_FILE]typescriptreact:file="components/dashboard.tsx" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { MarketOverview } from "@/components/market-overview" import { PriceChart } from "@/components/price-chart" import { TradingRecommendations } from "@/components/trading-recommendations" import { MarketNews } from "@/components/market-news" import { AssetSelector } from "@/components/asset-selector" import { MLPredictions } from "@/components/ml-predictions" import { RiskManagement } from "@/components/risk-management" import { AlertSystem } from "@/components/alert-system" import { RealTimeData } from "@/components/real-time-data" import { SocialTrading } from "@/components/social-trading" import { Education } from "@/components/education" import { DemoMode } from "@/components/demo-mode" import { Backtesting } from "@/components/backtesting" import { SecurityCenter } from "@/components/security-center" import { Onboarding } from "@/components/onboarding" import { Brain, LineChart, Shield, Bell, Activity, Users, BookOpen, History } from "lucide-react" import { AppHeader } from "@/components/app-header" import { Skeleton } from "@/components/ui/skeleton" import { toast } from "@/components/ui/use-toast" import { Toaster } from "@/components/ui/toaster" export default function Dashboard() { const [selectedAsset, setSelectedAsset] = useState("BTC/USD") const [isDemoMode, setIsDemoMode] = useState(false) const [isLoading, setIsLoading] = useState(true) const [showOnboarding, setShowOnboarding] = useState(false) // Simulate loading state useEffect(() => { // Check if user has completed onboarding const hasCompletedOnboarding = localStorage.getItem("onboardingComplete") if (!hasCompletedOnboarding) { setShowOnboarding(true) } // Simulate data loading const timer = setTimeout(() => { setIsLoading(false) // Show welcome toast if not showing onboarding if (hasCompletedOnboarding) { toast({ title: "Welcome back!", description: "Market data has been updated with the latest information.", }) } }, 1500) return () => clearTimeout(timer) }, []) const handleOnboardingComplete = () => { localStorage.setItem("onboardingComplete", "true") setShowOnboarding(false) toast({ title: "Welcome to TradeWise!", description: "Your personalized trading dashboard is ready.", }) } return (

{isDemoMode ? "Demo Trading Dashboard" : "Trading Dashboard"}

AI-powered market analysis and trading insights

{isLoading ? ( ) : ( <>

Price Chart Historical price data for {selectedAsset}

Analysis Risk Management Social Trading Education Backtesting Technical Fundamental AI Insights News Technical Indicators Key technical indicators for {selectedAsset}

Fundamental Analysis Economic factors affecting {selectedAsset}

Market Cap: $452.3B

24h Volume: $28.7B

Circulating Supply: 19.4M

All-Time High: $69,000

AI Market Analysis Machine learning insights for {selectedAsset}

Market Sentiment Analysis:

Our AI algorithms have analyzed over 10,000 social media posts, news articles, and market indicators in the last 24 hours. The current sentiment for {selectedAsset} is{" "} Moderately Bullish.

Pattern Recognition:

AI has identified a potential Cup and Handle pattern forming on the 4-hour chart, which typically indicates a bullish continuation pattern.

Correlation Analysis:

{selectedAsset.split("/")[0]} is currently showing a{" "} 0.72 correlation with the S&P 500, indicating increased institutional adoption and mainstream market alignment.

{isDemoMode && } )}

{showOnboarding && }

) } function IndicatorCard({ title, value, status, description, }: { title: string value: string status: "positive" | "negative" | "neutral" | "warning" description: string }) { const statusColors = { positive: "text-green-500", negative: "text-red-500", neutral: "text-blue-500", warning: "text-amber-500", } return ( {title} {description}

{value}

) } function LoadingState() { return ( <>

{[...Array(4)].map((_, i) => (

))}

) } [V0_FILE]typescriptreact:file="components/ui/toaster.tsx" isQuickEdit="true" "use client" import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "@/components/ui/toast" import { useToast } from "@/components/ui/use-toast" export function Toaster() { const { toasts } = useToast() return ( {toasts.map(({ id, title, description, action, ...props }) => (

{title && {title}} {description && {description}}

{action} ))} ) } [V0_FILE]typescriptreact:file="app/layout.tsx" isQuickEdit="true" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" import { ThemeProvider } from "@/components/theme-provider" import { Toaster } from "@/components/ui/toaster" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "TradeWise - AI-Powered Trading Platform", description: "Make informed trading decisions with AI-powered market analysis", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }

$ {data.price.toLocaleString()}

{isPositive ? "+" : ""} {data.change}%

$ {data.high.toLocaleString()} / $ {data.low.toLocaleString()}

$ {data.volume}

{rec.action}

{item.title}

${" "} {lastPrediction.toLocaleString(undefined, { minimumFractionDigits: 0, maximumFractionDigits: asset === "XRP/USD" ? 4 : 0, })}

No alerts set

No trade ideas for {asset} yet

No courses found

No articles found

Upcoming Webinars

No open positions

Running Backtest...

No Backtest Results

End-to-End Encryption

Two-Factor Authentication

GDPR Compliant

Tell us about yourself

Select assets you're interested in

Risk profile & preferences

You're all set!

{isDemoMode ? "Demo Trading Dashboard" : "Trading Dashboard"}

About

About