ui: coingecko change pct

- 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

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="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 = {};