[V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import type React from "react" import type { Metadata } from "next" import { DM_Sans } from "next/font/google" import "./globals.css" const dmSans = DM_Sans({ subsets: ["latin"], display: "swap", variable: "--font-dm-sans", weight: ["400", "500", "600", "700"], }) export const metadata: Metadata = { title: "CryptoAnalyzer Pro", description: "Advanced cryptocurrency technical analysis and trading insights", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescriptreact:file="app/loading.tsx" isFixed="true" isMerged="true" export default function Loading() { return null } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match professional crypto dashboard design brief */ --background: #ffffff; --foreground: #374151; --card: #fef2f2; --card-foreground: #374151; --popover: #ffffff; --popover-foreground: #374151; --primary: #dc2626; --primary-foreground: #ffffff; --secondary: #f59e0b; --secondary-foreground: #ffffff; --muted: #fef2f2; --muted-foreground: #6b7280; --accent: #f59e0b; --accent-foreground: #374151; --destructive: #dc2626; --destructive-foreground: #ffffff; --border: #e5e7eb; --input: #ffffff; --ring: #f59e0b; --chart-1: #dc2626; --chart-2: #f59e0b; --chart-3: #10b981; --chart-4: #ec4899; --chart-5: #a16207; --radius: 0.5rem; --sidebar: #fef2f2; --sidebar-foreground: #374151; --sidebar-primary: #dc2626; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #f59e0b; --sidebar-accent-foreground: #374151; --sidebar-border: #e5e7eb; --sidebar-ring: #f59e0b; } .dark { /* Updated dark mode tokens for professional crypto dashboard */ --background: #0f172a; --foreground: #f8fafc; --card: #1e293b; --card-foreground: #f8fafc; --popover: #1e293b; --popover-foreground: #f8fafc; --primary: rgb(241, 6, 214); --primary-foreground: #ffffff; --secondary: #f59e0b; --secondary-foreground: #ffffff; --muted: #334155; --muted-foreground: #94a3b8; --accent: #f59e0b; --accent-foreground: #0f172a; --destructive: #ef4444; --destructive-foreground: #ffffff; --border: #334155; --input: #1e293b; --ring: #f59e0b; --chart-1: #ef4444; --chart-2: #f59e0b; --chart-3: #10b981; --chart-4: #ec4899; --chart-5: #a16207; --sidebar: #1e293b; --sidebar-foreground: #f8fafc; --sidebar-primary: #dc2626; --sidebar-primary-foreground: #ffffff; --sidebar-accent: #f59e0b; --sidebar-accent-foreground: #0f172a; --sidebar-border: #334155; --sidebar-ring: #f59e0b; } @theme inline { --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); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; /* Added professional typography */ font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* Added professional typography classes */ .font-heading { font-family: "Montserrat", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 700; } .font-body { font-family: "Open Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 400; } } [V0_FILE]typescriptreact:file="app/api/webhook/route.ts" isEdit="true" isQuickEdit="true" isMerged="true" import { type NextRequest, NextResponse } from "next/server" async function sendWebhookWithRetry(data: any, maxRetries = 3): Promise { let lastError: Error | null = null let lastResponseBody = "" const baseWebhookUrl = "https://n8n.localloop.ai/webhook/488b20c5-e5bb-419c-b387-60e4d364a0a8" for (let attempt = 1; attempt <= maxRetries; attempt++) { try { console.log(`[v0] Webhook attempt ${attempt}/${maxRetries}`) const params = new URLSearchParams() // Flatten the data object for URL parameters const flattenData = (obj: any, prefix = "") => { for (const key in obj) { if (obj.hasOwnProperty(key)) { const value = obj[key] const paramKey = prefix ? `${prefix}.${key}` : key if (typeof value === "object" && value !== null && !Array.isArray(value)) { flattenData(value, paramKey) } else if (Array.isArray(value)) { params.append(paramKey, JSON.stringify(value)) } else { params.append(paramKey, String(value)) } } } } flattenData(data) const webhookUrl = `${baseWebhookUrl}?${params.toString()}` const response = await fetch(webhookUrl, { method: "GET", headers: { Accept: "application/json", }, }) if (response.ok) { console.log(`[v0] Webhook succeeded on attempt ${attempt}`) return response } const responseText = await response.text().catch(() => "Unable to read response") lastResponseBody = responseText console.log(`[v0] Webhook attempt ${attempt} failed: ${response.status} ${response.statusText}`) console.log(`[v0] Response body:`, responseText) let parsedError try { parsedError = JSON.parse(responseText) } catch { parsedError = null } if (parsedError && parsedError.message && parsedError.hint) { lastError = new Error(`n8n: ${parsedError.message} | ${parsedError.hint}`) } else { lastError = new Error(`HTTP ${response.status}: ${response.statusText}`) } // Wait before retry (exponential backoff) if (attempt < maxRetries) { const delay = Math.pow(2, attempt - 1) * 1000 // 1s, 2s, 4s console.log(`[v0] Waiting ${delay}ms before retry...`) await new Promise((resolve) => setTimeout(resolve, delay)) } } catch (error) { console.log(`[v0] Webhook attempt ${attempt} network error:`, error) lastError = error as Error if (attempt < maxRetries) { const delay = Math.pow(2, attempt - 1) * 1000 await new Promise((resolve) => setTimeout(resolve, delay)) } } } const finalError = lastError || new Error("All webhook attempts failed") if (lastResponseBody) { finalError.message += ` | Response: ${lastResponseBody}` } throw finalError } export async function POST(request: NextRequest) { try { const data = await request.json() console.log("[v0] API route received data:", data) const webhookResponse = await sendWebhookWithRetry(data) const responseData = await webhookResponse.text() console.log("[v0] Webhook response:", responseData) return NextResponse.json({ success: true, data: responseData }) } catch (error) { console.error("[v0] API route error:", error) const errorMessage = error instanceof Error ? error.message : "Unknown error" let diagnosticMessage = "Webhook delivery failed" let actionRequired = "" if (errorMessage.includes("webhook") && errorMessage.includes("not registered")) { diagnosticMessage = "n8n webhook is not active - the workflow is in test mode" actionRequired = "Go to your n8n workflow and click 'Execute workflow' to activate the webhook for testing, or switch the workflow to production mode for permanent activation." } else if (errorMessage.includes("Execute workflow")) { diagnosticMessage = "n8n webhook requires manual activation" actionRequired = "Click the 'Execute workflow' button in your n8n canvas to activate the webhook." } else if (errorMessage.includes("404")) { diagnosticMessage = "Webhook endpoint not found - the n8n workflow may be disabled or deleted" actionRequired = "Check that your n8n workflow exists and is properly configured." } else if (errorMessage.includes("fetch")) { diagnosticMessage = "Network error connecting to webhook endpoint" actionRequired = "Check your internet connection and verify the n8n service is running." } return NextResponse.json( { error: `Webhook failed after retries: ${errorMessage}`, diagnostic: diagnosticMessage, actionRequired, webhookUrl: "https://n8n.localloop.ai/webhook/488b20c5-e5bb-419c-b387-60e4d364a0a8", }, { status: 500 }, ) } } [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": "next lint" }, "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", "geist": "^1.3.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "14.2.25", "next-themes": "^0.4.6", "react": "^19", "react-day-picker": "9.8.0", "react-dom": "^19", "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": "^0.9.9", "zod": "3.25.67" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^18", "@types/react-dom": "^18", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" "use client" import { useState } from "react" import { TrendingUp, TrendingDown, Star, Activity, AlertCircle, BarChart3, Globe, Calendar, Target, Briefcase, Clock, Info, } from "lucide-react" import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Alert, AlertDescription } from "@/components/ui/alert" import { LineChart, XAxis, YAxis, ResponsiveContainer, Tooltip, Area, AreaChart } from "recharts" import { ChartContainer } from "@/components/ui/chart" const getFearGreedClassification = (value: number) => { if (value <= 25) return { label: "Extreme Fear", color: "text-red-500", bgColor: "bg-red-500/20" } if (value <= 45) return { label: "Fear", color: "text-orange-500", bgColor: "bg-orange-500/20" } if (value <= 55) return { label: "Neutral", color: "text-yellow-500", bgColor: "bg-yellow-500/20" } if (value <= 75) return { label: "Greed", color: "text-green-500", bgColor: "bg-green-500/20" } return { label: "Extreme Greed", color: "text-emerald-500", bgColor: "bg-emerald-500/20" } } const mockCryptoData = { bitcoin: { name: "Bitcoin", symbol: "BTC", price: 65420.5, change24h: 2.45, marketCap: 847000000000, volume: 28500000000, analysis: "Strong bullish momentum with RSI at 65. Consider long position with stop-loss at $41,800.", chartData: [ { time: "00:00", price: 64100 }, { time: "04:00", price: 64350 }, { time: "08:00", price: 63950 }, { time: "12:00", price: 64800 }, { time: "16:00", price: 65100 }, { time: "20:00", price: 65420 }, ], technicalAnalysis: { analysis_timestamp: "2025-08-26T14:30:00.000Z", symbol: "BTCUSDT", current_price: 65420.5, analysis: { short_term: { timeframe: "15m-4h", period_analyzed: "24h", trend: "bullish", confidence: 0.75, key_levels: { support: [64800, 64200, 63500], resistance: [65800, 66200, 67000], }, technical_indicators: { rsi_14: 58.3, macd: { signal: "bullish_crossover", histogram: 0.12, strength: "moderate", }, moving_averages: { sma_20: 65180.25, ema_12: 65245.8, position: "above", }, }, volume_analysis: { avg_volume_24h: 1250000, current_volume: 1420000, volume_trend: "increasing", }, prediction: { direction: "up", target_price: 66500, probability: 0.68, time_horizon: "6-12h", }, risk_assessment: { volatility: "moderate", market_sentiment: "cautiously_optimistic", stop_loss_suggested: 64000, }, }, long_term: { timeframe: "1d-1w", period_analyzed: "3m", trend: "bullish", confidence: 0.82, key_levels: { support: [60000, 55000, 50000], resistance: [70000, 75000, 80000], }, technical_indicators: { rsi_14: 62.1, macd: { signal: "bullish", histogram: 0.45, strength: "strong", }, moving_averages: { sma_50: 62800.15, sma_200: 58900.3, golden_cross: true, }, }, fundamental_factors: { adoption_trend: "positive", institutional_interest: "high", regulatory_environment: "improving", market_cap_rank: 1, }, prediction: { direction: "up", target_price: 75000, probability: 0.72, time_horizon: "2-3m", }, risk_assessment: { volatility: "high", market_cycle_phase: "mid_bull_market", major_support: 55000, }, }, }, market_context: { overall_crypto_sentiment: "bullish", btc_dominance: 52.3, fear_greed_index: 68, fear_greed_trend: "increasing", fear_greed_history: [ { date: "2025-08-26", value: 68, classification: "Greed" }, { date: "2025-08-25", value: 65, classification: "Greed" }, { date: "2025-08-24", value: 62, classification: "Greed" }, { date: "2025-08-23", value: 58, classification: "Neutral" }, { date: "2025-08-22", value: 55, classification: "Neutral" }, ], major_events: [ { date: "2025-09-15", event: "Fed Rate Decision", impact: "high", }, ], }, recommendations: { short_term: { action: "buy", entry_range: "64800-65200", take_profit: [66000, 66500, 67200], stop_loss: 64000, position_size: "moderate", }, long_term: { action: "accumulate", dca_range: "60000-65000", target_allocation: "5-10%", hold_duration: "6-12m", }, }, metadata: { analysis_version: "2.1", data_sources: ["binance", "coinbase", "bybit"], last_updated: "2025-08-26T14:30:00.000Z", next_update: "2025-08-26T15:30:00.000Z", }, }, }, ethereum: { name: "Ethereum", symbol: "ETH", price: 2650.3, change24h: -1.25, marketCap: 318000000000, volume: 15200000000, analysis: "Consolidating near resistance. Wait for breakout above $2,700 or consider short if it breaks $2,600.", chartData: [ { time: "00:00", price: 2680 }, { time: "04:00", price: 2670 }, { time: "08:00", price: 2640 }, { time: "12:00", price: 2655 }, { time: "16:00", price: 2645 }, { time: "20:00", price: 2650 }, ], technicalAnalysis: { analysis_timestamp: "2025-08-26T14:30:00.000Z", symbol: "ETHUSDT", current_price: 2650.3, analysis: { short_term: { timeframe: "15m-4h", period_analyzed: "24h", trend: "bearish", confidence: 0.65, key_levels: { support: [2600, 2550, 2500], resistance: [2700, 2750, 2800], }, technical_indicators: { rsi_14: 45.2, macd: { signal: "bearish", histogram: -0.08, strength: "weak", }, moving_averages: { sma_20: 2680.15, ema_12: 2665.3, position: "below", }, }, volume_analysis: { avg_volume_24h: 850000, current_volume: 920000, volume_trend: "stable", }, prediction: { direction: "down", target_price: 2580, probability: 0.62, time_horizon: "4-8h", }, risk_assessment: { volatility: "moderate", market_sentiment: "neutral", stop_loss_suggested: 2720, }, }, long_term: { timeframe: "1d-1w", period_analyzed: "3m", trend: "bullish", confidence: 0.78, key_levels: { support: [2400, 2200, 2000], resistance: [2800, 3000, 3200], }, technical_indicators: { rsi_14: 55.8, macd: { signal: "bullish", histogram: 0.25, strength: "moderate", }, moving_averages: { sma_50: 2580.45, sma_200: 2420.8, golden_cross: true, }, }, fundamental_factors: { adoption_trend: "positive", institutional_interest: "high", regulatory_environment: "improving", market_cap_rank: 2, }, prediction: { direction: "up", target_price: 3200, probability: 0.7, time_horizon: "2-4m", }, risk_assessment: { volatility: "high", market_cycle_phase: "accumulation", major_support: 2200, }, }, }, market_context: { overall_crypto_sentiment: "bullish", btc_dominance: 52.3, fear_greed_index: 68, fear_greed_trend: "increasing", fear_greed_history: [ { date: "2025-08-26", value: 68, classification: "Greed" }, { date: "2025-08-25", value: 65, classification: "Greed" }, { date: "2025-08-24", value: 62, classification: "Greed" }, { date: "2025-08-23", value: 58, classification: "Neutral" }, { date: "2025-08-22", value: 55, classification: "Neutral" }, ], major_events: [ { date: "2025-09-15", event: "Ethereum 2.0 Update", impact: "high", }, ], }, recommendations: { short_term: { action: "hold", entry_range: "2580-2620", take_profit: [2720, 2780, 2850], stop_loss: 2550, position_size: "conservative", }, long_term: { action: "accumulate", dca_range: "2400-2650", target_allocation: "3-8%", hold_duration: "6-18m", }, }, metadata: { analysis_version: "2.1", data_sources: ["binance", "coinbase", "bybit"], last_updated: "2025-08-26T14:30:00.000Z", next_update: "2025-08-26T15:30:00.000Z", }, }, }, } const watchlistCoins = [ { symbol: "BTC", name: "Bitcoin", price: 43250.75, change: 2.45 }, { symbol: "ETH", name: "Ethereum", price: 2650.3, change: -1.25 }, { symbol: "ADA", name: "Cardano", price: 0.485, change: 5.67 }, { symbol: "SOL", name: "Solana", price: 98.45, change: -2.34 }, ] export default function CryptoAnalysisApp() { const [searchQuery, setSearchQuery] = useState("") const [selectedCrypto, setSelectedCrypto] = useState("bitcoin") const [validationError, setValidationError] = useState("") const [isLoading, setIsLoading] = useState(false) const [webhookStatus, setWebhookStatus] = useState<"success" | "failed" | null>(null) const [webhookError, setWebhookError] = useState<{ message: string diagnostic?: string actionRequired?: string webhookUrl?: string } | null>(null) const handleSearch = async () => { const query = searchQuery.trim().toUpperCase() setValidationError("") setWebhookStatus(null) setWebhookError(null) if (!query.endsWith("USDT")) { setValidationError( "Please specify the full trading pair (e.g., BTCUSDT, ETHUSDT). The pair must end with 'USDT'.", ) return } const baseCurrency = query.replace("USDT", "") if (baseCurrency.length === 0) { setValidationError("Please enter a valid cryptocurrency symbol before USDT (e.g., BTCUSDT).") return } setIsLoading(true) if (baseCurrency.includes("BTC") || baseCurrency === "BTC") { setSelectedCrypto("bitcoin") } else if (baseCurrency.includes("ETH") || baseCurrency === "ETH") { setSelectedCrypto("ethereum") } else { setSelectedCrypto("bitcoin") // Default fallback } try { const webhookData = { tradingPair: query, baseCurrency: baseCurrency, quoteCurrency: "USDT", timestamp: new Date().toISOString(), userQuery: searchQuery, action: "crypto_analysis_request", } console.log("[v0] Sending data to API route:", webhookData) const response = await fetch("/api/webhook", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(webhookData), }) if (!response.ok) { const errorData = await response.json() setWebhookError({ message: errorData.error || `API request failed: ${response.status}`, diagnostic: errorData.diagnostic, actionRequired: errorData.actionRequired, webhookUrl: errorData.webhookUrl, }) throw new Error(errorData.error || `API request failed: ${response.status}`) } const result = await response.json() console.log("[v0] API response received successfully:", result) setWebhookStatus("success") } catch (error) { console.error("[v0] Request error:", error) setWebhookStatus("failed") console.log("[v0] Analysis will continue despite webhook failure") } finally { setIsLoading(false) } } const formatPrice = (price: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", minimumFractionDigits: 2, maximumFractionDigits: 2, }).format(price) } const formatMarketCap = (marketCap: number) => { return new Intl.NumberFormat("en-US", { style: "currency", currency: "USD", notation: "compact", maximumFractionDigits: 1, }).format(marketCap) } const formatConfidence = (confidence: number) => { return `${Math.round(confidence * 100)}%` } const formatTimestamp = (timestamp: string) => { return new Date(timestamp).toLocaleString() } const getTrendColor = (trend: string) => { switch (trend) { case "bullish": return "text-emerald-400" case "bearish": return "text-red-400" default: return "text-amber-400" } } const getTrendIcon = (trend: string) => { switch (trend) { case "bullish": return case "bearish": return default: return } } return (

{/* Header */}

CryptoAnalyzer Pro

Professional Trading Platform

{selectedCrypto && mockCryptoData[selectedCrypto as keyof typeof mockCryptoData] && (

Live Trading Signals Real-time analysis and leveraged recommendations {/* Primary Signals Section */}

Primary Signals

Trend: Upward from 3800 → 4555

Support: 4300 (established by recent dip lows)

Structure: Long-term bullish with higher lows/highs

{/* Leveraged Recommendations */}

{/* Short-term */}

Short-Term 3x Leverage

SupportSupport: 4530

Signal: Cautious long from oversold

{/* Long-term */}

Long-Term 2x Leverage

Entry: $4,555.00

Stop Loss: $4,300.00

Take Profit: $5,000.00

{/* Technical Indicators */}

Technical Analysis

MACD & RSI

Positive momentum

OBV

Institutional accumulation

{/* Sentiment Analysis */}

Market Sentiment

Overall: Neutral to Positive

Institutional accumulation, regulatory progress, and macroeconomic adoption support constructive outlook

{/* Risk Assessment */}

Risk Factors

Security concerns, geopolitical tensions, and post-flash crash fragility require tight stops and careful position sizing

)}

Crypto Analysis Enter a trading pair to get AI-powered analysis and recommendations

setSearchQuery(e.target.value)} className="h-12 text-lg border-lime-800" onKeyPress={(e) => e.key === "Enter" && !isLoading && handleSearch()} />

{validationError && ( {validationError} )} {webhookError && ( n8n Workflow Not Active: To receive live data, activate your workflow using the toggle in the top-right corner of the n8n editor. Production webhooks only work when the workflow is active. Analysis continues with demo data. )}

Watchlist

{watchlistCoins.map((coin) => (

setSelectedCrypto(coin.symbol.toLowerCase() === "btc" ? "bitcoin" : "ethereum")} >

{coin.symbol}

{coin.name}

{coin.symbol}

{formatPrice(coin.price)}

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

))}

