From 48a46aea47670394b8339338e84182986c0321da Mon Sep 17 00:00:00 2001 From: Gerlof van Ek <info@gerlofvanek.com> Date: Wed, 16 Oct 2024 01:52:12 +0200 Subject: [PATCH] ui: Fixes --- basicswap/static/js/offerstable.js | 88 +++++++++++++++--------------- 1 file changed, 45 insertions(+), 43 deletions(-) diff --git a/basicswap/static/js/offerstable.js b/basicswap/static/js/offerstable.js index 1b0c262..aaca8ff 100644 --- a/basicswap/static/js/offerstable.js +++ b/basicswap/static/js/offerstable.js @@ -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,15 +1144,42 @@ function createDetailsColumn(offer) { `; } -function createTakerAmountColumn(offer, coinTo, coinFrom) { - const toAmount = parseFloat(offer.amount_to); +function createSwapColumn(offer, coinFromDisplay, coinToDisplay, coinFromSymbol, coinToSymbol) { + const getImageFilename = (symbol, displayName) => { + if (displayName.toLowerCase() === 'zcoin' || displayName.toLowerCase() === 'firo') { + return 'Firo.png'; + } + return `${displayName.replace(' ', '-')}.png`; + }; + + return ` + <td class="py-0 px-0 text-right text-sm"> + <a data-tooltip-target="tooltip-offer${offer.offer_id}" href="/offer/${offer.offer_id}"> + <div class="flex items-center justify-evenly monospace"> + <span class="inline-flex mr-3 ml-3 align-middle items-center justify-center w-18 h-20 rounded"> + <img class="h-12" src="/static/images/coins/${getImageFilename(coinToSymbol, coinToDisplay)}" alt="${coinToDisplay}"> + </span> + <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> + <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path> + </svg> + <span class="inline-flex ml-3 mr-3 align-middle items-center justify-center w-18 h-20 rounded"> + <img class="h-12" src="/static/images/coins/${getImageFilename(coinFromSymbol, coinFromDisplay)}" alt="${coinFromDisplay}"> + </span> + </div> + </a> + </td> + `; +} + +function createTakerAmountColumn(offer, coinFrom, coinTo) { + const fromAmount = 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 font-semibold">${fromAmount.toFixed(4)}</div> <div class="text-sm text-gray-500 dark:text-gray-400">${coinFrom}</div> </div> </a> @@ -1159,42 +1188,15 @@ function createTakerAmountColumn(offer, coinTo, coinFrom) { `; } -function createSwapColumn(offer, coinToDisplay, coinFromDisplay, coinToSymbol, coinFromSymbol) { - const getImageFilename = (symbol, displayName) => { - if (displayName.toLowerCase() === 'zcoin' || displayName.toLowerCase() === 'firo') { - return 'firo.png'; - } - return `${symbol.toLowerCase()}.png`; - }; - - return ` - <td class="py-0 px-0 text-right text-sm"> - <a data-tooltip-target="tooltip-offer${offer.offer_id}" href="/offer/${offer.offer_id}"> - <div class="flex items-center justify-evenly monospace"> - <span class="inline-flex mr-3 ml-3 align-middle items-center justify-center w-18 h-20 rounded"> - <img class="h-12" src="/static/images/coins/${getImageFilename(coinFromSymbol, coinFromDisplay)}" alt="${coinFromDisplay}"> - </span> - <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> - <path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path> - </svg> - <span class="inline-flex ml-3 mr-3 align-middle items-center justify-center w-18 h-20 rounded"> - <img class="h-12" src="/static/images/coins/${getImageFilename(coinToSymbol, coinToDisplay)}" alt="${coinToDisplay}"> - </span> - </div> - </a> - </td> - `; -} - -function createOrderbookColumn(offer, coinFrom, coinTo) { - const fromAmount = parseFloat(offer.amount_from); +function createOrderbookColumn(offer, coinTo, coinFrom) { + const toAmount = 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"> <div class="pr-2"> - <div class="text-sm font-semibold">${fromAmount.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> </a>