Spaces:

mgbam
/

CryptoSentinel_AI

Running

App Files Files Community

mgbam commited on 1 day ago

Commit

efd7324

verified ·

1 Parent(s): 2ca2f4e

Update static/index.html

Browse files

Files changed (1) hide show

static/index.html +64 -107

static/index.html CHANGED Viewed

@@ -4,92 +4,24 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sentinel Arbitrage Engine</title>
-    <!-- Pico.css for a clean, modern base -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
-    <!-- HTMX for interactivity -->
-    <script src="https://unpkg.com/[email protected]"></script>
     <style>
-        :root {
-            --pico-font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
-            --pico-font-size: 14px;
-            --pico-color-green-400: #34D399;
-            --pico-color-red-400: #F87171;
-            --pico-color-amber-400: #FBBF24;
-        }
-        body {
-            background-color: #111927;
-        }
-        .container {
-            max-width: 1280px;
-            margin: 1.5rem auto;
-            padding: 0 1rem;
-        }
-        header {
-            text-align: center;
-            margin-bottom: 1.5rem;
-        }
-        h1 {
-            color: #38BDF8;
-            margin-bottom: 0;
-            font-weight: 600;
-        }
-        table {
-            width: 100%;
-            border-collapse: collapse; /* Use collapse for a tighter look */
-        }
-        th {
-            background-color: #374151;
-            text-align: left;
-            position: sticky; /* Keep headers visible on scroll */
-            top: 0;
-        }
-        td, th {
-            padding: 0.75rem 1rem;
-            border-bottom: 1px solid #374151;
-            border-right: 1px solid #2b3544; /* Add vertical lines */
-        }
-        th:last-child, td:last-child {
-            border-right: none;
-        }
-        tbody tr:hover {
-            background-color: #1f2937;
-        }
-        tbody tr:first-child {
-             /* Animation for newly added rows */
-            animation: fadeIn 0.5s ease-out;
-        }
-        .buy { color: var(--pico-color-green-400); }
-        .sell { color: var(--pico-color-red-400); }
-        .risk-low { color: var(--pico-color-green-400); }
-        .risk-medium { color: var(--pico-color-amber-400); }
-        .risk-high { color: var(--pico-color-red-400); }
-        .status-bar {
-            font-size: 14px;
-            color: #9CA3AF;
-            margin-bottom: 1rem;
-        }
-        .status-online { color: #34D399; }
-        @keyframes fadeIn {
-            from { background-color: rgba(52, 211, 153, 0.2); }
-            to { background-color: transparent; }
-        }
     </style>
 </head>
 <body>
@@ -97,17 +29,13 @@
         <header>
             <h1>Sentinel Arbitrage Engine</h1>
         </header>
-        <div class="status-bar grid">
-            <div>Engine Status: <span class="status-online"><strong>ONLINE</strong></span></div>
-            <div id="pnl-ticker" style="text-align: right;">Simulated P/L: $0.00</div>
         </div>
-        <article data-theme="dark" style="padding: 0; overflow-x: auto;">
             <table>
                 <thead>
                     <tr>
-                        <th>Time (UTC)</th>
                         <th>Pair</th>
                         <th>Oracle 1 (Pyth)</th>
                         <th>Oracle 2 (Agg.)</th>
@@ -116,25 +44,54 @@
                         <th>AI Strategy</th>
                     </tr>
                 </thead>
-                <!-- This table body is the heart of the application. -->
-                <!-- It polls the /api/signals endpoint every 2 seconds -->
-                <!-- and replaces its entire content with the response. -->
-                <tbody
-                    id="opportunities-table"
-                    hx-get="/api/signals"
-                    hx-trigger="load, every 2s"
-                    hx-swap="innerHTML">
-                    <!-- This placeholder is shown only on the first load. -->
-                    <!-- It will be replaced by the first successful poll. -->
-                    <tr>
-                        <td colspan="7" style="text-align:center; padding: 2rem;" aria-busy="true">
-                            Awaiting first signal from engine...
-                        </td>
-                    </tr>
                 </tbody>
             </table>
         </article>
     </main>
 </body>
 </html>

     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sentinel Arbitrage Engine</title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
+    <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
     <style>
+        :root { font-family: 'SF Mono', 'Consolas', 'Menlo', monospace; }
+        body { background-color: #111927; color: #E5E7EB; font-size: 14px; margin: 0; padding: 1rem; }
+        .container { max-width: 1280px; margin: 0 auto; }
+        header { text-align: center; margin-bottom: 1.5rem; }
+        h1 { color: #38BDF8; margin-bottom: 0; }
+        .status-bar { font-size: 12px; color: #9CA3AF; text-align: right; margin-bottom: 1rem; }
+        .status-online { color: #34D399; } .status-offline { color: #F87171; }
+        table { width: 100%; border-collapse: collapse; }
+        th { background-color: #374151; text-align: left; position: sticky; top: 0; }
+        td, th { padding: 0.75rem 1rem; border-bottom: 1px solid #374151; }
+        .buy { color: #34D399; } .sell { color: #F87171; }
+        .risk-low { color: #34D399; } .risk-medium { color: #FBBF24; } .risk-high { color: #F87171; }
+        tbody tr { animation: fadeIn 0.5s ease-out; }
+        @keyframes fadeIn { from { background-color: rgba(52, 211, 153, 0.2); } to { background-color: transparent; } }
+        .asset-logo { width: 20px; height: 20px; margin-right: 8px; vertical-align: middle; }
     </style>
 </head>
 <body>
         <header>
             <h1>Sentinel Arbitrage Engine</h1>
         </header>
+        <div class="status-bar">
+            Engine Status: <span id="status-light" class="status-offline">OFFLINE</span> | Last Signal: <span id="last-update-time">--:--:--</span>
         </div>
+        <article>
             <table>
                 <thead>
                     <tr>
                         <th>Pair</th>
                         <th>Oracle 1 (Pyth)</th>
                         <th>Oracle 2 (Agg.)</th>
                         <th>AI Strategy</th>
                     </tr>
                 </thead>
+                <tbody id="opportunities-table">
+                    <tr id="placeholder-row"><td colspan="6" style="text-align:center; padding: 2rem;">Connecting to engine...</td></tr>
                 </tbody>
             </table>
         </article>
     </main>
+    <script>
+        const ASSET_LOGOS = {
+            'BTC': 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png',
+            'ETH': 'https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png',
+            'SOL': 'https://s2.coinmarketcap.com/static/img/coins/64x64/5426.png'
+        };
+        const socket = io();
+        const statusLight = document.getElementById('status-light');
+        const opportunitiesTable = document.getElementById('opportunities-table');
+        const lastUpdateTime = document.getElementById('last-update-time');
+        socket.on('connect', () => {
+            statusLight.textContent = 'ONLINE';
+            statusLight.className = 'status-online';
+            document.getElementById('placeholder-row').cells[0].textContent = 'Monitoring for oracle dislocations...';
+        });
+        socket.on('disconnect', () => {
+            statusLight.textContent = 'OFFLINE';
+            statusLight.className = 'status-offline';
+        });
+        socket.on('new_signal', (signal) => {
+            document.getElementById('placeholder-row')?.remove();
+            const isPythCheaper = signal.pyth_price < signal.chainlink_price;
+            const newRow = opportunitiesTable.insertRow(0);
+            const logoUrl = ASSET_LOGOS[signal.asset] || '';
+            newRow.innerHTML = `
+                <td><img src="${logoUrl}" class="asset-logo" alt="${signal.asset}"><strong>${signal.asset}/USD</strong></td>
+                <td><span class="${isPythCheaper ? 'buy' : 'sell'}">$${signal.pyth_price.toFixed(2)}</span></td>
+                <td><span class="${!isPythCheaper ? 'buy' : 'sell'}">$${signal.chainlink_price.toFixed(2)}</span></td>
+                <td><strong>${signal.spread_pct.toFixed(3)}%</strong></td>
+                <td><span class="risk-${signal.risk.toLowerCase()}">${signal.risk}</span></td>
+                <td>${signal.strategy}</td>
+            `;
+            lastUpdateTime.textContent = new Date(signal.timestamp).toLocaleTimeString('en-US');
+        });
+    </script>
 </body>
 </html>