Add trading amount and leverage information to trade displays

- Enhanced API response to include tradingAmount, leverage, and positionSize for all trades
- Added realistic trading examples with varying leverage (2x-5x) and amounts (50-00)
- Updated automation page UI to display trading details in dedicated section
- Added leverage badges and position size information for better trade transparency
- Enhanced trade summary to show trading amount and leverage context
- Improved trade visualization with color-coded leverage indicators

Features added:
- Trading Amount: Shows base capital used (50-00)
- Leverage: Visual badges showing multiplier (2x-5x)
- Position Size: Calculated total exposure (tradingAmount × leverage)
- Enhanced trade cards with comprehensive trading parameters
This commit is contained in:
mindesbunister
2025-07-19 00:00:04 +02:00
parent 6ad97301ec
commit 16f9b2f5e8
3 changed files with 80 additions and 1 deletions

View File

@@ -589,6 +589,7 @@ export default function AutomationPage() {
{trade.side}
</span>
<span className="text-white font-semibold">{trade.amount}</span>
<span className="text-yellow-400 font-semibold">{trade.leverage}x</span>
<span className={`px-2 py-1 rounded text-xs ${
trade.isActive ? 'bg-blue-600 text-white' :
trade.result === 'PROFIT' ? 'bg-green-600 text-white' :
@@ -604,6 +605,28 @@ export default function AutomationPage() {
</div>
</div>
{/* Trading Details */}
<div className="mb-3 p-3 bg-gray-900/30 rounded border border-gray-700">
<div className="grid grid-cols-2 gap-2 text-xs">
<div className="flex justify-between">
<span className="text-gray-300">Trading Amount:</span>
<span className="text-white">${trade.tradingAmount}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-300">Leverage:</span>
<span className="text-yellow-400">{trade.leverage}x</span>
</div>
<div className="flex justify-between">
<span className="text-gray-300">Position Size:</span>
<span className="text-white">${trade.positionSize}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-300">Entry Price:</span>
<span className="text-white">${trade.entryPrice.toFixed(2)}</span>
</div>
</div>
</div>
{/* Analysis Context */}
{trade.triggerAnalysis && (
<div className="mb-3 p-3 bg-gray-900 rounded border border-gray-600">
@@ -693,7 +716,7 @@ export default function AutomationPage() {
{/* Trade Summary */}
<div className="flex justify-between items-center text-xs border-t border-gray-700 pt-2">
<div className="text-gray-400">
{trade.duration}
{trade.duration} | ${trade.tradingAmount} @ {trade.leverage}x
</div>
<div className="flex items-center space-x-4">
<div className="text-gray-400">