mirror of
https://github.com/basicswap/basicswap.git
synced 2025-11-07 19:28:11 +01:00
GUI v.3.0.0
This commit is contained in:
gerlofvanek
@@ -26,7 +26,7 @@
|
||||
<p class="font-normal text-coolGray-200 dark:text-white">{{ page_type_description }}</p>
|
||||
</div>
|
||||
<div class="rounded-full{{ page_button }} w-full md:w-1/2 p-3 p-6 container flex flex-wrap items-center justify-end items-center mx-auto">
|
||||
<a id="refresh" href="/newoffer" class="rounded-full flex flex-wrap justify-center px-5 py-4 bg-blue-500 hover:bg-green-600 hover:border-green-600 font-medium text-sm text-white border border-blue-500 rounded-md focus:ring-0 focus:outline-none">
|
||||
<a id="refresh" href="/newoffer" class="rounded-full flex flex-wrap justify-center px-5 py-3 bg-blue-500 hover:bg-green-600 hover:border-green-600 font-medium text-sm text-white border border-blue-500 rounded-md focus:ring-0 focus:outline-none">
|
||||
{{ place_new_offer_svg | safe }} <span>Place new Offer</span>
|
||||
</a>
|
||||
</div>
|
||||
@@ -68,7 +68,7 @@
|
||||
<section class="py-4 overflow-hidden container-to-blur">
|
||||
<div class="container px-4 mx-auto">
|
||||
<div class="flex flex-wrap -m-3">
|
||||
|
||||
|
||||
<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">
|
||||
@@ -119,7 +119,7 @@
|
||||
<div id="xmr-volume-24h">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
|
||||
<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="xmr-price-btc">
|
||||
</span>
|
||||
@@ -359,6 +359,72 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
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">
|
||||
<span class="text-sm">
|
||||
<span id="dcr-price-usd-value" style="min-width: 80px;"></span>
|
||||
</span>
|
||||
</p>
|
||||
<div class="flex items-center text-sm">
|
||||
<div class="w-auto">
|
||||
<div id="dcr-price-change-container" class="w-auto p-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
|
||||
<span class="bold mr-2">VOL:</span>
|
||||
<div id="dcr-volume-24h">
|
||||
</div>
|
||||
</div>
|
||||
<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="dcr-price-btc">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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)
|
||||
</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">
|
||||
<span class="text-sm">
|
||||
<span id="zano-price-usd-value" style="min-width: 80px;"></span>
|
||||
</span>
|
||||
</p>
|
||||
<div class="flex items-center text-sm">
|
||||
<div class="w-auto">
|
||||
<div id="zano-price-change-container" class="w-auto p-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2">
|
||||
<span class="bold mr-2">VOL:</span>
|
||||
<div id="zano-volume-24h">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center text-xs text-gray-600 dark:text-gray-300 mt-2 hidden">
|
||||
<span class="bold mr-2">BTC:</span>
|
||||
<span id="zano-price-btc">
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
@@ -397,19 +463,38 @@
|
||||
|
||||
</section>
|
||||
<script>
|
||||
window.addEventListener('load', function() {
|
||||
const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX', 'DOGE', 'ETH', 'WOW'];
|
||||
const api_key = '{{chart_api_key}}';
|
||||
const coinGeckoApiKey = '{{coingecko_api_key}}';
|
||||
coins.forEach(coin => {
|
||||
if (coin === 'WOW') {
|
||||
fetchWowneroData();
|
||||
} else {
|
||||
fetchCryptoCompareData(coin, api_key);
|
||||
}
|
||||
});
|
||||
updateChart('BTC');
|
||||
});
|
||||
window.addEventListener('load', function() {
|
||||
const coins = ['BTC', 'PART', 'XMR', 'LTC', 'FIRO', 'DASH', 'PIVX', 'DOGE', 'ETH', 'DCR', 'ZANO', 'WOW'];
|
||||
const api_key = '{{chart_api_key}}';
|
||||
const coinGeckoApiKey = '{{coingecko_api_key}}';
|
||||
coins.forEach(coin => {
|
||||
if (coin === 'WOW') {
|
||||
fetchWowneroData();
|
||||
} else if (coin === 'ZANO') {
|
||||
fetchZanoData(coinGeckoApiKey);
|
||||
} else {
|
||||
fetchCryptoCompareData(coin, api_key);
|
||||
}
|
||||
});
|
||||
updateChart('BTC');
|
||||
});
|
||||
|
||||
function fetchZanoData(coinGeckoApiKey) {
|
||||
fetch(`https://api.coingecko.com/api/v3/coins/zano/market_chart?vs_currency=usd&days=30&interval=daily&api_key=${coinGeckoApiKey}`)
|
||||
.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=${api_key}`)
|
||||
@@ -445,6 +530,7 @@
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function displayWowneroData(data) {
|
||||
const prices = data.prices;
|
||||
|
||||
@@ -470,6 +556,31 @@
|
||||
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;
|
||||
@@ -535,7 +646,7 @@ function negativePriceChangeHTML(value) {
|
||||
}
|
||||
|
||||
function setActiveContainer(containerId) {
|
||||
const containerIds = ['btc-container', 'xmr-container', 'part-container', 'pivx-container', 'firo-container', 'dash-container', 'ltc-container', 'doge-container', 'eth-container', 'wow-container'];
|
||||
const containerIds = ['btc-container', 'xmr-container', 'part-container', 'pivx-container', 'firo-container', 'dash-container', 'ltc-container', 'doge-container', 'eth-container', 'dcr-container', 'zano-container', 'wow-container'];
|
||||
const activeClass = 'active-container';
|
||||
containerIds.forEach(id => {
|
||||
const container = document.getElementById(id);
|
||||
@@ -584,11 +695,18 @@ document.getElementById('eth-container').addEventListener('click', () => {
|
||||
setActiveContainer('eth-container');
|
||||
updateChart('ETH');
|
||||
});
|
||||
document.getElementById('dcr-container').addEventListener('click', () => {
|
||||
setActiveContainer('dcr-container');
|
||||
updateChart('DCR');
|
||||
});
|
||||
document.getElementById('wow-container').addEventListener('click', () => {
|
||||
setActiveContainer('wow-container');
|
||||
updateChart('WOW');
|
||||
});
|
||||
|
||||
document.getElementById('zano-container').addEventListener('click', () => {
|
||||
setActiveContainer('zano-container');
|
||||
updateChart('ZANO');
|
||||
});
|
||||
|
||||
let coin;
|
||||
const coinOptions = {
|
||||
@@ -604,7 +722,7 @@ function updateChart(coinSymbol) {
|
||||
const coinGeckoApiKey = '{{coingecko_api_key}}';
|
||||
|
||||
if (coinSymbol === 'WOW') {
|
||||
fetch(`https://api.coingecko.com/api/v3/coins/wownero/market_chart?vs_currency=usd&days=30&interval=daily&d&api_key=${coinGeckoApiKey}`)
|
||||
fetch(`https://api.coingecko.com/api/v3/coins/wownero/market_chart?vs_currency=usd&days=30&interval=daily&api_key=${coinGeckoApiKey}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const chartData = {
|
||||
@@ -623,10 +741,35 @@ function updateChart(coinSymbol) {
|
||||
chart.update();
|
||||
})
|
||||
.catch(error => console.error('Error updating chart for Wownero:', error));
|
||||
} else {
|
||||
fetch(`https://min-api.cryptocompare.com/data/v2/histoday?fsym=${coin}&tsym=USD&limit=30&api_key=${api_key}`)
|
||||
} else if (coinSymbol === 'ZANO') {
|
||||
fetch(`https://api.coingecko.com/api/v3/coins/zano/market_chart?vs_currency=usd&days=30&interval=daily&api_key=${coinGeckoApiKey}`)
|
||||
.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=${api_key}`)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
// Check if data is undefined
|
||||
if (!data.Data || !data.Data.Data) {
|
||||
throw new Error(`No data available for ${coinSymbol}`);
|
||||
}
|
||||
|
||||
const coinSettings = coinOptions[coinSymbol] || {};
|
||||
const chartData = {
|
||||
labels: data.Data.Data.map(d => formatDate(new Date(d.time * 1000))),
|
||||
@@ -643,10 +786,10 @@ function updateChart(coinSymbol) {
|
||||
};
|
||||
|
||||
chart.data = chartData;
|
||||
chart.options.scales.y.title.text = `Price (USD) - ${coin} 30 DAYS`;
|
||||
chart.options.scales.y.title.text = `Price (USD) - ${coinSymbol} 30 DAYS`;
|
||||
chart.update();
|
||||
})
|
||||
.catch(error => console.error(`Error updating chart for ${coin}:`, error));
|
||||
.catch(error => console.error(`Error updating chart for ${coinSymbol}:`, error));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -723,7 +866,8 @@ const chart = new Chart(ctx, {
|
||||
display: true,
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Price (USD)'
|
||||
text: 'Price (USD)',
|
||||
color: 'rgba(77, 132, 240, 1)'
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -870,7 +1014,8 @@ const chart = new Chart(ctx, {
|
||||
</div>
|
||||
<div class="w-full md:w-auto p-1.5">
|
||||
<div class="relative">
|
||||
<button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-600 hover:bg-green-600 hover:border-green-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">{{ filter_apply_svg | safe }}
|
||||
<button type="submit" name='applyfilters' value="Apply Filters" class="flex flex-wrap justify-center w-full px-4 py-2.5 font-medium text-sm text-white bg-blue-600 hover:bg-green-600 hover:border-green-600 rounded-lg transition duration-200 border border-blue-500 rounded-md shadow-button focus:ring-0 focus:outline-none">
|
||||
{{ filter_apply_svg | safe }}
|
||||
<span>Apply Filters</span>
|
||||
</button>
|
||||
</div>
|
||||
@@ -997,7 +1142,7 @@ const chart = new Chart(ctx, {
|
||||
<div id="tooltip-wallet{{loop.index}}" role="tooltip" class="inline-block absolute invisible z-10 py-2 px-3 text-sm font-medium text-white bg-blue-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
|
||||
<div class="active-revoked-expired"><span class="bold">My {{ o[17] }} Wallet</div>
|
||||
<div class="tooltip-arrow pl-1" data-popper-arrow></div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<!-- YOUR OFFERS - TAKER AMOUNT -->
|
||||
<!-- YOUR OFFERS - SWAP -->
|
||||
@@ -1196,7 +1341,9 @@ const coinNameToSymbol = {
|
||||
'Litecoin': 'LTC',
|
||||
'Firo': 'FIRO',
|
||||
'Dash': 'DASH',
|
||||
'PIVX': 'PIVX'
|
||||
'PIVX': 'PIVX',
|
||||
'Decred': 'DCR',
|
||||
'Zano': 'Zano'
|
||||
};
|
||||
|
||||
const exchangeRateCache = {};
|
||||
@@ -1236,9 +1383,8 @@ function updateUsdValue(cryptoCell, coinFullName, isRate = false) {
|
||||
} else {
|
||||
const apiUrl = `https://min-api.cryptocompare.com/data/price?fsym=${coinSymbol}&tsyms=USD`;
|
||||
|
||||
// Check if the exchange rate is in the cache and is not expired
|
||||
if (exchangeRateCache[coinSymbol] && !isCacheExpired(coinSymbol)) {
|
||||
console.log(`Using cached exchange rate for ${coinSymbol}`);
|
||||
// console.log(`Using cached exchange rate for ${coinSymbol}`);
|
||||
const exchangeRate = exchangeRateCache[coinSymbol].rate;
|
||||
const usdValue = cryptoValue * exchangeRate;
|
||||
usdCell.textContent = `${usdValue.toFixed(2)} USD`;
|
||||
@@ -1246,13 +1392,13 @@ function updateUsdValue(cryptoCell, coinFullName, isRate = false) {
|
||||
updateProfitLoss(cryptoCell.closest('tr'));
|
||||
updateProfitValue(cryptoCell.closest('tr'));
|
||||
} else {
|
||||
console.log(`Fetching exchange rate from API for ${coinSymbol}`);
|
||||
// console.log(`Fetching exchange rate from API for ${coinSymbol}`);
|
||||
fetch(apiUrl)
|
||||
.then(response => response.json())
|
||||
.then(data => {
|
||||
const exchangeRate = data.USD;
|
||||
if (!isNaN(exchangeRate)) {
|
||||
console.log(`Received exchange rate from API for ${coinSymbol}`);
|
||||
// console.log(`Received exchange rate from API for ${coinSymbol}`);
|
||||
const usdValue = cryptoValue * exchangeRate;
|
||||
usdCell.textContent = `${usdValue.toFixed(2)} USD`;
|
||||
|
||||
|
||||
Reference in New Issue
Block a user