FINAL FIX: Docker API URL resolution for internal service communication
- Fixed internal API calls in Docker environment to use port 3000 instead of 9000 - Added DOCKER_ENV detection to properly route internal fetch requests - Resolves ECONNREFUSED errors when APIs try to call each other within container - Trade validation now works correctly in Docker: 5 USD position validates properly - Successfully tested: amountUSD field properly passed through validation pipeline - Both development and Docker environments now fully functional
This commit is contained in:
mindesbunister
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>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user