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: Fixed images + network offers.

Browse source
This commit is contained in:
Gerlof van Ek 2024-10-16 00:39:20 +02:00
parent 0e212c7119
commit a99b6abe7d
1 changed files with 35 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -800,10 +800,12 @@ function createTableRow(offer, isSentOffers) {
row.className = `opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600`;
row.setAttribute('data-offer-id', uniqueId);
const coinFromSymbol = coinNameToSymbol[offer.coin_from] || offer.coin_from.toLowerCase();
const coinToSymbol = coinNameToSymbol[offer.coin_to] || offer.coin_to.toLowerCase();
const coinFromDisplay = getDisplayName(offer.coin_from);
const coinToDisplay = getDisplayName(offer.coin_to);
const coinFrom = offer.coin_from;
const coinTo = offer.coin_to;
const coinFromSymbol = coinNameToSymbol[coinFrom] || coinFrom.toLowerCase();
const coinToSymbol = coinNameToSymbol[coinTo] || coinTo.toLowerCase();
const coinFromDisplay = getDisplayName(coinFrom);
const coinToDisplay = getDisplayName(coinTo);
const postedTime = formatTimeAgo(offer.created_at);
const expiresIn = formatTimeLeft(offer.expire_at);
@ -821,18 +823,18 @@ function createTableRow(offer, isSentOffers) {
row.innerHTML = `
${createTimeColumn(offer, postedTime, expiresIn)}
${createDetailsColumn(offer)}
${createTakerAmountColumn(offer, coinToDisplay, coinFromDisplay, coinFromSymbol)}
${createSwapColumn(offer, coinToDisplay, coinFromDisplay, coinToSymbol, coinFromSymbol)}
${createOrderbookColumn(offer, coinFromDisplay, coinToDisplay)}
${createRateColumn(offer, coinFromDisplay, coinToDisplay)}
${createTakerAmountColumn(offer, coinTo, coinFrom)}
${createSwapColumn(offer, coinFromDisplay, coinToDisplay, coinFromSymbol, coinToSymbol)}
${createOrderbookColumn(offer, coinFrom, coinTo)}
${createRateColumn(offer, coinFrom, coinTo)}
${createPercentageColumn(offer)}
${createActionColumn(offer, buttonClass, buttonText)}
${createTooltips(offer, isOwnOffer, coinFromDisplay, coinToDisplay, fromAmount, toAmount, postedTime, expiresIn, isActuallyExpired)}
${createTooltips(offer, isOwnOffer, coinFrom, coinTo, fromAmount, toAmount, postedTime, expiresIn, isActuallyExpired)}
`;
updateTooltipTargets(row, uniqueId);
updateProfitLoss(row, coinFromDisplay, coinToDisplay, fromAmount, toAmount, isOwnOffer);
updateProfitLoss(row, coinFrom, coinTo, fromAmount, toAmount, isOwnOffer);
return row;
}
@ -1142,29 +1144,12 @@ function createDetailsColumn(offer) {
`;
}
function createTakerAmountColumn(offer, coinTo, coinFrom) {
const toAmount = parseFloat(offer.amount_to);
const fromSymbol = getCoinSymbol(coinFrom);
return `
<td class="py-0">
<div class="py-3 px-4 text-left">
<a data-tooltip-target="tooltip-wallet${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(fromSymbol)}" class="items-center monospace">
<div class="pr-2">
<div class="text-sm font-semibold">${toAmount.toFixed(4)}</div>
<div class="text-sm text-gray-500 dark:text-gray-400">${coinFrom}</div>
</div>
</a>
</div>
</td>
`;
}
function createSwapColumn(offer, coinToDisplay, coinFromDisplay, coinToSymbol, coinFromSymbol) {
function createSwapColumn(offer, coinFromDisplay, coinToDisplay, coinFromSymbol, coinToSymbol) {
const getImageFilename = (symbol, displayName) => {
if (displayName.toLowerCase() === 'zcoin' || displayName.toLowerCase() === 'firo') {
return 'firo.png';
return 'Firo.png';
}
return `${symbol.toLowerCase()}.png`;
return `${displayName.replace(' ', '-')}.png`;
};
return `
@ -1186,15 +1171,32 @@ function createSwapColumn(offer, coinToDisplay, coinFromDisplay, coinToSymbol, c
`;
}
function createOrderbookColumn(offer, coinFrom, coinTo) {
function createTakerAmountColumn(offer, coinTo, coinFrom) {
const fromAmount = parseFloat(offer.amount_from);
const toSymbol = getCoinSymbol(coinTo);
return `
<td class="p-0">
<div class="py-3 px-4 text-right">
<a data-tooltip-target="tooltip-wallet-maker${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(toSymbol)}" class="items-center monospace">
<td class="py-0">
<div class="py-3 px-4 text-left">
<a data-tooltip-target="tooltip-wallet${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(toSymbol)}" class="items-center monospace">
<div class="pr-2">
<div class="text-sm font-semibold">${fromAmount.toFixed(4)}</div>
<div class="text-sm text-gray-500 dark:text-gray-400">${coinFrom}</div>
</div>
</a>
</div>
</td>
`;
}
function createOrderbookColumn(offer, coinFrom, coinTo) {
const toAmount = parseFloat(offer.amount_to);
const fromSymbol = getCoinSymbol(coinFrom);
return `
<td class="p-0">
<div class="py-3 px-4 text-right">
<a data-tooltip-target="tooltip-wallet-maker${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(fromSymbol)}" class="items-center monospace">
<div class="pr-2">
<div class="text-sm font-semibold">${toAmount.toFixed(4)}</div>
<div class="text-sm text-gray-500 dark:text-gray-400">${coinTo}</div>
</div>
</a>