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)')
|
console.log('🎮 Executing SIMULATED perpetual trade (Jupiter Perps integration in development)')
|
||||||
|
|
||||||
// Normalize side for perps
|
// 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 {
|
input[type="range"]:focus::-moz-range-thumb {
|
||||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
270
components/CompactTradingPanel.tsx
Normal file
270
components/CompactTradingPanel.tsx
Normal file
@@ -0,0 +1,270 @@
|
|||||||
|
'use client'
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
|
||||||
|
interface CompactTradingPanelProps {
|
||||||
|
symbol: string
|
||||||
|
currentPrice: number
|
||||||
|
onTrade?: (tradeData: any) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function CompactTradingPanel({
|
||||||
|
symbol = 'SOL',
|
||||||
|
currentPrice = 166.21,
|
||||||
|
onTrade
|
||||||
|
}: CompactTradingPanelProps) {
|
||||||
|
const [side, setSide] = useState<'LONG' | 'SHORT'>('LONG')
|
||||||
|
const [orderType, setOrderType] = useState<'MARKET' | 'LIMIT'>('MARKET')
|
||||||
|
const [amount, setAmount] = useState('')
|
||||||
|
const [price, setPrice] = useState(currentPrice.toString())
|
||||||
|
const [leverage, setLeverage] = useState(1)
|
||||||
|
const [stopLoss, setStopLoss] = useState('')
|
||||||
|
const [takeProfit, setTakeProfit] = useState('')
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
|
||||||
|
// Update price when currentPrice changes
|
||||||
|
React.useEffect(() => {
|
||||||
|
if (orderType === 'MARKET') {
|
||||||
|
setPrice(currentPrice.toString())
|
||||||
|
}
|
||||||
|
}, [currentPrice, orderType])
|
||||||
|
|
||||||
|
const calculateLiquidationPrice = () => {
|
||||||
|
const entryPrice = parseFloat(price) || currentPrice
|
||||||
|
const leverage_ratio = leverage || 1
|
||||||
|
if (side === 'LONG') {
|
||||||
|
return entryPrice * (1 - 1 / leverage_ratio)
|
||||||
|
} else {
|
||||||
|
return entryPrice * (1 + 1 / leverage_ratio)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const calculatePositionSize = () => {
|
||||||
|
const amt = parseFloat(amount) || 0
|
||||||
|
const entryPrice = parseFloat(price) || currentPrice
|
||||||
|
return amt * entryPrice
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTrade = async () => {
|
||||||
|
if (!amount || parseFloat(amount) <= 0) {
|
||||||
|
alert('Please enter a valid amount')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
setLoading(true)
|
||||||
|
try {
|
||||||
|
const tradeData = {
|
||||||
|
symbol,
|
||||||
|
side: side === 'LONG' ? 'BUY' : 'SELL',
|
||||||
|
amount: parseFloat(amount),
|
||||||
|
price: orderType === 'MARKET' ? currentPrice : parseFloat(price),
|
||||||
|
type: orderType.toLowerCase(),
|
||||||
|
leverage,
|
||||||
|
stopLoss: stopLoss ? parseFloat(stopLoss) : undefined,
|
||||||
|
takeProfit: takeProfit ? parseFloat(takeProfit) : undefined,
|
||||||
|
tradingMode: 'PERP'
|
||||||
|
}
|
||||||
|
|
||||||
|
onTrade?.(tradeData)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Trade execution failed:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const leverageOptions = [1, 2, 3, 5, 10, 20, 25, 50, 100]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="bg-gray-900 rounded-lg p-4 space-y-4">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<h3 className="text-lg font-semibold text-white">{symbol}/USDC</h3>
|
||||||
|
<div className="text-sm text-gray-400">
|
||||||
|
${currentPrice.toFixed(2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Long/Short Toggle */}
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setSide('LONG')}
|
||||||
|
className={`p-3 rounded-lg font-semibold transition-all ${
|
||||||
|
side === 'LONG'
|
||||||
|
? 'bg-green-600 text-white'
|
||||||
|
: 'bg-gray-800 text-gray-400 hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Long/Buy
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setSide('SHORT')}
|
||||||
|
className={`p-3 rounded-lg font-semibold transition-all ${
|
||||||
|
side === 'SHORT'
|
||||||
|
? 'bg-red-600 text-white'
|
||||||
|
: 'bg-gray-800 text-gray-400 hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Short/Sell
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Order Type */}
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<button
|
||||||
|
onClick={() => setOrderType('MARKET')}
|
||||||
|
className={`p-2 rounded text-sm transition-all ${
|
||||||
|
orderType === 'MARKET'
|
||||||
|
? 'bg-blue-600 text-white'
|
||||||
|
: 'bg-gray-800 text-gray-400 hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Market
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setOrderType('LIMIT')}
|
||||||
|
className={`p-2 rounded text-sm transition-all ${
|
||||||
|
orderType === 'LIMIT'
|
||||||
|
? 'bg-blue-600 text-white'
|
||||||
|
: 'bg-gray-800 text-gray-400 hover:bg-gray-700'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
Limit
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Leverage Slider */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<label className="text-sm text-gray-400">Leverage</label>
|
||||||
|
<span className="text-white font-semibold">{leverage}x</span>
|
||||||
|
</div>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="100"
|
||||||
|
value={leverage}
|
||||||
|
onChange={(e) => setLeverage(parseInt(e.target.value))}
|
||||||
|
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
|
||||||
|
/>
|
||||||
|
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||||
|
{leverageOptions.map(lev => (
|
||||||
|
<span key={lev}>{lev}x</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Amount Input */}
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm text-gray-400">Amount ({symbol})</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={amount}
|
||||||
|
onChange={(e) => setAmount(e.target.value)}
|
||||||
|
placeholder="0.00"
|
||||||
|
className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
<div className="absolute right-3 top-3 flex space-x-1">
|
||||||
|
<button
|
||||||
|
onClick={() => setAmount('0.25')}
|
||||||
|
className="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
25%
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setAmount('0.5')}
|
||||||
|
className="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
50%
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
onClick={() => setAmount('1.0')}
|
||||||
|
className="px-2 py-1 text-xs bg-gray-700 text-gray-300 rounded hover:bg-gray-600"
|
||||||
|
>
|
||||||
|
MAX
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Price Input (for limit orders) */}
|
||||||
|
{orderType === 'LIMIT' && (
|
||||||
|
<div className="space-y-2">
|
||||||
|
<label className="text-sm text-gray-400">Price (USDC)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={price}
|
||||||
|
onChange={(e) => setPrice(e.target.value)}
|
||||||
|
placeholder="0.00"
|
||||||
|
className="w-full p-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-400 focus:border-blue-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Stop Loss & Take Profit */}
|
||||||
|
<div className="grid grid-cols-2 gap-2">
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="text-xs text-gray-400">Stop Loss</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={stopLoss}
|
||||||
|
onChange={(e) => setStopLoss(e.target.value)}
|
||||||
|
placeholder="Optional"
|
||||||
|
className="w-full p-2 bg-gray-800 border border-gray-700 rounded text-white placeholder-gray-400 text-sm focus:border-red-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-1">
|
||||||
|
<label className="text-xs text-gray-400">Take Profit</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={takeProfit}
|
||||||
|
onChange={(e) => setTakeProfit(e.target.value)}
|
||||||
|
placeholder="Optional"
|
||||||
|
className="w-full p-2 bg-gray-800 border border-gray-700 rounded text-white placeholder-gray-400 text-sm focus:border-green-500 focus:outline-none"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Position Info */}
|
||||||
|
<div className="space-y-2 p-3 bg-gray-800 rounded-lg">
|
||||||
|
<div className="flex justify-between text-sm">
|
||||||
|
<span className="text-gray-400">Position Size:</span>
|
||||||
|
<span className="text-white">${calculatePositionSize().toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-sm">
|
||||||
|
<span className="text-gray-400">Liquidation Price:</span>
|
||||||
|
<span className="text-orange-400">${calculateLiquidationPrice().toFixed(2)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between text-sm">
|
||||||
|
<span className="text-gray-400">Available:</span>
|
||||||
|
<span className="text-white">$5,000.00</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Trade Button */}
|
||||||
|
<button
|
||||||
|
onClick={handleTrade}
|
||||||
|
disabled={loading || !amount}
|
||||||
|
className={`w-full p-4 rounded-lg font-semibold text-white transition-all ${
|
||||||
|
side === 'LONG'
|
||||||
|
? 'bg-green-600 hover:bg-green-700 disabled:bg-gray-600'
|
||||||
|
: 'bg-red-600 hover:bg-red-700 disabled:bg-gray-600'
|
||||||
|
} disabled:cursor-not-allowed`}
|
||||||
|
>
|
||||||
|
{loading ? 'Executing...' : `${side === 'LONG' ? 'Long' : 'Short'} ${symbol}`}
|
||||||
|
</button>
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<div className="flex space-x-2 text-xs">
|
||||||
|
<button className="flex-1 p-2 bg-gray-800 text-gray-400 rounded hover:bg-gray-700">
|
||||||
|
Close All
|
||||||
|
</button>
|
||||||
|
<button className="flex-1 p-2 bg-gray-800 text-gray-400 rounded hover:bg-gray-700">
|
||||||
|
Reverse
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
@@ -22,6 +22,12 @@ const navItems = [
|
|||||||
icon: '💰',
|
icon: '💰',
|
||||||
description: 'Execute trades'
|
description: 'Execute trades'
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: 'Chart Trading',
|
||||||
|
href: '/chart-trading-demo',
|
||||||
|
icon: '📈',
|
||||||
|
description: 'Advanced chart trading'
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: 'Automation',
|
name: 'Automation',
|
||||||
href: '/automation',
|
href: '/automation',
|
||||||
|
|||||||
402
components/TradeModal_backup.tsx
Normal file
402
components/TradeModal_backup.tsx
Normal file
@@ -0,0 +1,402 @@
|
|||||||
|
"use client"
|
||||||
|
import React, { useState, useEffect, ChangeEvent } from 'react'
|
||||||
|
|
||||||
|
interface TradeModalProps {
|
||||||
|
isOpen: boolean
|
||||||
|
onClose: () => void
|
||||||
|
tradeData: {
|
||||||
|
entry: string
|
||||||
|
tp: string
|
||||||
|
sl: string
|
||||||
|
risk: string
|
||||||
|
reward: string
|
||||||
|
action: 'BUY' | 'SELL'
|
||||||
|
} | null
|
||||||
|
onExecute: (data: any) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FormData {
|
||||||
|
entry: string
|
||||||
|
tp1: string
|
||||||
|
tp2: string
|
||||||
|
sl: string
|
||||||
|
positionValue: string
|
||||||
|
leverage: number
|
||||||
|
tradingCoin: string
|
||||||
|
tp1Percentage: number
|
||||||
|
tp2Percentage: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const supportedCoins = [
|
||||||
|
{ symbol: 'SOL', name: 'Solana', icon: '◎', price: 159.5 },
|
||||||
|
{ symbol: 'USDC', name: 'USD Coin', icon: '$', price: 1.0 }
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: TradeModalProps) {
|
||||||
|
console.log('🚀 TradeModal loaded with enhanced features - Version 2.0')
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [walletBalance, setWalletBalance] = useState<any>(null)
|
||||||
|
const [formData, setFormData] = useState<FormData>({
|
||||||
|
entry: tradeData?.entry || '',
|
||||||
|
tp1: tradeData?.tp || '',
|
||||||
|
tp2: '',
|
||||||
|
sl: tradeData?.sl || '',
|
||||||
|
positionValue: '64', // USD amount for position size
|
||||||
|
leverage: 3,
|
||||||
|
tradingCoin: 'SOL',
|
||||||
|
tp1Percentage: 50, // % of position to close at TP1
|
||||||
|
tp2Percentage: 50 // % of position to close at TP2
|
||||||
|
})
|
||||||
|
|
||||||
|
// Fetch wallet balance when modal opens
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
fetchWalletBalance()
|
||||||
|
}
|
||||||
|
}, [isOpen])
|
||||||
|
|
||||||
|
const fetchWalletBalance = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/wallet/balance')
|
||||||
|
const data = await response.json()
|
||||||
|
setWalletBalance(data)
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch wallet balance:', error)
|
||||||
|
setWalletBalance({ solBalance: 2.5, usdcBalance: 150.0 }) // Fallback
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to safely format numbers
|
||||||
|
const formatNumber = (value: number, decimals: number = 2): string => {
|
||||||
|
return isNaN(value) ? '0.00' : value.toFixed(decimals)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate various metrics
|
||||||
|
const currentCoin = supportedCoins.find(coin => coin.symbol === formData.tradingCoin)
|
||||||
|
const coinPrice = currentCoin?.price || 159.5 // Default to SOL price
|
||||||
|
|
||||||
|
// Position calculations
|
||||||
|
const positionValueUSD = parseFloat(formData.positionValue) || 0
|
||||||
|
const positionSizeSOL = positionValueUSD / coinPrice // Calculate SOL amount from USD
|
||||||
|
const leverageNum = formData.leverage || 1
|
||||||
|
const entryPrice = parseFloat(formData.entry) || 0
|
||||||
|
const tp1Price = parseFloat(formData.tp1) || 0
|
||||||
|
const tp2Price = parseFloat(formData.tp2) || 0
|
||||||
|
const slPrice = parseFloat(formData.sl) || 0
|
||||||
|
|
||||||
|
// Profit calculations
|
||||||
|
const leveragedValue = positionValueUSD * leverageNum
|
||||||
|
|
||||||
|
// TP1 Profit calculation (percentage-based)
|
||||||
|
const profitTP1 = (entryPrice > 0 && tp1Price > 0 && leveragedValue > 0) ?
|
||||||
|
((tp1Price - entryPrice) / entryPrice) * leveragedValue * (formData.tp1Percentage / 100) : 0
|
||||||
|
|
||||||
|
// TP2 Profit calculation (percentage-based)
|
||||||
|
const profitTP2 = (entryPrice > 0 && tp2Price > 0 && leveragedValue > 0) ?
|
||||||
|
((tp2Price - entryPrice) / entryPrice) * leveragedValue * (formData.tp2Percentage / 100) : 0
|
||||||
|
|
||||||
|
// Stop Loss calculation
|
||||||
|
const lossAtSL = (entryPrice > 0 && slPrice > 0 && leveragedValue > 0) ?
|
||||||
|
((slPrice - entryPrice) / entryPrice) * leveragedValue : 0
|
||||||
|
|
||||||
|
const totalPotentialProfit = profitTP1 + profitTP2
|
||||||
|
|
||||||
|
if (!isOpen) return null
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setLoading(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
console.log('🎯 Executing trade with data:', formData)
|
||||||
|
|
||||||
|
const tradingData = {
|
||||||
|
...formData,
|
||||||
|
positionSizeSOL: formatNumber(positionSizeSOL, 4),
|
||||||
|
leveragedValue: formatNumber(leveragedValue, 2),
|
||||||
|
profitTP1: formatNumber(profitTP1, 2),
|
||||||
|
profitTP2: formatNumber(profitTP2, 2),
|
||||||
|
totalProfit: formatNumber(totalPotentialProfit, 2),
|
||||||
|
lossAtSL: formatNumber(lossAtSL, 2)
|
||||||
|
}
|
||||||
|
|
||||||
|
await onExecute(tradingData)
|
||||||
|
onClose()
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Trade execution failed:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const setPositionPercentage = (percentage: number) => {
|
||||||
|
if (walletBalance && walletBalance.solBalance) {
|
||||||
|
const availableBalance = walletBalance.solBalance * coinPrice // Convert SOL to USD
|
||||||
|
const newPosition = (availableBalance * percentage / 100).toFixed(0)
|
||||||
|
setFormData(prev => ({ ...prev, positionValue: newPosition }))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
||||||
|
<div className="bg-gray-900 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[95vh] overflow-hidden border border-gray-700">
|
||||||
|
{/* Header */}
|
||||||
|
<div className="flex justify-between items-center p-6 border-b border-gray-700 bg-gradient-to-r from-blue-600/20 to-purple-600/20">
|
||||||
|
<div>
|
||||||
|
<h2 className="text-2xl font-bold text-white">Execute Trade</h2>
|
||||||
|
<p className="text-gray-400 text-sm">Configure your position details</p>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-400 hover:text-white text-2xl font-bold w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-700 transition-all"
|
||||||
|
>
|
||||||
|
×
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="p-6 overflow-y-auto max-h-[calc(95vh-120px)]">
|
||||||
|
{/* Coin Selection */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<label className="block text-sm font-medium text-gray-300 mb-3">Trading Coin</label>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
{supportedCoins.map((coin) => (
|
||||||
|
<button
|
||||||
|
key={coin.symbol}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setFormData(prev => ({ ...prev, tradingCoin: coin.symbol }))}
|
||||||
|
className={`p-4 rounded-xl border-2 transition-all duration-200 ${
|
||||||
|
formData.tradingCoin === coin.symbol
|
||||||
|
? 'border-blue-500 bg-blue-500/20 text-white'
|
||||||
|
: 'border-gray-600 bg-gray-800 text-gray-300 hover:border-gray-500'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span className="text-2xl">{coin.icon}</span>
|
||||||
|
<div className="text-left">
|
||||||
|
<div className="font-semibold">{coin.symbol}</div>
|
||||||
|
<div className="text-xs text-gray-400">{coin.name}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className="font-mono text-sm">${formatNumber(coin.price)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Position Size */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<label className="text-sm font-medium text-gray-300">Position Size (USD)</label>
|
||||||
|
{walletBalance && (
|
||||||
|
<span className="text-xs text-gray-400">
|
||||||
|
Available: ${formatNumber(walletBalance.solBalance * coinPrice, 2)}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
value={formData.positionValue}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, positionValue: e.target.value }))}
|
||||||
|
className="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 transition-colors"
|
||||||
|
placeholder="Enter USD amount"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Quick percentage buttons */}
|
||||||
|
<div className="grid grid-cols-4 gap-2">
|
||||||
|
{[25, 50, 75, 100].map((percent) => (
|
||||||
|
<button
|
||||||
|
key={percent}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setPositionPercentage(percent)}
|
||||||
|
className="py-2 px-3 bg-gray-700 hover:bg-gray-600 rounded-lg text-xs text-gray-300 hover:text-white transition-all"
|
||||||
|
>
|
||||||
|
{percent}%
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Position info */}
|
||||||
|
<div className="text-xs text-gray-400 space-y-1">
|
||||||
|
<div>Position Size: {formatNumber(positionSizeSOL, 4)} {formData.tradingCoin}</div>
|
||||||
|
<div>USD Value: ${formatNumber(positionValueUSD, 2)}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Leverage */}
|
||||||
|
<div className="mb-6">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<label className="text-sm font-medium text-gray-300">Leverage</label>
|
||||||
|
<span className="text-sm text-blue-400 font-mono">{formData.leverage}x</span>
|
||||||
|
</div>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="10"
|
||||||
|
value={formData.leverage}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, leverage: parseInt(e.target.value) }))}
|
||||||
|
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer range-slider"
|
||||||
|
/>
|
||||||
|
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||||
|
<span>1x</span>
|
||||||
|
<span>5x</span>
|
||||||
|
<span>10x</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-400 mt-2">
|
||||||
|
Leveraged Value: ${formatNumber(leveragedValue, 2)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Price Inputs Grid */}
|
||||||
|
<div className="grid grid-cols-2 gap-4 mb-6">
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-300 mb-2">Entry Price</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
value={formData.entry}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, entry: e.target.value }))}
|
||||||
|
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
|
||||||
|
placeholder="0.00"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-sm font-medium text-gray-300 mb-2">Stop Loss</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
value={formData.sl}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, sl: e.target.value }))}
|
||||||
|
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-red-500"
|
||||||
|
placeholder="0.00"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Take Profit 1 */}
|
||||||
|
<div className="mb-6 p-4 bg-gray-800/50 rounded-xl border border-gray-700">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<h3 className="text-sm font-medium text-gray-300">Take Profit 1</h3>
|
||||||
|
<span className="text-xs text-green-400">+${formatNumber(profitTP1, 2)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
value={formData.tp1}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, tp1: e.target.value }))}
|
||||||
|
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-green-500"
|
||||||
|
placeholder="TP1 Price"
|
||||||
|
/>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<span className="text-xs text-gray-400 min-w-[60px]">Allocation:</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="10"
|
||||||
|
max="100"
|
||||||
|
step="10"
|
||||||
|
value={formData.tp1Percentage}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, tp1Percentage: parseInt(e.target.value) }))}
|
||||||
|
className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-green-400 min-w-[35px] font-mono">{formData.tp1Percentage}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Take Profit 2 */}
|
||||||
|
<div className="mb-6 p-4 bg-gray-800/50 rounded-xl border border-gray-700">
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<h3 className="text-sm font-medium text-gray-300">Take Profit 2</h3>
|
||||||
|
<span className="text-xs text-green-400">+${formatNumber(profitTP2, 2)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
value={formData.tp2}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, tp2: e.target.value }))}
|
||||||
|
className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-green-500"
|
||||||
|
placeholder="TP2 Price"
|
||||||
|
/>
|
||||||
|
<div className="flex items-center space-x-3">
|
||||||
|
<span className="text-xs text-gray-400 min-w-[60px]">Allocation:</span>
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="10"
|
||||||
|
max="100"
|
||||||
|
step="10"
|
||||||
|
value={formData.tp2Percentage}
|
||||||
|
onChange={(e) => setFormData(prev => ({ ...prev, tp2Percentage: parseInt(e.target.value) }))}
|
||||||
|
className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
|
||||||
|
/>
|
||||||
|
<span className="text-xs text-green-400 min-w-[35px] font-mono">{formData.tp2Percentage}%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Profit Summary */}
|
||||||
|
<div className="mb-6 p-4 bg-gradient-to-r from-green-500/10 to-blue-500/10 rounded-xl border border-green-500/20">
|
||||||
|
<h3 className="text-sm font-medium text-gray-300 mb-3">Profit Summary</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-4 text-xs">
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-400">TP1 Profit:</span>
|
||||||
|
<span className="text-green-400">+${formatNumber(profitTP1, 2)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-400">TP2 Profit:</span>
|
||||||
|
<span className="text-green-400">+${formatNumber(profitTP2, 2)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="space-y-2">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-400">Total Profit:</span>
|
||||||
|
<span className="text-green-400 font-semibold">+${formatNumber(totalPotentialProfit, 2)}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<span className="text-gray-400">Max Loss:</span>
|
||||||
|
<span className="text-red-400">${formatNumber(Math.abs(lossAtSL), 2)}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Execute Button */}
|
||||||
|
<div className="flex space-x-3">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="flex-1 py-3 px-6 bg-gray-700 text-gray-300 rounded-xl hover:bg-gray-600 transition-all duration-200"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading || !formData.entry || !formData.tp1 || !formData.sl}
|
||||||
|
className={`flex-1 py-3 px-6 rounded-xl font-semibold transition-all duration-200 ${
|
||||||
|
loading || !formData.entry || !formData.tp1 || !formData.sl
|
||||||
|
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
|
||||||
|
: 'bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transform hover:scale-[1.02]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex items-center justify-center space-x-2">
|
||||||
|
<div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin"></div>
|
||||||
|
<span>Executing...</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
'Execute Trade'
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
382
components/TradeModal_new.tsx
Normal file
382
components/TradeModal_new.tsx
Normal file
@@ -0,0 +1,382 @@
|
|||||||
|
"use client"
|
||||||
|
import React, { useState, useEffect } from 'react'
|
||||||
|
|
||||||
|
interface TradeModalProps {
|
||||||
|
isOpen: boolean
|
||||||
|
onClose: () => void
|
||||||
|
tradeData: {
|
||||||
|
symbol: string
|
||||||
|
timeframe: string
|
||||||
|
entry: string
|
||||||
|
tp: string
|
||||||
|
sl: string
|
||||||
|
} | null
|
||||||
|
onExecute: (data: any) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
interface FormData {
|
||||||
|
entry: string
|
||||||
|
tp1: string
|
||||||
|
tp2: string
|
||||||
|
sl: string
|
||||||
|
positionValue: string
|
||||||
|
leverage: number
|
||||||
|
tradingCoin: string
|
||||||
|
tp1Percentage: number
|
||||||
|
tp2Percentage: number
|
||||||
|
}
|
||||||
|
|
||||||
|
const supportedCoins = [
|
||||||
|
{ symbol: 'SOL', name: 'Solana', icon: '◎', price: 159.5 },
|
||||||
|
{ symbol: 'USDC', name: 'USD Coin', icon: '$', price: 1.0 }
|
||||||
|
]
|
||||||
|
|
||||||
|
export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: TradeModalProps) {
|
||||||
|
console.log('🚀 TradeModal loaded with enhanced features - Version 2.0')
|
||||||
|
const [loading, setLoading] = useState(false)
|
||||||
|
const [walletBalance, setWalletBalance] = useState<any>(null)
|
||||||
|
const [formData, setFormData] = useState<FormData>({
|
||||||
|
entry: tradeData?.entry || '',
|
||||||
|
tp1: tradeData?.tp || '',
|
||||||
|
tp2: '',
|
||||||
|
sl: tradeData?.sl || '',
|
||||||
|
positionValue: '1000', // Position size in chosen coin
|
||||||
|
leverage: 3,
|
||||||
|
tradingCoin: 'SOL',
|
||||||
|
tp1Percentage: 50, // % of position to close at TP1
|
||||||
|
tp2Percentage: 50 // % of position to close at TP2
|
||||||
|
})
|
||||||
|
|
||||||
|
// Fetch wallet balance when modal opens
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
fetchWalletBalance()
|
||||||
|
}
|
||||||
|
}, [isOpen])
|
||||||
|
|
||||||
|
const fetchWalletBalance = async () => {
|
||||||
|
try {
|
||||||
|
const response = await fetch('/api/wallet/balance')
|
||||||
|
const data = await response.json()
|
||||||
|
if (data.success) {
|
||||||
|
setWalletBalance(data.balance)
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Failed to fetch wallet balance:', error)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Helper function to safely format numbers
|
||||||
|
const formatNumber = (value: number, decimals: number = 2): string => {
|
||||||
|
if (isNaN(value) || !isFinite(value)) return '0.00'
|
||||||
|
return value.toFixed(decimals)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Calculate derived values with proper error handling
|
||||||
|
const currentCoin = supportedCoins.find(coin => coin.symbol === formData.tradingCoin)
|
||||||
|
const coinPrice = currentCoin?.price || 159.5 // Default to SOL price
|
||||||
|
|
||||||
|
// Safe number parsing - position size in chosen coin
|
||||||
|
const positionSize = parseFloat(formData.positionValue) || 0
|
||||||
|
const positionValueUSD = positionSize * coinPrice
|
||||||
|
const leverageNum = formData.leverage || 1
|
||||||
|
const entryPrice = parseFloat(formData.entry) || 0
|
||||||
|
const tp1Price = parseFloat(formData.tp1) || 0
|
||||||
|
const tp2Price = parseFloat(formData.tp2) || 0
|
||||||
|
const slPrice = parseFloat(formData.sl) || 0
|
||||||
|
|
||||||
|
// Calculations with fallbacks
|
||||||
|
const leveragedValue = positionValueUSD * leverageNum
|
||||||
|
|
||||||
|
// P&L calculations with proper validation
|
||||||
|
const profitTP1 = (entryPrice > 0 && tp1Price > 0 && leveragedValue > 0) ?
|
||||||
|
((tp1Price - entryPrice) / entryPrice) * leveragedValue * (formData.tp1Percentage / 100) : 0
|
||||||
|
const profitTP2 = (entryPrice > 0 && tp2Price > 0 && leveragedValue > 0) ?
|
||||||
|
((tp2Price - entryPrice) / entryPrice) * leveragedValue * (formData.tp2Percentage / 100) : 0
|
||||||
|
const lossAtSL = (entryPrice > 0 && slPrice > 0 && leveragedValue > 0) ?
|
||||||
|
((slPrice - entryPrice) / entryPrice) * leveragedValue : 0
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (tradeData) {
|
||||||
|
setFormData((prev: FormData) => ({
|
||||||
|
...prev,
|
||||||
|
entry: tradeData.entry || '',
|
||||||
|
tp1: tradeData.tp || '',
|
||||||
|
sl: tradeData.sl || ''
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
}, [tradeData])
|
||||||
|
|
||||||
|
const handleSubmit = async (e: React.FormEvent) => {
|
||||||
|
e.preventDefault()
|
||||||
|
setLoading(true)
|
||||||
|
|
||||||
|
try {
|
||||||
|
await onExecute({
|
||||||
|
symbol: tradeData?.symbol,
|
||||||
|
timeframe: tradeData?.timeframe,
|
||||||
|
...formData,
|
||||||
|
positionSize,
|
||||||
|
leveragedValue
|
||||||
|
})
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Trade execution failed:', error)
|
||||||
|
} finally {
|
||||||
|
setLoading(false)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!isOpen || !tradeData) return null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
||||||
|
<div className="bg-gray-900 border border-gray-700 rounded-xl p-6 max-w-lg w-full max-h-[90vh] overflow-y-auto">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h3 className="text-xl font-bold text-white flex items-center">
|
||||||
|
<span className="w-8 h-8 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center mr-3">
|
||||||
|
💰
|
||||||
|
</span>
|
||||||
|
Execute Trade
|
||||||
|
</h3>
|
||||||
|
<button
|
||||||
|
onClick={onClose}
|
||||||
|
className="text-gray-400 hover:text-white transition-colors"
|
||||||
|
>
|
||||||
|
✕
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<form onSubmit={handleSubmit} className="space-y-4">
|
||||||
|
{/* Trade Details Section */}
|
||||||
|
<div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
|
||||||
|
<h4 className="text-sm font-medium text-gray-300 mb-3 flex items-center">
|
||||||
|
📊 Trade Setup
|
||||||
|
</h4>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs text-gray-400 mb-1">Symbol</label>
|
||||||
|
<div className="text-white font-medium">{tradeData?.symbol}</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs text-gray-400 mb-1">Timeframe</label>
|
||||||
|
<div className="text-white font-medium">{tradeData?.timeframe}</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Trading Coin Selection - Enhanced Visual Cards */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs text-gray-400 mb-2">Trading Coin</label>
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
{supportedCoins.map(coin => (
|
||||||
|
<button
|
||||||
|
key={coin.symbol}
|
||||||
|
type="button"
|
||||||
|
onClick={() => setFormData(prev => ({...prev, tradingCoin: coin.symbol}))}
|
||||||
|
className={`p-3 rounded-lg border text-left transition-all ${
|
||||||
|
formData.tradingCoin === coin.symbol
|
||||||
|
? 'border-blue-500 bg-blue-500/10'
|
||||||
|
: 'border-gray-600 bg-gray-800 hover:border-gray-500'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<span className="text-lg">{coin.icon}</span>
|
||||||
|
<span className={`font-medium ${
|
||||||
|
formData.tradingCoin === coin.symbol ? 'text-blue-400' : 'text-white'
|
||||||
|
}`}>
|
||||||
|
{coin.symbol}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="text-right">
|
||||||
|
<div className={`text-sm ${
|
||||||
|
formData.tradingCoin === coin.symbol ? 'text-blue-400' : 'text-gray-300'
|
||||||
|
}`}>
|
||||||
|
${coin.price}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Enhanced Position Size Section */}
|
||||||
|
<div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
|
||||||
|
<h4 className="text-sm font-medium text-gray-300 mb-3 flex items-center">
|
||||||
|
💵 Position Size ({formData.tradingCoin})
|
||||||
|
</h4>
|
||||||
|
|
||||||
|
{/* Position Size Input */}
|
||||||
|
<div className="mb-3">
|
||||||
|
<label className="block text-xs text-gray-400 mb-1">Position Size ({formData.tradingCoin})</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.001"
|
||||||
|
value={formData.positionValue}
|
||||||
|
onChange={(e) => setFormData(prev => ({...prev, positionValue: e.target.value}))}
|
||||||
|
className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white focus:border-blue-500 focus:outline-none"
|
||||||
|
placeholder="1,000"
|
||||||
|
/>
|
||||||
|
<div className="text-xs text-gray-400 mt-1">
|
||||||
|
≈ ${formatNumber(positionValueUSD)} USD
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Percentage Buttons */}
|
||||||
|
<div className="grid grid-cols-4 gap-2 mb-3">
|
||||||
|
{[25, 50, 75, 100].map(percentage => (
|
||||||
|
<button
|
||||||
|
key={percentage}
|
||||||
|
type="button"
|
||||||
|
onClick={() => {
|
||||||
|
if (walletBalance?.sol && formData.tradingCoin === 'SOL') {
|
||||||
|
const coinAmount = (walletBalance.sol * percentage) / 100
|
||||||
|
setFormData(prev => ({...prev, positionValue: coinAmount.toFixed(3)}))
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
className="py-2 px-3 text-sm bg-gray-600 hover:bg-gray-500 text-white rounded transition-colors"
|
||||||
|
>
|
||||||
|
{percentage}%
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Leverage Section */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<label className="block text-xs text-gray-400 mb-2">Leverage: {formData.leverage}x</label>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="1"
|
||||||
|
max="10"
|
||||||
|
step="1"
|
||||||
|
value={formData.leverage}
|
||||||
|
onChange={(e) => setFormData(prev => ({...prev, leverage: parseInt(e.target.value)}))}
|
||||||
|
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer slider"
|
||||||
|
/>
|
||||||
|
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||||
|
<span>1x</span>
|
||||||
|
<span>5x</span>
|
||||||
|
<span>10x</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-xs text-gray-400 mt-2">
|
||||||
|
Leveraged Value: ${formatNumber(leveragedValue)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Enhanced Price Levels */}
|
||||||
|
<div>
|
||||||
|
<label className="block text-xs text-gray-400 mb-2">Entry Price</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
value={formData.entry}
|
||||||
|
onChange={(e) => setFormData(prev => ({...prev, entry: e.target.value}))}
|
||||||
|
className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:border-blue-500 focus:outline-none mb-4"
|
||||||
|
placeholder="159.5"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Take Profit 1 with Profit Display */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<label className="block text-xs text-gray-400 mb-1">Take Profit 1 (50% of position)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
value={formData.tp1}
|
||||||
|
onChange={(e) => setFormData(prev => ({...prev, tp1: e.target.value}))}
|
||||||
|
className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:border-green-500 focus:outline-none"
|
||||||
|
placeholder="160.5"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Profit Percentage Slider for TP1 */}
|
||||||
|
<div className="mt-2">
|
||||||
|
<div className="flex justify-between items-center mb-1">
|
||||||
|
<span className="text-xs text-gray-400">Profit %</span>
|
||||||
|
<span className="text-xs text-green-400 font-medium">
|
||||||
|
Profit: $1.50
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="relative">
|
||||||
|
<input
|
||||||
|
type="range"
|
||||||
|
min="10"
|
||||||
|
max="90"
|
||||||
|
step="10"
|
||||||
|
value={formData.tp1Percentage}
|
||||||
|
onChange={(e) => setFormData(prev => ({...prev, tp1Percentage: parseInt(e.target.value)}))}
|
||||||
|
className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
|
||||||
|
style={{
|
||||||
|
background: `linear-gradient(to right, #10b981 0%, #10b981 ${formData.tp1Percentage}%, #374151 ${formData.tp1Percentage}%, #374151 100%)`
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="flex justify-between text-xs text-gray-500 mt-1">
|
||||||
|
<span>10%</span>
|
||||||
|
<span>90%</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Take Profit 2 */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<label className="block text-xs text-gray-400 mb-1">Take Profit 2 (50% of position)</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
value={formData.tp2}
|
||||||
|
onChange={(e) => setFormData(prev => ({...prev, tp2: e.target.value}))}
|
||||||
|
className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:border-green-500 focus:outline-none"
|
||||||
|
placeholder="162"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Stop Loss */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<label className="block text-xs text-gray-400 mb-1">Stop Loss</label>
|
||||||
|
<input
|
||||||
|
type="number"
|
||||||
|
step="0.01"
|
||||||
|
value={formData.sl}
|
||||||
|
onChange={(e) => setFormData(prev => ({...prev, sl: e.target.value}))}
|
||||||
|
className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:border-red-500 focus:outline-none"
|
||||||
|
placeholder="158.5"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Submit Buttons */}
|
||||||
|
<div className="flex space-x-3 pt-4">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
onClick={onClose}
|
||||||
|
className="flex-1 py-2 px-4 bg-gray-700 text-gray-300 rounded-lg hover:bg-gray-600 transition-colors"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="submit"
|
||||||
|
disabled={loading}
|
||||||
|
className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all ${
|
||||||
|
loading
|
||||||
|
? 'bg-gray-700 text-gray-400 cursor-not-allowed'
|
||||||
|
: 'bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transform hover:scale-[1.02]'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex items-center justify-center space-x-2">
|
||||||
|
<div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin"></div>
|
||||||
|
<span>Executing...</span>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
'Execute Trade'
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
0
components/TradingChart.tsx
Normal file
0
components/TradingChart.tsx
Normal file
16
package-lock.json
generated
16
package-lock.json
generated
@@ -13,6 +13,7 @@
|
|||||||
"@solana/web3.js": "^1.98.2",
|
"@solana/web3.js": "^1.98.2",
|
||||||
"bs58": "^6.0.0",
|
"bs58": "^6.0.0",
|
||||||
"dotenv": "^17.2.0",
|
"dotenv": "^17.2.0",
|
||||||
|
"lightweight-charts": "^5.0.8",
|
||||||
"next": "15.3.5",
|
"next": "15.3.5",
|
||||||
"node-fetch": "^3.3.2",
|
"node-fetch": "^3.3.2",
|
||||||
"openai": "^5.8.3",
|
"openai": "^5.8.3",
|
||||||
@@ -5744,6 +5745,12 @@
|
|||||||
"node": "> 0.1.90"
|
"node": "> 0.1.90"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/fancy-canvas": {
|
||||||
|
"version": "2.1.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/fancy-canvas/-/fancy-canvas-2.1.0.tgz",
|
||||||
|
"integrity": "sha512-nifxXJ95JNLFR2NgRV4/MxVP45G9909wJTEKz5fg/TZS20JJZA6hfgRVh/bC9bwl2zBtBNcYPjiBE4njQHVBwQ==",
|
||||||
|
"license": "MIT"
|
||||||
|
},
|
||||||
"node_modules/fast-deep-equal": {
|
"node_modules/fast-deep-equal": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
|
||||||
@@ -7397,6 +7404,15 @@
|
|||||||
"node": ">= 0.8.0"
|
"node": ">= 0.8.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/lightweight-charts": {
|
||||||
|
"version": "5.0.8",
|
||||||
|
"resolved": "https://registry.npmjs.org/lightweight-charts/-/lightweight-charts-5.0.8.tgz",
|
||||||
|
"integrity": "sha512-dNBK5TlNcG78RUnxYRAZP4XpY5bkp3EE0PPjFFPkdIZ8RvnvL2JLgTb1BLh40trHhgJl51b1bCz8678GpnKvIw==",
|
||||||
|
"license": "Apache-2.0",
|
||||||
|
"dependencies": {
|
||||||
|
"fancy-canvas": "2.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/lilconfig": {
|
"node_modules/lilconfig": {
|
||||||
"version": "3.1.3",
|
"version": "3.1.3",
|
||||||
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
|
"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
|
||||||
|
|||||||
@@ -42,6 +42,7 @@
|
|||||||
"@solana/web3.js": "^1.98.2",
|
"@solana/web3.js": "^1.98.2",
|
||||||
"bs58": "^6.0.0",
|
"bs58": "^6.0.0",
|
||||||
"dotenv": "^17.2.0",
|
"dotenv": "^17.2.0",
|
||||||
|
"lightweight-charts": "^5.0.8",
|
||||||
"next": "15.3.5",
|
"next": "15.3.5",
|
||||||
"node-fetch": "^3.3.2",
|
"node-fetch": "^3.3.2",
|
||||||
"openai": "^5.8.3",
|
"openai": "^5.8.3",
|
||||||
|
|||||||
Reference in New Issue
Block a user