Update index.html

index.html

@@ -15,7 +15,7 @@
             theme: {
                 extend: {
                     colors: {
-                        primary: '#1E90FF', // Updated to Dodger Blue to match image
+                        primary: '#1E90FF',
                         secondary: '#8b5cf6',
                         darkBg: '#111827',
                         darkCard: '#1f2937',
@@ -50,7 +50,7 @@
             transition: max-height 0.3s ease-in-out;
         }
         .api-form.open {
-            max-height: 200px; /* Adjust based on content height */
+            max-height: 200px;
         }
     </style>
 </head>
@@ -315,22 +315,24 @@
                 localStorage.setItem('bingxApiKey', API_KEY);
                 localStorage.setItem('bingxApiSecret', API_SECRET);
                 alert('API credentials saved successfully! Syncing data...');
-                fetchData(); // Reload data with new credentials
-                apiForm.classList.remove('open'); // Close form
+                fetchData();
+                apiForm.classList.remove('open');
             } else {
                 alert('Please enter both API Key and Secret.');
             }
         });
 
         // Generate Signature
-        function generateSignature(params) {
-            // Sort params by key
-            const sortedParams = Object.keys(params).sort().reduce((obj, key) => {
-                obj[key] = params[key];
-                return obj;
-            }, {});
-            const queryString = new URLSearchParams(sortedParams).toString();
-            return CryptoJS.HmacSHA256(queryString, API_SECRET).toString(CryptoJS.enc.Hex);
+        function generateSignature(apiSecret, paramsStr) {
+            return CryptoJS.HmacSHA256(paramsStr, apiSecret).toString(CryptoJS.enc.Hex);
+        }
+
+        // Parse Parameters
+        function parseParams(params) {
+            const sortedKeys = Object.keys(params).sort();
+            const paramPairs = sortedKeys.map(key => `${key}=${params[key]}`);
+            const paramsStr = paramPairs.join('&');
+            return paramsStr ? `${paramsStr}&timestamp=${Date.now()}` : `timestamp=${Date.now()}`;
         }
 
         // Fetch from API
@@ -338,13 +340,17 @@
             if (!API_KEY || !API_SECRET) {
                 throw new Error('API Key and Secret are not set. Please enter your credentials.');
             }
-            params.timestamp = Date.now();
-            params.recvWindow = 5000; // Optional, check if needed
-            // Do not include IP restriction parameters; assume disabled in API key settings
-            const signature = generateSignature(params);
-            params.signature = signature;
-            const url = `${API_BASE_URL}${endpoint}?${new URLSearchParams(params)}`;
-            const response = await fetch(url, { method: 'GET', headers: { 'X-BX-APIKEY': API_KEY } });
+            params.recvWindow = params.recvWindow || 5000; // Default to 5000ms if not provided
+            const paramsStr = parseParams(params);
+            const signature = generateSignature(API_SECRET, paramsStr);
+            const url = `${API_BASE_URL}${endpoint}?${paramsStr}&signature=${signature}`;
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: {
+                    'X-BX-APIKEY': API_KEY,
+                    'Content-Type': 'application/json'
+                }
+            });
             if (!response.ok) {
                 const errorText = await response.text();
                 throw new Error(`API Error ${response.status}: ${errorText}`);
@@ -354,34 +360,31 @@
 
         // Fetch Specific Data
         async function fetchBalance() {
-            const data = await fetchFromAPI('/openApi/swap/v2/account/balance');
-            // Updated parsing for V2 response structure
-            return data.data.assets.find(b => b.asset === 'USDT')?.walletBalance || 0;
+            const data = await fetchFromAPI('/openApi/swap/v3/user/balance');
+            return data.data.find(b => b.asset === 'USDT')?.walletBalance || 0;
         }
 
         async function fetchOpenPositions() {
-            const data = await fetchFromAPI('/openApi/swap/v2/position');
-            // Updated for V2 response structure
+            const data = await fetchFromAPI('/openApi/swap/v2/user/positions', { symbol: 'BTC-USDT' }); // Default symbol, adjust as needed
             return data.data || [];
         }
 
         async function fetchTradeHistory() {
-            const data = await fetchFromAPI('/openApi/swap/v2/trade/history', { limit: 100 });
-            // Updated for V2 response structure
+            const data = await fetchFromAPI('/openApi/swap/v2/user/income', { limit: 100 });
             return data.data || [];
         }
 
         // Helper Functions
         function calculateTodayProfit(trades) {
             const today = new Date().toDateString();
-            return trades.filter(trade => new Date(trade.closeTime).toDateString() === today)
-                .reduce((sum, trade) => sum + (trade.realizedProfit || 0), 0);
+            return trades.filter(trade => new Date(trade.time).toDateString() === today)
+                .reduce((sum, trade) => sum + (trade.income || 0), 0);
         }
 
         function calculateAdvancedStats(trades) {
             let totalProfit = 0, totalLoss = 0, wins = 0;
             trades.forEach(trade => {
-                const pl = trade.realizedProfit || 0;
+                const pl = trade.income || 0;
                 if (pl > 0) { totalProfit += pl; wins++; } else { totalLoss += Math.abs(pl); }
             });
             const profitFactor = totalLoss ? (totalProfit / totalLoss) : 0;
@@ -406,7 +409,7 @@
                 tbody.innerHTML += `
                     <tr class="border-b border-gray-200 dark:border-gray-700">
                         <td class="py-4">${pos.symbol}</td>
-                        <td class="py-4"><span class="${pos.side === 'Long' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'} px-2 py-1 rounded">${pos.side}</span></td>
+                        <td class="py-4"><span class="${pos.positionSide === 'LONG' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'} px-2 py-1 rounded">${pos.positionSide}</span></td>
                         <td class="py-4">${pos.quantity}</td>
                         <td class="py-4">$${pos.entryPrice.toFixed(2)}</td>
                         <td class="py-4 font-medium">$${pos.markPrice.toFixed(2)}</td>
@@ -419,11 +422,11 @@
                 tbody.innerHTML += `
                     <tr class="border-b border-gray-200 dark:border-gray-700">
                         <td class="py-4">${trade.symbol}</td>
-                        <td class="py-4"><span class="${trade.side === 'Long' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'} px-2 py-1 rounded">${trade.side}</span></td>
-                        <td class="py-4">${trade.quantity}</td>
-                        <td class="py-4">$${trade.entryPrice.toFixed(2)}</td>
-                        <td class="py-4 font-medium">$${trade.exitPrice.toFixed(2)}</td>
-                        <td class="py-4 font-bold ${trade.realizedProfit > 0 ? 'text-green-500' : 'text-red-500'}">$${trade.realizedProfit.toFixed(2)}</td>
+                        <td class="py-4"><span class="${trade.positionSide === 'LONG' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800'} px-2 py-1 rounded">${trade.positionSide}</span></td>
+                        <td class="py-4">${trade.quantity || 0}</td>
+                        <td class="py-4">$${trade.entryPrice?.toFixed(2) || '0.00'}</td>
+                        <td class="py-4 font-medium">$${trade.exitPrice?.toFixed(2) || '0.00'}</td>
+                        <td class="py-4 font-bold ${trade.income > 0 ? 'text-green-500' : 'text-red-500'}">$${trade.income?.toFixed(2) || '0.00'}</td>
                         <td class="py-4"><span class="px-2 py-1 rounded bg-gray-100 text-gray-800">Closed</span></td>
                         <td class="py-4 text-right"><button class="text-gray-400 hover:text-primary"><i class="fas fa-ellipsis-v"></i></button></td>
                     </tr>`;
@@ -444,8 +447,8 @@
 
         function updatePerformanceChart(trades) {
             const monthlyPL = trades.reduce((acc, trade) => {
-                const month = new Date(trade.closeTime).toLocaleString('default', { month: 'short' });
-                acc[month] = (acc[month] || 0) + (trade.realizedProfit || 0);
+                const month = new Date(trade.time).toLocaleString('default', { month: 'short' });
+                acc[month] = (acc[month] || 0) + (trade.income || 0);
                 return acc;
             }, {});
             performanceChart.data.labels = Object.keys(monthlyPL);
@@ -491,7 +494,7 @@
 
                 document.getElementById('total-balance').textContent = `$${balance.toFixed(2)}`;
                 document.getElementById('open-trades').textContent = positions.length;
-                const longCount = positions.filter(p => p.side === 'Long').length;
+                const longCount = positions.filter(p => p.positionSide === 'LONG').length;
                 document.getElementById('trade-types').innerHTML = `<span class="font-medium">${longCount} Long</span><span class="text-gray-500 mx-2 dark:text-gray-400">•</span><span class="font-medium">${positions.length - longCount} Short</span>`;
                 const todayProfit = calculateTodayProfit(trades);
                 document.getElementById('today-profit').textContent = `$${todayProfit.toFixed(2)}`;
@@ -510,7 +513,7 @@
                 document.getElementById('allocation-update').textContent = `Last updated: ${new Date().toLocaleTimeString()}`;
             } catch (error) {
                 console.error('Error fetching data:', error);
-                alert(`Failed to sync with BingX API: ${error.message}. Please check your credentials, network, or BingX API documentation.`);
+                alert(`Failed to sync with BingX API: ${error.message}. Please check your credentials, permissions, network, or BingX API documentation.`);
             }
         }
 
@@ -518,7 +521,7 @@
         document.getElementById('refresh-btn').addEventListener('click', fetchData);
         document.getElementById('sync-now').addEventListener('click', fetchData);
         window.addEventListener('load', fetchData);
-        setInterval(fetchData, 120000); // Refresh every 2 minutes to avoid rate limiting
+        setInterval(fetchData, 120000); // Refresh every 2 minutes, respecting rate limit of 5/s
     </script>
 </body>
 </html>