diff --git a/.github/instructions/double_check.instructions.md b/.github/instructions/double_check.instructions.md index 12061d2..f200e86 100644 --- a/.github/instructions/double_check.instructions.md +++ b/.github/instructions/double_check.instructions.md @@ -8,4 +8,7 @@ whenever you make changes to the code, please ensure to double-check everything - Verifying that all dependencies are up to date - Ensuring that the code adheres to the project's coding standards - Running any automated tests to confirm that existing features are not broken -- Documenting any changes made for future reference \ No newline at end of file +- Documenting any changes made for future reference + +Also make sure you git commit once everything works as expected. dont hesitate to make commits on small changes. first in the development branch. Use clear and descriptive commit messages to help others understand the changes made. +If you encounter any issues, please address them before finalizing your changes. This will help maintain the integrity of the codebase and ensure a smooth development process for everyone involved. \ No newline at end of file diff --git a/app/api-test/page.tsx b/app/api-test/page.tsx deleted file mode 100644 index 6507028..0000000 --- a/app/api-test/page.tsx +++ /dev/null @@ -1,85 +0,0 @@ -'use client' -import React, { useEffect, useRef, useState } from 'react' - -export default function ChartAPITest() { - const chartContainerRef = useRef(null) - const [logs, setLogs] = useState([]) - - const addLog = (message: string) => { - console.log(message) - setLogs(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`]) - } - - useEffect(() => { - if (!chartContainerRef.current) return - - const testLightweightCharts = async () => { - try { - addLog('Importing lightweight-charts...') - - const LightweightCharts = await import('lightweight-charts') - addLog('Import successful') - - // Log what's available in the import - addLog('Available exports: ' + Object.keys(LightweightCharts).join(', ')) - - const { createChart } = LightweightCharts - addLog('createChart function available: ' + (typeof createChart)) - - // Create chart - const chart = createChart(chartContainerRef.current!, { - width: 600, - height: 300, - }) - addLog('Chart created') - - // Log chart methods - const chartMethods = Object.getOwnPropertyNames(Object.getPrototypeOf(chart)) - addLog('Chart methods: ' + chartMethods.join(', ')) - - // Try to find the correct method for adding series - if ('addCandlestickSeries' in chart) { - addLog('addCandlestickSeries method found!') - } else if ('addCandles' in chart) { - addLog('addCandles method found!') - } else if ('addSeries' in chart) { - addLog('addSeries method found!') - } else { - addLog('No obvious candlestick method found') - } - - } catch (error) { - const errorMessage = error instanceof Error ? error.message : String(error) - addLog(`Error: ${errorMessage}`) - console.error('Error:', error) - } - } - - testLightweightCharts() - }, []) - - return ( -
-

Lightweight Charts API Test

- -
-
-
- -
-

API Investigation Logs