{selectedCrypto && mockCryptoData[selectedCrypto as keyof typeof mockCryptoData] && (

{(() => { const crypto = mockCryptoData[selectedCrypto as keyof typeof mockCryptoData] const analysis = crypto.technicalAnalysis return ( <>

{crypto.name}

{crypto.symbol}/USDT

${crypto.price?.toLocaleString()}

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

{/* Left: Circular Gauge */}

Fear and Greed Index

{/* Circular gauge */}

{analysis.market_context.fear_greed_index}

4 hours ago

{getFearGreedClassification(analysis.market_context.fear_greed_index).label}

{/* Toggle buttons */}

{/* Description */}

Fear and Greed Index measures stock market sentiment, showing if fear or greed influences investor actions. It merges indicators like price momentum and market volatility, aiding investor decisions.

{/* Center: Historical Chart */}

new Date(value).toLocaleDateString("en-US", { month: "short", day: "2-digit" }) } /> [value, "Fear & Greed Index"]} labelFormatter={(label) => new Date(label).toLocaleDateString()} />

{/* Right: Info Cards */}

{/* Fear and Greed Index Card */}

Fear and Greed Index

{analysis.market_context.fear_greed_index} {getFearGreedClassification(analysis.market_context.fear_greed_index).label}

Updated 4 hours ago

{/* Crypto Fear and Greed Index Card */}

Crypto Fear and Greed Index

48 Neutral

Updated 4 hours ago

{/* Interest Rate Card */}

Interest Rate

7.5%

Dec 18, 2024

0.25% from Nov 07, 2024

{/* Inflation Card */}

Inflation

2.7%

Jul 2025

0.00% from Jun 2025

{/* Historical Data Table */}

Summary

Date

{analysis.market_context.fear_greed_history.slice(0, 2).map((day, i) => (

{day.value} {day.classification}

{new Date(day.date).toLocaleDateString("en-US", { month: "short", day: "2-digit", year: "numeric", })}

))}

The Fear and Greed Index for stock market currently stands at{" "} {analysis.market_context.fear_greed_index}, reflecting{" "} {getFearGreedClassification(analysis.market_context.fear_greed_index).label} in investor sentiment today. The Fear and Greed Index is a market sentiment indicator that measures investor emotions and sentiment.

24-hour Price Movement

{selectedCrypto ? ( (() => { // Generate chart data from current price or use mock data const currentPrice = crypto?.price || mockCryptoData[selectedCrypto as keyof typeof mockCryptoData]?.price || 0 const change24h = crypto?.change24h || mockCryptoData[selectedCrypto as keyof typeof mockCryptoData]?.change24h || 0 // Generate realistic chart data based on current price and 24h change const generateChartData = (basePrice: number, change: number) => { const data = [] const startPrice = basePrice / (1 + change / 100) // Calculate starting price const priceStep = (basePrice - startPrice) / 23 // 24 hours of data for (let i = 0; i < 24; i++) { const hour = String(i).padStart(2, "0") + ":00" const price = startPrice + priceStep * i + (Math.random() - 0.5) * (basePrice * 0.02) // Add some volatility data.push({ time: hour, price: Math.round(price * 100) / 100 }) } return data } const chartData = crypto?.chartData || generateChartData(currentPrice, change24h) const chartConfig = { price: { label: "Price", color: change24h > 0 ? "#10b981" : "#ef4444", }, } return (

{/* Current Price Display */}

Current Price

${currentPrice.toLocaleString()}

24h Change

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

{/* Chart */} { if (active && payload && payload.length) { return (

{`Time: ${label}`}

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

) } return null }} />

) })() ) : (

Enter a trading pair to view chart

Try searching for BTCUSDT, ETHUSDT, or other pairs

)}

24-hour Price Movement

{crypto && crypto.chartData && crypto.chartData.length > 0 ? ( (() => { const chartConfig = { price: { label: "Price", color: (crypto?.change24h ?? 0) > 0 ? "#10b981" : "#ef4444", }, } return <> })() ) : (

Loading chart data...

)}

Short-term Strategy

Action

{analysis.recommendations.short_term.action}

Entry Range

{analysis.recommendations.short_term.entry_range}

Stop Loss

${analysis.recommendations.short_term.stop_loss.toLocaleString()}

Take Profit

{analysis.recommendations.short_term.take_profit.map((price, i) => ( ${price.toLocaleString()} ))}

Long-term Strategy

Action

{analysis.recommendations.long_term.action}

DCA Range

{analysis.recommendations.long_term.dca_range}

Target Allocation

{analysis.recommendations.long_term.target_allocation}

Hold Duration

{analysis.recommendations.long_term.hold_duration}

Upcoming Events

{analysis.market_context.major_events.map((event, i) => (

{event.event}

{new Date(event.date).toLocaleDateString()} {event.impact} impact

))}

Watchlist

{watchlistCoins.map((coin) => (

setSelectedCrypto(coin.symbol.toLowerCase() === "btc" ? "bitcoin" : "ethereum") } >

{coin.symbol}

{coin.name}

{coin.symbol}

{formatPrice(coin.price)}

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

))}

{/* Live Trading Signals section moved to top of page */}

) })()}

)}

) }