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

) } [V0_FILE]typescriptreact:file="components/dashboard.tsx" isFixed="true" isQuickEdit="true" "use client" import { useState, useEffect } from "react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" import PriceChart from "@/components/price-chart" import TradingInterface from "@/components/trading-interface" import BotSettings from "@/components/bot-settings" import TradeHistory from "@/components/trade-history" import { ArrowUpRight, ArrowDownRight, BarChart3, Settings, History } from "lucide-react" import { mockPriceData, generateNewPrice } from "@/lib/mock-data" export default function Dashboard() { const [activeTab, setActiveTab] = useState("dashboard") const [currentPrice, setCurrentPrice] = useState(29876.54) const [priceChange, setPriceChange] = useState(2.34) const [priceDirection, setPriceDirection] = useState<"up" | "down">("up") const [priceHistory, setPriceHistory] = useState(mockPriceData) const [isRunning, setIsRunning] = useState(false) const [trades, setTrades] = useState([]) const [balance, setBalance] = useState({ usd: 10000, btc: 0.5, }) // Simulate price updates useEffect(() => { if (!isRunning) return const interval = setInterval(() => { const { newPrice, newChange, direction } = generateNewPrice(currentPrice) setCurrentPrice(newPrice) setPriceChange(newChange) setPriceDirection(direction) setPriceHistory((prev) => { const newHistory = [ ...prev, { time: new Date().toISOString(), price: newPrice, }, ] // Keep only the last 50 data points if (newHistory.length > 50) { return newHistory.slice(newHistory.length - 50) } return newHistory }) // Auto trading logic (very simple example) if (isRunning) { const shouldBuy = direction === "up" && newChange > 0.5 const shouldSell = direction === "down" && newChange > 0.5 if (shouldBuy && balance.usd > 1000) { const amount = 0.01 const cost = amount * newPrice if (cost <= balance.usd) { setBalance((prev) => ({ usd: prev.usd - cost, btc: prev.btc + amount, })) setTrades((prev) => [ ...prev, { id: Date.now(), type: "buy", amount, price: newPrice, total: cost, time: new Date().toISOString(), }, ]) } } else if (shouldSell && balance.btc > 0.01) { const amount = 0.01 const value = amount * newPrice setBalance((prev) => ({ usd: prev.usd + value, btc: prev.btc - amount, })) setTrades((prev) => [ ...prev, { id: Date.now(), type: "sell", amount, price: newPrice, total: value, time: new Date().toISOString(), }, ]) } } }, 3000) return () => clearInterval(interval) }, [currentPrice, isRunning, balance.btc, balance.usd]) const portfolioValue = balance.usd + balance.btc * currentPrice return (

Crypto Trading Bot

Current BTC Price

${currentPrice.toLocaleString()} {priceDirection === "up" ? ( ) : ( )} {priceChange.toFixed(2)}%

Portfolio Value

${portfolioValue.toLocaleString(undefined, { maximumFractionDigits: 2 })}

USD: ${balance.usd.toLocaleString(undefined, { maximumFractionDigits: 2 })} | BTC:{" "} {balance.btc.toFixed(8)}

Bot Status

{isRunning ? "Running" : "Stopped"}

Dashboard Settings History

Price Chart BTC/USD price movement

) } [V0_FILE]typescriptreact:file="components/price-chart.tsx" "use client" import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts" interface PriceChartProps { data: Array<{ time: string price: number }> } export default function PriceChart({ data }: PriceChartProps) { const formattedData = data.map((item) => ({ time: new Date(item.time).toLocaleTimeString(), price: item.price, })) return (

{ return value.split(":").slice(0, 2).join(":") }} /> `$${value.toLocaleString()}`} /> [`$${Number(value).toLocaleString()}`, "Price"]} labelFormatter={(label) => `Time: ${label}`} />

) } [V0_FILE]typescriptreact:file="components/trading-interface.tsx" "use client" import type React from "react" 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 { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs" interface TradingInterfaceProps { currentPrice: number balance: { usd: number btc: number } setBalance: React.Dispatch< React.SetStateAction<{ usd: number btc: number }> > setTrades: React.Dispatch> } export default function TradingInterface({ currentPrice, balance, setBalance, setTrades }: TradingInterfaceProps) { const [buyAmount, setBuyAmount] = useState("") const [sellAmount, setSellAmount] = useState("") const handleBuy = () => { const amount = Number.parseFloat(buyAmount) if (isNaN(amount) || amount <= 0) return const cost = amount * currentPrice if (cost > balance.usd) return setBalance((prev) => ({ usd: prev.usd - cost, btc: prev.btc + amount, })) setTrades((prev) => [ ...prev, { id: Date.now(), type: "buy", amount, price: currentPrice, total: cost, time: new Date().toISOString(), }, ]) setBuyAmount("") } const handleSell = () => { const amount = Number.parseFloat(sellAmount) if (isNaN(amount) || amount <= 0 || amount > balance.btc) return const value = amount * currentPrice setBalance((prev) => ({ usd: prev.usd + value, btc: prev.btc - amount, })) setTrades((prev) => [ ...prev, { id: Date.now(), type: "sell", amount, price: currentPrice, total: value, time: new Date().toISOString(), }, ]) setSellAmount("") } return ( Manual Trading Buy or sell BTC Buy Sell

Amount (BTC) setBuyAmount(e.target.value)} />

