root/trading_bot_v3
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Fine-tune trading UI with coin dropdown selection

Browse Source 
- Remove simulation mode and quick USDC swap sections
- Replace trading pairs with two dropdown fields (From → To)
- Add coin selection for perpetuals with leverage
- Enhanced UX with coin swap button and dynamic labels
- Always use real Jupiter DEX execution

- 7 supported coins: SOL, USDC, USDT, BTC, ETH, RAY, ORCA
- Intuitive From/To dropdowns for spot trading
- Dedicated perpetual coin selection
- Real-time label updates based on selection

- Removed confusing simulation/real toggle
- Streamlined execution always via Jupiter DEX
- Cleaner UI focused on real trading
- Better risk warnings for actual trades

 Tested:
- Real SOL→USDC swap: TX 59QpmZWFnuHFNCVKujaq9tyJThy3fFTHpPSrug2vPQHYnE1Mk33wfwgHbc3oaW8E6m7kH8K7xpExESdV73LSqLT9
- Perpetual position: SOL 5x leverage simulation ready
- All APIs working correctly in Docker Compose v2
This commit is contained in:
mindesbunister
2025-07-14 15:45:10 +02:00
parent 73a3162ecf
commit f1e0be8c79
1 changed files with 125 additions and 218 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
components/TradeExecutionPanel.js
View File

