From 7429dc5b2df1da012af611101c8b7d890e7e80ec Mon Sep 17 00:00:00 2001
From: nahuhh <50635951+nahuhh@users.noreply.github.com>
Date: Sat, 15 Jun 2024 21:07:04 -0500
Subject: [PATCH] ui: coingecko change pct - different decimals per coin - zano
 rate via cryptocompare - uniform widget content

---
 basicswap/templates/offers.html | 186 ++++++++++++--------------------
 1 file changed, 67 insertions(+), 119 deletions(-)

diff --git a/basicswap/templates/offers.html b/basicswap/templates/offers.html
index 86d395a..52bc487 100644
--- a/basicswap/templates/offers.html
+++ b/basicswap/templates/offers.html
@@ -74,13 +74,13 @@
     <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="btc-container">
     <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white active-container" id="btc-active">
   <div class="flex items-center">
-      <img src="/static/images/coins/Bitcoin.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Bitcoin">
-      <p class="ml-2 text-black text-sm dark:text-white">
+      <img src="/static/images/coins/Bitcoin.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Bitcoin">
+      <p class="ml-1 text-black text-sm dark:text-white">
           Bitcoin (BTC)
       </p>
   </div>
   <div class="flex flex-col justify-start">
-      <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="btc-price-usd">
+      <p class="my-2 text-xl font-bold text-right monospace text-gray-700 dark:text-gray-100" id="btc-price-usd">
           <span class="text-sm">
               <span id="btc-price-usd-value"></span>
       </p>
@@ -102,13 +102,13 @@
 <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="xmr-container">
     <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white price-container">
       <div class="flex items-center">
-          <img src="/static/images/coins/Monero.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Monero">
-          <p class="ml-2 text-black text-sm dark:text-white">
+          <img src="/static/images/coins/Monero.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Monero">
+          <p class="ml-1 text-black text-sm dark:text-white">
               Monero (XMR)
           </p>
       </div>
       <div class="flex flex-col justify-start">
-          <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="xmr-price-usd">
+          <p class="my-2 text-xl font-bold text-right monospace text-gray-700 dark:text-gray-100" id="xmr-price-usd">
               <span class="text-sm">
                   <span id="xmr-price-usd-value"></span>
           </p>
@@ -135,13 +135,13 @@
 <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="part-container">
     <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
         <div class="flex items-center">
-            <img src="/static/images/coins/Particl.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Particl">
-            <p class="ml-2 text-black text-md dark:text-white">
+            <img src="/static/images/coins/Particl.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Particl">
+            <p class="ml-1 text-black text-sm dark:text-white">
                 Particl (PART)
             </p>
         </div>
         <div class="flex flex-col justify-start">
-            <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="part-price-usd">
+            <p class="my-2 text-xl font-bold text-right monospace text-gray-700 dark:text-gray-100" id="part-price-usd">
                 <span class="text-sm">
                     $ <span id="part-price-usd-value"></span>
                 </span>
@@ -169,13 +169,13 @@
 <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="ltc-container">
   <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
       <div class="flex items-center">
-          <img src="/static/images/coins/Litecoin.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Litecoin">
-          <p class="ml-2 text-black text-md dark:text-white">
+          <img src="/static/images/coins/Litecoin.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Litecoin">
+          <p class="ml-1 text-black text-sm dark:text-white">
               Litecoin (LTC)
           </p>
       </div>
       <div class="flex flex-col justify-start">
-          <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="ltc-price-usd">
+          <p class="my-2 text-xl font-bold text-right monospace text-gray-700 dark:text-gray-100" id="ltc-price-usd">
               <span class="text-sm">
                   <span id="ltc-price-usd-value"></span>
               </span>
@@ -203,13 +203,13 @@
 <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="firo-container">
     <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
             <div class="flex items-center">
-        <img src="/static/images/coins/Firo.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Firo">
-        <p class="ml-2 text-black text-md dark:text-white">
-            Firo (FIRO)
+        <img src="/static/images/coins/Firo.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Firo">
+        <p class="ml-1 text-black text-sm dark:text-white">
+            Firo
         </p>
     </div>
     <div class="flex flex-col justify-start">
-        <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="firo-price-usd">
+        <p class="my-2 text-xl font-bold text-right monospace text-gray-700 dark:text-gray-100" id="firo-price-usd">
             <span class="text-sm">
                 <span id="firo-price-usd-value"></span>
             </span>
@@ -237,13 +237,13 @@
 <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="pivx-container">
   <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
   <div class="flex items-center">
-      <img src="/static/images/coins/PIVX.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="PIVX">
-      <p class="ml-2 text-black text-md dark:text-white">
-          PIVX (PIVX)
+      <img src="/static/images/coins/PIVX.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="PIVX">
+      <p class="ml-1 text-black text-sm dark:text-white">
+          PIVX
       </p>
   </div>
   <div class="flex flex-col justify-start">
