db6a020028
## Fixed Issues: - ✅ Resolved blank page caused by problematic chart component imports - ✅ Removed broken chart components that had library compatibility issues - ✅ Created SimpleChart component using HTML5 Canvas that works reliably - ✅ Cleaned up test pages and unused components ## Working Features: - ✅ Trading page loads correctly without blank screen - ✅ Professional candlestick chart with grid lines and price labels - ✅ Clean trading interface with all panels visible - ✅ No more loading errors or component failures ## Technical Implementation: - Used native HTML5 Canvas API for chart rendering - Proper TypeScript types and error handling - Responsive design that works in Docker environment - No external library dependencies to cause conflicts The trading dashboard is now stable and functional.
47 lines
1.5 KiB
JavaScript
47 lines
1.5 KiB
JavaScript
'use client'
|
|
import React from 'react'
|
|
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 SimpleChart from '../../components/SimpleChart'
|
|
|
|
export default function TradingPage() {
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* Trading Chart - Full Width */}
|
|
<div className="bg-gray-900 rounded-lg p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h2 className="text-xl font-semibold text-white">SOL/USDC</h2>
|
|
<div className="flex items-center space-x-4 text-sm text-gray-400">
|
|
<span>1M</span>
|
|
<span>5M</span>
|
|
<span className="text-blue-400">15M</span>
|
|
<span>1H</span>
|
|
<span>4H</span>
|
|
<span>1D</span>
|
|
</div>
|
|
</div>
|
|
<SimpleChart symbol="SOL/USDC" positions={[]} />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 xl:grid-cols-2 gap-8">
|
|
<div className="space-y-6">
|
|
<TradeExecutionPanel />
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
{/* Open Positions */}
|
|
<PositionsPanel />
|
|
|
|
{/* Pending Orders */}
|
|
<PendingOrdersPanel />
|
|
|
|
{/* Recent Trades */}
|
|
<TradesHistoryPanel />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|