ui: coingecko change pct
- different decimals per coin - zano rate via cryptocompare - uniform widget content
This commit is contained in:
		
							parent
							
								
									9a900a5bac
								
							
						
					
					
						commit
						7429dc5b2d
					
				@ -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';
 | 
			
		||||
 | 
			
		||||
@ -577,43 +559,29 @@ function fetchCryptoCompareData(coin, api_key) {
 | 
			
		||||
      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) {
 | 
			
		||||
    const priceUSD = data.RAW[coin].USD.PRICE;
 | 
			
		||||
    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 = {};
 | 
			
		||||
 | 
			
		||||
		Loading…
	
		Reference in New Issue
	
	Block a user