Hugging Face's logo

Spaces:
mgbam
/
CryptoSentinel_AI
Running

App Files Community
mgbam commited on
Commit
9c7fae0
·
verified ·
1 Parent(s): acb6f17

Update static/index.html

Browse files
Files changed (1) hide show
  1. static/index.html +45 -57
static/index.html CHANGED
@@ -5,47 +5,34 @@
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Sentinel Arbitrage Engine</title>
7
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
8
- <script src="https://unpkg.com/htmx.org@1.9.12"></script>
9
- <script src="https://unpkg.com/htmx.org/dist/ext/sse.js"></script>
10
  <style>
11
- :root {
12
- --pico-font-family: 'SF Mono', 'Consolas', 'Menlo', monospace;
13
- --pico-font-size: 14px;
14
- --pico-color-green-400: #34D399;
15
- --pico-color-red-400: #F87171;
16
- --pico-color-amber-400: #FBBF24;
17
- }
18
- body { background-color: #111927; color: #E5E7EB; }
19
- .container { max-width: 1280px; margin: 1.5rem auto; padding: 0 1rem; }
20
  header { text-align: center; margin-bottom: 1.5rem; }
21
- h1 { color: #38BDF8; margin-bottom: 0; font-weight: 600; }
 
 
22
  table { width: 100%; border-collapse: collapse; }
23
- th { background-color: #374151; text-align: left; position: sticky; top: 0; z-index: 10; }
24
  td, th { padding: 0.75rem 1rem; border-bottom: 1px solid #374151; vertical-align: middle; }
25
- tbody tr:first-child { animation: fadeIn 0.7s ease-out forwards; }
26
- .buy { color: var(--pico-color-green-400); }
27
- .sell { color: var(--pico-color-red-400); }
28
- .risk-low { color: var(--pico-color-green-400); }
29
- .risk-medium { color: var(--pico-color-amber-400); }
30
- .risk-high { color: var(--pico-color-red-400); }
31
- .status-bar { font-size: 12px; color: #9CA3AF; text-align: right; margin-bottom: 1rem; }
32
- .status-online { color: #34D399; }
33
  .asset-cell { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
34
  .asset-logo { width: 24px; height: 24px; }
35
  .asset-cell a { color: inherit; text-decoration: none; font-weight: bold; }
36
- .asset-cell a:hover { text-decoration: underline; }
37
- @keyframes fadeIn { from { background-color: rgba(52, 211, 153, 0.2); opacity: 0; } to { background-color: transparent; opacity: 1; } }
38
  </style>
39
  </head>
40
- <body hx-ext="sse" sse-connect="/api/signals/stream">
41
  <main class="container">
42
- <header>
43
- <h1>Sentinel Arbitrage Engine</h1>
44
- </header>
45
  <div class="status-bar">
46
- Engine Status: <span id="status-light" class="status-online">ONLINE</span> | Last Signal: <span id="last-update-time">--:--:--</span>
47
  </div>
48
- <article data-theme="dark" style="padding: 0; overflow-x: auto;">
49
  <table>
50
  <thead>
51
  <tr>
@@ -58,49 +45,50 @@
58
  </tr>
59
  </thead>
60
  <tbody id="opportunities-table">
61
- <tr id="placeholder-row"><td colspan="6" style="text-align:center; padding: 2rem;">Monitoring for oracle dislocations across 10 assets...</td></tr>
62
  </tbody>
63
  </table>
64
  </article>
65
  </main>
66
  <script>
67
- // ====================================================================
68
- // THE "MONEY-SPINNING" UI UPGRADE IS HERE
69
- // ====================================================================
70
  const ASSET_CONFIG = {
71
- 'BTC': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png', link: 'https://www.coingecko.com/en/coins/bitcoin' },
72
- 'ETH': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png', link: 'https://www.coingecko.com/en/coins/ethereum' },
73
- 'SOL': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5426.png', link: 'https://www.coingecko.com/en/coins/solana' },
74
- 'XRP': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/52.png', link: 'https://www.coingecko.com/en/coins/ripple' },
75
- 'DOGE': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/74.png', link: 'https://www.coingecko.com/en/coins/dogecoin' },
76
- 'ADA': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/2010.png', link: 'https://www.coingecko.com/en/coins/cardano' },
77
- 'AVAX': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png', link: 'https://www.coingecko.com/en/coins/avalanche' },
78
- 'LINK': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1975.png', link: 'https://www.coingecko.com/en/coins/chainlink' },
79
- 'DOT': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/6636.png', link: 'https://www.coingecko.com/en/coins/polkadot' },
80
- 'MATIC': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/3890.png', link: 'https://www.coingecko.com/en/coins/polygon' }
81
  };
82
- // ====================================================================
83
 
 
 
84
  const opportunitiesTable = document.getElementById('opportunities-table');
85
  const lastUpdateTime = document.getElementById('last-update-time');
86
 
87
- document.body.addEventListener('htmx:sseMessage', function(evt) {
 
 
 
 
 
 
 
 
 
 
 
88
  document.getElementById('placeholder-row')?.remove();
89
-
90
- const signal = JSON.parse(evt.detail.data);
91
- const isPythCheaper = signal.pyth_price < signal.chainlink_price;
92
  const newRow = opportunitiesTable.insertRow(0);
93
- const assetInfo = ASSET_CONFIG[signal.asset] || { logo: '', link: '#' };
94
 
95
  newRow.innerHTML = `
96
- <td>
97
- <div class="asset-cell">
98
- <img src="${assetInfo.logo}" class="asset-logo" alt="${signal.asset} logo">
99
- <a href="${assetInfo.link}" target="_blank">${signal.asset}/USD</a>
100
- </div>
101
- </td>
102
- <td><span class="${isPythCheaper ? 'buy' : 'sell'}">${signal.pyth_price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</span></td>
103
- <td><span class="${!isPythCheaper ? 'buy' : 'sell'}">${signal.chainlink_price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</span></td>
104
  <td><strong>${signal.spread_pct.toFixed(3)}%</strong></td>
105
  <td><span class="risk-${signal.risk.toLowerCase()}">${signal.risk}</span></td>
106
  <td>${signal.strategy}</td>
 
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Sentinel Arbitrage Engine</title>
7
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.min.css">
8
+ <script src="https://cdn.socket.io/4.7.5/socket.io.min.js"></script>
 
9
  <style>
10
+ :root { font-family: 'SF Mono', 'Consolas', 'Menlo', monospace; }
11
+ body { background-color: #111927; color: #E5E7EB; font-size: 14px; margin: 0; padding: 1rem; }
12
+ .container { max-width: 1280px; margin: 0 auto; }
 
 
 
 
 
 
13
  header { text-align: center; margin-bottom: 1.5rem; }
14
+ h1 { color: #38BDF8; margin-bottom: 0; }
15
+ .status-bar { font-size: 12px; color: #9CA3AF; text-align: right; margin-bottom: 1rem; }
16
+ .status-online { color: #34D399; } .status-offline { color: #F87171; }
17
  table { width: 100%; border-collapse: collapse; }
18
+ th { background-color: #374151; text-align: left; position: sticky; top: 0; }
19
  td, th { padding: 0.75rem 1rem; border-bottom: 1px solid #374151; vertical-align: middle; }
20
+ .buy { color: #34D399; } .sell { color: #F87171; }
21
+ .risk-low { color: #34D399; } .risk-medium { color: #FBBF24; } .risk-high { color: #F87171; }
22
+ tbody tr { animation: fadeIn 0.5s ease-out; }
23
+ @keyframes fadeIn { from { background-color: rgba(52, 211, 153, 0.2); } to { background-color: transparent; } }
 
 
 
 
24
  .asset-cell { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
25
  .asset-logo { width: 24px; height: 24px; }
26
  .asset-cell a { color: inherit; text-decoration: none; font-weight: bold; }
 
 
27
  </style>
28
  </head>
29
+ <body>
30
  <main class="container">
31
+ <header><h1>Sentinel Arbitrage Engine</h1></header>
 
 
32
  <div class="status-bar">
33
+ Engine Status: <span id="status-light" class="status-offline">OFFLINE</span> | Last Signal: <span id="last-update-time">--:--:--</span>
34
  </div>
35
+ <article>
36
  <table>
37
  <thead>
38
  <tr>
 
45
  </tr>
46
  </thead>
47
  <tbody id="opportunities-table">
48
+ <tr id="placeholder-row"><td colspan="6" style="text-align:center; padding: 2rem;">Connecting to engine...</td></tr>
49
  </tbody>
50
  </table>
51
  </article>
52
  </main>
53
  <script>
 
 
 
54
  const ASSET_CONFIG = {
55
+ 'BTC': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1.png' },
56
+ 'ETH': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1027.png' },
57
+ 'SOL': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5426.png' },
58
+ 'XRP': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/52.png' },
59
+ 'DOGE': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/74.png' },
60
+ 'ADA': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/2010.png' },
61
+ 'AVAX': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/5805.png' },
62
+ 'LINK': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/1975.png' },
63
+ 'DOT': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/6636.png' },
64
+ 'MATIC': { logo: 'https://s2.coinmarketcap.com/static/img/coins/64x64/3890.png' }
65
  };
 
66
 
67
+ const socket = io();
68
+ const statusLight = document.getElementById('status-light');
69
  const opportunitiesTable = document.getElementById('opportunities-table');
70
  const lastUpdateTime = document.getElementById('last-update-time');
71
 
72
+ socket.on('connect', () => {
73
+ statusLight.textContent = 'ONLINE';
74
+ statusLight.className = 'status-online';
75
+ document.getElementById('placeholder-row').cells[0].textContent = 'Monitoring for oracle dislocations...';
76
+ });
77
+
78
+ socket.on('disconnect', () => {
79
+ statusLight.textContent = 'OFFLINE';
80
+ statusLight.className = 'status-offline';
81
+ });
82
+
83
+ socket.on('new_signal', (signal) => {
84
  document.getElementById('placeholder-row')?.remove();
 
 
 
85
  const newRow = opportunitiesTable.insertRow(0);
86
+ const assetInfo = ASSET_CONFIG[signal.asset] || { logo: '' };
87
 
88
  newRow.innerHTML = `
89
+ <td><div class="asset-cell"><img src="${assetInfo.logo}" class="asset-logo"><strong>${signal.asset}/USD</strong></div></td>
90
+ <td><span class="${signal.pyth_price < signal.chainlink_price ? 'buy' : 'sell'}">${signal.pyth_price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</span></td>
91
+ <td><span class="${signal.pyth_price > signal.chainlink_price ? 'buy' : 'sell'}">${signal.chainlink_price.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}</span></td>
 
 
 
 
 
92
  <td><strong>${signal.spread_pct.toFixed(3)}%</strong></td>
93
  <td><span class="risk-${signal.risk.toLowerCase()}">${signal.risk}</span></td>
94
  <td>${signal.strategy}</td>