-
- {logs.map((log, index) => ( -
- {log} -
- ))} -
-
-
- ) -} diff --git a/app/canvas-chart/page.tsx b/app/canvas-chart/page.tsx deleted file mode 100644 index eafe80e..0000000 --- a/app/canvas-chart/page.tsx +++ /dev/null @@ -1,12 +0,0 @@ -'use client' -import React from 'react' -import SimpleTradingChart from '../../components/SimpleTradingChart' - -export default function SimpleChartPage() { - return ( -
-

Simple Canvas Chart Test

- -
- ) -} diff --git a/app/cdn-test/page.tsx b/app/cdn-test/page.tsx deleted file mode 100644 index bf10c0d..0000000 --- a/app/cdn-test/page.tsx +++ /dev/null @@ -1,96 +0,0 @@ -'use client' -import React, { useEffect, useRef, useState } from 'react' - -export default function StandaloneTest() { - const chartContainerRef = useRef(null) - const [status, setStatus] = useState('Starting...') - - useEffect(() => { - const initChart = async () => { - try { - setStatus('Testing CDN version...') - - // Try using the CDN version instead - if (typeof window !== 'undefined' && !window.LightweightCharts) { - setStatus('Loading CDN script...') - - const script = document.createElement('script') - script.src = 'https://unpkg.com/lightweight-charts@5.0.8/dist/lightweight-charts.standalone.production.js' - script.onload = () => { - setStatus('CDN loaded, creating chart...') - createChartWithCDN() - } - script.onerror = () => { - setStatus('CDN load failed') - } - document.head.appendChild(script) - } else if (window.LightweightCharts) { - setStatus('CDN already loaded, creating chart...') - createChartWithCDN() - } - - } catch (error) { - console.error('Error:', error) - setStatus(`Error: ${error}`) - } - } - - const createChartWithCDN = () => { - try { - if (!chartContainerRef.current) { - setStatus('No container') - return - } - - const { createChart, CandlestickSeries } = (window as any).LightweightCharts - - setStatus('Creating chart with CDN...') - const chart = createChart(chartContainerRef.current, { - width: 800, - height: 400, - layout: { - background: { color: '#1a1a1a' }, - textColor: '#ffffff', - }, - }) - - setStatus('Adding series...') - const series = chart.addSeries(CandlestickSeries, { - upColor: '#26a69a', - downColor: '#ef5350', - }) - - setStatus('Setting data...') - series.setData([ - { time: '2025-07-14', open: 100, high: 105, low: 95, close: 102 }, - { time: '2025-07-15', open: 102, high: 107, low: 98, close: 104 }, - { time: '2025-07-16', open: 104, high: 109, low: 101, close: 106 }, - ]) - - setStatus('Chart created successfully!') - - } catch (error) { - console.error('CDN chart error:', error) - setStatus(`CDN Error: ${error}`) - } - } - - initChart() - }, []) - - return ( -
-

CDN Chart Test

-
Status: {status}
- -
-
- ) -} diff --git a/app/chart-debug/page.tsx b/app/chart-debug/page.tsx deleted file mode 100644 index 3662457..0000000 --- a/app/chart-debug/page.tsx +++ /dev/null @@ -1,111 +0,0 @@ -'use client' -import React, { useEffect, useRef, useState } from 'react' - -export default function ChartDebug() { - const chartContainerRef = useRef(null) - const [logs, setLogs] = useState([]) - const [chartCreated, setChartCreated] = useState(false) - - const addLog = (message: string) => { - console.log(message) - setLogs(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`]) - } - - useEffect(() => { - if (!chartContainerRef.current) { - addLog('Chart container ref not available') - return - } - - const initChart = async () => { - try { - addLog('Starting chart initialization...') - - // Import lightweight-charts - const LightweightCharts = await import('lightweight-charts') - addLog('Lightweight charts imported successfully') - - const { createChart, CandlestickSeries } = LightweightCharts - addLog('createChart and CandlestickSeries extracted') - - // Create chart with minimal options - const chart = createChart(chartContainerRef.current!, { - width: 600, - height: 300, - }) - addLog('Chart created successfully') - setChartCreated(true) - - // Add candlestick series with the correct v5 API - const candlestickSeries = chart.addSeries(CandlestickSeries, { - upColor: '#26a69a', - downColor: '#ef5350', - borderDownColor: '#ef5350', - borderUpColor: '#26a69a', - wickDownColor: '#ef5350', - wickUpColor: '#26a69a', - }) - addLog('Candlestick series added') - - // Very simple test data - const testData = [ - { time: '2023-01-01', open: 100, high: 110, low: 95, close: 105 }, - { time: '2023-01-02', open: 105, high: 115, low: 100, close: 110 }, - { time: '2023-01-03', open: 110, high: 120, low: 105, close: 115 }, - { time: '2023-01-04', open: 115, high: 125, low: 110, close: 120 }, - { time: '2023-01-05', open: 120, high: 130, low: 115, close: 125 }, - ] - - addLog(`Setting data with ${testData.length} points`) - candlestickSeries.setData(testData) - addLog('Data set successfully - chart should be visible now') - - // Cleanup function - return () => { - addLog('Cleaning up chart') - chart.remove() - } - - } catch (error) { - const errorMessage = error instanceof Error ? error.message : String(error) - addLog(`Error: ${errorMessage}`) - console.error('Chart error:', error) - } - } - - initChart() - }, []) - - return ( -
-

Chart Debug Test

- -
-

Status

-
- Chart Created: {chartCreated ? '✅ Yes' : '❌ No'} -
-
- -
-

Chart Container

-
-
- -
-

Debug Logs

-
- {logs.map((log, index) => ( -
- {log} -
- ))} -
-
-
- ) -} diff --git a/app/chart-trading-demo/page.tsx b/app/chart-trading-demo/page.tsx deleted file mode 100644 index b15f7ee..0000000 --- a/app/chart-trading-demo/page.tsx +++ /dev/null @@ -1,220 +0,0 @@ -'use client' -import React, { useState, useEffect } from 'react' -import TradingChart from '../../components/TradingChart' -import CompactTradingPanel from '../../components/CompactTradingPanel' - -export default function ChartTradingPageSimple() { - const [currentPrice, setCurrentPrice] = useState(166.21) - const [positions, setPositions] = useState([ - // Mock position data for demo - { - id: 'demo_pos_1', - symbol: 'SOL/USDC', - side: 'BUY' as 'BUY' | 'SELL', - amount: 0.5, - entryPrice: 165.50, - stopLoss: 160.00, - takeProfit: 170.00, - currentPrice: 166.21, - unrealizedPnl: 0.355, - } - ]) - const [selectedSymbol, setSelectedSymbol] = useState('SOL') - - const handleTrade = async (tradeData: any) => { - try { - console.log('Trade executed (demo):', tradeData) - - // Create a mock position for demo - const newPosition = { - id: `demo_${Date.now()}`, - symbol: `${tradeData.symbol}/USDC`, - side: tradeData.side, - amount: tradeData.amount, - entryPrice: tradeData.price, - stopLoss: tradeData.stopLoss, - takeProfit: tradeData.takeProfit, - currentPrice: currentPrice, - unrealizedPnl: 0, - } - - setPositions(prev => [...prev, newPosition]) - alert(`Demo trade executed: ${tradeData.side} ${tradeData.amount} ${tradeData.symbol}`) - } catch (error) { - console.error('Trade execution error:', error) - } - } - - const handlePriceUpdate = (price: number) => { - setCurrentPrice(price) - - // Update position P&L based on new price - setPositions(prev => prev.map(pos => ({ - ...pos, - currentPrice: price, - unrealizedPnl: pos.side === 'BUY' - ? (price - pos.entryPrice) * pos.amount - : (pos.entryPrice - price) * pos.amount - }))) - } - - const handleClosePosition = (positionId: string) => { - setPositions(prev => prev.filter(pos => pos.id !== positionId)) - alert('Position closed (demo)') - } - - return ( -
- {/* Top Bar */} -
-
-
-

Chart Trading Terminal

- - {/* Symbol Selector */} -
- {['SOL', 'BTC', 'ETH'].map(symbol => ( - - ))} -
-
- - {/* Market Status */} -
-
-
- Demo Mode -
-
- {new Date().toLocaleTimeString()} -
-
-
-
- - {/* Main Trading Interface */} -
- {/* Chart Area (70% width) */} -
- -
- - {/* Trading Panel (30% width) */} -
- -
-
- - {/* Bottom Panel - Positions */} -
-
-
-
- - - -
- - {positions.length > 0 && ( -
- Total P&L: sum + (pos.unrealizedPnl || 0), 0) >= 0 - ? 'text-green-400' : 'text-red-400' - }`}> - {positions.reduce((sum, pos) => sum + (pos.unrealizedPnl || 0), 0) >= 0 ? '+' : ''}$ - {positions.reduce((sum, pos) => sum + (pos.unrealizedPnl || 0), 0).toFixed(2)} - -
- )} -
- - {/* Positions Table */} -
- {positions.length === 0 ? ( -
- No open positions -
- ) : ( -
- {positions.map((position: any) => ( -
-
-
-
-
- {position.symbol} • {position.side} -
-
- Size: {position.amount} • Entry: ${position.entryPrice?.toFixed(2)} -
- {position.stopLoss && ( -
- SL: ${position.stopLoss.toFixed(2)} -
- )} - {position.takeProfit && ( -
- TP: ${position.takeProfit.toFixed(2)} -
- )} -
-
- -
-
- ${(position.amount * position.currentPrice).toFixed(2)} -
-
= 0 ? 'text-green-400' : 'text-red-400' - }`}> - {(position.unrealizedPnl || 0) >= 0 ? '+' : ''}${(position.unrealizedPnl || 0).toFixed(2)} -
-
- -
- -
-
- ))} -
- )} -
-
-
-
- ) -} diff --git a/app/chart-trading/page.tsx b/app/chart-trading/page.tsx deleted file mode 100644 index 8c91d17..0000000 --- a/app/chart-trading/page.tsx +++ /dev/null @@ -1,198 +0,0 @@ -'use client' -import React, { useState, useEffect } from 'react' -import TradingChart from '../../components/TradingChart' -import CompactTradingPanel from '../../components/CompactTradingPanel' -import PositionsPanel from '../../components/PositionsPanel' - -export default function ChartTradingPage() { - const [currentPrice, setCurrentPrice] = useState(166.21) - const [positions, setPositions] = useState([]) - const [selectedSymbol, setSelectedSymbol] = useState('SOL') - - useEffect(() => { - fetchPositions() - const interval = setInterval(fetchPositions, 10000) // Update every 10 seconds - return () => clearInterval(interval) - }, []) - - const fetchPositions = async () => { - try { - const response = await fetch('/api/trading/positions') - const data = await response.json() - - if (data.success) { - setPositions(data.positions || []) - } - } catch (error) { - console.error('Failed to fetch positions:', error) - } - } - - const handleTrade = async (tradeData: any) => { - try { - console.log('Executing trade:', tradeData) - - // For perpetual trades, use the execute-perp endpoint - const response = await fetch('/api/trading/execute-perp', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify(tradeData) - }) - - const result = await response.json() - - if (result.success) { - alert(`Trade executed successfully! ${result.message}`) - fetchPositions() // Refresh positions - } else { - alert(`Trade failed: ${result.error || result.message}`) - } - } catch (error) { - console.error('Trade execution error:', error) - alert('Trade execution failed. Please try again.') - } - } - - const handlePriceUpdate = (price: number) => { - setCurrentPrice(price) - } - - return ( -
- {/* Top Bar */} -
-
-
-

Trading Terminal

- - {/* Symbol Selector */} -
- {['SOL', 'BTC', 'ETH'].map(symbol => ( - - ))} -
-
- - {/* Market Status */} -
-
-
- Market Open -
-
- Server Time: {new Date().toLocaleTimeString()} -
-
-
-
- - {/* Main Trading Interface */} -
- {/* Chart Area (70% width) */} -
- -
- - {/* Trading Panel (30% width) */} -
- -
-
- - {/* Bottom Panel - Positions */} -
-
-
-
- - - -
- - {positions.length > 0 && ( -
- Total P&L: +$0.00 -
- )} -
- - {/* Positions Table */} -
- {positions.length === 0 ? ( -
- No open positions -
- ) : ( -
- {positions.map((position: any) => ( -
-
-
-
-
- {position.symbol} • {position.side} -
-
- Size: {position.amount} • Entry: ${position.entryPrice?.toFixed(2)} -
-
-
- -
-
- ${position.totalValue?.toFixed(2) || '0.00'} -
-
= 0 ? 'text-green-400' : 'text-red-400' - }`}> - {(position.unrealizedPnl || 0) >= 0 ? '+' : ''}${(position.unrealizedPnl || 0).toFixed(2)} -
-
- -
- - -
-
- ))} -
- )} -
-
-
-
- ) -} diff --git a/app/debug-chart/page.tsx b/app/debug-chart/page.tsx deleted file mode 100644 index 40ab46b..0000000 --- a/app/debug-chart/page.tsx +++ /dev/null @@ -1,119 +0,0 @@ -'use client' -import React, { useEffect, useRef, useState } from 'react' - -export default function DebugChart() { - const chartContainerRef = useRef(null) - const [logs, setLogs] = useState([]) - const [error, setError] = useState(null) - - const addLog = (message: string) => { - console.log(message) - setLogs(prev => [...prev, `${new Date().toLocaleTimeString()}: ${message}`]) - } - - useEffect(() => { - addLog('Component mounted') - - if (!chartContainerRef.current) { - addLog('ERROR: No chart container ref') - return - } - - addLog('Chart container found') - - const initChart = async () => { - try { - addLog('Starting chart initialization...') - - addLog('Importing lightweight-charts...') - const LightweightChartsModule = await import('lightweight-charts') - addLog('Import successful') - - addLog('Available exports: ' + Object.keys(LightweightChartsModule).join(', ')) - - const { createChart, CandlestickSeries } = LightweightChartsModule - addLog('Extracted createChart and CandlestickSeries') - - addLog('Creating chart...') - const chart = createChart(chartContainerRef.current!, { - width: 600, - height: 300, - layout: { - textColor: '#ffffff', - background: { color: '#1a1a1a' }, - }, - }) - addLog('Chart created successfully') - - addLog('Adding candlestick series...') - const candlestickSeries = chart.addSeries(CandlestickSeries, { - upColor: '#26a69a', - downColor: '#ef5350', - }) - addLog('Series added successfully') - - addLog('Generating test data...') - const data = [ - { time: '2025-07-10', open: 100, high: 110, low: 95, close: 105 }, - { time: '2025-07-11', open: 105, high: 115, low: 100, close: 110 }, - { time: '2025-07-12', open: 110, high: 120, low: 105, close: 115 }, - { time: '2025-07-13', open: 115, high: 125, low: 110, close: 118 }, - { time: '2025-07-14', open: 118, high: 128, low: 113, close: 122 }, - { time: '2025-07-15', open: 122, high: 132, low: 117, close: 125 }, - { time: '2025-07-16', open: 125, high: 135, low: 120, close: 130 }, - ] - addLog(`Generated ${data.length} data points`) - - addLog('Setting data on series...') - candlestickSeries.setData(data) - addLog('Data set successfully - chart should be visible!') - - addLog('Chart initialization complete') - - } catch (err) { - const errorMessage = err instanceof Error ? err.message : String(err) - const errorStack = err instanceof Error ? err.stack : 'No stack trace' - addLog(`ERROR: ${errorMessage}`) - console.error('Chart initialization error:', err) - setError(`${errorMessage}\n\nStack: ${errorStack}`) - } - } - - initChart() - }, []) - - return ( -
-

Debug Chart Test

- -
-
-

Chart

-
-
- -
-

Debug Logs

-
- {logs.map((log, index) => ( -
- {log} -
- ))} -
- - {error && ( -
-

Error Details:

- 
{error}
-
- )} -
-
-
- ) -} diff --git a/app/direct-chart/page.tsx b/app/direct-chart/page.tsx deleted file mode 100644 index c3a6d82..0000000 --- a/app/direct-chart/page.tsx +++ /dev/null @@ -1,72 +0,0 @@ -'use client' -import React, { useEffect } from 'react' - -export default function DirectChart() { - useEffect(() => { - const container = document.getElementById('chart-container') - if (!container) return - - const initChart = async () => { - try { - console.log('Starting direct chart...') - - // Import with explicit .mjs extension - const module = await import('lightweight-charts/dist/lightweight-charts.production.mjs') - console.log('Module loaded:', module) - - const { createChart, CandlestickSeries } = module - console.log('Functions extracted') - - const chart = createChart(container, { - width: 800, - height: 400, - layout: { - background: { color: '#1a1a1a' }, - textColor: '#ffffff', - }, - }) - console.log('Chart created') - - const series = chart.addSeries(CandlestickSeries, { - upColor: '#26a69a', - downColor: '#ef5350', - }) - console.log('Series added') - - series.setData([ - { time: '2025-07-14', open: 100, high: 105, low: 95, close: 102 }, - { time: '2025-07-15', open: 102, high: 107, low: 98, close: 104 }, - { time: '2025-07-16', open: 104, high: 109, low: 101, close: 106 }, - ]) - console.log('Data set - should be visible!') - - } catch (error) { - console.error('Direct chart error:', error) - const statusDiv = document.getElementById('status') - if (statusDiv) { - statusDiv.textContent = `Error: ${error}` - statusDiv.className = 'text-red-400 text-lg mb-4' - } - } - } - - // Add a small delay to ensure DOM is ready - setTimeout(initChart, 100) - }, []) - - return ( -
-

Direct DOM Chart

-
Loading...
- -
-
- ) -} diff --git a/app/minimal-chart/page.tsx b/app/minimal-chart/page.tsx deleted file mode 100644 index 5e6dc45..0000000 --- a/app/minimal-chart/page.tsx +++ /dev/null @@ -1,78 +0,0 @@ -'use client' -import React, { useEffect, useRef, useState } from 'react' - -export default function MinimalChartTest() { - const chartContainerRef = useRef(null) - const [status, setStatus] = useState('Starting...') - const [error, setError] = useState(null) - - useEffect(() => { - if (!chartContainerRef.current) { - setStatus('No container ref') - return - } - - const initChart = async () => { - try { - setStatus('Loading lightweight-charts...') - console.log('Starting chart init...') - - const LightweightCharts = await import('lightweight-charts') - console.log('Lightweight charts loaded:', LightweightCharts) - setStatus('Charts library loaded') - - const { createChart, CandlestickSeries } = LightweightCharts - console.log('createChart:', typeof createChart) - console.log('CandlestickSeries:', CandlestickSeries) - - setStatus('Creating chart...') - const chart = createChart(chartContainerRef.current!, { - width: 800, - height: 400, - }) - console.log('Chart created:', chart) - setStatus('Chart created') - - setStatus('Adding series...') - const series = chart.addSeries(CandlestickSeries, {}) - console.log('Series created:', series) - setStatus('Series added') - - setStatus('Adding data...') - const data = [ - { time: '2025-01-01', open: 100, high: 110, low: 90, close: 105 }, - { time: '2025-01-02', open: 105, high: 115, low: 95, close: 110 }, - { time: '2025-01-03', open: 110, high: 120, low: 100, close: 115 }, - ] - series.setData(data) - console.log('Data set') - setStatus('Chart ready!') - - } catch (err) { - console.error('Chart init error:', err) - const errorMsg = err instanceof Error ? err.message : String(err) - setError(errorMsg) - setStatus(`Error: ${errorMsg}`) - } - } - - initChart() - }, []) - - return ( -
-

Minimal Chart Test

-
Status: {status}
- {error && ( -
- Error: {error} -
- )} -
-
- ) -} diff --git a/app/simple-test/page.tsx b/app/simple-test/page.tsx deleted file mode 100644 index 063e91a..0000000 --- a/app/simple-test/page.tsx +++ /dev/null @@ -1,95 +0,0 @@ -'use client' -import React, { useEffect, useRef, useState } from 'react' - -export default function SimpleTest() { - const chartContainerRef = useRef(null) - const [status, setStatus] = useState('Initializing...') - - useEffect(() => { - const initChart = async () => { - try { - setStatus('Importing library...') - - // Test if we can import the library - const module = await import('lightweight-charts') - setStatus('Library imported') - - // Test if we can extract functions - const { createChart, CandlestickSeries } = module - setStatus('Functions extracted') - - if (!chartContainerRef.current) { - setStatus('No container element') - return - } - - setStatus('Creating chart...') - - // Create chart with explicit dimensions - const chart = createChart(chartContainerRef.current, { - width: 800, - height: 400, - layout: { - background: { color: '#1a1a1a' }, - textColor: '#ffffff', - }, - }) - - setStatus('Chart created') - - // Add series - const series = chart.addSeries(CandlestickSeries, { - upColor: '#00ff00', - downColor: '#ff0000', - }) - - setStatus('Series added') - - // Add simple data - series.setData([ - { time: '2025-07-14', open: 100, high: 105, low: 95, close: 102 }, - { time: '2025-07-15', open: 102, high: 107, low: 98, close: 104 }, - { time: '2025-07-16', open: 104, high: 109, low: 101, close: 106 }, - ]) - - setStatus('Data set - Chart should be visible!') - - } catch (error) { - console.error('Error:', error) - setStatus(`Error: ${error}`) - } - } - - initChart() - }, []) - - return ( -
-

Simple Chart Test

-
Status: {status}
- -
- This red border should help us see if the container is properly sized -
- -
-
- Container content - this should be replaced by the chart -
-
- -
- Container ref: {chartContainerRef.current ? 'Available' : 'Not available'} -
-
- ) -} diff --git a/app/trading/page.js b/app/trading/page.js index a20717a..8ba9b0a 100644 --- a/app/trading/page.js +++ b/app/trading/page.js @@ -4,7 +4,7 @@ import TradeExecutionPanel from '../../components/TradeExecutionPanel.js' import PositionsPanel from '../../components/PositionsPanel.js' import PendingOrdersPanel from '../../components/PendingOrdersPanel.js' import TradesHistoryPanel from '../../components/TradesHistoryPanel.js' -import SimpleTradingChart from '../../components/SimpleTradingChart' +import SimpleChart from '../../components/SimpleChart' export default function TradingPage() { return ( @@ -22,7 +22,7 @@ export default function TradingPage() { 1D
- +
diff --git a/app/working-chart/page.tsx b/app/working-chart/page.tsx deleted file mode 100644 index fbcc225..0000000 --- a/app/working-chart/page.tsx +++ /dev/null @@ -1,77 +0,0 @@ -'use client' -import React, { useEffect, useRef } from 'react' - -export default function WorkingChart() { - const chartContainerRef = useRef(null) - - useEffect(() => { - if (!chartContainerRef.current) return - - const initChart = async () => { - try { - const { createChart, CandlestickSeries } = await import('lightweight-charts') - - const chart = createChart(chartContainerRef.current!, { - width: 800, - height: 400, - layout: { - textColor: '#ffffff', - background: { color: '#1a1a1a' }, - }, - }) - - const candlestickSeries = chart.addSeries(CandlestickSeries, { - upColor: '#26a69a', - downColor: '#ef5350', - }) - - // Simple working data - last 30 days - const data = [] - const today = new Date() - let price = 166.5 - - for (let i = 29; i >= 0; i--) { - const date = new Date(today) - date.setDate(date.getDate() - i) - const timeString = date.toISOString().split('T')[0] - - const change = (Math.random() - 0.5) * 4 - const open = price - const close = price + change - const high = Math.max(open, close) + Math.random() * 2 - const low = Math.min(open, close) - Math.random() * 2 - - data.push({ - time: timeString, - open: Number(open.toFixed(2)), - high: Number(high.toFixed(2)), - low: Number(low.toFixed(2)), - close: Number(close.toFixed(2)), - }) - - price = close - } - - candlestickSeries.setData(data) - - return () => { - chart.remove() - } - } catch (error) { - console.error('Chart error:', error) - } - } - - initChart() - }, []) - - return ( -
-

Working Chart Test

-
-
- ) -} diff --git a/components/SimpleChart.tsx b/components/SimpleChart.tsx new file mode 100644 index 0000000..5e4c406 --- /dev/null +++ b/components/SimpleChart.tsx @@ -0,0 +1,100 @@ +'use client' +import React, { useRef, useEffect } from 'react' + +interface SimpleChartProps { + symbol?: string + positions?: any[] +} + +export default function SimpleChart({ symbol = 'SOL/USDC', positions = [] }: SimpleChartProps) { + const canvasRef = useRef(null) + + useEffect(() => { + const canvas = canvasRef.current + if (!canvas) return + + const ctx = canvas.getContext('2d') + if (!ctx) return + + // Set canvas size + canvas.width = 800 + canvas.height = 400 + + // Clear canvas + ctx.fillStyle = '#1a1a1a' + ctx.fillRect(0, 0, canvas.width, canvas.height) + + // Draw grid + ctx.strokeStyle = '#333' + ctx.lineWidth = 1 + + // Vertical lines + for (let x = 0; x < canvas.width; x += 40) { + ctx.beginPath() + ctx.moveTo(x, 0) + ctx.lineTo(x, canvas.height) + ctx.stroke() + } + + // Horizontal lines + for (let y = 0; y < canvas.height; y += 40) { + 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.stroke() + + // Draw body + const bodyTop = Math.min(openY, closeY) + const bodyHeight = Math.abs(closeY - openY) + ctx.fillRect(x, bodyTop, candleWidth, Math.max(bodyHeight, 2)) + } + + // Draw price labels + ctx.fillStyle = '#ffffff' + ctx.font = '12px Arial' + ctx.fillText(`${symbol} - $${basePrice.toFixed(2)}`, 10, 30) + ctx.fillStyle = '#26a69a' + ctx.fillText('+2.45%', 10, 50) + + }, [symbol, positions]) + + return ( +
+ +
+ ) +} diff --git a/components/SimpleTradingChart.tsx b/components/SimpleTradingChart.tsx deleted file mode 100644 index 48db6ff..0000000 --- a/components/SimpleTradingChart.tsx +++ /dev/null @@ -1,178 +0,0 @@ -'use client' -import React, { useEffect, useRef, useState } from 'react' - -interface SimpleCandlestickData { - time: string - open: number - high: number - low: number - close: number -} - -interface SimpleTradingChartProps { - symbol?: string - positions?: any[] -} - -export default function SimpleTradingChart({ symbol = 'SOL/USDC', positions = [] }: SimpleTradingChartProps) { - const canvasRef = useRef(null) - const [data, setData] = useState([]) - const [error, setError] = useState(null) - - // Generate sample data - useEffect(() => { - const generateData = () => { - const data: SimpleCandlestickData[] = [] - const basePrice = 166.5 - let currentPrice = basePrice - const today = new Date() - - for (let i = 29; i >= 0; i--) { - const date = new Date(today) - date.setDate(date.getDate() - i) - const timeString = date.toISOString().split('T')[0] - - const change = (Math.random() - 0.5) * 4 - const open = currentPrice - const close = currentPrice + change - const high = Math.max(open, close) + Math.random() * 2 - const low = Math.min(open, close) - Math.random() * 2 - - 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 - } - - setData(generateData()) - }, []) - - // Draw the chart on canvas - useEffect(() => { - if (!canvasRef.current || data.length === 0) return - - const canvas = canvasRef.current - const ctx = canvas.getContext('2d') - if (!ctx) return - - // Set canvas size - canvas.width = 800 - canvas.height = 400 - - // Clear canvas - ctx.fillStyle = '#1a1a1a' - ctx.fillRect(0, 0, canvas.width, canvas.height) - - // Calculate chart dimensions - const padding = 50 - const chartWidth = canvas.width - 2 * padding - const chartHeight = canvas.height - 2 * padding - - // Find price range - const prices = data.flatMap(d => [d.open, d.high, d.low, d.close]) - const minPrice = Math.min(...prices) - const maxPrice = Math.max(...prices) - const priceRange = maxPrice - minPrice - - // Helper functions - const getX = (index: number) => padding + (index / (data.length - 1)) * chartWidth - const getY = (price: number) => padding + ((maxPrice - price) / priceRange) * chartHeight - - // Draw grid - ctx.strokeStyle = 'rgba(42, 46, 57, 0.5)' - ctx.lineWidth = 1 - - // Horizontal grid lines - for (let i = 0; i <= 5; i++) { - const y = padding + (i / 5) * chartHeight - ctx.beginPath() - ctx.moveTo(padding, y) - ctx.lineTo(padding + chartWidth, y) - ctx.stroke() - } - - // Vertical grid lines - for (let i = 0; i <= 10; i++) { - const x = padding + (i / 10) * chartWidth - ctx.beginPath() - ctx.moveTo(x, padding) - ctx.lineTo(x, padding + chartHeight) - ctx.stroke() - } - - // Draw candlesticks - const candleWidth = Math.max(2, chartWidth / data.length * 0.8) - - data.forEach((candle, index) => { - const x = getX(index) - const openY = getY(candle.open) - const closeY = getY(candle.close) - const highY = getY(candle.high) - const lowY = getY(candle.low) - - const isGreen = candle.close > candle.open - const color = isGreen ? '#26a69a' : '#ef5350' - - // Draw wick - ctx.strokeStyle = color - ctx.lineWidth = 1 - ctx.beginPath() - ctx.moveTo(x, highY) - ctx.lineTo(x, lowY) - ctx.stroke() - - // Draw body - ctx.fillStyle = color - const bodyTop = Math.min(openY, closeY) - const bodyHeight = Math.abs(closeY - openY) - ctx.fillRect(x - candleWidth / 2, bodyTop, candleWidth, Math.max(bodyHeight, 1)) - }) - - // Draw price labels - ctx.fillStyle = '#ffffff' - ctx.font = '12px Arial' - ctx.textAlign = 'right' - - for (let i = 0; i <= 5; i++) { - const price = maxPrice - (i / 5) * priceRange - const y = padding + (i / 5) * chartHeight - ctx.fillText(price.toFixed(2), padding - 10, y + 4) - } - - // Draw title - ctx.fillStyle = '#ffffff' - ctx.font = 'bold 16px Arial' - ctx.textAlign = 'left' - ctx.fillText(symbol, padding, 30) - - }, [data, symbol]) - - if (error) { - return ( -
-
Chart Error: {error}
-
- ) - } - - return ( -
- -
- Simple canvas-based candlestick chart • {data.length} data points -
-
- ) -}