Ecosystem/basicswap
1
0
Fork 0
mirror of https://github.com/basicswap/basicswap.git synced 2024-11-16 15:58:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

ui: coingecko change pct

Browse source 
- different decimals per coin
- zano rate via cryptocompare
- uniform widget content
This commit is contained in:
nahuhh 2024-06-15 21:07:04 -05:00
parent 9a900a5bac
commit 7429dc5b2d
1 changed files with 67 additions and 119 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

186
basicswap/templates/offers.html
View file

@ -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';
@ -577,43 +559,29 @@ function fetchCryptoCompareData(coin, api_key) {
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) {
const priceUSD = data.RAW[coin].USD.PRICE; const priceUSD = data.RAW[coin].USD.PRICE;
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 = {};