Ecosystem/basicswap
1
0
Fork 0
mirror of https://github.com/basicswap/basicswap.git synced 2024-12-22 19:49:20 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui: Various bug Fixes / Cache fix wallets page.

Browse source
This commit is contained in:
gerlofvanek 2024-11-19 21:05:56 +01:00 committed by tecnovert
parent eb30ef22fc
commit 5db8d6ccbe
2 changed files with 84 additions and 80 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
basicswap/static/js/offerstable.js
View file

@ -698,7 +698,7 @@ function createTakerAmountColumn(offer, coinTo, coinFrom) {
<a data-tooltip-target="tooltip-wallet${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(fromSymbol)}" class="items-center monospace"> <a data-tooltip-target="tooltip-wallet${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(fromSymbol)}" class="items-center monospace">
<div class="pr-2"> <div class="pr-2">
<div class="text-sm font-semibold">${fromAmount.toFixed(4)}</div> <div class="text-sm font-semibold">${fromAmount.toFixed(4)}</div>
<div class="text-sm text-gray-500 dark:text-gray-400">${coinFrom}</div> <div class="text-sm text-gray-500 dark:text-gray-400">${coinTo}</div>
</div> </div>
</a> </a>
</div> </div>
@ -742,7 +742,7 @@ function createOrderbookColumn(offer, coinFrom, coinTo) {
<a data-tooltip-target="tooltip-wallet-maker${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(toSymbol)}" class="items-center monospace"> <a data-tooltip-target="tooltip-wallet-maker${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(toSymbol)}" class="items-center monospace">
<div class="pr-2"> <div class="pr-2">
<div class="text-sm font-semibold">${toAmount.toFixed(4)}</div> <div class="text-sm font-semibold">${toAmount.toFixed(4)}</div>
<div class="text-sm text-gray-500 dark:text-gray-400">${coinTo}</div> <div class="text-sm text-gray-500 dark:text-gray-400">${coinFrom}</div>
</div> </div>
</a> </a>
</div> </div>

118
basicswap/templates/wallets.html
View file

@ -214,7 +214,7 @@ const api = {
cache: { cache: {
data: null, data: null,
timestamp: null, timestamp: null,
expirationTime: 5 * 60 * 1000, expirationTime: 10 * 60 * 1000, // 10 minutes
isValid() { isValid() {
console.log('Checking cache validity...'); console.log('Checking cache validity...');
@ -325,7 +325,7 @@ function initializePercentageTooltip() {
const PRICE_UPDATE_INTERVAL = 300000; const PRICE_UPDATE_INTERVAL = 300000;
let isUpdating = false; let isUpdating = false;
let previousTotalUsd = null; let previousTotalUsd = null;
let currentPercentageChangeColor = 'white'; let currentPercentageChangeColor = 'yellow';
let percentageChangeEl = null; let percentageChangeEl = null;
let currentPercentageChange = null; let currentPercentageChange = null;
@ -374,8 +374,10 @@ async function updatePrices(forceUpdate = false) {
isUpdating = true; isUpdating = true;
if (forceUpdate) { if (forceUpdate) {
console.log('Clearing cache due to force update'); console.log('Clearing price-related data from cache and localStorage');
api.cache.clear(); api.cache.clear();
const keys = Object.keys(localStorage).filter(key => key.endsWith('-usd') || key === 'total-usd' || key === 'total-btc');
keys.forEach(key => localStorage.removeItem(key));
} }
const response = await fetchLatestPrices(); const response = await fetchLatestPrices();
@ -391,6 +393,7 @@ async function updatePrices(forceUpdate = false) {
} }
let total = 0; let total = 0;
let hasMissingPrices = false;
const updates = []; const updates = [];
console.log('Updating individual coin values...'); console.log('Updating individual coin values...');
@ -403,15 +406,22 @@ async function updatePrices(forceUpdate = false) {
const coinId = coinNameToSymbol[coinName]; const coinId = coinNameToSymbol[coinName];
const price = response?.[coinId]?.usd; const price = response?.[coinId]?.usd;
let usdValue;
if (price && !isNaN(amount)) { if (price && !isNaN(amount)) {
const usdValue = (amount * price).toFixed(2); usdValue = (amount * price).toFixed(2);
total += parseFloat(usdValue);
localStorage.setItem(`${coinId}-usd`, usdValue);
} else {
// Use cached price if available
const cachedPrice = api.cache.get()?.[coinId]?.usd || localStorage.getItem(`${coinId}-usd`);
usdValue = cachedPrice ? (amount * cachedPrice).toFixed(2) : '****';
hasMissingPrices = true;
console.log(`Could not find price for coin: ${coinName}`);
}
const usdEl = el.closest('.flex').nextElementSibling?.querySelector('.usd-value'); const usdEl = el.closest('.flex').nextElementSibling?.querySelector('.usd-value');
if (usdEl) { if (usdEl) {
updates.push([usdEl, `$${usdValue}`]); updates.push([usdEl, usdValue]);
total += parseFloat(usdValue);
}
} else {
console.log(`Could not find price for coin: ${coinName}`);
} }
}); });
@ -421,50 +431,14 @@ async function updatePrices(forceUpdate = false) {
el.setAttribute('data-original-value', value); el.setAttribute('data-original-value', value);
}); });
if (total > 0) {
const totalUsdEl = document.getElementById('total-usd-value'); const totalUsdEl = document.getElementById('total-usd-value');
if (totalUsdEl) { if (totalUsdEl) {
const totalText = `$${total.toFixed(2)}`; const totalText = `$${total.toFixed(2)}`;
totalUsdEl.textContent = totalText; totalUsdEl.textContent = totalText;
totalUsdEl.setAttribute('data-original-value', totalText); totalUsdEl.setAttribute('data-original-value', totalText);
localStorage.setItem('total-usd', total);
let percentageChangeEl = document.querySelector('.percentage-change');
if (!percentageChangeEl) {
console.log('Creating percentage change elements...');
const tooltipId = 'tooltip-percentage';
const tooltip = document.createElement('div');
tooltip.id = tooltipId;
tooltip.role = 'tooltip';
tooltip.className = 'inline-block absolute invisible z-50 py-2 px-3 text-sm font-medium text-white bg-blue-500 dark:bg-gray-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip';
tooltip.innerHTML = `
Price change in the last 5 minutes<br>
<span style="color: rgb(34, 197, 94);">▲ Green:</span><span> Price increased</span><br>
<span style="color: rgb(239, 68, 68);">▼ Red:</span><span> Price decreased</span><br>
<span style="color: white;">→ White:</span><span> No change</span>
<div class="tooltip-arrow" data-popper-arrow></div>
`;
document.body.appendChild(tooltip);
percentageChangeEl = document.createElement('span');
percentageChangeEl.setAttribute('data-tooltip-target', tooltipId);
percentageChangeEl.className = 'ml-2 text-base dark:bg-gray-500 bg-blue-500 percentage-change px-2 py-1 rounded-full cursor-help';
totalUsdEl.parentNode.appendChild(percentageChangeEl);
console.log('Initializing tooltip...');
initializePercentageTooltip();
}
let percentageChange = 0;
let percentageChangeIcon = '→';
let currentPercentageChangeColor = 'white';
percentageChangeEl.textContent = `${percentageChangeIcon} ${percentageChange.toFixed(2)}%`;
percentageChangeEl.style.color = currentPercentageChangeColor;
percentageChangeEl.style.display = localStorage.getItem('balancesVisible') === 'true' ? 'inline' : 'none';
console.log(`Displaying percentage change in total USD: ${percentageChangeEl.textContent}`);
} else { } else {
console.log('Total USD element not found, skipping percentage change display'); console.log('Total USD element not found, skipping total USD update');
} }
const btcPrice = response?.bitcoin?.usd; const btcPrice = response?.bitcoin?.usd;
@ -475,26 +449,56 @@ async function updatePrices(forceUpdate = false) {
const btcText = `~ ${btcTotal.toFixed(8)} BTC`; const btcText = `~ ${btcTotal.toFixed(8)} BTC`;
totalBtcEl.textContent = btcText; totalBtcEl.textContent = btcText;
totalBtcEl.setAttribute('data-original-value', btcText); totalBtcEl.setAttribute('data-original-value', btcText);
localStorage.setItem('total-btc', btcTotal);
} else { } else {
console.log('Total BTC element not found'); console.log('Total BTC element not found, skipping total BTC update');
} }
} else { } else {
console.log('Could not find BTC price'); console.log('Could not find BTC price');
} }
} else {
console.log('Total value is 0, skipping update'); let percentageChangeEl = document.querySelector('.percentage-change');
const existingPercentageChangeEl = document.querySelector('.percentage-change'); if (!percentageChangeEl) {
if (existingPercentageChangeEl) { console.log('Creating percentage change elements...');
console.log('Removing existing percentage change element'); const tooltipId = 'tooltip-percentage';
existingPercentageChangeEl.remove();
} const tooltip = document.createElement('div');
tooltip.id = tooltipId;
tooltip.role = 'tooltip';
tooltip.className = 'inline-block absolute invisible z-50 py-2 px-3 text-sm font-medium text-white bg-gray-500 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip';
tooltip.innerHTML = `
Price change in the last 10 minutes<br>
<span style="color: rgb(34, 197, 94);">▲ Green:</span><span> Price increased</span><br>
<span style="color: rgb(239, 68, 68);">▼ Red:</span><span> Price decreased</span><br>
<span style="color: white;">→ White:</span><span> No change</span>
`;
document.body.appendChild(tooltip);
percentageChangeEl = document.createElement('span');
percentageChangeEl.setAttribute('data-tooltip-target', tooltipId);
percentageChangeEl.className = 'ml-2 text-base bg-gray-500 percentage-change px-2 py-1 rounded-full cursor-help';
totalUsdEl?.parentNode?.appendChild(percentageChangeEl);
console.log('Initializing tooltip...');
initializePercentageTooltip();
} }
let percentageChange = 0;
let percentageChangeIcon = '→';
let currentPercentageChangeColor = 'white';
percentageChangeEl.textContent = `${percentageChangeIcon} 0.00%`;
percentageChangeEl.style.color = currentPercentageChangeColor;
percentageChangeEl.style.display = localStorage.getItem('balancesVisible') === 'true' ? 'inline' : 'none';
console.log(`Displaying percentage change in total USD: ${percentageChangeEl.textContent}`);
console.log('Price update completed successfully'); console.log('Price update completed successfully');
return true; return !hasMissingPrices;
} catch (error) { } catch (error) {
console.error('Price update failed:', error); console.error('Price update failed:', error);
api.cache.clear(); // Only clear price-related data from localStorage
const keys = Object.keys(localStorage).filter(key => key.endsWith('-usd') || key === 'total-usd' || key === 'total-btc');
keys.forEach(key => localStorage.removeItem(key));
return false; return false;
} finally { } finally {
isUpdating = false; isUpdating = false;