feat: Implement comprehensive positions tracking system

- Real-time positions tracking with live P&L updates
- PositionsPanel component with auto-refresh every 10s
- Position creation on trade execution (DEX, Perp, Standard)
- One-click position closing functionality
- Stop Loss and Take Profit display with monitoring

- /api/trading/positions API for CRUD operations
- Real-time price updates via CoinGecko integration
- Automatic position creation on successful trades
- In-memory positions storage with P&L calculations
- Enhanced trading page layout with positions panel

- Entry price, current price, and unrealized P&L
- Percentage-based P&L calculations
- Portfolio summary with total value and total P&L
- Transaction ID tracking for audit trail
- Support for leverage positions and TP/SL orders

 Confirmed Working:
- Position created: SOL/USDC BUY 0.02 @ 68.10
- Real-time P&L: -/bin/bash.0052 (-0.15%)
- TP/SL monitoring: SL 60, TP 80
- Transaction: 5qYx7nmpgE3fHEZpjJCMtJNb1jSQVGfKhKNzJNgJ5VGV4xG2cSSpr1wtfPfbmx8zSjwHnzSgZiWsMnAWmCFQ2RVx

- Clear positions display on trading page
- Real-time updates without manual refresh
- Intuitive close buttons for quick position management
- Separate wallet holdings vs active trading positions
- Professional trading interface with P&L visualization
This commit is contained in:
mindesbunister
2025-07-14 15:59:44 +02:00
parent f1e0be8c79
commit 0d7b46fdcf
8 changed files with 637 additions and 14 deletions

View File

@@ -1,6 +1,7 @@
'use client'
import React, { useState, useEffect } from 'react'
import TradeExecutionPanel from '../../components/TradeExecutionPanel.js'
import PositionsPanel from '../../components/PositionsPanel.js'
export default function TradingPage() {
const [selectedSymbol, setSelectedSymbol] = useState('SOL')
@@ -81,9 +82,12 @@ export default function TradingPage() {
</div>
<div className="space-y-6">
{/* Open Positions */}
<PositionsPanel />
{/* Portfolio Overview */}
<div className="card card-gradient p-6">
<h2 className="text-xl font-bold text-white mb-4">Portfolio Overview</h2>
<h2 className="text-xl font-bold text-white mb-4">Wallet Overview</h2>
{balance ? (
<div className="space-y-4">
<div className="flex justify-between items-center">
@@ -97,7 +101,7 @@ export default function TradingPage() {
{balance.positions && balance.positions.length > 0 && (
<div className="mt-6">
<h3 className="text-lg font-semibold text-white mb-3">Current Positions</h3>
<h3 className="text-lg font-semibold text-white mb-3">Wallet Holdings</h3>
<div className="space-y-2">
{balance.positions.map((position, index) => (
<div key={index} className="flex justify-between items-center p-3 bg-gray-800 rounded-lg">
@@ -106,7 +110,8 @@ export default function TradingPage() {
<div className="text-sm text-gray-400">${position.price?.toFixed(4)}</div>
</div>
<div className="text-right">
<div className={`text-sm font-medium ${
<div className="text-white font-medium">{position.amount}</div>
<div className={`text-sm ${
position.change24h >= 0 ? 'text-green-400' : 'text-red-400'
}`}>
{position.change24h >= 0 ? '+' : ''}{position.change24h?.toFixed(2)}%
@@ -120,18 +125,10 @@ export default function TradingPage() {
</div>
) : (
<div className="text-gray-400">
{loading ? 'Loading portfolio...' : 'Failed to load portfolio data'}
{loading ? 'Loading wallet...' : 'Failed to load wallet data'}
</div>
)}
</div>
{/* Trading History Placeholder */}
<div className="card card-gradient p-6">
<h2 className="text-xl font-bold text-white mb-4">Recent Trades</h2>
<div className="text-gray-400 text-center py-8">
Trade history will appear here after executing trades.
</div>
</div>
</div>
</div>
</div>