Implement Jupiter-style trading chart with lightweight-charts

- Add TradingView Lightweight Charts library for professional chart display
- Create TradingChart component with real-time candlestick data
- Implement position overlays (entry, stop loss, take profit lines)
- Add chart header with symbol and price information
- Create CompactTradingPanel for Jupiter-style order form
- Build ChartTradingPage combining chart and trading panel
- Add demo and test pages for chart functionality
- Use dynamic imports to avoid SSR issues with lightweight-charts
- Generate sample price data for demonstration

Features:
- Full-screen candlestick chart with dark theme
- Position markers on chart (blue entry, red SL, green TP)
- Real-time price display and P&L tracking
- Responsive design with proper chart resizing
- Professional trading interface similar to Jupiter Perps

app/api/trading/execute-perp/route.js

@@ -66,7 +66,23 @@ export async function POST(request) {
       )
     }
 
-    // For now, simulate perpetual trades until Jupiter Perpetuals integration is complete
+    // Check if we should use real DEX or simulation
+    if (useRealDEX) {
+      console.log('🚀 Executing REAL perpetual trade via Jupiter Perpetuals')
+      
+      // TODO: Implement actual Jupiter Perpetuals integration here
+      // For now, return an error indicating real trading is not yet implemented
+      return NextResponse.json(
+        {
+          success: false,
+          error: 'Real Jupiter Perpetuals trading not yet implemented. Set useRealDEX: false for simulation mode.',
+          feature: 'JUPITER_PERPS_REAL_TRADING',
+          status: 'IN_DEVELOPMENT'
+        },
+        { status: 501 } // Not Implemented
+      )
+    }
+    
     console.log('🎮 Executing SIMULATED perpetual trade (Jupiter Perps integration in development)')
     
     // Normalize side for perps

app/chart-test/page.tsx

@@ -0,0 +1,14 @@
+'use client'
+import React from 'react'
+import TradingChart from '../../components/TradingChart.tsx'
+
+export default function SimpleChartTest() {
+  return (
+    <div className="min-h-screen bg-gray-900 p-4">
+      <div className="max-w-7xl mx-auto">
+        <h1 className="text-2xl font-bold text-white mb-6">Chart Test</h1>
+        <TradingChart />
+      </div>
+    </div>
+  )
+}

app/chart-trading-demo/page.tsx