Price: ${currentPrice.toLocaleString()}

Total Cost: ${(Number.parseFloat(buyAmount) || 0) * currentPrice}

Available: ${balance.usd.toLocaleString()}

Amount (BTC) setSellAmount(e.target.value)} />

Price: ${currentPrice.toLocaleString()}

Total Value: ${(Number.parseFloat(sellAmount) || 0) * currentPrice}

Available: {balance.btc.toFixed(8)} BTC

) } [V0_FILE]typescriptreact:file="components/bot-settings.tsx" "use client" import type React from "react" import { useState } from "react" import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Switch } from "@/components/ui/switch" import { Label } from "@/components/ui/label" import { Input } from "@/components/ui/input" import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select" import { AlertCircle } from "lucide-react" import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert" interface BotSettingsProps { isRunning: boolean setIsRunning: React.Dispatch> } export default function BotSettings({ isRunning, setIsRunning }: BotSettingsProps) { const [strategy, setStrategy] = useState("simple") const [buyThreshold, setBuyThreshold] = useState("0.5") const [sellThreshold, setSellThreshold] = useState("0.5") const [tradeAmount, setTradeAmount] = useState("0.01") const handleToggleBot = () => { setIsRunning((prev) => !prev) } return (

Bot Configuration Configure your trading bot parameters

Trading Strategy

Buy Threshold (%) setBuyThreshold(e.target.value)} />

Sell Threshold (%) setSellThreshold(e.target.value)} />

Trade Amount (BTC) setTradeAmount(e.target.value)} />

Bot Status Current status and performance

Bot Status

{isRunning ? "Running" : "Stopped"}

Simulation Mode This bot is running in simulation mode and will not execute real trades.

Strategy: {strategy === "simple" ? "Simple Momentum" : strategy === "macd" ? "MACD Crossover" : "RSI Oversold/Overbought"}

Buy Threshold: {buyThreshold}%

Sell Threshold: {sellThreshold}%

Trade Amount: {tradeAmount} BTC

) } [V0_FILE]typescriptreact:file="components/trade-history.tsx" "use client" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { ArrowUpRight, ArrowDownRight } from "lucide-react" interface Trade { id: number type: "buy" | "sell" amount: number price: number total: number time: string } interface TradeHistoryProps { trades: Trade[] } export default function TradeHistory({ trades }: TradeHistoryProps) { return ( Trade History Your recent trading activity {trades.length === 0 ? (

No trades yet. Start trading to see your history.

) : (

{trades .slice() .reverse() .map((trade) => (

{trade.type === "buy" ? ( ) : ( )}

{trade.type === "buy" ? "Buy" : "Sell"} BTC

{new Date(trade.time).toLocaleString()}

{trade.amount.toFixed(8)} BTC

${trade.total.toLocaleString(undefined, { maximumFractionDigits: 2 })}

))}

)} ) } [V0_FILE]typescriptreact:file="lib/mock-data.ts" // Generate initial mock price data export const mockPriceData = Array.from({ length: 20 }, (_, i) => { const basePrice = 30000 const randomVariation = (Math.random() - 0.5) * 1000 return { time: new Date(Date.now() - (20 - i) * 3 * 60000).toISOString(), price: basePrice + randomVariation, } }) // Function to generate a new price based on the current price export function generateNewPrice(currentPrice: number) { // Random variation between -2% and +2% const randomPercentage = (Math.random() - 0.5) * 4 const newPrice = currentPrice * (1 + randomPercentage / 100) // Ensure price doesn't go below a minimum value const finalPrice = Math.max(newPrice, 10000) // Calculate the percentage change const percentageChange = Math.abs(((finalPrice - currentPrice) / currentPrice) * 100) // Determine direction const direction = finalPrice >= currentPrice ? "up" : "down" return { newPrice: finalPrice, newChange: percentageChange, direction: direction as "up" | "down", } } [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="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; } .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: 210 40% 98%; --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%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } [V0_FILE]typescriptreact:file="app/layout.tsx" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "Crypto Trading Bot", description: "A simulated cryptocurrency trading bot for educational purposes", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This