seasharp
/
basicswap_miserver
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: coingecko change pct

Browse Source 
- different decimals per coin
- zano rate via cryptocompare
- uniform widget content
master^2
nahuhh 6 months ago
parent 9a900a5bac
commit 7429dc5b2d
1 changed files with 67 additions and 119 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 186
      basicswap/templates/offers.html

186
basicswap/templates/offers.html
Unescape 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);
}
if (c !== 'BTC') {
document.querySelector(`#${c.toLowerCase()}-price-btc`).textContent = priceBTC.toFixed(8) + ' BTC';
}
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`);
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 = {};

Write Preview
Loading…
Cancel
Save