Spaces:
Sleeping
Sleeping
| <html lang="en" data-theme="dark"> | |
| <head> | |
| <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://unpkg.com/[email protected]"></script> | |
| <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></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; color: #E5E7EB; } | |
| .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; } | |
| th { background-color: #374151; text-align: left; position: sticky; top: 0; z-index: 10; } | |
| td, th { padding: 0.75rem 1rem; border-bottom: 1px solid #374151; vertical-align: middle; } | |
| tbody tr:first-child { animation: fadeIn 0.7s ease-out forwards; } | |
| .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: 12px; color: #9CA3AF; text-align: right; margin-bottom: 1rem; } | |
| .status-online { color: #34D399; } | |
| .asset-cell { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; } | |
| .asset-logo { width: 24px; height: 24px; } | |
| .asset-cell a { color: inherit; text-decoration: none; font-weight: bold; } | |
| .asset-cell a:hover { text-decoration: underline; } | |
| @keyframes fadeIn { from { background-color: rgba(52, 211, 153, 0.2); opacity: 0; } to { background-color: transparent; opacity: 1; } } | |
| </style> | |
| </head> | |
| <body hx-ext="sse" sse-connect="/api/signals/stream"> | |
| <main class="container"> | |
| <header> | |
| <h1>Sentinel Arbitrage Engine</h1> | |
| </header> | |
| <div class="status-bar"> | |
| Engine Status: <span id="status-light" class="status-online">ONLINE</span> | Last Signal: <span id="last-update-time">--:--:--</span> | |
| </div> | |
| <article data-theme="dark" style="padding: 0; overflow-x: auto;"> | |
| <table> | |
| <thead> | |
| <tr> | |
| <th>Pair</th> | |
| <th>Oracle 1 (Pyth)</th> | |
| <th>Oracle 2 (Agg.)</th> | |
| <th>Discrepancy</th> | |
| <th>AI Risk</th> | |
| <th>AI Strategy</th> | |
| </tr> | |
| </thead> | |
| <tbody id="opportunities-table"> | |
| <tr id="placeholder-row"><td colspan="6" style="text-align:center; padding: 2rem;">Monitoring for oracle dislocations across 10 assets...</td></tr> | |
| </tbody> | |
| </table> | |
| </article> | |
| </main> | |
| <script> | |
| // ==================================================================== | |
| // THE "MONEY-SPINNING" UI UPGRADE IS HERE | |
| // ==================================================================== | |
| const ASSET_CONFIG = { | |
| 'BTC': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png', link: 'https://www.coingecko.com/en/coins/bitcoin' }, | |
| 'ETH': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png', link: 'https://www.coingecko.com/en/coins/ethereum' }, | |
| 'SOL': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5426.png', link: 'https://www.coingecko.com/en/coins/solana' }, | |
| 'XRP': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/52.png', link: 'https://www.coingecko.com/en/coins/ripple' }, | |
| 'DOGE': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/74.png', link: 'https://www.coingecko.com/en/coins/dogecoin' }, | |
| 'ADA': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/2010.png', link: 'https://www.coingecko.com/en/coins/cardano' }, | |
| 'AVAX': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png', link: 'https://www.coingecko.com/en/coins/avalanche' }, | |
| 'LINK': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1975.png', link: 'https://www.coingecko.com/en/coins/chainlink' }, | |
| 'DOT': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/6636.png', link: 'https://www.coingecko.com/en/coins/polkadot' }, | |
| 'MATIC': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/3890.png', link: 'https://www.coingecko.com/en/coins/polygon' } | |
| }; | |
| // ==================================================================== | |
| const opportunitiesTable = document.getElementById('opportunities-table'); | |
| const lastUpdateTime = document.getElementById('last-update-time'); | |
| document.body.addEventListener('htmx:sseMessage', function(evt) { | |
| document.getElementById('placeholder-row')?.remove(); | |
| const signal = JSON.parse(evt.detail.data); | |
| const isPythCheaper = signal.pyth_price < signal.chainlink_price; | |
| const newRow = opportunitiesTable.insertRow(0); | |
| const assetInfo = ASSET_CONFIG[signal.asset] || { logo: '', link: '#' }; | |
| newRow.innerHTML = ` | |
| <td> | |
| <div class="asset-cell"> | |
| <img src="${assetInfo.logo}" class="asset-logo" alt="${signal.asset} logo"> | |
| <a href="${assetInfo.link}" target="_blank">${signal.asset}/USD</a> | |
| </div> | |
| </td> | |
| <td><span class="${isPythCheaper ? 'buy' : 'sell'}">${signal.pyth_price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</span></td> | |
| <td><span class="${!isPythCheaper ? 'buy' : 'sell'}">${signal.chainlink_price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</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> |