0e3a2d7255
- Add 'You're paying' and 'You're receiving' sections with proper token dropdowns - Implement balance display and MAX button functionality - Add automatic receiving amount calculation based on paying amount - Enhance token selector with icons, names, and balance information - Improve leverage position value calculations and risk warnings - Update trade execution to use new paying/receiving token structure - Maintain all existing functionality including stop loss, take profit, and position management This creates a more intuitive and professional trading interface that matches Jupiter's UX patterns.
612 lines
21 KiB
JavaScript
612 lines
21 KiB
JavaScript
'use client'
|
||
import React, { useState, useEffect } from 'react'
|
||
|
||
export default function TradeExecutionPanel({ analysis, symbol = 'SOL' }) {
|
||
const [tradeType, setTradeType] = useState('BUY')
|
||
const [amount, setAmount] = useState('')
|
||
const [customPrice, setCustomPrice] = useState('')
|
||
const [useRecommendedPrice, setUseRecommendedPrice] = useState(true)
|
||
const [isExecuting, setIsExecuting] = useState(false)
|
||
const [executionResult, setExecutionResult] = useState(null)
|
||
const [balance, setBalance] = useState(null)
|
||
|
||
// Trading mode and coin selection
|
||
const [tradingMode, setTradingMode] = useState('SPOT') // 'SPOT' or 'PERP'
|
||
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('')
|
||
|
||
// Perp trading settings
|
||
const [leverage, setLeverage] = useState(1)
|
||
const [perpSize, setPerpSize] = 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(() => {
|
||
if (analysis) {
|
||
if (analysis.stopLoss?.price) {
|
||
setStopLoss(analysis.stopLoss.price.toString())
|
||
setEnableStopLoss(true)
|
||
}
|
||
if (analysis.takeProfits?.tp1?.price) {
|
||
setTakeProfit(analysis.takeProfits.tp1.price.toString())
|
||
setEnableTakeProfit(true)
|
||
}
|
||
// Set trade type based on analysis recommendation
|
||
if (analysis.recommendation === 'BUY' || analysis.sentiment === 'BULLISH') {
|
||
setTradeType('BUY')
|
||
} else if (analysis.recommendation === 'SELL' || analysis.sentiment === 'BEARISH') {
|
||
setTradeType('SELL')
|
||
}
|
||
}
|
||
}, [analysis])
|
||
|
||
// Initialize coin selection based on symbol prop
|
||
useEffect(() => {
|
||
if (symbol && availableCoins.find(coin => coin.symbol === symbol)) {
|
||
setFromCoin(symbol)
|
||
setPerpCoin(symbol)
|
||
// If it's not a stablecoin, trade it against USDC
|
||
if (symbol !== 'USDC' && symbol !== 'USDT') {
|
||
setToCoin('USDC')
|
||
}
|
||
}
|
||
}, [symbol])
|
||
|
||
// Get recommended price from analysis
|
||
const getRecommendedPrice = () => {
|
||
if (!analysis) return null
|
||
|
||
if (analysis.recommendation === 'BUY' && analysis.entry?.price) {
|
||
return analysis.entry.price
|
||
} else if (analysis.recommendation === 'SELL' && analysis.entry?.price) {
|
||
return analysis.entry.price
|
||
}
|
||
|
||
return null
|
||
}
|
||
|
||
const recommendedPrice = getRecommendedPrice()
|
||
|
||
// Fetch balance on component mount
|
||
useEffect(() => {
|
||
fetchBalance()
|
||
}, [])
|
||
|
||
const fetchBalance = async () => {
|
||
try {
|
||
const response = await fetch('/api/trading/balance')
|
||
const data = await response.json()
|
||
|
||
if (data.success) {
|
||
setBalance(data.balance)
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to fetch balance:', error)
|
||
}
|
||
}
|
||
|
||
const executeTrade = async () => {
|
||
if (!amount || parseFloat(amount) <= 0) {
|
||
alert('Please enter a valid amount')
|
||
return
|
||
}
|
||
|
||
setIsExecuting(true)
|
||
setExecutionResult(null)
|
||
|
||
try {
|
||
const tradePrice = useRecommendedPrice && recommendedPrice
|
||
? recommendedPrice
|
||
: customPrice ? parseFloat(customPrice) : undefined
|
||
|
||
// Prepare trade data based on trading mode
|
||
let tradeData = {
|
||
symbol: tradingMode === 'PERP' ? perpCoin : fromCoin,
|
||
side: tradeType,
|
||
amount: parseFloat(amount),
|
||
price: tradePrice,
|
||
orderType: tradePrice ? 'limit' : 'market',
|
||
useRealDEX: true, // Always use real DEX
|
||
tradingMode: tradingMode,
|
||
tradingPair: tradingMode === 'PERP' ? `${perpCoin}-PERP` : `${fromCoin}/${toCoin}`,
|
||
fromCoin: fromCoin,
|
||
toCoin: toCoin
|
||
}
|
||
|
||
// Add TP/SL if enabled
|
||
if (enableStopLoss && stopLoss) {
|
||
tradeData.stopLoss = parseFloat(stopLoss)
|
||
}
|
||
if (enableTakeProfit && takeProfit) {
|
||
tradeData.takeProfit = parseFloat(takeProfit)
|
||
}
|
||
|
||
// Add perpetuals specific data
|
||
if (tradingMode === 'PERP') {
|
||
tradeData.leverage = leverage
|
||
tradeData.perpSize = perpSize ? parseFloat(perpSize) : parseFloat(amount)
|
||
tradeData.perpCoin = perpCoin
|
||
}
|
||
|
||
// Determine API endpoint based on trading mode and order type
|
||
let apiEndpoint = '/api/trading/execute-dex'
|
||
|
||
if (tradingMode === 'PERP') {
|
||
apiEndpoint = '/api/trading/execute-perp'
|
||
} else if (tradePrice) {
|
||
// Limit orders go through the main trading API
|
||
apiEndpoint = '/api/trading'
|
||
}
|
||
|
||
const response = await fetch(apiEndpoint, {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify(tradeData)
|
||
})
|
||
|
||
const result = await response.json()
|
||
|
||
if (result.success) {
|
||
// Check if this was a limit order creation
|
||
if (result.type === 'limit_order_created') {
|
||
setExecutionResult({
|
||
success: true,
|
||
order: result.order,
|
||
type: 'limit_order',
|
||
message: result.message
|
||
})
|
||
} else {
|
||
setExecutionResult({
|
||
success: true,
|
||
trade: result.trade,
|
||
message: result.message
|
||
})
|
||
}
|
||
// Refresh balance after successful trade
|
||
await fetchBalance()
|
||
} else {
|
||
setExecutionResult({
|
||
success: false,
|
||
error: result.error,
|
||
message: result.message
|
||
})
|
||
}
|
||
} catch (error) {
|
||
setExecutionResult({
|
||
success: false,
|
||
error: 'Network error',
|
||
message: 'Failed to execute trade. Please try again.'
|
||
})
|
||
} finally {
|
||
setIsExecuting(false)
|
||
}
|
||
}
|
||
|
||
const getTradeButtonColor = () => {
|
||
if (tradeType === 'BUY') return 'bg-green-600 hover:bg-green-700'
|
||
return 'bg-red-600 hover:bg-red-700'
|
||
}
|
||
|
||
const getRecommendationColor = () => {
|
||
if (!analysis) return 'text-gray-400'
|
||
|
||
switch (analysis.recommendation) {
|
||
case 'BUY': return 'text-green-400'
|
||
case 'SELL': return 'text-red-400'
|
||
default: return 'text-yellow-400'
|
||
}
|
||
}
|
||
|
||
return (
|
||
<div className="card card-gradient p-6 space-y-6">
|
||
<div className="flex items-center justify-between">
|
||
<h2 className="text-xl font-bold text-white">Execute Trade</h2>
|
||
<div className="text-sm text-gray-400">
|
||
{symbol} Trading
|
||
</div>
|
||
</div>
|
||
|
||
{/* Balance Display */}
|
||
{balance && (
|
||
<div className="bg-gray-800 rounded-lg p-4">
|
||
<h3 className="text-sm font-medium text-gray-300 mb-2">Portfolio Balance</h3>
|
||
<div className="flex justify-between items-center">
|
||
<span className="text-lg font-bold text-white">
|
||
${balance.totalValue?.toFixed(2)}
|
||
</span>
|
||
<span className="text-sm text-gray-400">
|
||
Available: ${balance.availableBalance?.toFixed(2)}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* AI Recommendation Display */}
|
||
{analysis && (
|
||
<div className="bg-gray-800 rounded-lg p-4">
|
||
<h3 className="text-sm font-medium text-gray-300 mb-2">AI Recommendation</h3>
|
||
<div className="flex items-center justify-between mb-2">
|
||
<span className={`font-bold text-lg ${getRecommendationColor()}`}>
|
||
{analysis.recommendation}
|
||
</span>
|
||
<span className="text-sm text-gray-400">
|
||
{analysis.confidence}% confidence
|
||
</span>
|
||
</div>
|
||
{recommendedPrice && (
|
||
<div className="text-sm text-gray-300">
|
||
Entry: ${recommendedPrice.toFixed(4)}
|
||
{analysis.entry?.buffer && (
|
||
<span className="text-gray-400 ml-1">({analysis.entry.buffer})</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
{analysis.stopLoss && (
|
||
<div className="text-sm text-gray-300">
|
||
Stop Loss: ${analysis.stopLoss.price.toFixed(4)}
|
||
</div>
|
||
)}
|
||
{analysis.takeProfits?.tp1 && (
|
||
<div className="text-sm text-gray-300">
|
||
TP1: ${analysis.takeProfits.tp1.price.toFixed(4)}
|
||
</div>
|
||
)}
|
||
<div className="text-xs text-gray-400 mt-2">
|
||
{analysis.reasoning}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Trading Mode Selection */}
|
||
<div className="space-y-3">
|
||
<label className="block text-sm font-medium text-gray-300">Trading Mode</label>
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<button
|
||
onClick={() => setTradingMode('SPOT')}
|
||
className={`py-2 px-4 rounded-lg font-medium transition-colors text-sm ${
|
||
tradingMode === 'SPOT'
|
||
? 'bg-blue-600 text-white'
|
||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||
}`}
|
||
>
|
||
💱 Spot Trading
|
||
</button>
|
||
<button
|
||
onClick={() => setTradingMode('PERP')}
|
||
className={`py-2 px-4 rounded-lg font-medium transition-colors text-sm ${
|
||
tradingMode === 'PERP'
|
||
? 'bg-orange-600 text-white'
|
||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||
}`}
|
||
>
|
||
⚡ Perpetuals
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Coin Selection for Spot Trading */}
|
||
{tradingMode === 'SPOT' && (
|
||
<div className="space-y-3">
|
||
<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"
|
||
>
|
||
{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={() => {
|
||
const temp = fromCoin
|
||
setFromCoin(toCoin)
|
||
setToCoin(temp)
|
||
}}
|
||
className="p-2 bg-gray-600 hover:bg-gray-500 rounded-lg transition-colors"
|
||
title="Swap coins"
|
||
>
|
||
🔄
|
||
</button>
|
||
</div>
|
||
|
||
{/* 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>
|
||
)}
|
||
|
||
{/* Coin Selection and Leverage for Perpetuals */}
|
||
{tradingMode === 'PERP' && (
|
||
<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
|
||
key={lev}
|
||
onClick={() => setLeverage(lev)}
|
||
className={`py-2 px-3 rounded-lg font-medium transition-colors text-sm ${
|
||
leverage === lev
|
||
? 'bg-orange-600 text-white'
|
||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||
}`}
|
||
>
|
||
{lev}x
|
||
</button>
|
||
))}
|
||
</div>
|
||
<div className="text-xs text-gray-400 mt-1">
|
||
⚠️ Higher leverage = Higher risk. Max 10x for safety.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Trade Type Selection */}
|
||
<div className="grid grid-cols-2 gap-2">
|
||
<button
|
||
onClick={() => setTradeType('BUY')}
|
||
className={`py-2 px-4 rounded-lg font-medium transition-colors ${
|
||
tradeType === 'BUY'
|
||
? 'bg-green-600 text-white'
|
||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||
}`}
|
||
>
|
||
{tradingMode === 'PERP' ? 'LONG' : 'BUY'}
|
||
</button>
|
||
<button
|
||
onClick={() => setTradeType('SELL')}
|
||
className={`py-2 px-4 rounded-lg font-medium transition-colors ${
|
||
tradeType === 'SELL'
|
||
? 'bg-red-600 text-white'
|
||
: 'bg-gray-700 text-gray-300 hover:bg-gray-600'
|
||
}`}
|
||
>
|
||
{tradingMode === 'PERP' ? 'SHORT' : 'SELL'}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Amount Input */}
|
||
<div>
|
||
<label className="block text-sm font-medium text-gray-300 mb-2">
|
||
{tradingMode === 'PERP'
|
||
? `Position Size (${perpCoin})`
|
||
: `Amount (${fromCoin})`
|
||
}
|
||
</label>
|
||
<input
|
||
type="number"
|
||
value={amount}
|
||
onChange={(e) => setAmount(e.target.value)}
|
||
placeholder="0.00"
|
||
step="0.001"
|
||
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 */}
|
||
<div className="space-y-3">
|
||
<label className="block text-sm font-medium text-gray-300">
|
||
Price Selection
|
||
</label>
|
||
|
||
{recommendedPrice && (
|
||
<label className="flex items-center space-x-3">
|
||
<input
|
||
type="radio"
|
||
name="priceType"
|
||
checked={useRecommendedPrice}
|
||
onChange={() => setUseRecommendedPrice(true)}
|
||
className="text-blue-500"
|
||
/>
|
||
<span className="text-gray-300">
|
||
Use AI Recommended Price: ${recommendedPrice.toFixed(4)}
|
||
</span>
|
||
</label>
|
||
)}
|
||
|
||
<label className="flex items-center space-x-3">
|
||
<input
|
||
type="radio"
|
||
name="priceType"
|
||
checked={!useRecommendedPrice}
|
||
onChange={() => setUseRecommendedPrice(false)}
|
||
className="text-blue-500"
|
||
/>
|
||
<span className="text-gray-300">Market Price / Custom</span>
|
||
</label>
|
||
|
||
{!useRecommendedPrice && (
|
||
<input
|
||
type="number"
|
||
value={customPrice}
|
||
onChange={(e) => setCustomPrice(e.target.value)}
|
||
placeholder="Enter price (leave empty for market)"
|
||
step="0.0001"
|
||
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>
|
||
|
||
{/* Stop Loss & Take Profit */}
|
||
<div className="space-y-4 border border-gray-600 rounded-lg p-4">
|
||
<h3 className="text-sm font-bold text-white">Risk Management</h3>
|
||
|
||
{/* Stop Loss */}
|
||
<div className="space-y-2">
|
||
<label className="flex items-center space-x-3">
|
||
<input
|
||
type="checkbox"
|
||
checked={enableStopLoss}
|
||
onChange={(e) => setEnableStopLoss(e.target.checked)}
|
||
className="rounded text-red-500"
|
||
/>
|
||
<span className="text-gray-300 font-medium">Stop Loss</span>
|
||
</label>
|
||
{enableStopLoss && (
|
||
<input
|
||
type="number"
|
||
value={stopLoss}
|
||
onChange={(e) => setStopLoss(e.target.value)}
|
||
placeholder="Stop loss price"
|
||
step="0.01"
|
||
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-red-500"
|
||
/>
|
||
)}
|
||
{enableStopLoss && analysis?.stopLoss && (
|
||
<div className="text-xs text-gray-400">
|
||
AI Suggested: ${analysis.stopLoss.price.toFixed(4)} - {analysis.stopLoss.rationale}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Take Profit */}
|
||
<div className="space-y-2">
|
||
<label className="flex items-center space-x-3">
|
||
<input
|
||
type="checkbox"
|
||
checked={enableTakeProfit}
|
||
onChange={(e) => setEnableTakeProfit(e.target.checked)}
|
||
className="rounded text-green-500"
|
||
/>
|
||
<span className="text-gray-300 font-medium">Take Profit</span>
|
||
</label>
|
||
{enableTakeProfit && (
|
||
<input
|
||
type="number"
|
||
value={takeProfit}
|
||
onChange={(e) => setTakeProfit(e.target.value)}
|
||
placeholder="Take profit price"
|
||
step="0.01"
|
||
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-green-500"
|
||
/>
|
||
)}
|
||
{enableTakeProfit && analysis?.takeProfits?.tp1 && (
|
||
<div className="text-xs text-gray-400">
|
||
AI Suggested: ${analysis.takeProfits.tp1.price.toFixed(4)} - {analysis.takeProfits.tp1.description}
|
||
</div>
|
||
)}
|
||
</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...' : `🚀 Execute ${tradeType} ${tradingMode === 'PERP' ? `${perpCoin} ${leverage}x` : `${fromCoin}→${toCoin}`}${(enableStopLoss || enableTakeProfit) ? ' + TP/SL' : ''}`}
|
||
</button>
|
||
|
||
{/* Execution Result */}
|
||
{executionResult && (
|
||
<div className={`p-4 rounded-lg ${
|
||
executionResult.success ? 'bg-green-900 border border-green-600' : 'bg-red-900 border border-red-600'
|
||
}`}>
|
||
<div className={`font-bold ${executionResult.success ? 'text-green-400' : 'text-red-400'}`}>
|
||
{executionResult.success ? (
|
||
executionResult.type === 'limit_order' ? '📋 Limit Order Created' : '✅ Trade Executed'
|
||
) : '❌ Trade Failed'}
|
||
</div>
|
||
<div className="text-sm text-gray-300 mt-1">
|
||
{executionResult.message}
|
||
</div>
|
||
{executionResult.trade && (
|
||
<div className="text-xs text-gray-400 mt-2">
|
||
TX ID: {executionResult.trade.txId}
|
||
</div>
|
||
)}
|
||
{executionResult.order && (
|
||
<div className="text-xs text-gray-400 mt-2">
|
||
Order ID: {executionResult.order.id}
|
||
<br />
|
||
Limit Price: ${executionResult.order.limitPrice}
|
||
<br />
|
||
Status: {executionResult.order.status}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Risk Warning */}
|
||
<div className="text-xs text-gray-500 border-t border-gray-700 pt-3">
|
||
⚠️ Trading involves significant risk of loss. Real trades executed via Jupiter DEX using your actual wallet funds.
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|