🚀 Fix position sizing and add real wallet balance integration

Fixed Position Size Calculation:
- Changed input from SOL to USD for clarity
- Fixed calculation: positionSizeSOL = positionValueUSD / coinPrice
- Resolved issue where entering 0.4 SOL showed incorrect 0.0025 underneath

 Added Real Wallet Balance Integration:
- TradeModal now fetches actual wallet balance from /api/wallet/balance
- Percentage buttons now calculate from real available balance (3.40)
- No more impossible 1 SOL positions when only 3.40 available

 Enhanced Position Sizing UI:
- Added slider for smooth position adjustment ( to full balance)
- Percentage buttons (25%, 50%, 75%, 100%) now accurate
- Real-time display shows both USD and SOL amounts
- Live percentage display of balance usage

 Added Wallet Overview to Dashboard:
- Main dashboard shows real wallet balance prominently
- Trading page displays actual wallet holdings
- StatusOverview component enhanced with wallet info

- Accurate position sizing based on actual 3.40 balance
- Intuitive slider + percentage buttons
- Real-time balance updates every 30 seconds
- Clear USD/SOL conversion display
- No more calculation errors in trading modal

app/analysis/page.js

@@ -1,7 +1,6 @@
 'use client'
 import React, { useState } from 'react'
 import AIAnalysisPanel from '../../components/AIAnalysisPanel.tsx'
-import TradeExecutionPanel from '../../components/TradeExecutionPanel.js'
 
 export default function AnalysisPage() {
   const [analysisResult, setAnalysisResult] = useState(null)
@@ -16,22 +15,13 @@ export default function AnalysisPage() {
     <div className="space-y-8">
       <div className="flex items-center justify-between">
         <div>
-          <h1 className="text-3xl font-bold text-white">AI Analysis & Trading</h1>
-          <p className="text-gray-400 mt-2">Get market insights and execute trades based on AI recommendations</p>
+          <h1 className="text-3xl font-bold text-white">AI Analysis</h1>
+          <p className="text-gray-400 mt-2">Get comprehensive market insights powered by AI analysis</p>
         </div>
       </div>
       
-      <div className="grid grid-cols-1 xl:grid-cols-3 gap-8">
-        <div className="xl:col-span-2">
-          <AIAnalysisPanel onAnalysisComplete={handleAnalysisComplete} />
-        </div>
-        
-        <div className="xl:col-span-1">
-          <TradeExecutionPanel 
-            analysis={analysisResult} 
-            symbol={currentSymbol}
-          />
-        </div>
+      <div className="max-w-6xl mx-auto">
+        <AIAnalysisPanel onAnalysisComplete={handleAnalysisComplete} />
       </div>
     </div>
   )

app/globals.css

@@ -52,3 +52,44 @@ body {
   transform: translateY(-2px);
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
 }
+
+/* Custom range slider styling */
+input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  height: 8px;
+  background: linear-gradient(to right, #3B82F6 0%, #3B82F6 30%, #374151 30%, #374151 100%);
+  border-radius: 4px;
+  outline: none;
+  cursor: pointer;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 20px;
+  height: 20px;
+  background: #3B82F6;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid #1e40af;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+}
+
+input[type="range"]::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  background: #3B82F6;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid #1e40af;
+  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3);
+}
+
+input[type="range"]:focus::-webkit-slider-thumb {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+}
+
+input[type="range"]:focus::-moz-range-thumb {
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+}

app/trading/page.js

@@ -18,16 +18,22 @@ export default function TradingPage() {
 
   useEffect(() => {
     fetchBalance()
+    // Refresh balance every 30 seconds to keep it current
+    const interval = setInterval(fetchBalance, 30000)
+    return () => clearInterval(interval)
   }, [])
 
   const fetchBalance = async () => {
     setLoading(true)
     try {
-      const response = await fetch('/api/trading/balance')
+      // Use the real wallet balance API
+      const response = await fetch('/api/wallet/balance')
       const data = await response.json()
       
       if (data.success) {
         setBalance(data.balance)
+      } else {
+        console.error('Failed to fetch balance:', data.error)
       }
     } catch (error) {
       console.error('Failed to fetch balance:', error)