Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Sentinel Arbitrage Engine</title> | |
| <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; font-weight: 600; } | |
| .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; } | |
| td, th { padding: 0.75rem 1rem; border-bottom: 1px solid #374151; white-space: nowrap; } | |
| .buy { color: #34D399; } .sell { color: #F87171; } | |
| .risk-low { color: #34D399; } .risk-medium { color: #FBBF24; } .risk-high { color: #F87171; } | |
| @keyframes fadeIn { from { background-color: rgba(52, 211, 153, 0.2); } to { background-color: transparent; } } | |
| </style> | |
| <!-- The Socket.IO client library --> | |
| <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script> | |
| </head> | |
| <body> | |
| <main class="container"> | |
| <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 (Chainlink Agg.)</th> | |
| <th>Discrepancy</th> | |
| <th>Risk</th> | |
| <th>Rationale</th> | |
| <th>Strategy</th> | |
| </tr> | |
| </thead> | |
| <tbody id="opportunities-table"> | |
| <tr id="placeholder-row"><td colspan="7" style="text-align:center; padding: 2rem;">Connecting to engine...</td></tr> | |
| </tbody> | |
| </table> | |
| </article> | |
| </main> | |
| <script> | |
| // --- THE NEW JAVASCRIPT ENGINE --- | |
| const socket = io(); | |
| const statusLight = document.getElementById('status-light'); | |
| const opportunitiesTable = document.getElementById('opportunities-table'); | |
| const placeholderRow = document.getElementById('placeholder-row'); | |
| const lastUpdateTime = document.getElementById('last-update-time'); | |
| socket.on('connect', () => { | |
| console.log('✅ Connected to Sentinel Engine via WebSocket.'); | |
| statusLight.textContent = 'ONLINE'; | |
| statusLight.className = 'status-online'; | |
| if (placeholderRow) placeholderRow.cells[0].textContent = 'Monitoring for oracle dislocations...'; | |
| }); | |
| socket.on('disconnect', () => { | |
| console.log('🔥 Disconnected from Sentinel Engine.'); | |
| statusLight.textContent = 'OFFLINE'; | |
| statusLight.className = 'status-offline'; | |
| }); | |
| socket.on('new_signal', (signal) => { | |
| console.log('⚡️ New Signal Received:', signal); | |
| if (placeholderRow) placeholderRow.remove(); | |
| const pythClass = signal.pyth_price < signal.chainlink_price ? 'buy' : 'sell'; | |
| const chainlinkClass = signal.pyth_price < signal.chainlink_price ? 'sell' : 'buy'; | |
| const newRow = opportunitiesTable.insertRow(0); | |
| newRow.style.animation = 'fadeIn 0.7s ease-out'; | |
| newRow.innerHTML = ` | |
| <td><strong>BTC/USD</strong></td> | |
| <td><span class="${pythClass}">Pyth Network</span><br>$${signal.pyth_price.toFixed(2)}</td> | |
| <td><span class="${chainlinkClass}">Chainlink Agg.</span><br>$${signal.chainlink_price.toFixed(2)}</td> | |
| <td><strong>${signal.spread_pct.toFixed(3)}%</strong></td> | |
| <td><span class="risk-${signal.risk.toLowerCase()}">${signal.risk}</span></td> | |
| <td>${signal.rationale}</td> | |
| <td>${signal.strategy}</td> | |
| `; | |
| const timeStr = new Date(signal.timestamp).toLocaleTimeString('en-GB', { timeZone: 'UTC' }); | |
| lastUpdateTime.textContent = `${timeStr} UTC`; | |
| }); | |
| </script> | |
| </body> | |
| </html> |