-      <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="pivx-price-usd">
+      <p class="my-2 text-xl font-bold text-right monospace text-gray-700 dark:text-gray-100" id="pivx-price-usd">
           <span class="text-sm">
               <span id="pivx-price-usd-value"></span>
           </span>
@@ -271,13 +271,13 @@
 <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="dash-container">
   <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
   <div class="flex items-center">
-      <img src="/static/images/coins/Dash.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Dash">
-      <p class="ml-2 text-black text-md dark:text-white">
-          Dash (DASH)
+      <img src="/static/images/coins/Dash.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Dash">
+      <p class="ml-1 text-black text-sm dark:text-white">
+          Dash
       </p>
   </div>
   <div class="flex flex-col justify-start">
-      <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="dash-price-usd">
+      <p class="my-2 text-xl font-bold text-right monospace text-gray-700 dark:text-gray-100" id="dash-price-usd">
           <span class="text-sm">
               <span id="dash-price-usd-value"></span>
           </span>
@@ -305,13 +305,13 @@
 <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="eth-container">
   <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
   <div class="flex items-center">
-      <img src="/static/images/coins/Ethereum.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Ethereum">
-      <p class="ml-2 text-black text-md dark:text-white">
+      <img src="/static/images/coins/Ethereum.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Ethereum">
+      <p class="ml-1 text-black text-sm dark:text-white">
           Ethereum (ETH)
       </p>
   </div>
   <div class="flex flex-col justify-start">
-      <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="eth-price-usd">
+      <p class="my-2 text-xl font-bold text-right monospace text-gray-700 dark:text-gray-100" id="eth-price-usd">
           <span class="text-sm">
               <span id="eth-price-usd-value"></span>
           </span>
@@ -339,13 +339,13 @@
 <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="doge-container">
   <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
   <div class="flex items-center">
-      <img src="/static/images/coins/Doge.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Dogecoin">
-      <p class="ml-2 text-black text-md dark:text-white">
+      <img src="/static/images/coins/Doge.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Dogecoin">
+      <p class="ml-1 text-black text-sm dark:text-white">
           Dogecoin (DOGE)
       </p>
   </div>
   <div class="flex flex-col justify-start">
-      <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="doge-price-usd">
+      <p class="my-2 text-xl font-bold text-right monospace text-gray-700 dark:text-gray-100" id="doge-price-usd">
           <span class="text-sm">
               <span id="doge-price-usd-value"></span>
           </span>
@@ -373,13 +373,13 @@
 <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="dcr-container">
   <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
     <div class="flex items-center">
-        <img src="/static/images/coins/Decred.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Decred">
-        <p class="ml-2 text-black text-md dark:text-white">
+        <img src="/static/images/coins/Decred.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Decred">
+        <p class="ml-1 text-black text-sm dark:text-white">
             Decred (DCR)
         </p>
     </div>
     <div class="flex flex-col justify-start">
-        <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="dcr-price-usd">
+        <p class="my-2 text-xl font-bold text-right monospace text-gray-700 dark:text-gray-100" id="dcr-price-usd">
             <span class="text-sm">
                 <span id="dcr-price-usd-value" style="min-width: 80px;"></span>
             </span>
@@ -407,13 +407,13 @@
 <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="zano-container">
   <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
     <div class="flex items-center">
-        <img src="/static/images/coins/Zano.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="Zano">
-        <p class="ml-2 text-black text-md dark:text-white">
-            Zano (ZANO)
+        <img src="/static/images/coins/Zano.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Zano">
+        <p class="ml-1 text-black text-sm dark:text-white">
+            Zano
         </p>
     </div>
     <div class="flex flex-col justify-start">
-        <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="zano-price-usd-value">
+        <p class="my-2 text-xl font-bold text-right monospace text-gray-700 dark:text-gray-100" id="zano-price-usd">
             <span class="text-sm">
                 <span id="zano-price-usd-value" style="min-width: 80px;"></span>
             </span>
@@ -428,7 +428,7 @@
             <div id="zano-volume-24h">
             </div>
         </div>
-        <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2 hidden">
+        <div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
             <span class="bold mr-2">BTC:</span>
             <span id="zano-price-btc">
             </span>
@@ -441,13 +441,13 @@
 <div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="wow-container">
   <div class="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
     <div class="flex items-center">
-        <img src="/static/images/coins/Wownero.png" class="rounded-xl" style="width: 35px; height: 35px; object-fit: contain;" alt="WOWNERO">
-        <p class="ml-2 text-black text-md dark:text-white">
+        <img src="/static/images/coins/Wownero.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="WOWNERO">
+        <p class="ml-1 text-black text-sm dark:text-white">
             Wownero (WOW)
         </p>
     </div>
     <div class="flex flex-col justify-start">
