Implement Jupiter-style trading chart with lightweight-charts
- Add TradingView Lightweight Charts library for professional chart display - Create TradingChart component with real-time candlestick data - Implement position overlays (entry, stop loss, take profit lines) - Add chart header with symbol and price information - Create CompactTradingPanel for Jupiter-style order form - Build ChartTradingPage combining chart and trading panel - Add demo and test pages for chart functionality - Use dynamic imports to avoid SSR issues with lightweight-charts - Generate sample price data for demonstration Features: - Full-screen candlestick chart with dark theme - Position markers on chart (blue entry, red SL, green TP) - Real-time price display and P&L tracking - Responsive design with proper chart resizing - Professional trading interface similar to Jupiter Perps
This commit is contained in:
mindesbunister
@@ -66,7 +66,23 @@ export async function POST(request) {
|
||||
)
|
||||
}
|
||||
|
||||
// For now, simulate perpetual trades until Jupiter Perpetuals integration is complete
|
||||
// Check if we should use real DEX or simulation
|
||||
if (useRealDEX) {
|
||||
console.log('🚀 Executing REAL perpetual trade via Jupiter Perpetuals')
|
||||
|
||||
// TODO: Implement actual Jupiter Perpetuals integration here
|
||||
// For now, return an error indicating real trading is not yet implemented
|
||||
return NextResponse.json(
|
||||
{
|
||||
success: false,
|
||||
error: 'Real Jupiter Perpetuals trading not yet implemented. Set useRealDEX: false for simulation mode.',
|
||||
feature: 'JUPITER_PERPS_REAL_TRADING',
|
||||
status: 'IN_DEVELOPMENT'
|
||||
},
|
||||
{ status: 501 } // Not Implemented
|
||||
)
|
||||
}
|
||||
|
||||
console.log('🎮 Executing SIMULATED perpetual trade (Jupiter Perps integration in development)')
|
||||
|
||||
// Normalize side for perps
|
||||
|
||||
14
app/chart-test/page.tsx
Normal file
14
app/chart-test/page.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
'use client'
|
||||
import React from 'react'
|
||||
import TradingChart from '../../components/TradingChart.tsx'
|
||||
|
||||
export default function SimpleChartTest() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 p-4">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<h1 className="text-2xl font-bold text-white mb-6">Chart Test</h1>
|
||||
<TradingChart />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
220
app/chart-trading-demo/page.tsx
Normal file
220
app/chart-trading-demo/page.tsx
Normal file
@@ -0,0 +1,220 @@
|
||||
'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 (
|
||||
<div className="h-screen bg-gray-900 flex flex-col">
|
||||
{/* Top Bar */}
|
||||
<div className="bg-gray-800 border-b border-gray-700 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-6">
|
||||
<h1 className="text-xl font-bold text-white">Chart Trading Terminal</h1>
|
||||
|
||||
{/* Symbol Selector */}
|
||||
<div className="flex space-x-2">
|
||||
{['SOL', 'BTC', 'ETH'].map(symbol => (
|
||||
<button
|
||||
key={symbol}
|
||||
onClick={() => setSelectedSymbol(symbol)}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
|
||||
selectedSymbol === symbol
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
{symbol}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Market Status */}
|
||||
<div className="flex items-center space-x-4 text-sm">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||||
<span className="text-gray-300">Demo Mode</span>
|
||||
</div>
|
||||
<div className="text-gray-400">
|
||||
{new Date().toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Trading Interface */}
|
||||
<div className="flex-1 flex">
|
||||
{/* Chart Area (70% width) */}
|
||||
<div className="flex-1 p-4">
|
||||
<TradingChart
|
||||
symbol={selectedSymbol}
|
||||
positions={positions}
|
||||
onPriceUpdate={handlePriceUpdate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Trading Panel (30% width) */}
|
||||
<div className="w-96 border-l border-gray-700 p-4 space-y-4">
|
||||
<CompactTradingPanel
|
||||
symbol={selectedSymbol}
|
||||
currentPrice={currentPrice}
|
||||
onTrade={handleTrade}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Panel - Positions */}
|
||||
<div className="border-t border-gray-700 bg-gray-800">
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex space-x-6">
|
||||
<button className="text-white font-medium border-b-2 border-blue-500 pb-2">
|
||||
Positions ({positions.length})
|
||||
</button>
|
||||
<button className="text-gray-400 hover:text-white pb-2">
|
||||
Orders (0)
|
||||
</button>
|
||||
<button className="text-gray-400 hover:text-white pb-2">
|
||||
History
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{positions.length > 0 && (
|
||||
<div className="text-sm text-gray-400">
|
||||
Total P&L: <span className={`${
|
||||
positions.reduce((sum, pos) => 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)}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Positions Table */}
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{positions.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
No open positions
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{positions.map((position: any) => (
|
||||
<div
|
||||
key={position.id}
|
||||
className="bg-gray-900 rounded-lg p-4 flex items-center justify-between"
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className={`w-3 h-3 rounded-full ${
|
||||
position.side === 'BUY' ? 'bg-green-400' : 'bg-red-400'
|
||||
}`}></div>
|
||||
<div>
|
||||
<div className="text-white font-medium">
|
||||
{position.symbol} • {position.side}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
Size: {position.amount} • Entry: ${position.entryPrice?.toFixed(2)}
|
||||
</div>
|
||||
{position.stopLoss && (
|
||||
<div className="text-xs text-red-400">
|
||||
SL: ${position.stopLoss.toFixed(2)}
|
||||
</div>
|
||||
)}
|
||||
{position.takeProfit && (
|
||||
<div className="text-xs text-green-400">
|
||||
TP: ${position.takeProfit.toFixed(2)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<div className="text-white font-medium">
|
||||
${(position.amount * position.currentPrice).toFixed(2)}
|
||||
</div>
|
||||
<div className={`text-sm ${
|
||||
(position.unrealizedPnl || 0) >= 0 ? 'text-green-400' : 'text-red-400'
|
||||
}`}>
|
||||
{(position.unrealizedPnl || 0) >= 0 ? '+' : ''}${(position.unrealizedPnl || 0).toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<button
|
||||
onClick={() => handleClosePosition(position.id)}
|
||||
className="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700"
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
198
app/chart-trading/page.tsx
Normal file
198
app/chart-trading/page.tsx
Normal file
@@ -0,0 +1,198 @@
|
||||
'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 (
|
||||
<div className="h-screen bg-gray-900 flex flex-col">
|
||||
{/* Top Bar */}
|
||||
<div className="bg-gray-800 border-b border-gray-700 p-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-6">
|
||||
<h1 className="text-xl font-bold text-white">Trading Terminal</h1>
|
||||
|
||||
{/* Symbol Selector */}
|
||||
<div className="flex space-x-2">
|
||||
{['SOL', 'BTC', 'ETH'].map(symbol => (
|
||||
<button
|
||||
key={symbol}
|
||||
onClick={() => setSelectedSymbol(symbol)}
|
||||
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
|
||||
selectedSymbol === symbol
|
||||
? 'bg-blue-600 text-white'
|
||||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||||
}`}
|
||||
>
|
||||
{symbol}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Market Status */}
|
||||
<div className="flex items-center space-x-4 text-sm">
|
||||
<div className="flex items-center space-x-2">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||||
<span className="text-gray-300">Market Open</span>
|
||||
</div>
|
||||
<div className="text-gray-400">
|
||||
Server Time: {new Date().toLocaleTimeString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Trading Interface */}
|
||||
<div className="flex-1 flex">
|
||||
{/* Chart Area (70% width) */}
|
||||
<div className="flex-1 p-4">
|
||||
<TradingChart
|
||||
symbol={selectedSymbol}
|
||||
positions={positions}
|
||||
onPriceUpdate={handlePriceUpdate}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Trading Panel (30% width) */}
|
||||
<div className="w-96 border-l border-gray-700 p-4 space-y-4">
|
||||
<CompactTradingPanel
|
||||
symbol={selectedSymbol}
|
||||
currentPrice={currentPrice}
|
||||
onTrade={handleTrade}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Bottom Panel - Positions */}
|
||||
<div className="border-t border-gray-700 bg-gray-800">
|
||||
<div className="p-4">
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div className="flex space-x-6">
|
||||
<button className="text-white font-medium border-b-2 border-blue-500 pb-2">
|
||||
Positions ({positions.length})
|
||||
</button>
|
||||
<button className="text-gray-400 hover:text-white pb-2">
|
||||
Orders
|
||||
</button>
|
||||
<button className="text-gray-400 hover:text-white pb-2">
|
||||
History
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{positions.length > 0 && (
|
||||
<div className="text-sm text-gray-400">
|
||||
Total P&L: <span className="text-green-400">+$0.00</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Positions Table */}
|
||||
<div className="max-h-48 overflow-y-auto">
|
||||
{positions.length === 0 ? (
|
||||
<div className="text-center py-8 text-gray-400">
|
||||
No open positions
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{positions.map((position: any) => (
|
||||
<div
|
||||
key={position.id}
|
||||
className="bg-gray-900 rounded-lg p-4 flex items-center justify-between"
|
||||
>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className={`w-3 h-3 rounded-full ${
|
||||
position.side === 'BUY' ? 'bg-green-400' : 'bg-red-400'
|
||||
}`}></div>
|
||||
<div>
|
||||
<div className="text-white font-medium">
|
||||
{position.symbol} • {position.side}
|
||||
</div>
|
||||
<div className="text-sm text-gray-400">
|
||||
Size: {position.amount} • Entry: ${position.entryPrice?.toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="text-right">
|
||||
<div className="text-white font-medium">
|
||||
${position.totalValue?.toFixed(2) || '0.00'}
|
||||
</div>
|
||||
<div className={`text-sm ${
|
||||
(position.unrealizedPnl || 0) >= 0 ? 'text-green-400' : 'text-red-400'
|
||||
}`}>
|
||||
{(position.unrealizedPnl || 0) >= 0 ? '+' : ''}${(position.unrealizedPnl || 0).toFixed(2)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex space-x-2">
|
||||
<button className="px-3 py-1 bg-gray-700 text-gray-300 rounded text-sm hover:bg-gray-600">
|
||||
Modify
|
||||
</button>
|
||||
<button className="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700">
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -93,3 +93,99 @@ input[type="range"]:focus::-webkit-slider-thumb {
|
||||
input[type="range"]:focus::-moz-range-thumb {
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
/* Trading Chart Slider Styles */
|
||||
.slider::-webkit-slider-thumb {
|
||||
appearance: none;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #3b82f6;
|
||||
cursor: pointer;
|
||||
border: 2px solid #1f2937;
|
||||
box-shadow: 0 0 0 1px #3b82f6;
|
||||
}
|
||||
|
||||
.slider::-webkit-slider-thumb:hover {
|
||||
background: #2563eb;
|
||||
box-shadow: 0 0 0 2px #2563eb;
|
||||
}
|
||||
|
||||
.slider::-moz-range-thumb {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
background: #3b82f6;
|
||||
cursor: pointer;
|
||||
border: 2px solid #1f2937;
|
||||
box-shadow: 0 0 0 1px #3b82f6;
|
||||
}
|
||||
|
||||
/* Chart container styling */
|
||||
.trading-chart-container {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
|
||||
}
|
||||
|
||||
/* Position indicator styles */
|
||||
.position-indicator {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
border-radius: 8px;
|
||||
padding: 8px 12px;
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* Trading panel animations */
|
||||
.trade-button {
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.trade-button:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.trade-button:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Chart loading animation */
|
||||
.chart-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 600px;
|
||||
background: #1a1a1a;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 2px solid #374151;
|
||||
border-top: 2px solid #3b82f6;
|
||||
border-radius: 50%;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Responsive chart adjustments */
|
||||
@media (max-width: 1024px) {
|
||||
.trading-interface {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.trading-panel {
|
||||
width: 100%;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user