Spaces:

JairoDanielMT
/

4monedas

Running

App Files Files Community

JairoDanielMT commited on Nov 28, 2025

Commit

ddcd034

verified ·

1 Parent(s): f500880

Update index.html

Browse files

Files changed (1) hide show

index.html +180 -17

index.html CHANGED Viewed

@@ -1,19 +1,182 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="es">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Dashboard: Últimos 7 días (XRP, PAXG, WLD, USDC) + Earn Morpho (USDC)</title>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <style>
+    body { font-family: Inter, system-ui, Arial; margin: 18px; background:#f7f8fb; color:#111; }
+    header { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
+    .card { background:white; border-radius:8px; padding:12px; box-shadow:0 6px 18px rgba(20,20,40,0.06); }
+    #controls { display:flex; gap:12px; align-items:center; margin-bottom:12px; }
+    .small { font-size:0.9rem; color:#555; }
+    #grid { display:grid; grid-template-columns: 1fr 300px; gap:12px; }
+    #chartCard { min-height:360px; }
+    input[type="number"]{ width:120px; padding:6px; border-radius:6px; border:1px solid #ddd; }
+    button { padding:8px 10px; border-radius:6px; border:none; background:#2563eb; color:white; cursor:pointer; }
+    button.secondary { background:#e5e7eb; color:#111; }
+    .asset-toggle { display:flex; gap:6px; flex-wrap:wrap; }
+    .asset-toggle label { display:flex; gap:6px; align-items:center; font-size:0.9rem; }
+  </style>
+</head>
+<body>
+  <header>
+    <h2>Crypto 7d — XRP, PAXG, WLD, USDC</h2>
+    <div class="small">Fuente de precios: CoinGecko · Est. rendement Morpho para USDC (ejemplo).</div>
+  </header>
+  <div id="grid">
+    <div class="card" id="chartCard">
+      <canvas id="priceChart"></canvas>
+    </div>
+    <div class="card">
+      <h3>Earn Morpho — Estimador (USDC)</h3>
+      <div class="small" style="margin-bottom:8px;">Tasa usada (30d APY de referencia): <span id="morphoRateDisplay">4.00%</span></div>
+      <label>Monto en USDC:
+        <input id="amount" type="number" min="0" step="0.01" value="1000">
+      </label>
+      <div style="margin-top:8px; display:flex; gap:8px;">
+        <button id="calcBtn">Calcular (7 días)</button>
+        <button id="setRateBtn" class="secondary">Usar otra tasa</button>
+      </div>
+      <div id="results" style="margin-top:12px;">
+        <div class="small">Ganancia estimada (7 días): <strong id="gain7">-</strong></div>
+        <div class="small">Total aproximado: <strong id="total7">-</strong></div>
+        <div class="small" style="margin-top:6px;">(Cálculo: interés compuesto diario aplicado sobre APY)</div>
+      </div>
+      <hr style="margin:12px 0;" />
+      <h4>Visibilidad activos</h4>
+      <div class="asset-toggle" id="toggles">
+        <!-- toggles inserted dynamically -->
+      </div>
+      <div style="margin-top:12px;" class="small">
+        Nota: CoinGecko API pública se usa para datos históricos. Ajusta la tasa Morpho según la plataforma o fuente que prefieras. Fuentes: CoinGecko y pools/agg. de rendimiento (ejemplo). :contentReference[oaicite:2]{index=2}
+      </div>
+    </div>
+  </div>
+<script>
+const assets = [
+  { id: 'xrp', label: 'XRP' },
+  { id: 'pax-gold', label: 'PAXG' },
+  { id: 'worldcoin', label: 'WLD' },
+  { id: 'usd-coin', label: 'USDC' }
+];
+// CoinGecko market_chart endpoint: /coins/{id}/market_chart?vs_currency=usd&days=7
+async function fetchPriceSeries(assetId) {
+  const url = `https://api.coingecko.com/api/v3/coins/${assetId}/market_chart?vs_currency=usd&days=7&interval=daily`;
+  const res = await fetch(url);
+  if(!res.ok) throw new Error('Error fetching ' + assetId + ' -> ' + res.status);
+  const j = await res.json();
+  // j.prices -> [ [timestamp, price], ... ]
+  return j.prices.map(p => ({ t: p[0], price: p[1] }));
+}
+function tsToLabel(ts) {
+  const d = new Date(ts);
+  return d.toLocaleDateString();
+}
+function colorFor(label) {
+  const map = { 'XRP':'#1e90ff','PAXG':'#bfa34a','WLD':'#7c3aed','USDC':'#16a34a' };
+  return map[label] || '#888';
+}
+(async function init(){
+  try {
+    // fetch all series in parallel
+    const promises = assets.map(a => fetchPriceSeries(a.id));
+    const all = await Promise.all(promises);
+    // build common labels from first series timestamps
+    const labels = all[0].map(p => tsToLabel(p.t));
+    const datasets = assets.map((a, i) => ({
+      label: a.label,
+      data: all[i].map(pt => Number(pt.price.toFixed(6))),
+      borderColor: colorFor(a.label),
+      backgroundColor: colorFor(a.label),
+      tension: 0.2,
+      fill: false,
+      pointRadius: 3
+    }));
+    // create toggles
+    const togglesDiv = document.getElementById('toggles');
+    datasets.forEach((ds, i) => {
+      const id = 'chk_' + i;
+      const wrapper = document.createElement('label');
+      wrapper.innerHTML = `<input type="checkbox" id="${id}" checked data-idx="${i}"> <span style="width:64px;display:inline-block">${ds.label}</span>`;
+      togglesDiv.appendChild(wrapper);
+      wrapper.querySelector('input').addEventListener('change', e=>{
+        const idx = Number(e.target.dataset.idx);
+        myChart.data.datasets[idx].hidden = !e.target.checked;
+        myChart.update();
+      });
+    });
+    // Chart.js
+    const ctx = document.getElementById('priceChart').getContext('2d');
+    window.myChart = new Chart(ctx, {
+      type: 'line',
+      data: { labels, datasets },
+      options: {
+        responsive:true,
+        interaction: { mode: 'index', intersect: false },
+        plugins: { legend: { display: true } },
+        scales: {
+          y: { ticks: { callback: function(v){ return v; } } }
+        }
+      }
+    });
+  } catch (err) {
+    console.error(err);
+    document.getElementById('chartCard').innerHTML = '<div class="card"><strong>Error cargando datos:</strong> ' + err.message + '</div>';
+  }
+})();
+// --- Morpho estimator ---
+let morphoAPY = 0.04; // referencia 4% (30d APY ejemplo). Cámbiala si tienes otro valor.
+document.getElementById('morphoRateDisplay').innerText = (morphoAPY*100).toFixed(2) + '%';
+function estimateCompound(amount, apy, days) {
+  // interest compounded daily approximation
+  const daily = apy / 365;
+  const total = amount * Math.pow(1 + daily, days);
+  return { total, gain: total - amount };
+}
+document.getElementById('calcBtn').addEventListener('click', ()=>{
+  const amt = parseFloat(document.getElementById('amount').value) || 0;
+  const res = estimateCompound(amt, morphoAPY, 7);
+  document.getElementById('gain7').innerText = res.gain.toFixed(6) + ' USDC';
+  document.getElementById('total7').innerText = res.total.toFixed(6) + ' USDC';
+});
+// quick set rate button => prompt for new %
+document.getElementById('setRateBtn').addEventListener('click', ()=>{
+  const v = prompt('Nueva tasa APY (%) — ejemplo 4 para 4%:', (morphoAPY*100).toString());
+  if(v !== null) {
+    const n = parseFloat(v)/100;
+    if(!isNaN(n) && n >= 0) {
+      morphoAPY = n;
+      document.getElementById('morphoRateDisplay').innerText = (morphoAPY*100).toFixed(2) + '%';
+      document.getElementById('calcBtn').click();
+    } else alert('Valor inválido');
+  }
+});
+// run initial calc
+document.getElementById('calcBtn').click();
+</script>
+</body>
 </html>