-        <p class="my-2 text-xl font-bold text-left text-gray-700 dark:text-gray-100" id="wow-price-usd-value">
+        <p class="my-2 text-xl font-bold text-right monospace text-gray-700 dark:text-gray-100" id="wow-price-usd-value">
             <span class="text-sm">
                 <span id="wow-price-usd-value" style="min-width: 80px;"></span>
             </span>
@@ -491,8 +491,6 @@ window.addEventListener('load', function() {
     }
     if (coin === 'WOW') {
       fetchWowneroData(coinGeckoApiKey);
-    } else if (coin === 'ZANO') {
-      fetchZanoData(coinGeckoApiKey);
     } else {
       fetchCryptoCompareData(coin, api_key);
     }
@@ -501,7 +499,7 @@ window.addEventListener('load', function() {
 });
 
 function fetchWowneroData(coinGeckoApiKey) {
-    fetch(`https://api.coingecko.com/api/v3/coins/wownero/market_chart?vs_currency=usd&days=30&api_key={{coingecko_api_key}}`)
+    fetch(`https://api.coingecko.com/api/v3/coins/wownero/market_chart?vs_currency=usd&days=2&api_key={{coingecko_api_key}}`)
         .then(response => {
             if (!response.ok) {
                 throw new Error(`Error fetching data. Status: ${response.status}`);
@@ -510,31 +508,15 @@ function fetchWowneroData(coinGeckoApiKey) {
         })
         .then(data => {
             displayWowneroData(data);
-        })
-        .catch(error => {
-            console.error('Fetching Wownero data:', error);
-            displayErrorMessage('Unable to fetch data for Wownero. Please try again later.');
+// TODO bad responses block all others from displaying properly
+//        })
+//        .catch(error => {
+//            console.error('Fetching Wownero data:', error);
+//            displayErrorMessage('Unable to fetch data for Wownero. Please try again later.');
         });
 }
 
 
-function fetchZanoData(coinGeckoApiKey) {
-    fetch(`https://api.coingecko.com/api/v3/coins/zano/market_chart?vs_currency=usd&days=30&interval=daily&api_key={{coingecko_api_key}}`)
-        .then(response => {
-            if (!response.ok) {
-                throw new Error(`Error fetching data. Status: ${response.status}`);
-            }
-            return response.json();
-        })
-        .then(data => {
-            displayZanoData(data);
-        })
-        .catch(error => {
-            console.error('Fetching Zano data:', error);
-            displayErrorMessage('Unable to fetch data for Zano. Please try again later.');
-        });
-}
-
 function fetchCryptoCompareData(coin, api_key) {
     fetch(`https://min-api.cryptocompare.com/data/pricemultifull?fsyms=${coin}&tsyms=USD,BTC&api_key={{chart_api_key}}`)
         .then(response => {
@@ -556,10 +538,10 @@ function fetchCryptoCompareData(coin, api_key) {
       const prices = data.prices;
 
       const latestPriceUSD = prices[prices.length - 1][1];
-      const priceChange24h = data.market_caps[data.market_caps.length - 1][1] / data.market_caps[data.market_caps.length - 2][1] - 1;
+      const priceChange24h = prices[prices.length - 1][1] / prices[prices.length - 24][1] - 1;
       const volume24h = data.total_volumes[data.total_volumes.length - 1][1];
 
-      document.getElementById('wow-price-usd-value').textContent = latestPriceUSD.toFixed(2) + ' $';
+      document.getElementById('wow-price-usd-value').textContent = '$ ' + latestPriceUSD.toFixed(4);
       document.getElementById('wow-price-change-container').textContent = (priceChange24h * 100).toFixed(2) + '%';
       document.getElementById('wow-volume-24h').textContent = volume24h.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' USD';
 
@@ -575,31 +557,6 @@ function fetchCryptoCompareData(coin, api_key) {
       const priceBTC = latestPriceUSD / latestPriceBTC;
 
       document.getElementById('wow-price-btc').textContent = priceBTC.toFixed(8) + ' BTC';
-    }
-
-function displayZanoData(data) {
-  const prices = data.prices;
-
-  const latestPriceUSD = prices[prices.length - 1][1];
-  const priceChange24h = data.market_caps[data.market_caps.length - 1][1] / data.market_caps[data.market_caps.length - 2][1] - 1;
-  const volume24h = data.total_volumes[data.total_volumes.length - 1][1];
-
-  document.getElementById('zano-price-usd-value').textContent = latestPriceUSD.toFixed(2) + ' $';
-  document.getElementById('zano-price-change-container').textContent = (priceChange24h * 100).toFixed(2) + '%';
-  document.getElementById('zano-volume-24h').textContent = volume24h.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' USD';
-
-  const priceChangeContainer = document.getElementById('zano-price-change-container');
-  if (priceChange24h >= 0) {
-    priceChangeContainer.innerHTML = positivePriceChangeHTML(priceChange24h * 100);
-  } else {
-    priceChangeContainer.innerHTML = negativePriceChangeHTML(priceChange24h * 100);
-  }
-
-  const latestPriceBTC = parseFloat(data.prices[data.prices.length - 1][1]);
-  // Todo fix value USD -> BTC
-  const priceBTC = latestPriceUSD / latestPriceBTC;
-
-  document.getElementById('zano-price-btc').textContent = priceBTC.toFixed(8) + ' BTC';
 }
 
 function displayCoinData(coin, data) {
@@ -607,13 +564,24 @@ function displayCoinData(coin, data) {
     const priceBTC = data.RAW[coin].BTC.PRICE;
     const priceChange1d = data.RAW[coin].USD.CHANGEPCT24HOUR;
     const volume24h = data.RAW[coin].USD.TOTALVOLUME24HTO;
-    document.querySelector(`#${coin.toLowerCase()}-price-usd`).textContent = priceUSD.toFixed(2) + ' $';
-    if (coin !== 'BTC') {
-        document.querySelector(`#${coin.toLowerCase()}-price-btc`).textContent = priceBTC.toFixed(8) + ' BTC';
+    const c = coin
+
+    if (c === 'BTC') {
+      document.querySelector(`#${c.toLowerCase()}-price-usd`).textContent = '$ ' + priceUSD.toFixed(1);
+    } else if (c === 'ZANO' || c === 'FIRO') {
+      document.querySelector(`#${c.toLowerCase()}-price-usd`).textContent = '$ ' + priceUSD.toFixed(3);
+    } else if (c === 'DOGE' || c === 'PIVX' || c === 'PART') {
+      document.querySelector(`#${c.toLowerCase()}-price-usd`).textContent = '$ ' + priceUSD.toFixed(4);
+    } else {
+      document.querySelector(`#${c.toLowerCase()}-price-usd`).textContent = '$ ' + priceUSD.toFixed(2);
     }
-    document.querySelector(`#${coin.toLowerCase()}-price-change-container`).textContent = priceChange1d.toFixed(2) + '%';
-    document.querySelector(`#${coin.toLowerCase()}-volume-24h`).textContent = volume24h.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' USD';
-    const priceChangeContainer = document.querySelector(`#${coin.toLowerCase()}-price-change-container`);
+
+    if (c !== 'BTC') {
+        document.querySelector(`#${c.toLowerCase()}-price-btc`).textContent = priceBTC.toFixed(8) + ' BTC';
+    }
+    document.querySelector(`#${c.toLowerCase()}-price-change-container`).textContent = priceChange1d.toFixed(2) + '%';
+    document.querySelector(`#${c.toLowerCase()}-volume-24h`).textContent = volume24h.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' USD';
+    const priceChangeContainer = document.querySelector(`#${c.toLowerCase()}-price-change-container`);
     if (priceChange1d >= 0) {
         priceChangeContainer.innerHTML = positivePriceChangeHTML(priceChange1d);
     } else {
@@ -715,26 +683,6 @@ function updateChart(coinSymbol, coinGeckoApiKey) {
         chart.update();
       })
       .catch(error => console.error('Error updating chart for Wownero:', error));
-  } else if (coinSymbol === 'ZANO') {
-    fetch(`https://api.coingecko.com/api/v3/coins/zano/market_chart?vs_currency=usd&days=30&interval=daily&api_key={{coingecko_api_key}}`)
-      .then(response => response.json())
-      .then(data => {
-        const chartData = {
-          labels: data.prices.map(entry => formatDate(new Date(entry[0]))),
-          datasets: [{
-            label: 'Zano Price (USD)',
-            data: data.prices.map(entry => entry[1]),
-            borderColor: 'rgba(77, 132, 240, 1)',
-            backgroundColor: 'rgba(77, 132, 240, 0.1)',
-            fill: true
-          }]
-        };
-
-        chart.data = chartData;
-        chart.options.scales.y.title.text = 'Price (USD) - Zano 30 DAYS';
-        chart.update();
-      })
-      .catch(error => console.error('Error updating chart for Zano:', error));
   } else {
     fetch(`https://min-api.cryptocompare.com/data/v2/histoday?fsym=${coinSymbol}&tsym=USD&limit=30&api_key={{chart_api_key}}`)
       .then(response => response.json())
@@ -1313,7 +1261,7 @@ const coinNameToSymbol = {
     'Dash': 'DASH',
     'PIVX': 'PIVX',
     'Decred': 'DCR',
-    'Zano': 'Zano'
+    'Zano': 'ZANO'
 };
 
 const exchangeRateCache = {};