mirror of
https://github.com/basicswap/basicswap.git
synced 2024-11-16 15:58:17 +00:00
ui: coingecko change pct
- different decimals per coin - zano rate via cryptocompare - uniform widget content
This commit is contained in:
parent
9a900a5bac
commit
7429dc5b2d
1 changed files with 67 additions and 119 deletions
|
@ -74,13 +74,13 @@
|
||||||
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="btc-container">
|
<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="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">
|
<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">
|
<img src="/static/images/coins/Bitcoin.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Bitcoin">
|
||||||
<p class="ml-2 text-black text-sm dark:text-white">
|
<p class="ml-1 text-black text-sm dark:text-white">
|
||||||
Bitcoin (BTC)
|
Bitcoin (BTC)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-start">
|
<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 class="text-sm">
|
||||||
<span id="btc-price-usd-value"></span>
|
<span id="btc-price-usd-value"></span>
|
||||||
</p>
|
</p>
|
||||||
|
@ -102,13 +102,13 @@
|
||||||
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="xmr-container">
|
<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="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">
|
<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">
|
<img src="/static/images/coins/Monero.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Monero">
|
||||||
<p class="ml-2 text-black text-sm dark:text-white">
|
<p class="ml-1 text-black text-sm dark:text-white">
|
||||||
Monero (XMR)
|
Monero (XMR)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-start">
|
<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 class="text-sm">
|
||||||
<span id="xmr-price-usd-value"></span>
|
<span id="xmr-price-usd-value"></span>
|
||||||
</p>
|
</p>
|
||||||
|
@ -135,13 +135,13 @@
|
||||||
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="part-container">
|
<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="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
|
||||||
<div class="flex items-center">
|
<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">
|
<img src="/static/images/coins/Particl.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Particl">
|
||||||
<p class="ml-2 text-black text-md dark:text-white">
|
<p class="ml-1 text-black text-sm dark:text-white">
|
||||||
Particl (PART)
|
Particl (PART)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-start">
|
<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 class="text-sm">
|
||||||
$ <span id="part-price-usd-value"></span>
|
$ <span id="part-price-usd-value"></span>
|
||||||
</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="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="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
|
||||||
<div class="flex items-center">
|
<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">
|
<img src="/static/images/coins/Litecoin.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Litecoin">
|
||||||
<p class="ml-2 text-black text-md dark:text-white">
|
<p class="ml-1 text-black text-sm dark:text-white">
|
||||||
Litecoin (LTC)
|
Litecoin (LTC)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-start">
|
<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 class="text-sm">
|
||||||
<span id="ltc-price-usd-value"></span>
|
<span id="ltc-price-usd-value"></span>
|
||||||
</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="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="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
|
||||||
<div class="flex items-center">
|
<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">
|
<img src="/static/images/coins/Firo.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Firo">
|
||||||
<p class="ml-2 text-black text-md dark:text-white">
|
<p class="ml-1 text-black text-sm dark:text-white">
|
||||||
Firo (FIRO)
|
Firo
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-start">
|
<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 class="text-sm">
|
||||||
<span id="firo-price-usd-value"></span>
|
<span id="firo-price-usd-value"></span>
|
||||||
</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="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="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
|
||||||
<div class="flex items-center">
|
<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">
|
<img src="/static/images/coins/PIVX.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="PIVX">
|
||||||
<p class="ml-2 text-black text-md dark:text-white">
|
<p class="ml-1 text-black text-sm dark:text-white">
|
||||||
PIVX (PIVX)
|
PIVX
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-start">
|
<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 class="text-sm">
|
||||||
<span id="pivx-price-usd-value"></span>
|
<span id="pivx-price-usd-value"></span>
|
||||||
</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="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="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
|
||||||
<div class="flex items-center">
|
<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">
|
<img src="/static/images/coins/Dash.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Dash">
|
||||||
<p class="ml-2 text-black text-md dark:text-white">
|
<p class="ml-1 text-black text-sm dark:text-white">
|
||||||
Dash (DASH)
|
Dash
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-start">
|
<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 class="text-sm">
|
||||||
<span id="dash-price-usd-value"></span>
|
<span id="dash-price-usd-value"></span>
|
||||||
</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="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="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
|
||||||
<div class="flex items-center">
|
<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">
|
<img src="/static/images/coins/Ethereum.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Ethereum">
|
||||||
<p class="ml-2 text-black text-md dark:text-white">
|
<p class="ml-1 text-black text-sm dark:text-white">
|
||||||
Ethereum (ETH)
|
Ethereum (ETH)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-start">
|
<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 class="text-sm">
|
||||||
<span id="eth-price-usd-value"></span>
|
<span id="eth-price-usd-value"></span>
|
||||||
</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="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="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
|
||||||
<div class="flex items-center">
|
<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">
|
<img src="/static/images/coins/Doge.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Dogecoin">
|
||||||
<p class="ml-2 text-black text-md dark:text-white">
|
<p class="ml-1 text-black text-sm dark:text-white">
|
||||||
Dogecoin (DOGE)
|
Dogecoin (DOGE)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-start">
|
<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 class="text-sm">
|
||||||
<span id="doge-price-usd-value"></span>
|
<span id="doge-price-usd-value"></span>
|
||||||
</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="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="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
|
||||||
<div class="flex items-center">
|
<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">
|
<img src="/static/images/coins/Decred.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Decred">
|
||||||
<p class="ml-2 text-black text-md dark:text-white">
|
<p class="ml-1 text-black text-sm dark:text-white">
|
||||||
Decred (DCR)
|
Decred (DCR)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-start">
|
<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 class="text-sm">
|
||||||
<span id="dcr-price-usd-value" style="min-width: 80px;"></span>
|
<span id="dcr-price-usd-value" style="min-width: 80px;"></span>
|
||||||
</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="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="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
|
||||||
<div class="flex items-center">
|
<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">
|
<img src="/static/images/coins/Zano.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="Zano">
|
||||||
<p class="ml-2 text-black text-md dark:text-white">
|
<p class="ml-1 text-black text-sm dark:text-white">
|
||||||
Zano (ZANO)
|
Zano
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-start">
|
<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 class="text-sm">
|
||||||
<span id="zano-price-usd-value" style="min-width: 80px;"></span>
|
<span id="zano-price-usd-value" style="min-width: 80px;"></span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -428,7 +428,7 @@
|
||||||
<div id="zano-volume-24h">
|
<div id="zano-volume-24h">
|
||||||
</div>
|
</div>
|
||||||
</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 class="bold mr-2">BTC:</span>
|
||||||
<span id="zano-price-btc">
|
<span id="zano-price-btc">
|
||||||
</span>
|
</span>
|
||||||
|
@ -441,13 +441,13 @@
|
||||||
<div class="w-full sm:w-1/2 lg:w-1/6 p-3" id="wow-container">
|
<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="px-5 py-3 h-full bg-coolGray-100 dark:bg-gray-500 rounded-2xl dark:text-white">
|
||||||
<div class="flex items-center">
|
<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">
|
<img src="/static/images/coins/Wownero.png" class="rounded-xl" style="width: 28px; height: 28px; object-fit: contain;" alt="WOWNERO">
|
||||||
<p class="ml-2 text-black text-md dark:text-white">
|
<p class="ml-1 text-black text-sm dark:text-white">
|
||||||
Wownero (WOW)
|
Wownero (WOW)
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col justify-start">
|
<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 class="text-sm">
|
||||||
<span id="wow-price-usd-value" style="min-width: 80px;"></span>
|
<span id="wow-price-usd-value" style="min-width: 80px;"></span>
|
||||||
</span>
|
</span>
|
||||||
|
@ -491,8 +491,6 @@ window.addEventListener('load', function() {
|
||||||
}
|
}
|
||||||
if (coin === 'WOW') {
|
if (coin === 'WOW') {
|
||||||
fetchWowneroData(coinGeckoApiKey);
|
fetchWowneroData(coinGeckoApiKey);
|
||||||
} else if (coin === 'ZANO') {
|
|
||||||
fetchZanoData(coinGeckoApiKey);
|
|
||||||
} else {
|
} else {
|
||||||
fetchCryptoCompareData(coin, api_key);
|
fetchCryptoCompareData(coin, api_key);
|
||||||
}
|
}
|
||||||
|
@ -501,7 +499,7 @@ window.addEventListener('load', function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
function fetchWowneroData(coinGeckoApiKey) {
|
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 => {
|
.then(response => {
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new Error(`Error fetching data. Status: ${response.status}`);
|
throw new Error(`Error fetching data. Status: ${response.status}`);
|
||||||
|
@ -510,31 +508,15 @@ function fetchWowneroData(coinGeckoApiKey) {
|
||||||
})
|
})
|
||||||
.then(data => {
|
.then(data => {
|
||||||
displayWowneroData(data);
|
displayWowneroData(data);
|
||||||
})
|
// TODO bad responses block all others from displaying properly
|
||||||
.catch(error => {
|
// })
|
||||||
console.error('Fetching Wownero data:', error);
|
// .catch(error => {
|
||||||
displayErrorMessage('Unable to fetch data for Wownero. Please try again later.');
|
// 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) {
|
function fetchCryptoCompareData(coin, api_key) {
|
||||||
fetch(`https://min-api.cryptocompare.com/data/pricemultifull?fsyms=${coin}&tsyms=USD,BTC&api_key={{chart_api_key}}`)
|
fetch(`https://min-api.cryptocompare.com/data/pricemultifull?fsyms=${coin}&tsyms=USD,BTC&api_key={{chart_api_key}}`)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
|
@ -556,10 +538,10 @@ function fetchCryptoCompareData(coin, api_key) {
|
||||||
const prices = data.prices;
|
const prices = data.prices;
|
||||||
|
|
||||||
const latestPriceUSD = prices[prices.length - 1][1];
|
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];
|
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-price-change-container').textContent = (priceChange24h * 100).toFixed(2) + '%';
|
||||||
document.getElementById('wow-volume-24h').textContent = volume24h.toFixed(0).replace(/\B(?=(\d{3})+(?!\d))/g, ',') + ' USD';
|
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;
|
const priceBTC = latestPriceUSD / latestPriceBTC;
|
||||||
|
|
||||||
document.getElementById('wow-price-btc').textContent = priceBTC.toFixed(8) + ' BTC';
|
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) {
|
function displayCoinData(coin, data) {
|
||||||
|
@ -607,13 +564,24 @@ function displayCoinData(coin, data) {
|
||||||
const priceBTC = data.RAW[coin].BTC.PRICE;
|
const priceBTC = data.RAW[coin].BTC.PRICE;
|
||||||
const priceChange1d = data.RAW[coin].USD.CHANGEPCT24HOUR;
|
const priceChange1d = data.RAW[coin].USD.CHANGEPCT24HOUR;
|
||||||
const volume24h = data.RAW[coin].USD.TOTALVOLUME24HTO;
|
const volume24h = data.RAW[coin].USD.TOTALVOLUME24HTO;
|
||||||
document.querySelector(`#${coin.toLowerCase()}-price-usd`).textContent = priceUSD.toFixed(2) + ' $';
|
const c = coin
|
||||||
if (coin !== 'BTC') {
|
|
||||||
document.querySelector(`#${coin.toLowerCase()}-price-btc`).textContent = priceBTC.toFixed(8) + ' BTC';
|
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';
|
if (c !== 'BTC') {
|
||||||
const priceChangeContainer = document.querySelector(`#${coin.toLowerCase()}-price-change-container`);
|
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) {
|
if (priceChange1d >= 0) {
|
||||||
priceChangeContainer.innerHTML = positivePriceChangeHTML(priceChange1d);
|
priceChangeContainer.innerHTML = positivePriceChangeHTML(priceChange1d);
|
||||||
} else {
|
} else {
|
||||||
|
@ -715,26 +683,6 @@ function updateChart(coinSymbol, coinGeckoApiKey) {
|
||||||
chart.update();
|
chart.update();
|
||||||
})
|
})
|
||||||
.catch(error => console.error('Error updating chart for Wownero:', error));
|
.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 {
|
} else {
|
||||||
fetch(`https://min-api.cryptocompare.com/data/v2/histoday?fsym=${coinSymbol}&tsym=USD&limit=30&api_key={{chart_api_key}}`)
|
fetch(`https://min-api.cryptocompare.com/data/v2/histoday?fsym=${coinSymbol}&tsym=USD&limit=30&api_key={{chart_api_key}}`)
|
||||||
.then(response => response.json())
|
.then(response => response.json())
|
||||||
|
@ -1313,7 +1261,7 @@ const coinNameToSymbol = {
|
||||||
'Dash': 'DASH',
|
'Dash': 'DASH',
|
||||||
'PIVX': 'PIVX',
|
'PIVX': 'PIVX',
|
||||||
'Decred': 'DCR',
|
'Decred': 'DCR',
|
||||||
'Zano': 'Zano'
|
'Zano': 'ZANO'
|
||||||
};
|
};
|
||||||
|
|
||||||
const exchangeRateCache = {};
|
const exchangeRateCache = {};
|
||||||
|
|
Loading…
Reference in a new issue