[V0_FILE]typescriptreact:file="components/trading-chart.tsx" isMerged="true" "use client" import { useEffect, useRef } from "react" interface MarketData { timestamp: number open: number high: number low: number close: number volume: number } interface TradingChartProps { data: MarketData[] pair: string } export default function TradingChart({ data, pair }: TradingChartProps) { const canvasRef = useRef(null) useEffect(() => { if (!canvasRef.current || data.length === 0) return const canvas = canvasRef.current const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas size const rect = canvas.getBoundingClientRect() canvas.width = rect.width * window.devicePixelRatio canvas.height = rect.height * window.devicePixelRatio ctx.scale(window.devicePixelRatio, window.devicePixelRatio) // Clear canvas ctx.fillStyle = "#1e293b" ctx.fillRect(0, 0, rect.width, rect.height) if (data.length < 2) return // Calculate dimensions const padding = 40 const chartWidth = rect.width - padding * 2 const chartHeight = rect.height - padding * 2 // Find price range const prices = data.flatMap((d) => [d.high, d.low]) const minPrice = Math.min(...prices) const maxPrice = Math.max(...prices) const priceRange = maxPrice - minPrice // Draw grid ctx.strokeStyle = "#374151" ctx.lineWidth = 1 // Horizontal grid lines for (let i = 0; i <= 5; i++) { const y = padding + (chartHeight / 5) * i ctx.beginPath() ctx.moveTo(padding, y) ctx.lineTo(rect.width - padding, y) ctx.stroke() // Price labels const price = maxPrice - (priceRange / 5) * i ctx.fillStyle = "#9ca3af" ctx.font = "12px monospace" ctx.textAlign = "right" ctx.fillText(price.toFixed(4), padding - 5, y + 4) } // Vertical grid lines const visibleCandles = Math.min(50, data.length) const candleWidth = chartWidth / visibleCandles for (let i = 0; i <= 10; i++) { const x = padding + (chartWidth / 10) * i ctx.beginPath() ctx.moveTo(x, padding) ctx.lineTo(x, rect.height - padding) ctx.stroke() } // Draw candlesticks const recentData = data.slice(-visibleCandles) recentData.forEach((candle, index) => { const x = padding + index * candleWidth + candleWidth / 2 // Calculate y positions const openY = padding + ((maxPrice - candle.open) / priceRange) * chartHeight const closeY = padding + ((maxPrice - candle.close) / priceRange) * chartHeight const highY = padding + ((maxPrice - candle.high) / priceRange) * chartHeight const lowY = padding + ((maxPrice - candle.low) / priceRange) * chartHeight // Determine candle color const isGreen = candle.close > candle.open const bodyColor = isGreen ? "#10b981" : "#ef4444" const wickColor = isGreen ? "#059669" : "#dc2626" // Draw wick ctx.strokeStyle = wickColor ctx.lineWidth = 1 ctx.beginPath() ctx.moveTo(x, highY) ctx.lineTo(x, lowY) ctx.stroke() // Draw body const bodyTop = Math.min(openY, closeY) const bodyHeight = Math.abs(closeY - openY) const bodyWidth = candleWidth * 0.6 ctx.fillStyle = bodyColor ctx.fillRect(x - bodyWidth / 2, bodyTop, bodyWidth, bodyHeight || 1) }) // Draw current price line if (data.length > 0) { const currentPrice = data[data.length - 1].close const currentY = padding + ((maxPrice - currentPrice) / priceRange) * chartHeight ctx.strokeStyle = "#3b82f6" ctx.lineWidth = 2 ctx.setLineDash([5, 5]) ctx.beginPath() ctx.moveTo(padding, currentY) ctx.lineTo(rect.width - padding, currentY) ctx.stroke() ctx.setLineDash([]) // Current price label ctx.fillStyle = "#3b82f6" ctx.font = "bold 12px monospace" ctx.textAlign = "left" ctx.fillText(currentPrice.toFixed(4), rect.width - padding + 5, currentY + 4) } }, [data, pair]) return (

{pair} - 1 Minute Chart

{data.length > 0 && (

Current: {data[data.length - 1]?.close.toFixed(4)}

)}

) } [V0_FILE]typescriptreact:file="components/technical-indicators.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Progress } from "@/components/ui/progress" import { TrendingUp, TrendingDown, Minus } from "lucide-react" interface MarketData { timestamp: number open: number high: number low: number close: number volume: number } interface TechnicalIndicatorsProps { data: MarketData[] } export default function TechnicalIndicators({ data }: TechnicalIndicatorsProps) { if (data.length < 20) { return ( Technical Indicators

Insufficient data for analysis

) } const closes = data.map((d) => d.close) // Calculate indicators const rsi = calculateRSI(closes) const macd = calculateMACD(closes) const sma20 = calculateSMA(closes, 20) const ema12 = calculateEMA(closes, 12) const currentPrice = closes[closes.length - 1] const bollinger = calculateBollingerBands(closes, 20, 2) function calculateRSI(prices: number[], period = 14) { if (prices.length < period + 1) return 50 let gains = 0, losses = 0 for (let i = 1; i <= period; i++) { const change = prices[prices.length - i] - prices[prices.length - i - 1] if (change > 0) gains += change else losses -= change } const avgGain = gains / period const avgLoss = losses / period const rs = avgGain / avgLoss return 100 - 100 / (1 + rs) } function calculateMACD(prices: number[]) { if (prices.length < 26) return 0 const ema12 = calculateEMA(prices, 12) const ema26 = calculateEMA(prices, 26) return ema12 - ema26 } function calculateSMA(prices: number[], period: number) { if (prices.length < period) return prices[prices.length - 1] const sum = prices.slice(-period).reduce((a, b) => a + b, 0) return sum / period } function calculateEMA(prices: number[], period: number) { if (prices.length < period) return prices[prices.length - 1] const multiplier = 2 / (period + 1) let ema = prices[0] for (let i = 1; i < prices.length; i++) { ema = prices[i] * multiplier + ema * (1 - multiplier) } return ema } function calculateBollingerBands(prices: number[], period: number, stdDev: number) { const sma = calculateSMA(prices, period) const recentPrices = prices.slice(-period) const variance = recentPrices.reduce((sum, price) => sum + Math.pow(price - sma, 2), 0) / period const standardDeviation = Math.sqrt(variance) return { upper: sma + standardDeviation * stdDev, middle: sma, lower: sma - standardDeviation * stdDev, } } const getRSISignal = (rsi: number) => { if (rsi < 30) return { signal: "BUY", color: "text-green-400", icon: TrendingUp } if (rsi > 70) return { signal: "SELL", color: "text-red-400", icon: TrendingDown } return { signal: "NEUTRAL", color: "text-yellow-400", icon: Minus } } const getMACDSignal = (macd: number) => { if (macd > 0) return { signal: "BULLISH", color: "text-green-400", icon: TrendingUp } return { signal: "BEARISH", color: "text-red-400", icon: TrendingDown } } const getMASignal = (price: number, ma: number) => { if (price > ma) return { signal: "ABOVE", color: "text-green-400", icon: TrendingUp } return { signal: "BELOW", color: "text-red-400", icon: TrendingDown } } const rsiSignal = getRSISignal(rsi) const macdSignal = getMACDSignal(macd) const smaSignal = getMASignal(currentPrice, sma20) const emaSignal = getMASignal(currentPrice, ema12) return ( Technical Indicators {/* RSI */}

