Update index.html

index.html

@@ -267,39 +267,39 @@
 
         // Generate Signature
         function generateSignature(params) {
-            params.timestamp = Date.now();
-            params.apiKey = API_KEY;
-            params.recvWindow = 5000; // Optional, check BingX docs
-            const queryString = new URLSearchParams(params).toString();
+            const sortedParams = Object.fromEntries(Object.entries(params).sort());
+            const queryString = new URLSearchParams(sortedParams).toString();
             return CryptoJS.HmacSHA256(queryString, API_SECRET).toString(CryptoJS.enc.Hex);
         }
 
         // Fetch from API
         async function fetchFromAPI(endpoint, params = {}) {
-            params.timestamp = Date.now();
-            params.apiKey = API_KEY;
-            params.recvWindow = 5000;
-            params.signature = generateSignature(params);
-            const url = `${API_BASE_URL}${endpoint}?${new URLSearchParams(params)}`;
-            const response = await fetch(url, { method: 'GET', headers: { 'X-BX-APIKEY': API_KEY } });
-            if (!response.ok) throw new Error(`API Error: ${response.statusText}`);
+            params.timestamp = Date.now().toString();
+            params.recvWindow = '5000'; // 5-second window, per BingX requirements
+            const signature = generateSignature(params);
+            const url = `${API_BASE_URL}${endpoint}?${new URLSearchParams({ ...params, signature })}`;
+            const response = await fetch(url, {
+                method: 'GET',
+                headers: { 'X-BX-APIKEY': API_KEY }
+            });
+            if (!response.ok) throw new Error(`API Error: ${response.status} - ${await response.text()}`);
             return response.json();
         }
 
         // Fetch Specific Data
         async function fetchBalance() {
-            const data = await fetchFromAPI('/openApi/v1/account/balance');
-            return data.data.balance.find(b => b.asset === 'USDT').free; // Adjust based on actual response
+            const data = await fetchFromAPI('/openApi/swap/v2/account/balance');
+            return data.data.find(b => b.asset === 'USDT')?.balance || 0; // Adjust based on actual response
         }
 
         async function fetchOpenPositions() {
-            const data = await fetchFromAPI('/openApi/v1/position');
-            return data.data; // Adjust based on actual response structure
+            const data = await fetchFromAPI('/openApi/swap/v2/position');
+            return data.data || []; // Adjust based on actual response structure
         }
 
         async function fetchTradeHistory() {
-            const data = await fetchFromAPI('/openApi/v1/trade/history', { limit: 100 });
-            return data.data; // Adjust based on actual response structure
+            const data = await fetchFromAPI('/openApi/swap/v2/trade/history', { limit: 100 });
+            return data.data || []; // Adjust based on actual response structure
         }
 
         // Helper Functions
