feat: Implement Jupiter-style trading interface with token selection
- Add 'You're paying' and 'You're receiving' sections with proper token dropdowns - Implement balance display and MAX button functionality - Add automatic receiving amount calculation based on paying amount - Enhance token selector with icons, names, and balance information - Improve leverage position value calculations and risk warnings - Update trade execution to use new paying/receiving token structure - Maintain all existing functionality including stop loss, take profit, and position management This creates a more intuitive and professional trading interface that matches Jupiter's UX patterns.
This commit is contained in:
mindesbunister
@@ -1,100 +1,289 @@
|
||||
'use client'
|
||||
import React, { useRef, useEffect } from 'react'
|
||||
import React, { useRef, useEffect, useState } from 'react'
|
||||
|
||||
interface Position {
|
||||
id: string
|
||||
symbol: string
|
||||
side: 'BUY' | 'SELL'
|
||||
amount: number
|
||||
entryPrice: number
|
||||
stopLoss: number
|
||||
takeProfit: number
|
||||
currentPrice: number
|
||||
unrealizedPnl: number
|
||||
leverage: number
|
||||
}
|
||||
|
||||
interface SimpleChartProps {
|
||||
symbol?: string
|
||||
positions?: any[]
|
||||
positions?: Position[]
|
||||
}
|
||||
|
||||
interface CandleData {
|
||||
open: number
|
||||
high: number
|
||||
low: number
|
||||
close: number
|
||||
time: number
|
||||
}
|
||||
|
||||
export default function SimpleChart({ symbol = 'SOL/USDC', positions = [] }: SimpleChartProps) {
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null)
|
||||
const [candleData, setCandleData] = useState<CandleData[]>([])
|
||||
const [timeframe, setTimeframe] = useState('5m')
|
||||
|
||||
const timeframes = ['1m', '5m', '15m', '1h', '4h', '1d']
|
||||
|
||||
// Generate realistic candlestick data
|
||||
const generateCandleData = React.useCallback(() => {
|
||||
const data: CandleData[] = []
|
||||
const basePrice = symbol === 'SOL' ? 166.5 : symbol === 'BTC' ? 42150 : 2580
|
||||
let currentPrice = basePrice
|
||||
const now = Date.now()
|
||||
|
||||
for (let i = 60; i >= 0; i--) {
|
||||
const timeOffset = i * 5 * 60 * 1000 // 5-minute intervals
|
||||
const time = now - timeOffset
|
||||
|
||||
const volatility = basePrice * 0.002 // 0.2% volatility
|
||||
const open = currentPrice
|
||||
const change = (Math.random() - 0.5) * volatility * 2
|
||||
const close = open + change
|
||||
const high = Math.max(open, close) + Math.random() * volatility
|
||||
const low = Math.min(open, close) - Math.random() * volatility
|
||||
|
||||
data.push({ open, high, low, close, time })
|
||||
currentPrice = close
|
||||
}
|
||||
|
||||
return data
|
||||
}, [symbol])
|
||||
|
||||
useEffect(() => {
|
||||
setCandleData(generateCandleData())
|
||||
}, [symbol, timeframe, generateCandleData])
|
||||
|
||||
useEffect(() => {
|
||||
const canvas = canvasRef.current
|
||||
if (!canvas) return
|
||||
if (!canvas || candleData.length === 0) return
|
||||
|
||||
const ctx = canvas.getContext('2d')
|
||||
if (!ctx) return
|
||||
|
||||
// Set canvas size
|
||||
canvas.width = 800
|
||||
canvas.height = 400
|
||||
// Set canvas size for high DPI displays
|
||||
const rect = canvas.getBoundingClientRect()
|
||||
const dpr = window.devicePixelRatio || 1
|
||||
canvas.width = rect.width * dpr
|
||||
canvas.height = rect.height * dpr
|
||||
ctx.scale(dpr, dpr)
|
||||
|
||||
// Clear canvas
|
||||
ctx.fillStyle = '#1a1a1a'
|
||||
ctx.fillRect(0, 0, canvas.width, canvas.height)
|
||||
const width = rect.width
|
||||
const height = rect.height
|
||||
|
||||
// Clear canvas with dark background
|
||||
ctx.fillStyle = '#0f0f0f'
|
||||
ctx.fillRect(0, 0, width, height)
|
||||
|
||||
// Calculate price range
|
||||
const prices = candleData.flatMap(d => [d.high, d.low])
|
||||
const maxPrice = Math.max(...prices)
|
||||
const minPrice = Math.min(...prices)
|
||||
const priceRange = maxPrice - minPrice
|
||||
const padding = priceRange * 0.1
|
||||
|
||||
// Chart dimensions
|
||||
const chartLeft = 60
|
||||
const chartRight = width - 20
|
||||
const chartTop = 40
|
||||
const chartBottom = height - 60
|
||||
const chartWidth = chartRight - chartLeft
|
||||
const chartHeight = chartBottom - chartTop
|
||||
|
||||
// Draw grid
|
||||
ctx.strokeStyle = '#333'
|
||||
ctx.strokeStyle = '#1a1a1a'
|
||||
ctx.lineWidth = 1
|
||||
|
||||
// Vertical lines
|
||||
for (let x = 0; x < canvas.width; x += 40) {
|
||||
// Horizontal grid lines (price levels)
|
||||
const priceStep = (maxPrice - minPrice + padding * 2) / 8
|
||||
for (let i = 0; i <= 8; i++) {
|
||||
const price = minPrice - padding + i * priceStep
|
||||
const y = chartBottom - ((price - (minPrice - padding)) / (maxPrice - minPrice + padding * 2)) * chartHeight
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, 0)
|
||||
ctx.lineTo(x, canvas.height)
|
||||
ctx.moveTo(chartLeft, y)
|
||||
ctx.lineTo(chartRight, y)
|
||||
ctx.stroke()
|
||||
|
||||
// Price labels
|
||||
ctx.fillStyle = '#666'
|
||||
ctx.font = '11px Arial'
|
||||
ctx.textAlign = 'right'
|
||||
ctx.fillText(price.toFixed(2), chartLeft - 5, y + 4)
|
||||
}
|
||||
|
||||
// Vertical grid lines (time)
|
||||
const timeStep = chartWidth / 12
|
||||
for (let i = 0; i <= 12; i++) {
|
||||
const x = chartLeft + i * timeStep
|
||||
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x, chartTop)
|
||||
ctx.lineTo(x, chartBottom)
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
// Horizontal lines
|
||||
for (let y = 0; y < canvas.height; y += 40) {
|
||||
// Draw candlesticks
|
||||
const candleWidth = Math.max(2, chartWidth / candleData.length - 2)
|
||||
|
||||
candleData.forEach((candle, index) => {
|
||||
const x = chartLeft + (index / (candleData.length - 1)) * chartWidth
|
||||
|
||||
const openY = chartBottom - ((candle.open - (minPrice - padding)) / (maxPrice - minPrice + padding * 2)) * chartHeight
|
||||
const closeY = chartBottom - ((candle.close - (minPrice - padding)) / (maxPrice - minPrice + padding * 2)) * chartHeight
|
||||
const highY = chartBottom - ((candle.high - (minPrice - padding)) / (maxPrice - minPrice + padding * 2)) * chartHeight
|
||||
const lowY = chartBottom - ((candle.low - (minPrice - padding)) / (maxPrice - minPrice + padding * 2)) * chartHeight
|
||||
|
||||
const isGreen = candle.close > candle.open
|
||||
const color = isGreen ? '#26a69a' : '#ef5350'
|
||||
|
||||
ctx.strokeStyle = color
|
||||
ctx.fillStyle = color
|
||||
ctx.lineWidth = 1
|
||||
|
||||
// Draw wick (high-low line)
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(0, y)
|
||||
ctx.lineTo(canvas.width, y)
|
||||
ctx.stroke()
|
||||
}
|
||||
|
||||
// Draw sample candlesticks
|
||||
const candleWidth = 20
|
||||
const basePrice = 166.5
|
||||
const priceScale = 2
|
||||
|
||||
for (let i = 0; i < 30; i++) {
|
||||
const x = 40 + i * 25
|
||||
const open = basePrice + (Math.random() - 0.5) * 10
|
||||
const close = open + (Math.random() - 0.5) * 5
|
||||
const high = Math.max(open, close) + Math.random() * 3
|
||||
const low = Math.min(open, close) - Math.random() * 3
|
||||
|
||||
const openY = canvas.height - (open - 150) * priceScale
|
||||
const closeY = canvas.height - (close - 150) * priceScale
|
||||
const highY = canvas.height - (high - 150) * priceScale
|
||||
const lowY = canvas.height - (low - 150) * priceScale
|
||||
|
||||
// Determine color
|
||||
const isGreen = close > open
|
||||
ctx.fillStyle = isGreen ? '#26a69a' : '#ef5350'
|
||||
ctx.strokeStyle = isGreen ? '#26a69a' : '#ef5350'
|
||||
|
||||
// Draw wick
|
||||
ctx.lineWidth = 2
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(x + candleWidth / 2, highY)
|
||||
ctx.lineTo(x + candleWidth / 2, lowY)
|
||||
ctx.moveTo(x, highY)
|
||||
ctx.lineTo(x, lowY)
|
||||
ctx.stroke()
|
||||
|
||||
// Draw body
|
||||
// Draw candle body
|
||||
const bodyTop = Math.min(openY, closeY)
|
||||
const bodyHeight = Math.abs(closeY - openY)
|
||||
ctx.fillRect(x, bodyTop, candleWidth, Math.max(bodyHeight, 2))
|
||||
}
|
||||
|
||||
if (isGreen) {
|
||||
ctx.strokeRect(x - candleWidth / 2, bodyTop, candleWidth, Math.max(bodyHeight, 1))
|
||||
} else {
|
||||
ctx.fillRect(x - candleWidth / 2, bodyTop, candleWidth, Math.max(bodyHeight, 1))
|
||||
}
|
||||
})
|
||||
|
||||
// Draw price labels
|
||||
ctx.fillStyle = '#ffffff'
|
||||
// Draw position overlays
|
||||
positions.forEach((position) => {
|
||||
if (!position.symbol.includes(symbol.replace('/USDC', ''))) return
|
||||
|
||||
const entryY = chartBottom - ((position.entryPrice - (minPrice - padding)) / (maxPrice - minPrice + padding * 2)) * chartHeight
|
||||
const stopLossY = chartBottom - ((position.stopLoss - (minPrice - padding)) / (maxPrice - minPrice + padding * 2)) * chartHeight
|
||||
const takeProfitY = chartBottom - ((position.takeProfit - (minPrice - padding)) / (maxPrice - minPrice + padding * 2)) * chartHeight
|
||||
|
||||
// Entry price line
|
||||
ctx.strokeStyle = position.side === 'BUY' ? '#26a69a' : '#ef5350'
|
||||
ctx.lineWidth = 2
|
||||
ctx.setLineDash([5, 5])
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(chartLeft, entryY)
|
||||
ctx.lineTo(chartRight, entryY)
|
||||
ctx.stroke()
|
||||
|
||||
// Stop loss line
|
||||
ctx.strokeStyle = '#ef5350'
|
||||
ctx.lineWidth = 1
|
||||
ctx.setLineDash([3, 3])
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(chartLeft, stopLossY)
|
||||
ctx.lineTo(chartRight, stopLossY)
|
||||
ctx.stroke()
|
||||
|
||||
// Take profit line
|
||||
ctx.strokeStyle = '#26a69a'
|
||||
ctx.lineWidth = 1
|
||||
ctx.setLineDash([3, 3])
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(chartLeft, takeProfitY)
|
||||
ctx.lineTo(chartRight, takeProfitY)
|
||||
ctx.stroke()
|
||||
|
||||
ctx.setLineDash([]) // Reset line dash
|
||||
})
|
||||
|
||||
// Draw current price line
|
||||
const currentPrice = candleData[candleData.length - 1]?.close || 0
|
||||
const currentPriceY = chartBottom - ((currentPrice - (minPrice - padding)) / (maxPrice - minPrice + padding * 2)) * chartHeight
|
||||
|
||||
ctx.strokeStyle = '#ffa726'
|
||||
ctx.lineWidth = 2
|
||||
ctx.setLineDash([])
|
||||
ctx.beginPath()
|
||||
ctx.moveTo(chartLeft, currentPriceY)
|
||||
ctx.lineTo(chartRight, currentPriceY)
|
||||
ctx.stroke()
|
||||
|
||||
// Current price label
|
||||
ctx.fillStyle = '#ffa726'
|
||||
ctx.fillRect(chartRight - 60, currentPriceY - 10, 60, 20)
|
||||
ctx.fillStyle = '#000'
|
||||
ctx.font = '12px Arial'
|
||||
ctx.fillText(`${symbol} - $${basePrice.toFixed(2)}`, 10, 30)
|
||||
ctx.fillStyle = '#26a69a'
|
||||
ctx.fillText('+2.45%', 10, 50)
|
||||
ctx.textAlign = 'center'
|
||||
ctx.fillText(currentPrice.toFixed(2), chartRight - 30, currentPriceY + 4)
|
||||
|
||||
}, [symbol, positions])
|
||||
// Chart title
|
||||
ctx.fillStyle = '#ffffff'
|
||||
ctx.font = 'bold 16px Arial'
|
||||
ctx.textAlign = 'left'
|
||||
ctx.fillText(`${symbol} - ${timeframe}`, 20, 25)
|
||||
|
||||
}, [symbol, positions, candleData, timeframe])
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="w-full h-96 bg-gray-800 rounded border border-gray-600"
|
||||
style={{ maxWidth: '100%', height: '400px' }}
|
||||
/>
|
||||
<div className="w-full bg-gray-900 rounded-lg border border-gray-700">
|
||||
{/* Chart Controls */}
|
||||
<div className="flex items-center justify-between p-3 border-b border-gray-700">
|
||||
<div className="flex items-center space-x-4">
|
||||
<h3 className="text-white font-medium">{symbol}</h3>
|
||||
<div className="flex space-x-1">
|
||||
{timeframes.map(tf => (
|
||||
<button
|
||||
key={tf}
|
||||
onClick={() => setTimeframe(tf)}
|
||||
className={`px-2 py-1 text-xs rounded transition-all ${
|
||||
timeframe === tf
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
{tf}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-sm text-gray-400">
|
||||
{candleData.length > 0 && (
|
||||
<span>
|
||||
Last: ${candleData[candleData.length - 1]?.close.toFixed(2)} •
|
||||
24h Vol: ${(Math.random() * 1000000).toFixed(0)}M
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chart Canvas */}
|
||||
<div className="relative">
|
||||
<canvas
|
||||
ref={canvasRef}
|
||||
className="w-full"
|
||||
style={{ height: '400px', display: 'block' }}
|
||||
/>
|
||||
|
||||
{/* Legend */}
|
||||
{positions.length > 0 && (
|
||||
<div className="absolute top-2 right-2 bg-gray-800/90 rounded p-2 text-xs space-y-1">
|
||||
<div className="text-yellow-400">— Current Price</div>
|
||||
<div className="text-green-400">⋯ Take Profit</div>
|
||||
<div className="text-red-400">⋯ Stop Loss</div>
|
||||
<div className="text-blue-400">⋯ Entry Price</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@@ -48,9 +48,27 @@ export default function TradeExecutionPanel({ analysis, symbol = 'SOL' }) {
|
||||
setTakeProfit(analysis.takeProfits.tp1.price.toString())
|
||||
setEnableTakeProfit(true)
|
||||
}
|
||||
// Set trade type based on analysis recommendation
|
||||
if (analysis.recommendation === 'BUY' || analysis.sentiment === 'BULLISH') {
|
||||
setTradeType('BUY')
|
||||
} else if (analysis.recommendation === 'SELL' || analysis.sentiment === 'BEARISH') {
|
||||
setTradeType('SELL')
|
||||
}
|
||||
}
|
||||
}, [analysis])
|
||||
|
||||
// Initialize coin selection based on symbol prop
|
||||
useEffect(() => {
|
||||
if (symbol && availableCoins.find(coin => coin.symbol === symbol)) {
|
||||
setFromCoin(symbol)
|
||||
setPerpCoin(symbol)
|
||||
// If it's not a stablecoin, trade it against USDC
|
||||
if (symbol !== 'USDC' && symbol !== 'USDT') {
|
||||
setToCoin('USDC')
|
||||
}
|
||||
}
|
||||
}, [symbol])
|
||||
|
||||
// Get recommended price from analysis
|
||||
const getRecommendedPrice = () => {
|
||||
if (!analysis) return null
|
||||
|
||||
@@ -1,254 +0,0 @@
|
||||
'use client'
|
||||
import React, { useEffect, useRef, useState } from 'react'
|
||||
|
||||
interface Position {
|
||||
id: string
|
||||
symbol: string
|
||||
side: 'LONG' | 'SHORT'
|
||||
size: number
|
||||
entryPrice: number
|
||||
stopLoss?: number
|
||||
takeProfit?: number
|
||||
pnl: number
|
||||
pnlPercentage: number
|
||||
}
|
||||
|
||||
interface TradingChartProps {
|
||||
symbol?: string
|
||||
positions?: Position[]
|
||||
}
|
||||
|
||||
export default function TradingChart({ symbol = 'SOL/USDC', positions = [] }: TradingChartProps) {
|
||||
const chartContainerRef = useRef<HTMLDivElement>(null)
|
||||
const chart = useRef<any>(null)
|
||||
const candlestickSeries = useRef<any>(null)
|
||||
const positionLines = useRef<any[]>([])
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
|
||||
// Initialize chart with dynamic import
|
||||
useEffect(() => {
|
||||
if (!chartContainerRef.current) return
|
||||
|
||||
const initChart = async () => {
|
||||
try {
|
||||
// Dynamic import to avoid SSR issues
|
||||
const LightweightCharts = await import('lightweight-charts')
|
||||
const { createChart, ColorType, CrosshairMode, LineStyle, CandlestickSeries } = LightweightCharts
|
||||
|
||||
chart.current = createChart(chartContainerRef.current!, {
|
||||
layout: {
|
||||
background: { type: ColorType.Solid, color: '#1a1a1a' },
|
||||
textColor: '#ffffff',
|
||||
},
|
||||
width: chartContainerRef.current!.clientWidth,
|
||||
height: 600,
|
||||
grid: {
|
||||
vertLines: { color: 'rgba(42, 46, 57, 0.5)' },
|
||||
horzLines: { color: 'rgba(42, 46, 57, 0.5)' },
|
||||
},
|
||||
crosshair: {
|
||||
mode: CrosshairMode.Normal,
|
||||
},
|
||||
rightPriceScale: {
|
||||
borderColor: 'rgba(197, 203, 206, 0.8)',
|
||||
},
|
||||
timeScale: {
|
||||
borderColor: 'rgba(197, 203, 206, 0.8)',
|
||||
},
|
||||
})
|
||||
|
||||
// Create candlestick series
|
||||
candlestickSeries.current = chart.current.addSeries(CandlestickSeries, {
|
||||
upColor: '#26a69a',
|
||||
downColor: '#ef5350',
|
||||
borderDownColor: '#ef5350',
|
||||
borderUpColor: '#26a69a',
|
||||
wickDownColor: '#ef5350',
|
||||
wickUpColor: '#26a69a',
|
||||
})
|
||||
|
||||
// Generate sample data
|
||||
console.log('Generating sample data...')
|
||||
const data = generateSampleData()
|
||||
console.log('Sample data generated:', data.length, 'points')
|
||||
console.log('First few data points:', data.slice(0, 3))
|
||||
|
||||
console.log('Setting chart data...')
|
||||
candlestickSeries.current.setData(data)
|
||||
console.log('Chart data set successfully')
|
||||
|
||||
// Add position overlays
|
||||
console.log('Adding position overlays...')
|
||||
addPositionOverlays(LineStyle)
|
||||
console.log('Position overlays added')
|
||||
|
||||
console.log('Chart initialization complete')
|
||||
setIsLoading(false)
|
||||
|
||||
// Handle resize
|
||||
const handleResize = () => {
|
||||
if (chart.current && chartContainerRef.current) {
|
||||
chart.current.applyOptions({
|
||||
width: chartContainerRef.current.clientWidth,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('resize', handleResize)
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('resize', handleResize)
|
||||
if (chart.current) {
|
||||
chart.current.remove()
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to initialize chart:', error)
|
||||
console.error('Error details:', {
|
||||
message: error instanceof Error ? error.message : String(error),
|
||||
stack: error instanceof Error ? error.stack : undefined
|
||||
})
|
||||
setIsLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const addPositionOverlays = (LineStyle: any) => {
|
||||
if (!chart.current) return
|
||||
|
||||
// Clear existing lines
|
||||
positionLines.current.forEach(line => {
|
||||
if (line && chart.current) {
|
||||
chart.current.removePriceLine(line)
|
||||
}
|
||||
})
|
||||
positionLines.current = []
|
||||
|
||||
// Add new position lines
|
||||
positions.forEach(position => {
|
||||
// Entry price line
|
||||
const entryLine = chart.current.addPriceLine({
|
||||
price: position.entryPrice,
|
||||
color: '#2196F3',
|
||||
lineWidth: 2,
|
||||
lineStyle: LineStyle.Solid,
|
||||
axisLabelVisible: true,
|
||||
title: `Entry: $${position.entryPrice.toFixed(2)}`,
|
||||
})
|
||||
positionLines.current.push(entryLine)
|
||||
|
||||
// Stop loss line
|
||||
if (position.stopLoss) {
|
||||
const slLine = chart.current.addPriceLine({
|
||||
price: position.stopLoss,
|
||||
color: '#f44336',
|
||||
lineWidth: 2,
|
||||
lineStyle: LineStyle.Dashed,
|
||||
axisLabelVisible: true,
|
||||
title: `SL: $${position.stopLoss.toFixed(2)}`,
|
||||
})
|
||||
positionLines.current.push(slLine)
|
||||
}
|
||||
|
||||
// Take profit line
|
||||
if (position.takeProfit) {
|
||||
const tpLine = chart.current.addPriceLine({
|
||||
price: position.takeProfit,
|
||||
color: '#4caf50',
|
||||
lineWidth: 2,
|
||||
lineStyle: LineStyle.Dashed,
|
||||
axisLabelVisible: true,
|
||||
title: `TP: $${position.takeProfit.toFixed(2)}`,
|
||||
})
|
||||
positionLines.current.push(tpLine)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const generateSampleData = () => {
|
||||
const data = []
|
||||
const basePrice = 166.5
|
||||
let currentPrice = basePrice
|
||||
const baseDate = new Date()
|
||||
|
||||
for (let i = 0; i < 100; i++) {
|
||||
// Generate data for the last 100 days, one point per day
|
||||
const currentTime = new Date(baseDate.getTime() - (99 - i) * 24 * 60 * 60 * 1000)
|
||||
const timeString = currentTime.toISOString().split('T')[0] // YYYY-MM-DD format
|
||||
const volatility = 0.02
|
||||
const change = (Math.random() - 0.5) * volatility * currentPrice
|
||||
|
||||
const open = currentPrice
|
||||
const close = currentPrice + change
|
||||
const high = Math.max(open, close) + Math.random() * 0.01 * currentPrice
|
||||
const low = Math.min(open, close) - Math.random() * 0.01 * currentPrice
|
||||
|
||||
data.push({
|
||||
time: timeString,
|
||||
open: Number(open.toFixed(2)),
|
||||
high: Number(high.toFixed(2)),
|
||||
low: Number(low.toFixed(2)),
|
||||
close: Number(close.toFixed(2)),
|
||||
})
|
||||
|
||||
currentPrice = close
|
||||
}
|
||||
|
||||
return data
|
||||
}
|
||||
|
||||
initChart()
|
||||
}, [])
|
||||
|
||||
// Update position overlays when positions change
|
||||
useEffect(() => {
|
||||
if (chart.current && !isLoading && positions.length > 0) {
|
||||
import('lightweight-charts').then(({ LineStyle }) => {
|
||||
// Re-add position overlays (this is a simplified version)
|
||||
// In a full implementation, you'd want to properly manage line updates
|
||||
})
|
||||
}
|
||||
}, [positions, isLoading])
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="h-[600px] bg-gray-900 rounded-lg flex items-center justify-center">
|
||||
<div className="text-white">Loading chart...</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Chart Header */}
|
||||
<div className="absolute top-4 left-4 z-10 bg-gray-800/80 rounded-lg px-3 py-2">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="text-white font-bold text-lg">{symbol}</div>
|
||||
<div className="text-green-400 font-semibold">$166.21</div>
|
||||
<div className="text-green-400 text-sm">+1.42%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Position Info */}
|
||||
{positions.length > 0 && (
|
||||
<div className="absolute top-4 right-4 z-10 bg-gray-800/80 rounded-lg px-3 py-2">
|
||||
<div className="text-white text-sm">
|
||||
{positions.map(position => (
|
||||
<div key={position.id} className="flex items-center space-x-2">
|
||||
<div className={`w-2 h-2 rounded-full ${
|
||||
position.side === 'LONG' ? 'bg-green-400' : 'bg-red-400'
|
||||
}`}></div>
|
||||
<span>{position.side} {position.size}</span>
|
||||
<span className={position.pnl >= 0 ? 'text-green-400' : 'text-red-400'}>
|
||||
{position.pnl >= 0 ? '+' : ''}${position.pnl.toFixed(2)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Chart Container */}
|
||||
<div ref={chartContainerRef} className="w-full h-[600px] bg-gray-900 rounded-lg" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user