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

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