2db2be241b
- 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
271 lines
9.0 KiB
TypeScript
271 lines
9.0 KiB
TypeScript
'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>
|
|
)
|
|
}
|