RSI (14)

{rsiSignal.signal}

{rsi.toFixed(1)}

Oversold (30) Overbought (70)

{/* MACD */}

MACD

{macdSignal.signal}

{macd > 0 ? "+" : ""} {(macd * 1000).toFixed(3)}

{/* Moving Averages */}

SMA (20)

{sma20.toFixed(4)}

Price {smaSignal.signal}

EMA (12)

{ema12.toFixed(4)}

Price {emaSignal.signal}

{/* Bollinger Bands */}

Bollinger Bands (20, 2)

Upper: {bollinger.upper.toFixed(4)}

Middle: {bollinger.middle.toFixed(4)}

Lower: {bollinger.lower.toFixed(4)}

Current: {currentPrice.toFixed(4)} {currentPrice > bollinger.upper && " (Above Upper Band)"} {currentPrice < bollinger.lower && " (Below Lower Band)"} {currentPrice >= bollinger.lower && currentPrice <= bollinger.upper && " (Within Bands)"}

) } [V0_FILE]typescriptreact:file="components/signal-generator.tsx" isMerged="true" "use client" import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Badge } from "@/components/ui/badge" import { Progress } from "@/components/ui/progress" import { TrendingUp, TrendingDown, Target, Clock, Zap, AlertCircle } from "lucide-react" interface TradingSignal { direction: "UP" | "DOWN" confidence: number entryTime: string expiryTime: string strategy: string indicators: { rsi: number macd: number sma: number ema: number } } interface SignalGeneratorProps { onGenerate: () => void isGenerating: boolean signal: TradingSignal | null } export default function SignalGenerator({ onGenerate, isGenerating, signal }: SignalGeneratorProps) { return (

{/* Generate Signal Button */} Signal Generator

Educational Tool Only

This generates simulated signals for learning purposes. Real trading involves significant risk.

{/* Current Signal */} {signal && ( {signal.direction === "UP" ? ( ) : ( )} Trading Signal {/* Signal Direction */}

{signal.direction === "UP" ? "↗ CALL (UP)" : "↘ PUT (DOWN)"}

1 Minute Expiry

{/* Confidence */}

Confidence Level {signal.confidence}%

Based on multiple technical indicators

{/* Timing */}

Entry Time

{signal.entryTime}

Expiry Time

{signal.expiryTime}

{/* Strategy */}

Primary Strategy

{signal.strategy}

{/* Indicator Values */}

Supporting Indicators

RSI

{signal.indicators.rsi.toFixed(1)}

MACD

{(signal.indicators.macd * 1000).toFixed(2)}

SMA

{signal.indicators.sma.toFixed(4)}

EMA

{signal.indicators.ema.toFixed(4)}

{/* Disclaimer */}

Disclaimer: This is a simulated signal for educational purposes. Real market conditions may vary significantly. Always do your own research.

)} {/* Trading Tips */} Trading Tips

Wait for multiple indicators to align before entering trades

Consider market volatility and news events

Practice with demo accounts before real trading

Never risk more than you can afford to lose

) } [V0_FILE]typescriptreact:file="components/advanced-trading-chart.tsx" isMerged="true" "use client" import { useEffect, useRef, useState } from "react" import { Button } from "@/components/ui/button" import { TrendingUp, TrendingDown, Volume2, BarChart3 } from "lucide-react" interface MarketData { timestamp: number open: number high: number low: number close: number volume: number } interface AdvancedTradingChartProps { data: MarketData[] pair: string isConnected: boolean isLoading: boolean } export default function AdvancedTradingChart({ data, pair, isConnected, isLoading }: AdvancedTradingChartProps) { const canvasRef = useRef(null) const volumeCanvasRef = useRef(null) const [showVolume, setShowVolume] = useState(true) const [showIndicators, setShowIndicators] = useState(true) const [timeframe, setTimeframe] = useState("1m") useEffect(() => { if (!canvasRef.current || data.length === 0) return drawChart() }, [data, pair, showVolume, showIndicators]) useEffect(() => { if (!volumeCanvasRef.current || data.length === 0) return drawVolumeChart() }, [data, showVolume]) const drawChart = () => { const canvas = canvasRef.current if (!canvas) return const ctx = canvas.getContext("2d") if (!ctx) return // Set canvas size const rect = canvas.getBoundingClientRect() canvas.width = rect.width * window.devicePixelRatio canvas.height = rect.height * window.devicePixelRatio ctx.scale(window.devicePixelRatio, window.devicePixelRatio) // Clear canvas const gradient = ctx.createLinearGradient(0, 0, 0, rect.height) gradient.addColorStop(0, "#0f172a") gradient.addColorStop(1, "#1e293b") ctx.fillStyle = gradient ctx.fillRect(0, 0, rect.width, rect.height) if (data.length < 2) return // Calculate dimensions const padding = 60 const chartWidth = rect.width - padding * 2 const chartHeight = rect.height - padding * 2 // Find price range const visibleCandles = Math.min(100, data.length) const recentData = data.slice(-visibleCandles) const prices = recentData.flatMap((d) => [d.high, d.low]) const minPrice = Math.min(...prices) const maxPrice = Math.max(...prices) const priceRange = maxPrice - minPrice const priceBuffer = priceRange * 0.1 const adjustedMin = minPrice - priceBuffer const adjustedMax = maxPrice + priceBuffer const adjustedRange = adjustedMax - adjustedMin // Draw advanced grid drawAdvancedGrid(ctx, rect, padding, chartWidth, chartHeight, adjustedMin, adjustedMax, adjustedRange) // Draw candlesticks with enhanced styling drawEnhancedCandlesticks( ctx, recentData, padding, chartWidth, chartHeight, adjustedMin, adjustedRange, visibleCandles, ) // Draw technical indicators if enabled if (showIndicators) { drawMovingAverages(ctx, recentData, padding, chartWidth, chartHeight, adjustedMin, adjustedRange, visibleCandles) drawBollingerBands(ctx, recentData, padding, chartWidth, chartHeight, adjustedMin, adjustedRange, visibleCandles) } // Draw current price line with animation effect drawCurrentPriceLine(ctx, rect, padding, chartWidth, chartHeight, adjustedMin, adjustedRange, recentData) // Draw price labels drawPriceLabels(ctx, rect, padding, chartHeight, adjustedMin, adjustedMax) } const drawAdvancedGrid = ( ctx: CanvasRenderingContext2D, rect: DOMRect, padding: number, chartWidth: number, chartHeight: number, minPrice: number, maxPrice: number, priceRange: number, ) => { ctx.strokeStyle = "#374151" ctx.lineWidth = 0.5 // Horizontal grid lines with Fibonacci levels const fibLevels = [0, 0.236, 0.382, 0.5, 0.618, 0.786, 1] fibLevels.forEach((level, index) => { const y = padding + chartHeight * (1 - level) const price = minPrice + priceRange * level ctx.beginPath() ctx.moveTo(padding, y) ctx.lineTo(rect.width - padding, y) ctx.stroke() // Price labels with better formatting ctx.fillStyle = index === 3 ? "#fbbf24" : "#9ca3af" // Highlight 50% level ctx.font = "11px 'SF Mono', monospace" ctx.textAlign = "right" ctx.fillText(price.toFixed(5), padding - 8, y + 4) }) // Vertical grid lines with time labels const timeIntervals = 10 for (let i = 0; i <= timeIntervals; i++) { const x = padding + (chartWidth / timeIntervals) * i ctx.strokeStyle = "#374151" ctx.beginPath() ctx.moveTo(x, padding) ctx.lineTo(x, rect.height - padding) ctx.stroke() } } const drawEnhancedCandlesticks = ( ctx: CanvasRenderingContext2D, candles: MarketData[], padding: number, chartWidth: number, chartHeight: number, minPrice: number, priceRange: number, visibleCandles: number, ) => { const candleWidth = chartWidth / visibleCandles const bodyWidth = candleWidth * 0.7 candles.forEach((candle, index) => { const x = padding + index * candleWidth + candleWidth / 2 // Calculate y positions const openY = padding + ((minPrice + priceRange - candle.open) / priceRange) * chartHeight const closeY = padding + ((minPrice + priceRange - candle.close) / priceRange) * chartHeight const highY = padding + ((minPrice + priceRange - candle.high) / priceRange) * chartHeight const lowY = padding + ((minPrice + priceRange - candle.low) / priceRange) * chartHeight const isGreen = candle.close > candle.open const bodyColor = isGreen ? "#10b981" : "#ef4444" const wickColor = isGreen ? "#059669" : "#dc2626" const shadowColor = isGreen ? "#10b98120" : "#ef444420" // Draw shadow for depth ctx.fillStyle = shadowColor ctx.fillRect(x - bodyWidth / 2 + 1, Math.min(openY, closeY) + 1, bodyWidth, Math.abs(closeY - openY) || 1) // Draw wick with gradient const wickGradient = ctx.createLinearGradient(x, highY, x, lowY) wickGradient.addColorStop(0, wickColor) wickGradient.addColorStop(0.5, wickColor + "80") wickGradient.addColorStop(1, wickColor) ctx.strokeStyle = wickGradient ctx.lineWidth = 1.5 ctx.beginPath() ctx.moveTo(x, highY) ctx.lineTo(x, lowY) ctx.stroke() // Draw body with gradient const bodyGradient = ctx.createLinearGradient( x - bodyWidth / 2, Math.min(openY, closeY), x + bodyWidth / 2, Math.max(openY, closeY), ) bodyGradient.addColorStop(0, bodyColor) bodyGradient.addColorStop(1, bodyColor + "CC") ctx.fillStyle = bodyGradient ctx.fillRect(x - bodyWidth / 2, Math.min(openY, closeY), bodyWidth, Math.abs(closeY - openY) || 1) // Draw body border ctx.strokeStyle = bodyColor ctx.lineWidth = 1 ctx.strokeRect(x - bodyWidth / 2, Math.min(openY, closeY), bodyWidth, Math.abs(closeY - openY) || 1) }) } const drawMovingAverages = ( ctx: CanvasRenderingContext2D, candles: MarketData[], padding: number, chartWidth: number, chartHeight: number, minPrice: number, priceRange: number, visibleCandles: number, ) => { if (candles.length < 20) return const candleWidth = chartWidth / visibleCandles const closes = candles.map((c) => c.close) // SMA 20 const sma20 = [] for (let i = 19; i < closes.length; i++) { const sum = closes.slice(i - 19, i + 1).reduce((a, b) => a + b, 0) sma20.push(sum / 20) } // EMA 12 const ema12 = [] let emaValue = closes[0] const multiplier = 2 / (12 + 1) for (let i = 0; i < closes.length; i++) { emaValue = closes[i] * multiplier + emaValue * (1 - multiplier) ema12.push(emaValue) } // Draw SMA 20 ctx.strokeStyle = "#fbbf24" ctx.lineWidth = 2 ctx.beginPath() sma20.forEach((price, index) => { const x = padding + (index + 19) * candleWidth + candleWidth / 2 const y = padding + ((minPrice + priceRange - price) / priceRange) * chartHeight if (index === 0) ctx.moveTo(x, y) else ctx.lineTo(x, y) }) ctx.stroke() // Draw EMA 12 ctx.strokeStyle = "#8b5cf6" ctx.lineWidth = 2 ctx.beginPath() ema12.forEach((price, index) => { const x = padding + index * candleWidth + candleWidth / 2 const y = padding + ((minPrice + priceRange - price) / priceRange) * chartHeight if (index === 0) ctx.moveTo(x, y) else ctx.lineTo(x, y) }) ctx.stroke() } const drawBollingerBands = ( ctx: CanvasRenderingContext2D, candles: MarketData[], padding: number, chartWidth: number, chartHeight: number, minPrice: number, priceRange: number, visibleCandles: number, ) => { if (candles.length < 20) return const candleWidth = chartWidth / visibleCandles const closes = candles.map((c) => c.close) const period = 20 const stdDev = 2 const bands = [] for (let i = period - 1; i < closes.length; i++) { const slice = closes.slice(i - period + 1, i + 1) const sma = slice.reduce((a, b) => a + b, 0) / period const variance = slice.reduce((sum, price) => sum + Math.pow(price - sma, 2), 0) / period const standardDeviation = Math.sqrt(variance) bands.push({ upper: sma + standardDeviation * stdDev, middle: sma, lower: sma - standardDeviation * stdDev, }) } // Draw bands ctx.strokeStyle = "#6366f150" ctx.lineWidth = 1 ctx.setLineDash([5, 5]) // Upper band ctx.beginPath() bands.forEach((band, index) => { const x = padding + (index + period - 1) * candleWidth + candleWidth / 2 const y = padding + ((minPrice + priceRange - band.upper) / priceRange) * chartHeight if (index === 0) ctx.moveTo(x, y) else ctx.lineTo(x, y) }) ctx.stroke() // Lower band ctx.beginPath() bands.forEach((band, index) => { const x = padding + (index + period - 1) * candleWidth + candleWidth / 2 const y = padding + ((minPrice + priceRange - band.lower) / priceRange) * chartHeight if (index === 0) ctx.moveTo(x, y) else ctx.lineTo(x, y) }) ctx.stroke() ctx.setLineDash([]) } const drawCurrentPriceLine = ( ctx: CanvasRenderingContext2D, rect: DOMRect, padding: number, chartWidth: number, chartHeight: number, minPrice: number, priceRange: number, candles: MarketData[], ) => { if (candles.length === 0) return const currentPrice = candles[candles.length - 1].close const currentY = padding + ((minPrice + priceRange - currentPrice) / priceRange) * chartHeight // Animated dashed line ctx.strokeStyle = "#3b82f6" ctx.lineWidth = 2 ctx.setLineDash([8, 4]) ctx.beginPath() ctx.moveTo(padding, currentY) ctx.lineTo(rect.width - padding, currentY) ctx.stroke() ctx.setLineDash([]) // Price label with background const priceText = currentPrice.toFixed(5) ctx.font = "bold 12px 'SF Mono', monospace" const textWidth = ctx.measureText(priceText).width ctx.fillStyle = "#3b82f6" ctx.fillRect(rect.width - padding - textWidth - 16, currentY - 12, textWidth + 12, 24) ctx.fillStyle = "white" ctx.textAlign = "left" ctx.fillText(priceText, rect.width - padding - textWidth - 10, currentY + 4) } const drawPriceLabels = ( ctx: CanvasRenderingContext2D, rect: DOMRect, padding: number, chartHeight: number, minPrice: number, maxPrice: number, ) => { const priceRange = maxPrice - minPrice const levels = 8 for (let i = 0; i <= levels; i++) { const price = minPrice + (priceRange / levels) * i const y = padding + chartHeight - (chartHeight / levels) * i ctx.fillStyle = "#64748b" ctx.font = "10px 'SF Mono', monospace" ctx.textAlign = "right" ctx.fillText(price.toFixed(5), padding - 8, y + 3) } } const drawVolumeChart = () => { const canvas = volumeCanvasRef.current if (!canvas || !showVolume) return const ctx = canvas.getContext("2d") if (!ctx) return const rect = canvas.getBoundingClientRect() canvas.width = rect.width * window.devicePixelRatio canvas.height = rect.height * window.devicePixelRatio ctx.scale(window.devicePixelRatio, window.devicePixelRatio) // Clear canvas ctx.fillStyle = "#1e293b" ctx.fillRect(0, 0, rect.width, rect.height) if (data.length < 2) return const padding = 60 const chartWidth = rect.width - padding * 2 const chartHeight = rect.height - 20 const visibleCandles = Math.min(100, data.length) const recentData = data.slice(-visibleCandles) const volumes = recentData.map((d) => d.volume) const maxVolume = Math.max(...volumes) const candleWidth = chartWidth / visibleCandles recentData.forEach((candle, index) => { const x = padding + index * candleWidth const height = (candle.volume / maxVolume) * chartHeight const y = chartHeight - height const isGreen = candle.close > candle.open const color = isGreen ? "#10b98160" : "#ef444460" ctx.fillStyle = color ctx.fillRect(x, y, candleWidth * 0.8, height) }) } const getCurrentPriceChange = () => { if (data.length < 2) return { change: 0, percentage: 0 } const current = data[data.length - 1].close const previous = data[data.length - 2].close const change = current - previous const percentage = (change / previous) * 100 return { change, percentage } } const { change, percentage } = getCurrentPriceChange() return (

{/* Chart Header */}

{pair}

{data.length > 0 && (

{data[data.length - 1]?.close.toFixed(5)}

= 0 ? "text-green-400" : "text-red-400"}`}> {change >= 0 ? : } {change >= 0 ? "+" : ""} {change.toFixed(5)} ({percentage >= 0 ? "+" : ""} {percentage.toFixed(2)}%)

)}

{isConnected ? "LIVE" : "SIM"}

{/* Main Chart */}

{pair} - 1 Minute Chart

{pair}

Upload Trading Chart

Upload Chart to Get Signals

Professional Chart Analysis

Professional Analysis Ready

Market Regime

Primary Trend

Key Price Levels

Detected Patterns

Technical Divergences

Market Anomalies

Risk Management Recommendations

TOP 1 PRO TRADER AI BOT

TOP 1 PRO TRADER ANALYSIS

ELITE SIGNALS READY

Daily Performance

Market Psychology

Professional Rules

Risk Management

Professional Rules