@@ -336,12 +336,12 @@
             positions.forEach(pos => {
                 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">${pos.quantity}</td>
-                        <td class="py-4">$${pos.entryPrice.toFixed(2)}</td>
-                        <td class="py-4 font-medium">$${pos.markPrice.toFixed(2)}</td>
-                        <td class="py-4 font-bold ${pos.unrealizedProfit > 0 ? 'text-green-500' : 'text-red-500'}">$${pos.unrealizedProfit.toFixed(2)}</td>
+                        <td class="py-4">${pos.symbol || 'N/A'}</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 || 'N/A'}</span></td>
+                        <td class="py-4">${pos.quantity || 0}</td>
+                        <td class="py-4">$${parseFloat(pos.entryPrice || 0).toFixed(2)}</td>
+                        <td class="py-4 font-medium">$${parseFloat(pos.markPrice || 0).toFixed(2)}</td>
+                        <td class="py-4 font-bold ${parseFloat(pos.unrealizedProfit || 0) > 0 ? 'text-green-500' : 'text-red-500'}">$${parseFloat(pos.unrealizedProfit || 0).toFixed(2)}</td>
                         <td class="py-4"><span class="px-2 py-1 rounded bg-blue-100 text-blue-800">Open</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>`;
@@ -349,12 +349,12 @@
             trades.slice(0, 5).forEach(trade => {
                 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">${trade.symbol || 'N/A'}</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 || 'N/A'}</span></td>
+                        <td class="py-4">${trade.quantity || 0}</td>
+                        <td class="py-4">$${parseFloat(trade.entryPrice || 0).toFixed(2)}</td>
+                        <td class="py-4 font-medium">$${parseFloat(trade.exitPrice || 0).toFixed(2)}</td>
+                        <td class="py-4 font-bold ${parseFloat(trade.realizedProfit || 0) > 0 ? 'text-green-500' : 'text-red-500'}">$${parseFloat(trade.realizedProfit || 0).toFixed(2)}</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>`;
@@ -375,7 +375,7 @@
 
         function updatePerformanceChart(trades) {
             const monthlyPL = trades.reduce((acc, trade) => {
-                const month = new Date(trade.closeTime).toLocaleString('default', { month: 'short' });
+                const month = new Date(trade.closeTime || Date.now()).toLocaleString('default', { month: 'short' });
                 acc[month] = (acc[month] || 0) + (trade.realizedProfit || 0);
                 return acc;
             }, {});
@@ -385,21 +385,21 @@
         }
 
         function updateAllocationChart(allocation) {
-            allocationChart.data.labels = allocation.labels;
-            allocationChart.data.datasets[0].data = allocation.data;
+            allocationChart.data.labels = allocation.labels.length ? allocation.labels : ['No Data'];
+            allocationChart.data.datasets[0].data = allocation.data.length ? allocation.data : [100];
             allocationChart.update();
             const legend = document.getElementById('allocation-legend');
             legend.innerHTML = allocation.labels.map((label, i) => `
                 <div class="mb-3">
                     <div class="flex justify-between mb-1">
                         <span class="text-gray-500 dark:text-gray-400 flex items-center">
-                            <span class="h-3 w-3 bg-[${allocationChart.data.datasets[0].backgroundColor[i]}] rounded-full mr-2"></span>
-                            ${label}
+                            <span class="h-3 w-3 bg-[${allocationChart.data.datasets[0].backgroundColor[i % 4]}] rounded-full mr-2"></span>
+                            ${label || 'N/A'}
                         </span>
-                        <span class="font-medium dark:text-white">${allocation.data[i].toFixed(1)}%</span>
+                        <span class="font-medium dark:text-white">${allocation.data[i] ? allocation.data[i].toFixed(1) : 0}%</span>
                     </div>
                     <div class="w-full bg-gray-200 rounded-full h-2 dark:bg-gray-700">
-                        <div class="bg-[${allocationChart.data.datasets[0].backgroundColor[i]}] h-2 rounded-full" style="width: ${allocation.data[i]}%"></div>
+                        <div class="bg-[${allocationChart.data.datasets[0].backgroundColor[i % 4]}] h-2 rounded-full" style="width: ${allocation.data[i] || 0}%"></div>
                     </div>
                 </div>`).join('');
         }
@@ -416,9 +416,9 @@
                     fetchTradeHistory()
                 ]);
 
-                document.getElementById('total-balance').textContent = `$${balance.toFixed(2)}`;
+                document.getElementById('total-balance').textContent = `$${parseFloat(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.side === '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)}`;
@@ -433,11 +433,12 @@
                 const allocation = calculatePortfolioAllocation(positions);
                 updateAllocationChart(allocation);
 
-                document.getElementById('last-sync').textContent = `Last synced: ${new Date().toLocaleTimeString()}`;
-                document.getElementById('allocation-update').textContent = `Last updated: ${new Date().toLocaleTimeString()}`;
+                const now = new Date().toLocaleString('en-US', { timeZone: 'Asia/Singapore', hour12: false });
+                document.getElementById('last-sync').textContent = `Last synced: ${now}`;
+                document.getElementById('allocation-update').textContent = `Last updated: ${now}`;
             } catch (error) {
                 console.error('Error fetching data:', error);
-                alert('Failed to sync with BingX API. Please check your API credentials or network.');
+                alert(`Failed to sync with BingX API. Please check your API credentials, IP whitelisting, or network. Details: ${error.message}`);
             }
         }
 
@@ -445,7 +446,7 @@
         document.getElementById('refresh-btn').addEventListener('click', fetchData);
         document.getElementById('sync-now').addEventListener('click', fetchData);
         window.addEventListener('load', fetchData);
-        setInterval(fetchData, 120000); // Increased to 2 minutes to avoid rate limiting
+        setInterval(fetchData, 120000); // Refresh every 2 minutes to avoid rate limiting
     </script>
     <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px; position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle; display:inline-block; margin-right:3px; filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff; text-decoration: underline;" target="_blank">DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=EricSam/bingx-monitoring" style="color: #fff; text-decoration: underline;" target="_blank">Remix</a></p>
 </body>