@@ -10,24 +10,32 @@ export default function TradeExecutionPanel({ analysis, symbol = 'SOL' }) {
const [executionResult, setExecutionResult] = useState(null)
const [balance, setBalance] = useState(null)
// Trading mode and pair selection
// Trading mode and coin selection
const [tradingMode, setTradingMode] = useState('SPOT') // 'SPOT' or 'PERP'
const [tradingPair, setTradingPair] = useState('SOL/USDC') // SOL/USDC or USDC/SOL
const [fromCoin, setFromCoin] = useState('SOL')
const [toCoin, setToCoin] = useState('USDC')
const [perpCoin, setPerpCoin] = useState('SOL') // For perpetuals
// TP/SL functionality
const [enableStopLoss, setEnableStopLoss] = useState(false)
const [stopLoss, setStopLoss] = useState('')
const [enableTakeProfit, setEnableTakeProfit] = useState(false)
const [takeProfit, setTakeProfit] = useState('')
const [useRealDEX, setUseRealDEX] = useState(false)
// Perp trading settings
const [leverage, setLeverage] = useState(1)
const [perpSize, setPerpSize] = useState('')
// USDC stablecoin features
const [quickSwapMode, setQuickSwapMode] = useState(false)
const [usdcSwapAmount, setUsdcSwapAmount] = useState('')
// Available coins for trading
const availableCoins = [
{ symbol: 'SOL', name: 'Solana', icon: '🟣' },
{ symbol: 'USDC', name: 'USD Coin', icon: '💵' },
{ symbol: 'USDT', name: 'Tether', icon: '💶' },
{ symbol: 'BTC', name: 'Bitcoin', icon: '₿' },
{ symbol: 'ETH', name: 'Ethereum', icon: '🔷' },
{ symbol: 'RAY', name: 'Raydium', icon: '⚡' },
{ symbol: 'ORCA', name: 'Orca', icon: '🐋' }
]
// Auto-fill TP/SL from AI analysis
useEffect(() => {
@@ -76,62 +84,6 @@ export default function TradeExecutionPanel({ analysis, symbol = 'SOL' }) {
}
}
const executeQuickUSDCSwap = async () => {
if (!usdcSwapAmount || parseFloat(usdcSwapAmount) <= 0) {
alert('Please enter a valid USDC swap amount')
return
}
setIsExecuting(true)
setExecutionResult(null)
try {
const swapData = {
symbol: 'SOL',
side: 'SELL', // Sell SOL for USDC
amount: parseFloat(usdcSwapAmount),
tradingPair: 'SOL/USDC',
tradingMode: 'SPOT',
useRealDEX: true,
quickSwap: true
}
const response = await fetch('/api/trading/execute-dex', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(swapData)
})
const result = await response.json()
if (result.success) {
setExecutionResult({
success: true,
trade: result.trade,
message: `✅ Quick swapped ${usdcSwapAmount} SOL to USDC`
})
await fetchBalance()
setUsdcSwapAmount('')
} else {
setExecutionResult({
success: false,
error: result.error,
message: result.message
})
}
} catch (error) {
setExecutionResult({
success: false,
error: 'Network error',
message: 'Failed to execute USDC swap. Please try again.'
})
} finally {
setIsExecuting(false)
}
}
const executeTrade = async () => {
if (!amount || parseFloat(amount) <= 0) {
alert('Please enter a valid amount')
@@ -148,14 +100,16 @@ export default function TradeExecutionPanel({ analysis, symbol = 'SOL' }) {
// Prepare trade data based on trading mode
let tradeData = {
symbol,
symbol: tradingMode === 'PERP' ? perpCoin : fromCoin,
side: tradeType,
amount: parseFloat(amount),
price: tradePrice,
orderType: tradePrice ? 'limit' : 'market',
useRealDEX: useRealDEX,
useRealDEX: true, // Always use real DEX
tradingMode: tradingMode,
tradingPair: tradingPair
tradingPair: tradingMode === 'PERP' ? `${perpCoin}-PERP` : `${fromCoin}/${toCoin}`,
fromCoin: fromCoin,
toCoin: toCoin
}
// Add TP/SL if enabled
@@ -170,15 +124,14 @@ export default function TradeExecutionPanel({ analysis, symbol = 'SOL' }) {
if (tradingMode === 'PERP') {
tradeData.leverage = leverage
tradeData.perpSize = perpSize ? parseFloat(perpSize) : parseFloat(amount)
tradeData.perpCoin = perpCoin
}
// Determine API endpoint based on trading mode
let apiEndpoint = '/api/trading/execute'
let apiEndpoint = '/api/trading/execute-dex'
if (tradingMode === 'PERP') {
apiEndpoint = '/api/trading/execute-perp'
} else if (useRealDEX || quickSwapMode) {
apiEndpoint = '/api/trading/execute-dex'
}
const response = await fetch(apiEndpoint, {
@@ -319,42 +272,89 @@ export default function TradeExecutionPanel({ analysis, symbol = 'SOL' }) {
</div>
</div>
{/* Trading Pair Selection (for Spot) */}
{/* Coin Selection for Spot Trading */}
{tradingMode === 'SPOT' && (
<div className="space-y-3">
<label className="block text-sm font-medium text-gray-300">Trading Pair</label>
<div className="grid grid-cols-2 gap-2">
<button
onClick={() => setTradingPair('SOL/USDC')}
className={`py-2 px-3 rounded-lg font-medium transition-colors text-sm ${
tradingPair === 'SOL/USDC'
? 'bg-purple-600 text-white'
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
}`}
<label className="block text-sm font-medium text-gray-300">Swap Coins</label>
<div className="grid grid-cols-3 gap-2 items-center">
{/* From Coin */}
<div>
<label className="block text-xs text-gray-400 mb-1">From</label>
<select
value={fromCoin}
onChange={(e) => setFromCoin(e.target.value)}
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
>
SOL → USDC
</button>
{availableCoins.map(coin => (
<option key={coin.symbol} value={coin.symbol}>
{coin.icon} {coin.symbol}
</option>
))}
</select>
</div>
{/* Swap Arrow */}
<div className="text-center">
<button
onClick={() => setTradingPair('USDC/SOL')}
className={`py-2 px-3 rounded-lg font-medium transition-colors text-sm ${
tradingPair === 'USDC/SOL'
? 'bg-green-600 text-white'
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
}`}
onClick={() => {
const temp = fromCoin
setFromCoin(toCoin)
setToCoin(temp)
}}
className="p-2 bg-gray-600 hover:bg-gray-500 rounded-lg transition-colors"
title="Swap coins"
>
USDC → SOL
🔄
</button>
</div>
<div className="text-xs text-gray-400">
{tradingPair === 'SOL/USDC' ? 'Swap SOL for USDC stablecoin' : 'Buy SOL with USDC'}
{/* To Coin */}
<div>
<label className="block text-xs text-gray-400 mb-1">To</label>
<select
value={toCoin}
onChange={(e) => setToCoin(e.target.value)}
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
>
{availableCoins.map(coin => (
<option key={coin.symbol} value={coin.symbol}>
{coin.icon} {coin.symbol}
</option>
))}
</select>
</div>
</div>
<div className="text-xs text-gray-400 text-center">
Swap {fromCoin} → {toCoin} via Jupiter DEX
</div>
</div>
)}
{/* Leverage Selection (for Perps) */}
{/* Coin Selection and Leverage for Perpetuals */}
{tradingMode === 'PERP' && (
<div className="space-y-3">
<label className="block text-sm font-medium text-gray-300">Leverage</label>
<div className="space-y-4">
{/* Perpetual Coin Selection */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">Perpetual Asset</label>
<select
value={perpCoin}
onChange={(e) => setPerpCoin(e.target.value)}
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-orange-500"
>
{availableCoins.filter(coin => coin.symbol !== 'USDC' && coin.symbol !== 'USDT').map(coin => (
<option key={coin.symbol} value={coin.symbol}>
{coin.icon} {coin.symbol} Perpetual
</option>
))}
</select>
<div className="text-xs text-gray-400 mt-1">
Choose the asset you want to trade with leverage
</div>
</div>
{/* Leverage Selection */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">Leverage</label>
<div className="grid grid-cols-4 gap-2">
{[1, 2, 5, 10].map(lev => (
<button
@@ -370,10 +370,11 @@ export default function TradeExecutionPanel({ analysis, symbol = 'SOL' }) {
</button>
))}
</div>
<div className="text-xs text-gray-400">
<div className="text-xs text-gray-400 mt-1">
⚠️ Higher leverage = Higher risk. Max 10x for safety.
</div>
</div>
</div>
)}
{/* Trade Type Selection */}
@@ -403,7 +404,10 @@ export default function TradeExecutionPanel({ analysis, symbol = 'SOL' }) {
{/* Amount Input */}
<div>
<label className="block text-sm font-medium text-gray-300 mb-2">
{tradingMode === 'PERP' ? 'Position Size (USD)' : `Amount (${tradingPair.split('/')[0]})`}
{tradingMode === 'PERP'
? `Position Size (${perpCoin})`
: `Amount (${fromCoin})`
}
</label>
<input
type="number"
@@ -414,6 +418,12 @@ export default function TradeExecutionPanel({ analysis, symbol = 'SOL' }) {
min="0"
className="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
<div className="text-xs text-gray-400 mt-1">
{tradingMode === 'PERP'
? `Enter the ${perpCoin} position size to trade with ${leverage}x leverage`
: `Enter the amount of ${fromCoin} to swap for ${toCoin}`
}
</div>
</div>
{/* Price Selection */}
@@ -522,116 +532,13 @@ export default function TradeExecutionPanel({ analysis, symbol = 'SOL' }) {
</div>
</div>
{/* DEX Selection */}
<div className="space-y-3 border border-gray-600 rounded-lg p-4">
<h3 className="text-sm font-bold text-white">Execution Method</h3>
<div className="grid grid-cols-2 gap-2">
<button
onClick={() => setUseRealDEX(false)}
className={`py-2 px-3 rounded-lg font-medium transition-colors text-sm ${
!useRealDEX
? 'bg-blue-600 text-white'
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
}`}
>
📊 Simulation
</button>
<button
onClick={() => setUseRealDEX(true)}
className={`py-2 px-3 rounded-lg font-medium transition-colors text-sm ${
useRealDEX
? 'bg-purple-600 text-white'
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
}`}
>
🚀 Jupiter DEX
</button>
</div>
<div className="text-xs text-gray-400">
{useRealDEX
? '⚠️ Real DEX trading uses your actual SOL/USDC and costs gas fees'
: '🎮 Simulation mode for testing strategies without real trades'
}
</div>
</div>
{/* Quick USDC Swap - Spot mode only */}
{tradingMode === 'SPOT' && (
<div className="space-y-3 border border-green-600 rounded-lg p-4 bg-green-900/10">
<h3 className="text-sm font-bold text-green-400 flex items-center gap-2">
💱 Quick USDC Swap
<span className="text-xs bg-green-600 text-white px-2 py-1 rounded">STABLE</span>
</h3>
<div className="text-xs text-gray-300 mb-3">
Instantly convert SOL to USDC stablecoin to lock in profits or avoid volatility
</div>
<div className="flex gap-2">
<input
type="number"
value={usdcSwapAmount}
onChange={(e) => setUsdcSwapAmount(e.target.value)}
placeholder="SOL amount"
step="0.01"
min="0"
className="flex-1 px-3 py-2 bg-gray-700 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-green-500"
/>
<button
onClick={executeQuickUSDCSwap}
disabled={isExecuting || !usdcSwapAmount}
className="px-4 py-2 bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-white font-medium rounded-lg transition-colors text-sm"
>
{isExecuting ? '⏳' : '💱 Swap'}
</button>
</div>
<div className="text-xs text-gray-400">
Real-time swap via Jupiter DEX • Low slippage • Instant execution
</div>
</div>
)}
{/* Jupiter Perpetuals Integration - Perp mode only */}
{tradingMode === 'PERP' && (
<div className="space-y-3 border border-orange-600 rounded-lg p-4 bg-orange-900/10">
<h3 className="text-sm font-bold text-orange-400 flex items-center gap-2">
⚡ Jupiter Perpetuals
<span className="text-xs bg-orange-600 text-white px-2 py-1 rounded">LEVERAGE</span>
</h3>
<div className="text-xs text-gray-300 mb-3">
Trade with leverage on Jupiter's perpetual DEX • Long or Short any asset
</div>
<div className="grid grid-cols-2 gap-2 mb-3">
<div className="text-xs">
<div className="text-gray-400">Leverage:</div>
<div className="text-white font-bold">{leverage}x</div>
</div>
<div className="text-xs">
<div className="text-gray-400">Liquidation Risk:</div>
<div className={`font-bold ${leverage <= 2 ? 'text-green-400' : leverage <= 5 ? 'text-yellow-400' : 'text-red-400'}`}>
{leverage <= 2 ? 'Low' : leverage <= 5 ? 'Medium' : 'High'}
</div>
</div>
</div>
<div className="text-xs text-orange-400 bg-orange-900/20 p-2 rounded border border-orange-700">
🚧 Jupiter Perpetuals integration in development. Currently using simulation mode.
</div>
</div>
)}
{/* Execute Button */}
<button
onClick={executeTrade}
disabled={isExecuting || !amount}
className={`w-full py-3 px-4 rounded-lg font-bold text-white transition-colors disabled:opacity-50 disabled:cursor-not-allowed ${getTradeButtonColor()}`}
>
{isExecuting ? 'Executing...' : `${useRealDEX ? '🚀 Execute' : '🎮 Simulate'} ${tradeType} Order${(enableStopLoss || enableTakeProfit) ? ' + TP/SL' : ''}`}
{isExecuting ? 'Executing...' : `🚀 Execute ${tradeType} ${tradingMode === 'PERP' ? `${perpCoin} ${leverage}x` : `${fromCoin}→${toCoin}`}${(enableStopLoss || enableTakeProfit) ? ' + TP/SL' : ''}`}
</button>
{/* Execution Result */}
@@ -655,7 +562,7 @@ export default function TradeExecutionPanel({ analysis, symbol = 'SOL' }) {
{/* Risk Warning */}
<div className="text-xs text-gray-500 border-t border-gray-700 pt-3">
⚠️ Trading involves significant risk. This is a simulated trading environment using Bitquery data.
⚠️ Trading involves significant risk of loss. Real trades executed via Jupiter DEX using your actual wallet funds.
</div>
</div>
)