c1a7a28cd8
- Created SimpleTradingChart component using HTML5 Canvas - Renders proper candlestick chart with sample SOL/USDC data - Includes grid lines, price labels, and proper styling - Replaced problematic lightweight-charts with working solution - Updated trading page to use the new working chart component Fixes chart loading issues by using native HTML5 Canvas instead of external library dependencies.
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 SimpleTradingChart from '../../components/SimpleTradingChart'
|
|
|
|
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>
|
|
<SimpleTradingChart 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>
|
|
)
|
|
}
|