@@ -0,0 +1,220 @@
+'use client'
+import React, { useState, useEffect } from 'react'
+import TradingChart from '../../components/TradingChart'
+import CompactTradingPanel from '../../components/CompactTradingPanel'
+
+export default function ChartTradingPageSimple() {
+  const [currentPrice, setCurrentPrice] = useState(166.21)
+  const [positions, setPositions] = useState([
+    // Mock position data for demo
+    {
+      id: 'demo_pos_1',
+      symbol: 'SOL/USDC',
+      side: 'BUY' as 'BUY' | 'SELL',
+      amount: 0.5,
+      entryPrice: 165.50,
+      stopLoss: 160.00,
+      takeProfit: 170.00,
+      currentPrice: 166.21,
+      unrealizedPnl: 0.355,
+    }
+  ])
+  const [selectedSymbol, setSelectedSymbol] = useState('SOL')
+
+  const handleTrade = async (tradeData: any) => {
+    try {
+      console.log('Trade executed (demo):', tradeData)
+      
+      // Create a mock position for demo
+      const newPosition = {
+        id: `demo_${Date.now()}`,
+        symbol: `${tradeData.symbol}/USDC`,
+        side: tradeData.side,
+        amount: tradeData.amount,
+        entryPrice: tradeData.price,
+        stopLoss: tradeData.stopLoss,
+        takeProfit: tradeData.takeProfit,
+        currentPrice: currentPrice,
+        unrealizedPnl: 0,
+      }
+      
+      setPositions(prev => [...prev, newPosition])
+      alert(`Demo trade executed: ${tradeData.side} ${tradeData.amount} ${tradeData.symbol}`)
+    } catch (error) {
+      console.error('Trade execution error:', error)
+    }
+  }
+
+  const handlePriceUpdate = (price: number) => {
+    setCurrentPrice(price)
+    
+    // Update position P&L based on new price
+    setPositions(prev => prev.map(pos => ({
+      ...pos,
+      currentPrice: price,
+      unrealizedPnl: pos.side === 'BUY' 
+        ? (price - pos.entryPrice) * pos.amount
+        : (pos.entryPrice - price) * pos.amount
+    })))
+  }
+
+  const handleClosePosition = (positionId: string) => {
+    setPositions(prev => prev.filter(pos => pos.id !== positionId))
+    alert('Position closed (demo)')
+  }
+
+  return (
+    <div className="h-screen bg-gray-900 flex flex-col">
+      {/* Top Bar */}
+      <div className="bg-gray-800 border-b border-gray-700 p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-6">
+            <h1 className="text-xl font-bold text-white">Chart Trading Terminal</h1>
+            
+            {/* Symbol Selector */}
+            <div className="flex space-x-2">
+              {['SOL', 'BTC', 'ETH'].map(symbol => (
+                <button
+                  key={symbol}
+                  onClick={() => setSelectedSymbol(symbol)}
+                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                    selectedSymbol === symbol
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                  }`}
+                >
+                  {symbol}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Market Status */}
+          <div className="flex items-center space-x-4 text-sm">
+            <div className="flex items-center space-x-2">
+              <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
+              <span className="text-gray-300">Demo Mode</span>
+            </div>
+            <div className="text-gray-400">
+              {new Date().toLocaleTimeString()}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Trading Interface */}
+      <div className="flex-1 flex">
+        {/* Chart Area (70% width) */}
+        <div className="flex-1 p-4">
+          <TradingChart 
+            symbol={selectedSymbol}
+            positions={positions}
+            onPriceUpdate={handlePriceUpdate}
+          />
+        </div>
+
+        {/* Trading Panel (30% width) */}
+        <div className="w-96 border-l border-gray-700 p-4 space-y-4">
+          <CompactTradingPanel 
+            symbol={selectedSymbol}
+            currentPrice={currentPrice}
+            onTrade={handleTrade}
+          />
+        </div>
+      </div>
+
+      {/* Bottom Panel - Positions */}
+      <div className="border-t border-gray-700 bg-gray-800">
+        <div className="p-4">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex space-x-6">
+              <button className="text-white font-medium border-b-2 border-blue-500 pb-2">
+                Positions ({positions.length})
+              </button>
+              <button className="text-gray-400 hover:text-white pb-2">
+                Orders (0)
+              </button>
+              <button className="text-gray-400 hover:text-white pb-2">
+                History
+              </button>
+            </div>
+            
+            {positions.length > 0 && (
+              <div className="text-sm text-gray-400">
+                Total P&L: <span className={`${
+                  positions.reduce((sum, pos) => sum + (pos.unrealizedPnl || 0), 0) >= 0 
+                    ? 'text-green-400' : 'text-red-400'
+                }`}>
+                  {positions.reduce((sum, pos) => sum + (pos.unrealizedPnl || 0), 0) >= 0 ? '+' : ''}$
+                  {positions.reduce((sum, pos) => sum + (pos.unrealizedPnl || 0), 0).toFixed(2)}
+                </span>
+              </div>
+            )}
+          </div>
+
+          {/* Positions Table */}
+          <div className="max-h-48 overflow-y-auto">
+            {positions.length === 0 ? (
+              <div className="text-center py-8 text-gray-400">
+                No open positions
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {positions.map((position: any) => (
+                  <div
+                    key={position.id}
+                    className="bg-gray-900 rounded-lg p-4 flex items-center justify-between"
+                  >
+                    <div className="flex items-center space-x-4">
+                      <div className={`w-3 h-3 rounded-full ${
+                        position.side === 'BUY' ? 'bg-green-400' : 'bg-red-400'
+                      }`}></div>
+                      <div>
+                        <div className="text-white font-medium">
+                          {position.symbol} • {position.side}
+                        </div>
+                        <div className="text-sm text-gray-400">
+                          Size: {position.amount} • Entry: ${position.entryPrice?.toFixed(2)}
+                        </div>
+                        {position.stopLoss && (
+                          <div className="text-xs text-red-400">
+                            SL: ${position.stopLoss.toFixed(2)}
+                          </div>
+                        )}
+                        {position.takeProfit && (
+                          <div className="text-xs text-green-400">
+                            TP: ${position.takeProfit.toFixed(2)}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+
+                    <div className="text-right">
+                      <div className="text-white font-medium">
+                        ${(position.amount * position.currentPrice).toFixed(2)}
+                      </div>
+                      <div className={`text-sm ${
+                        (position.unrealizedPnl || 0) >= 0 ? 'text-green-400' : 'text-red-400'
+                      }`}>
+                        {(position.unrealizedPnl || 0) >= 0 ? '+' : ''}${(position.unrealizedPnl || 0).toFixed(2)}
+                      </div>
+                    </div>
+
+                    <div className="flex space-x-2">
+                      <button 
+                        onClick={() => handleClosePosition(position.id)}
+                        className="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700"
+                      >
+                        Close
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/chart-trading/page.tsx

@@ -0,0 +1,198 @@
+'use client'
+import React, { useState, useEffect } from 'react'
+import TradingChart from '../../components/TradingChart'
+import CompactTradingPanel from '../../components/CompactTradingPanel'
+import PositionsPanel from '../../components/PositionsPanel'
+
+export default function ChartTradingPage() {
+  const [currentPrice, setCurrentPrice] = useState(166.21)
+  const [positions, setPositions] = useState([])
+  const [selectedSymbol, setSelectedSymbol] = useState('SOL')
+
+  useEffect(() => {
+    fetchPositions()
+    const interval = setInterval(fetchPositions, 10000) // Update every 10 seconds
+    return () => clearInterval(interval)
+  }, [])
+
+  const fetchPositions = async () => {
+    try {
+      const response = await fetch('/api/trading/positions')
+      const data = await response.json()
+      
+      if (data.success) {
+        setPositions(data.positions || [])
+      }
+    } catch (error) {
+      console.error('Failed to fetch positions:', error)
+    }
+  }
+
+  const handleTrade = async (tradeData: any) => {
+    try {
+      console.log('Executing trade:', tradeData)
+      
+      // For perpetual trades, use the execute-perp endpoint
+      const response = await fetch('/api/trading/execute-perp', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(tradeData)
+      })
+
+      const result = await response.json()
+      
+      if (result.success) {
+        alert(`Trade executed successfully! ${result.message}`)
+        fetchPositions() // Refresh positions
+      } else {
+        alert(`Trade failed: ${result.error || result.message}`)
+      }
+    } catch (error) {
+      console.error('Trade execution error:', error)
+      alert('Trade execution failed. Please try again.')
+    }
+  }
+
+  const handlePriceUpdate = (price: number) => {
+    setCurrentPrice(price)
+  }
+
+  return (
+    <div className="h-screen bg-gray-900 flex flex-col">
+      {/* Top Bar */}
+      <div className="bg-gray-800 border-b border-gray-700 p-4">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center space-x-6">
+            <h1 className="text-xl font-bold text-white">Trading Terminal</h1>
+            
+            {/* Symbol Selector */}
+            <div className="flex space-x-2">
+              {['SOL', 'BTC', 'ETH'].map(symbol => (
+                <button
+                  key={symbol}
+                  onClick={() => setSelectedSymbol(symbol)}
+                  className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${
+                    selectedSymbol === symbol
+                      ? 'bg-blue-600 text-white'
+                      : 'bg-gray-700 text-gray-300 hover:bg-gray-600'
+                  }`}
+                >
+                  {symbol}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Market Status */}
+          <div className="flex items-center space-x-4 text-sm">
+            <div className="flex items-center space-x-2">
+              <div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
+              <span className="text-gray-300">Market Open</span>
+            </div>
+            <div className="text-gray-400">
+              Server Time: {new Date().toLocaleTimeString()}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Main Trading Interface */}
+      <div className="flex-1 flex">
+        {/* Chart Area (70% width) */}
+        <div className="flex-1 p-4">
+          <TradingChart 
+            symbol={selectedSymbol}
+            positions={positions}
+            onPriceUpdate={handlePriceUpdate}
+          />
+        </div>
+
+        {/* Trading Panel (30% width) */}
+        <div className="w-96 border-l border-gray-700 p-4 space-y-4">
+          <CompactTradingPanel 
+            symbol={selectedSymbol}
+            currentPrice={currentPrice}
+            onTrade={handleTrade}
+          />
+        </div>
+      </div>
+
+      {/* Bottom Panel - Positions */}
+      <div className="border-t border-gray-700 bg-gray-800">
+        <div className="p-4">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex space-x-6">
+              <button className="text-white font-medium border-b-2 border-blue-500 pb-2">
+                Positions ({positions.length})
+              </button>
+              <button className="text-gray-400 hover:text-white pb-2">
+                Orders
+              </button>
+              <button className="text-gray-400 hover:text-white pb-2">
+                History
+              </button>
+            </div>
+            
+            {positions.length > 0 && (
+              <div className="text-sm text-gray-400">
+                Total P&L: <span className="text-green-400">+$0.00</span>
+              </div>
+            )}
+          </div>
+
+          {/* Positions Table */}
+          <div className="max-h-48 overflow-y-auto">
+            {positions.length === 0 ? (
+              <div className="text-center py-8 text-gray-400">
+                No open positions
+              </div>
+            ) : (
+              <div className="space-y-2">
+                {positions.map((position: any) => (
+                  <div
+                    key={position.id}
+                    className="bg-gray-900 rounded-lg p-4 flex items-center justify-between"
+                  >
+                    <div className="flex items-center space-x-4">
+                      <div className={`w-3 h-3 rounded-full ${
+                        position.side === 'BUY' ? 'bg-green-400' : 'bg-red-400'
+                      }`}></div>
+                      <div>
+                        <div className="text-white font-medium">
+                          {position.symbol} • {position.side}
+                        </div>
+                        <div className="text-sm text-gray-400">
+                          Size: {position.amount} • Entry: ${position.entryPrice?.toFixed(2)}
+                        </div>
+                      </div>
+                    </div>
+
+                    <div className="text-right">
+                      <div className="text-white font-medium">
+                        ${position.totalValue?.toFixed(2) || '0.00'}
+                      </div>
+                      <div className={`text-sm ${
+                        (position.unrealizedPnl || 0) >= 0 ? 'text-green-400' : 'text-red-400'
+                      }`}>
+                        {(position.unrealizedPnl || 0) >= 0 ? '+' : ''}${(position.unrealizedPnl || 0).toFixed(2)}
+                      </div>
+                    </div>
+
+                    <div className="flex space-x-2">
+                      <button className="px-3 py-1 bg-gray-700 text-gray-300 rounded text-sm hover:bg-gray-600">
+                        Modify
+                      </button>
+                      <button className="px-3 py-1 bg-red-600 text-white rounded text-sm hover:bg-red-700">
+                        Close
+                      </button>
+                    </div>
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

app/globals.css

@@ -93,3 +93,99 @@ input[type="range"]:focus::-webkit-slider-thumb {
 input[type="range"]:focus::-moz-range-thumb {
   box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
 }
+
+/* Trading Chart Slider Styles */
+.slider::-webkit-slider-thumb {
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  border: 2px solid #1f2937;
+  box-shadow: 0 0 0 1px #3b82f6;
+}
+
+.slider::-webkit-slider-thumb:hover {
+  background: #2563eb;
+  box-shadow: 0 0 0 2px #2563eb;
+}
+
+.slider::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: #3b82f6;
+  cursor: pointer;
+  border: 2px solid #1f2937;
+  box-shadow: 0 0 0 1px #3b82f6;
+}
+
+/* Chart container styling */
+.trading-chart-container {
+  position: relative;
+  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+}
+
+/* Position indicator styles */
+.position-indicator {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 8px;
+  padding: 8px 12px;
+  color: white;
+  font-size: 12px;
+  z-index: 10;
+}
+
+/* Trading panel animations */
+.trade-button {
+  transition: all 0.2s ease-in-out;
+}
+
+.trade-button:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+}
+
+.trade-button:active {
+  transform: translateY(0);
+}
+
+/* Chart loading animation */
+.chart-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 600px;
+  background: #1a1a1a;
+  border-radius: 8px;
+}
+
+.loading-spinner {
+  border: 2px solid #374151;
+  border-top: 2px solid #3b82f6;
+  border-radius: 50%;
+  width: 32px;
+  height: 32px;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Responsive chart adjustments */
+@media (max-width: 1024px) {
+  .trading-interface {
+    flex-direction: column;
+  }
+  
+  .trading-panel {
+    width: 100%;
+    max-width: none;
+  }
+}

components/CompactTradingPanel.tsx

@@ -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>
+  )
+}

components/Navigation.tsx

@@ -22,6 +22,12 @@ const navItems = [
     icon: '💰',
     description: 'Execute trades'
   },
+  {
+    name: 'Chart Trading',
+    href: '/chart-trading-demo',
+    icon: '📈',
+    description: 'Advanced chart trading'
+  },
   {
     name: 'Automation',
     href: '/automation',

components/TradeModal_backup.tsx

@@ -0,0 +1,402 @@
+"use client"
+import React, { useState, useEffect, ChangeEvent } from 'react'
+
+interface TradeModalProps {
+  isOpen: boolean
+  onClose: () => void
+  tradeData: {
+    entry: string
+    tp: string
+    sl: string
+    risk: string
+    reward: string
+    action: 'BUY' | 'SELL'
+  } | null
+  onExecute: (data: any) => void
+}
+
+interface FormData {
+  entry: string
+  tp1: string
+  tp2: string
+  sl: string
+  positionValue: string
+  leverage: number
+  tradingCoin: string
+  tp1Percentage: number
+  tp2Percentage: number
+}
+
+const supportedCoins = [
+  { symbol: 'SOL', name: 'Solana', icon: '◎', price: 159.5 },
+  { symbol: 'USDC', name: 'USD Coin', icon: '$', price: 1.0 }
+]
+
+export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: TradeModalProps) {
+  console.log('🚀 TradeModal loaded with enhanced features - Version 2.0')
+  const [loading, setLoading] = useState(false)
+  const [walletBalance, setWalletBalance] = useState<any>(null)
+  const [formData, setFormData] = useState<FormData>({
+    entry: tradeData?.entry || '',
+    tp1: tradeData?.tp || '',
+    tp2: '',
+    sl: tradeData?.sl || '',
+    positionValue: '64', // USD amount for position size
+    leverage: 3,
+    tradingCoin: 'SOL',
+    tp1Percentage: 50, // % of position to close at TP1
+    tp2Percentage: 50  // % of position to close at TP2
+  })
+
+  // Fetch wallet balance when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      fetchWalletBalance()
+    }
+  }, [isOpen])
+
+  const fetchWalletBalance = async () => {
+    try {
+      const response = await fetch('/api/wallet/balance')
+      const data = await response.json()
+      setWalletBalance(data)
+    } catch (error) {
+      console.error('Failed to fetch wallet balance:', error)
+      setWalletBalance({ solBalance: 2.5, usdcBalance: 150.0 }) // Fallback
+    }
+  }
+
+  // Helper function to safely format numbers
+  const formatNumber = (value: number, decimals: number = 2): string => {
+    return isNaN(value) ? '0.00' : value.toFixed(decimals)
+  }
+
+  // Calculate various metrics
+  const currentCoin = supportedCoins.find(coin => coin.symbol === formData.tradingCoin)
+  const coinPrice = currentCoin?.price || 159.5 // Default to SOL price
+
+  // Position calculations
+  const positionValueUSD = parseFloat(formData.positionValue) || 0
+  const positionSizeSOL = positionValueUSD / coinPrice // Calculate SOL amount from USD
+  const leverageNum = formData.leverage || 1
+  const entryPrice = parseFloat(formData.entry) || 0
+  const tp1Price = parseFloat(formData.tp1) || 0
+  const tp2Price = parseFloat(formData.tp2) || 0
+  const slPrice = parseFloat(formData.sl) || 0
+
+  // Profit calculations
+  const leveragedValue = positionValueUSD * leverageNum
+
+  // TP1 Profit calculation (percentage-based)
+  const profitTP1 = (entryPrice > 0 && tp1Price > 0 && leveragedValue > 0) ? 
+    ((tp1Price - entryPrice) / entryPrice) * leveragedValue * (formData.tp1Percentage / 100) : 0
+
+  // TP2 Profit calculation (percentage-based)
+  const profitTP2 = (entryPrice > 0 && tp2Price > 0 && leveragedValue > 0) ? 
+    ((tp2Price - entryPrice) / entryPrice) * leveragedValue * (formData.tp2Percentage / 100) : 0
+
+  // Stop Loss calculation
+  const lossAtSL = (entryPrice > 0 && slPrice > 0 && leveragedValue > 0) ? 
+    ((slPrice - entryPrice) / entryPrice) * leveragedValue : 0
+
+  const totalPotentialProfit = profitTP1 + profitTP2
+
+  if (!isOpen) return null
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    
+    try {
+      console.log('🎯 Executing trade with data:', formData)
+      
+      const tradingData = {
+        ...formData,
+        positionSizeSOL: formatNumber(positionSizeSOL, 4),
+        leveragedValue: formatNumber(leveragedValue, 2),
+        profitTP1: formatNumber(profitTP1, 2),
+        profitTP2: formatNumber(profitTP2, 2),
+        totalProfit: formatNumber(totalPotentialProfit, 2),
+        lossAtSL: formatNumber(lossAtSL, 2)
+      }
+      
+      await onExecute(tradingData)
+      onClose()
+    } catch (error) {
+      console.error('Trade execution failed:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const setPositionPercentage = (percentage: number) => {
+    if (walletBalance && walletBalance.solBalance) {
+      const availableBalance = walletBalance.solBalance * coinPrice // Convert SOL to USD
+      const newPosition = (availableBalance * percentage / 100).toFixed(0)
+      setFormData(prev => ({ ...prev, positionValue: newPosition }))
+    }
+  }
+
+  return (
+    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+      <div className="bg-gray-900 rounded-2xl shadow-2xl w-full max-w-2xl max-h-[95vh] overflow-hidden border border-gray-700">
+        {/* Header */}
+        <div className="flex justify-between items-center p-6 border-b border-gray-700 bg-gradient-to-r from-blue-600/20 to-purple-600/20">
+          <div>
+            <h2 className="text-2xl font-bold text-white">Execute Trade</h2>
+            <p className="text-gray-400 text-sm">Configure your position details</p>
+          </div>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-white text-2xl font-bold w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-700 transition-all"
+          >
+            ×
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-6 overflow-y-auto max-h-[calc(95vh-120px)]">
+          {/* Coin Selection */}
+          <div className="mb-6">
+            <label className="block text-sm font-medium text-gray-300 mb-3">Trading Coin</label>
+            <div className="grid grid-cols-2 gap-3">
+              {supportedCoins.map((coin) => (
+                <button
+                  key={coin.symbol}
+                  type="button"
+                  onClick={() => setFormData(prev => ({ ...prev, tradingCoin: coin.symbol }))}
+                  className={`p-4 rounded-xl border-2 transition-all duration-200 ${
+                    formData.tradingCoin === coin.symbol
+                      ? 'border-blue-500 bg-blue-500/20 text-white'
+                      : 'border-gray-600 bg-gray-800 text-gray-300 hover:border-gray-500'
+                  }`}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-2">
+                      <span className="text-2xl">{coin.icon}</span>
+                      <div className="text-left">
+                        <div className="font-semibold">{coin.symbol}</div>
+                        <div className="text-xs text-gray-400">{coin.name}</div>
+                      </div>
+                    </div>
+                    <div className="text-right">
+                      <div className="font-mono text-sm">${formatNumber(coin.price)}</div>
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Position Size */}
+          <div className="mb-6">
+            <div className="flex justify-between items-center mb-3">
+              <label className="text-sm font-medium text-gray-300">Position Size (USD)</label>
+              {walletBalance && (
+                <span className="text-xs text-gray-400">
+                  Available: ${formatNumber(walletBalance.solBalance * coinPrice, 2)} 
+                </span>
+              )}
+            </div>
+            <div className="space-y-3">
+              <input
+                type="number"
+                value={formData.positionValue}
+                onChange={(e) => setFormData(prev => ({ ...prev, positionValue: e.target.value }))}
+                className="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500 transition-colors"
+                placeholder="Enter USD amount"
+              />
+              
+              {/* Quick percentage buttons */}
+              <div className="grid grid-cols-4 gap-2">
+                {[25, 50, 75, 100].map((percent) => (
+                  <button
+                    key={percent}
+                    type="button"
+                    onClick={() => setPositionPercentage(percent)}
+                    className="py-2 px-3 bg-gray-700 hover:bg-gray-600 rounded-lg text-xs text-gray-300 hover:text-white transition-all"
+                  >
+                    {percent}%
+                  </button>
+                ))}
+              </div>
+              
+              {/* Position info */}
+              <div className="text-xs text-gray-400 space-y-1">
+                <div>Position Size: {formatNumber(positionSizeSOL, 4)} {formData.tradingCoin}</div>
+                <div>USD Value: ${formatNumber(positionValueUSD, 2)}</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Leverage */}
+          <div className="mb-6">
+            <div className="flex justify-between items-center mb-3">
+              <label className="text-sm font-medium text-gray-300">Leverage</label>
+              <span className="text-sm text-blue-400 font-mono">{formData.leverage}x</span>
+            </div>
+            <input
+              type="range"
+              min="1"
+              max="10"
+              value={formData.leverage}
+              onChange={(e) => setFormData(prev => ({ ...prev, leverage: parseInt(e.target.value) }))}
+              className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer range-slider"
+            />
+            <div className="flex justify-between text-xs text-gray-500 mt-1">
+              <span>1x</span>
+              <span>5x</span>
+              <span>10x</span>
+            </div>
+            <div className="text-xs text-gray-400 mt-2">
+              Leveraged Value: ${formatNumber(leveragedValue, 2)}
+            </div>
+          </div>
+
+          {/* Price Inputs Grid */}
+          <div className="grid grid-cols-2 gap-4 mb-6">
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">Entry Price</label>
+              <input
+                type="number"
+                step="0.01"
+                value={formData.entry}
+                onChange={(e) => setFormData(prev => ({ ...prev, entry: e.target.value }))}
+                className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-blue-500"
+                placeholder="0.00"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-300 mb-2">Stop Loss</label>
+              <input
+                type="number"
+                step="0.01"
+                value={formData.sl}
+                onChange={(e) => setFormData(prev => ({ ...prev, sl: e.target.value }))}
+                className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-red-500"
+                placeholder="0.00"
+              />
+            </div>
+          </div>
+
+          {/* Take Profit 1 */}
+          <div className="mb-6 p-4 bg-gray-800/50 rounded-xl border border-gray-700">
+            <div className="flex justify-between items-center mb-3">
+              <h3 className="text-sm font-medium text-gray-300">Take Profit 1</h3>
+              <span className="text-xs text-green-400">+${formatNumber(profitTP1, 2)}</span>
+            </div>
+            <div className="space-y-3">
+              <input
+                type="number"
+                step="0.01"
+                value={formData.tp1}
+                onChange={(e) => setFormData(prev => ({ ...prev, tp1: e.target.value }))}
+                className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-green-500"
+                placeholder="TP1 Price"
+              />
+              <div className="flex items-center space-x-3">
+                <span className="text-xs text-gray-400 min-w-[60px]">Allocation:</span>
+                <input
+                  type="range"
+                  min="10"
+                  max="100"
+                  step="10"
+                  value={formData.tp1Percentage}
+                  onChange={(e) => setFormData(prev => ({ ...prev, tp1Percentage: parseInt(e.target.value) }))}
+                  className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
+                />
+                <span className="text-xs text-green-400 min-w-[35px] font-mono">{formData.tp1Percentage}%</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Take Profit 2 */}
+          <div className="mb-6 p-4 bg-gray-800/50 rounded-xl border border-gray-700">
+            <div className="flex justify-between items-center mb-3">
+              <h3 className="text-sm font-medium text-gray-300">Take Profit 2</h3>
+              <span className="text-xs text-green-400">+${formatNumber(profitTP2, 2)}</span>
+            </div>
+            <div className="space-y-3">
+              <input
+                type="number"
+                step="0.01"
+                value={formData.tp2}
+                onChange={(e) => setFormData(prev => ({ ...prev, tp2: e.target.value }))}
+                className="w-full px-3 py-2 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:border-green-500"
+                placeholder="TP2 Price"
+              />
+              <div className="flex items-center space-x-3">
+                <span className="text-xs text-gray-400 min-w-[60px]">Allocation:</span>
+                <input
+                  type="range"
+                  min="10"
+                  max="100"
+                  step="10"
+                  value={formData.tp2Percentage}
+                  onChange={(e) => setFormData(prev => ({ ...prev, tp2Percentage: parseInt(e.target.value) }))}
+                  className="flex-1 h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
+                />
+                <span className="text-xs text-green-400 min-w-[35px] font-mono">{formData.tp2Percentage}%</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Profit Summary */}
+          <div className="mb-6 p-4 bg-gradient-to-r from-green-500/10 to-blue-500/10 rounded-xl border border-green-500/20">
+            <h3 className="text-sm font-medium text-gray-300 mb-3">Profit Summary</h3>
+            <div className="grid grid-cols-2 gap-4 text-xs">
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <span className="text-gray-400">TP1 Profit:</span>
+                  <span className="text-green-400">+${formatNumber(profitTP1, 2)}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-400">TP2 Profit:</span>
+                  <span className="text-green-400">+${formatNumber(profitTP2, 2)}</span>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <div className="flex justify-between">
+                  <span className="text-gray-400">Total Profit:</span>
+                  <span className="text-green-400 font-semibold">+${formatNumber(totalPotentialProfit, 2)}</span>
+                </div>
+                <div className="flex justify-between">
+                  <span className="text-gray-400">Max Loss:</span>
+                  <span className="text-red-400">${formatNumber(Math.abs(lossAtSL), 2)}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Execute Button */}
+          <div className="flex space-x-3">
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 py-3 px-6 bg-gray-700 text-gray-300 rounded-xl hover:bg-gray-600 transition-all duration-200"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading || !formData.entry || !formData.tp1 || !formData.sl}
+              className={`flex-1 py-3 px-6 rounded-xl font-semibold transition-all duration-200 ${
+                loading || !formData.entry || !formData.tp1 || !formData.sl
+                  ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
+                  : 'bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transform hover:scale-[1.02]'
+              }`}
+            >
+              {loading ? (
+                <div className="flex items-center justify-center space-x-2">
+                  <div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin"></div>
+                  <span>Executing...</span>
+                </div>
+              ) : (
+                'Execute Trade'
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

components/TradeModal_new.tsx

@@ -0,0 +1,382 @@
+"use client"
+import React, { useState, useEffect } from 'react'
+
+interface TradeModalProps {
+  isOpen: boolean
+  onClose: () => void
+  tradeData: {
+    symbol: string
+    timeframe: string
+    entry: string
+    tp: string
+    sl: string
+  } | null
+  onExecute: (data: any) => void
+}
+
+interface FormData {
+  entry: string
+  tp1: string
+  tp2: string
+  sl: string
+  positionValue: string
+  leverage: number
+  tradingCoin: string
+  tp1Percentage: number
+  tp2Percentage: number
+}
+
+const supportedCoins = [
+  { symbol: 'SOL', name: 'Solana', icon: '◎', price: 159.5 },
+  { symbol: 'USDC', name: 'USD Coin', icon: '$', price: 1.0 }
+]
+
+export default function TradeModal({ isOpen, onClose, tradeData, onExecute }: TradeModalProps) {
+  console.log('🚀 TradeModal loaded with enhanced features - Version 2.0')
+  const [loading, setLoading] = useState(false)
+  const [walletBalance, setWalletBalance] = useState<any>(null)
+  const [formData, setFormData] = useState<FormData>({
+    entry: tradeData?.entry || '',
+    tp1: tradeData?.tp || '',
+    tp2: '',
+    sl: tradeData?.sl || '',
+    positionValue: '1000', // Position size in chosen coin
+    leverage: 3,
+    tradingCoin: 'SOL',
+    tp1Percentage: 50, // % of position to close at TP1
+    tp2Percentage: 50  // % of position to close at TP2
+  })
+
+  // Fetch wallet balance when modal opens
+  useEffect(() => {
+    if (isOpen) {
+      fetchWalletBalance()
+    }
+  }, [isOpen])
+
+  const fetchWalletBalance = async () => {
+    try {
+      const response = await fetch('/api/wallet/balance')
+      const data = await response.json()
+      if (data.success) {
+        setWalletBalance(data.balance)
+      }
+    } catch (error) {
+      console.error('Failed to fetch wallet balance:', error)
+    }
+  }
+
+  // Helper function to safely format numbers
+  const formatNumber = (value: number, decimals: number = 2): string => {
+    if (isNaN(value) || !isFinite(value)) return '0.00'
+    return value.toFixed(decimals)
+  }
+
+  // Calculate derived values with proper error handling
+  const currentCoin = supportedCoins.find(coin => coin.symbol === formData.tradingCoin)
+  const coinPrice = currentCoin?.price || 159.5 // Default to SOL price
+  
+  // Safe number parsing - position size in chosen coin
+  const positionSize = parseFloat(formData.positionValue) || 0
+  const positionValueUSD = positionSize * coinPrice
+  const leverageNum = formData.leverage || 1
+  const entryPrice = parseFloat(formData.entry) || 0
+  const tp1Price = parseFloat(formData.tp1) || 0
+  const tp2Price = parseFloat(formData.tp2) || 0
+  const slPrice = parseFloat(formData.sl) || 0
+  
+  // Calculations with fallbacks
+  const leveragedValue = positionValueUSD * leverageNum
+  
+  // P&L calculations with proper validation
+  const profitTP1 = (entryPrice > 0 && tp1Price > 0 && leveragedValue > 0) ? 
+    ((tp1Price - entryPrice) / entryPrice) * leveragedValue * (formData.tp1Percentage / 100) : 0
+  const profitTP2 = (entryPrice > 0 && tp2Price > 0 && leveragedValue > 0) ? 
+    ((tp2Price - entryPrice) / entryPrice) * leveragedValue * (formData.tp2Percentage / 100) : 0
+  const lossAtSL = (entryPrice > 0 && slPrice > 0 && leveragedValue > 0) ? 
+    ((slPrice - entryPrice) / entryPrice) * leveragedValue : 0
+
+  useEffect(() => {
+    if (tradeData) {
+      setFormData((prev: FormData) => ({
+        ...prev,
+        entry: tradeData.entry || '',
+        tp1: tradeData.tp || '',
+        sl: tradeData.sl || ''
+      }))
+    }
+  }, [tradeData])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+    
+    try {
+      await onExecute({
+        symbol: tradeData?.symbol,
+        timeframe: tradeData?.timeframe,
+        ...formData,
+        positionSize,
+        leveragedValue
+      })
+    } catch (error) {
+      console.error('Trade execution failed:', error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (!isOpen || !tradeData) return null
+
+  return (
+    <div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+      <div className="bg-gray-900 border border-gray-700 rounded-xl p-6 max-w-lg w-full max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between mb-6">
+          <h3 className="text-xl font-bold text-white flex items-center">
+            <span className="w-8 h-8 bg-gradient-to-br from-green-400 to-green-600 rounded-lg flex items-center justify-center mr-3">
+              💰
+            </span>
+            Execute Trade
+          </h3>
+          <button
+            onClick={onClose}
+            className="text-gray-400 hover:text-white transition-colors"
+          >
+            ✕
+          </button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="space-y-4">
+          {/* Trade Details Section */}
+          <div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
+            <h4 className="text-sm font-medium text-gray-300 mb-3 flex items-center">
+              📊 Trade Setup
+            </h4>
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <label className="block text-xs text-gray-400 mb-1">Symbol</label>
+                <div className="text-white font-medium">{tradeData?.symbol}</div>
+              </div>
+              <div>
+                <label className="block text-xs text-gray-400 mb-1">Timeframe</label>
+                <div className="text-white font-medium">{tradeData?.timeframe}</div>
+              </div>
+            </div>
+          </div>
+
+          {/* Trading Coin Selection - Enhanced Visual Cards */}
+          <div>
+            <label className="block text-xs text-gray-400 mb-2">Trading Coin</label>
+            <div className="grid grid-cols-2 gap-3">
+              {supportedCoins.map(coin => (
+                <button
+                  key={coin.symbol}
+                  type="button"
+                  onClick={() => setFormData(prev => ({...prev, tradingCoin: coin.symbol}))}
+                  className={`p-3 rounded-lg border text-left transition-all ${
+                    formData.tradingCoin === coin.symbol
+                      ? 'border-blue-500 bg-blue-500/10'
+                      : 'border-gray-600 bg-gray-800 hover:border-gray-500'
+                  }`}
+                >
+                  <div className="flex items-center justify-between">
+                    <div className="flex items-center space-x-2">
+                      <span className="text-lg">{coin.icon}</span>
+                      <span className={`font-medium ${
+                        formData.tradingCoin === coin.symbol ? 'text-blue-400' : 'text-white'
+                      }`}>
+                        {coin.symbol}
+                      </span>
+                    </div>
+                    <div className="text-right">
+                      <div className={`text-sm ${
+                        formData.tradingCoin === coin.symbol ? 'text-blue-400' : 'text-gray-300'
+                      }`}>
+                        ${coin.price}
+                      </div>
+                    </div>
+                  </div>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Enhanced Position Size Section */}
+          <div className="bg-gray-800/50 rounded-lg p-4 border border-gray-700">
+            <h4 className="text-sm font-medium text-gray-300 mb-3 flex items-center">
+              💵 Position Size ({formData.tradingCoin})
+            </h4>
+            
+            {/* Position Size Input */}
+            <div className="mb-3">
+              <label className="block text-xs text-gray-400 mb-1">Position Size ({formData.tradingCoin})</label>
+              <input
+                type="number"
+                step="0.001"
+                value={formData.positionValue}
+                onChange={(e) => setFormData(prev => ({...prev, positionValue: e.target.value}))}
+                className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white focus:border-blue-500 focus:outline-none"
+                placeholder="1,000"
+              />
+              <div className="text-xs text-gray-400 mt-1">
+                ≈ ${formatNumber(positionValueUSD)} USD
+              </div>
+            </div>
+
+            {/* Percentage Buttons */}
+            <div className="grid grid-cols-4 gap-2 mb-3">
+              {[25, 50, 75, 100].map(percentage => (
+                <button
+                  key={percentage}
+                  type="button"
+                  onClick={() => {
+                    if (walletBalance?.sol && formData.tradingCoin === 'SOL') {
+                      const coinAmount = (walletBalance.sol * percentage) / 100
+                      setFormData(prev => ({...prev, positionValue: coinAmount.toFixed(3)}))
+                    }
+                  }}
+                  className="py-2 px-3 text-sm bg-gray-600 hover:bg-gray-500 text-white rounded transition-colors"
+                >
+                  {percentage}%
+                </button>
+              ))}
+            </div>
+
+            {/* Leverage Section */}
+            <div className="mb-4">
+              <label className="block text-xs text-gray-400 mb-2">Leverage: {formData.leverage}x</label>
+              <div className="relative">
+                <input
+                  type="range"
+                  min="1"
+                  max="10"
+                  step="1"
+                  value={formData.leverage}
+                  onChange={(e) => setFormData(prev => ({...prev, leverage: 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">
+                  <span>1x</span>
+                  <span>5x</span>
+                  <span>10x</span>
+                </div>
+              </div>
+              <div className="text-xs text-gray-400 mt-2">
+                Leveraged Value: ${formatNumber(leveragedValue)}
+              </div>
+            </div>
+          </div>
+
+          {/* Enhanced Price Levels */}
+          <div>
+            <label className="block text-xs text-gray-400 mb-2">Entry Price</label>
+            <input
+              type="number"
+              step="0.01"
+              value={formData.entry}
+              onChange={(e) => setFormData(prev => ({...prev, entry: e.target.value}))}
+              className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:border-blue-500 focus:outline-none mb-4"
+              placeholder="159.5"
+            />
+          </div>
+
+          {/* Take Profit 1 with Profit Display */}
+          <div className="mb-4">
+            <label className="block text-xs text-gray-400 mb-1">Take Profit 1 (50% of position)</label>
+            <input
+              type="number"
+              step="0.01"
+              value={formData.tp1}
+              onChange={(e) => setFormData(prev => ({...prev, tp1: e.target.value}))}
+              className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:border-green-500 focus:outline-none"
+              placeholder="160.5"
+            />
+            
+            {/* Profit Percentage Slider for TP1 */}
+            <div className="mt-2">
+              <div className="flex justify-between items-center mb-1">
+                <span className="text-xs text-gray-400">Profit %</span>
+                <span className="text-xs text-green-400 font-medium">
+                  Profit: $1.50
+                </span>
+              </div>
+              <div className="relative">
+                <input
+                  type="range"
+                  min="10"
+                  max="90"
+                  step="10"
+                  value={formData.tp1Percentage}
+                  onChange={(e) => setFormData(prev => ({...prev, tp1Percentage: parseInt(e.target.value)}))}
+                  className="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"
+                  style={{
+                    background: `linear-gradient(to right, #10b981 0%, #10b981 ${formData.tp1Percentage}%, #374151 ${formData.tp1Percentage}%, #374151 100%)`
+                  }}
+                />
+                <div className="flex justify-between text-xs text-gray-500 mt-1">
+                  <span>10%</span>
+                  <span>90%</span>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Take Profit 2 */}
+          <div className="mb-4">
+            <label className="block text-xs text-gray-400 mb-1">Take Profit 2 (50% of position)</label>
+            <input
+              type="number"
+              step="0.01"
+              value={formData.tp2}
+              onChange={(e) => setFormData(prev => ({...prev, tp2: e.target.value}))}
+              className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:border-green-500 focus:outline-none"
+              placeholder="162"
+            />
+          </div>
+
+          {/* Stop Loss */}
+          <div className="mb-4">
+            <label className="block text-xs text-gray-400 mb-1">Stop Loss</label>
+            <input
+              type="number"
+              step="0.01"
+              value={formData.sl}
+              onChange={(e) => setFormData(prev => ({...prev, sl: e.target.value}))}
+              className="w-full bg-gray-800 border border-gray-600 rounded-lg px-3 py-2 text-white text-sm focus:border-red-500 focus:outline-none"
+              placeholder="158.5"
+            />
+          </div>
+
+          {/* Submit Buttons */}
+          <div className="flex space-x-3 pt-4">
+            <button
+              type="button"
+              onClick={onClose}
+              className="flex-1 py-2 px-4 bg-gray-700 text-gray-300 rounded-lg hover:bg-gray-600 transition-colors"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={loading}
+              className={`flex-1 py-2 px-4 rounded-lg font-medium transition-all ${
+                loading
+                  ? 'bg-gray-700 text-gray-400 cursor-not-allowed'
+                  : 'bg-gradient-to-r from-green-500 to-green-600 text-white hover:from-green-600 hover:to-green-700 transform hover:scale-[1.02]'
+              }`}
+            >
+              {loading ? (
+                <div className="flex items-center justify-center space-x-2">
+                  <div className="w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin"></div>
+                  <span>Executing...</span>
+                </div>
+              ) : (
+                'Execute Trade'
+              )}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  )
+}

package-lock.json

@@ -13,6 +13,7 @@
         "@solana/web3.js": "^1.98.2",
         "bs58": "^6.0.0",
         "dotenv": "^17.2.0",
+        "lightweight-charts": "^5.0.8",
         "next": "15.3.5",
         "node-fetch": "^3.3.2",
         "openai": "^5.8.3",
@@ -5744,6 +5745,12 @@
         "node": "> 0.1.90"
       }
     },
+    "node_modules/fancy-canvas": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fancy-canvas/-/fancy-canvas-2.1.0.tgz",
+      "integrity": "sha512-nifxXJ95JNLFR2NgRV4/MxVP45G9909wJTEKz5fg/TZS20JJZA6hfgRVh/bC9bwl2zBtBNcYPjiBE4njQHVBwQ==",
+      "license": "MIT"
+    },
     "node_modules/fast-deep-equal": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
@@ -7397,6 +7404,15 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lightweight-charts": {
+      "version": "5.0.8",
+      "resolved": "https://registry.npmjs.org/lightweight-charts/-/lightweight-charts-5.0.8.tgz",
+      "integrity": "sha512-dNBK5TlNcG78RUnxYRAZP4XpY5bkp3EE0PPjFFPkdIZ8RvnvL2JLgTb1BLh40trHhgJl51b1bCz8678GpnKvIw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "fancy-canvas": "2.1.0"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",

package.json

@@ -42,6 +42,7 @@
     "@solana/web3.js": "^1.98.2",
     "bs58": "^6.0.0",
     "dotenv": "^17.2.0",
+    "lightweight-charts": "^5.0.8",
     "next": "15.3.5",
     "node-fetch": "^3.3.2",
     "openai": "^5.8.3",