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

Merge pull request #136 from gerlofvanek/fixes-5
Some checks are pending
lint / build (3.12) (push) Waiting to run
Details

Browse source 
ui: Fixed images + network offers.
This commit is contained in:
Gerlof van Ek 2024-10-16 00:40:17 +02:00 committed by GitHub
commit 99d0d0cd7a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
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.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); row.setAttribute('data-offer-id', uniqueId);
const coinFromSymbol = coinNameToSymbol[offer.coin_from] || offer.coin_from.toLowerCase(); const coinFrom = offer.coin_from;
const coinToSymbol = coinNameToSymbol[offer.coin_to] || offer.coin_to.toLowerCase(); const coinTo = offer.coin_to;
const coinFromDisplay = getDisplayName(offer.coin_from); const coinFromSymbol = coinNameToSymbol[coinFrom] || coinFrom.toLowerCase();
const coinToDisplay = getDisplayName(offer.coin_to); const coinToSymbol = coinNameToSymbol[coinTo] || coinTo.toLowerCase();
const coinFromDisplay = getDisplayName(coinFrom);
const coinToDisplay = getDisplayName(coinTo);
const postedTime = formatTimeAgo(offer.created_at); const postedTime = formatTimeAgo(offer.created_at);
const expiresIn = formatTimeLeft(offer.expire_at); const expiresIn = formatTimeLeft(offer.expire_at);
@ -821,18 +823,18 @@ function createTableRow(offer, isSentOffers) {
row.innerHTML = ` row.innerHTML = `
${createTimeColumn(offer, postedTime, expiresIn)} ${createTimeColumn(offer, postedTime, expiresIn)}
${createDetailsColumn(offer)} ${createDetailsColumn(offer)}
${createTakerAmountColumn(offer, coinToDisplay, coinFromDisplay, coinFromSymbol)} ${createTakerAmountColumn(offer, coinTo, coinFrom)}
${createSwapColumn(offer, coinToDisplay, coinFromDisplay, coinToSymbol, coinFromSymbol)} ${createSwapColumn(offer, coinFromDisplay, coinToDisplay, coinFromSymbol, coinToSymbol)}
${createOrderbookColumn(offer, coinFromDisplay, coinToDisplay)} ${createOrderbookColumn(offer, coinFrom, coinTo)}
${createRateColumn(offer, coinFromDisplay, coinToDisplay)} ${createRateColumn(offer, coinFrom, coinTo)}
${createPercentageColumn(offer)} ${createPercentageColumn(offer)}
${createActionColumn(offer, buttonClass, buttonText)} ${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); updateTooltipTargets(row, uniqueId);
updateProfitLoss(row, coinFromDisplay, coinToDisplay, fromAmount, toAmount, isOwnOffer); updateProfitLoss(row, coinFrom, coinTo, fromAmount, toAmount, isOwnOffer);
return row; return row;
} }
@ -1142,29 +1144,12 @@ function createDetailsColumn(offer) {
`; `;
} }
function createTakerAmountColumn(offer, coinTo, coinFrom) { function createSwapColumn(offer, coinFromDisplay, coinToDisplay, coinFromSymbol, coinToSymbol) {
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) {
const getImageFilename = (symbol, displayName) => { const getImageFilename = (symbol, displayName) => {
if (displayName.toLowerCase() === 'zcoin' || displayName.toLowerCase() === 'firo') { if (displayName.toLowerCase() === 'zcoin' || displayName.toLowerCase() === 'firo') {
return 'firo.png'; return 'Firo.png';
} }
return `${symbol.toLowerCase()}.png`; return `${displayName.replace(' ', '-')}.png`;
}; };
return ` 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 fromAmount = parseFloat(offer.amount_from);
const toSymbol = getCoinSymbol(coinTo); const toSymbol = getCoinSymbol(coinTo);
return ` return `
<td class="p-0"> <td class="py-0">
<div class="py-3 px-4 text-right"> <div class="py-3 px-4 text-left">
<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${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">${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>
</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 class="text-sm text-gray-500 dark:text-gray-400">${coinTo}</div>
</div> </div>
</a> </a>