From a309c7c96cdddc560aa841ac15325559df5f5a03 Mon Sep 17 00:00:00 2001 From: Riccardo Balbo Date: Wed, 3 Jan 2024 18:14:11 +0100 Subject: [PATCH] better differentiate incoming/outgoing txs, improve fee slider --- src/assets/app/static/theme/deepoceanduck.css | 3 +++ src/assets/app/static/theme/minimalsats.css | 3 +++ src/assets/app/static/theme/satoshilegacy.css | 3 +++ src/assets/app/static/theme/spacequack.css | 3 +++ src/js/AssetProvider.js | 4 ++-- src/js/LiquidWallet.js | 4 ++-- src/js/ui/Html.js | 13 ++++++++++- src/js/ui/stages/SendStage.js | 5 ++++- src/js/ui/stages/WalletStage.js | 6 +++-- src/less/stages/wallet.less | 19 ++++++++++++++++ src/less/style.less | 22 +++++++++++++++++++ 11 files changed, 77 insertions(+), 8 deletions(-) diff --git a/src/assets/app/static/theme/deepoceanduck.css b/src/assets/app/static/theme/deepoceanduck.css index 465af5b..a450432 100644 --- a/src/assets/app/static/theme/deepoceanduck.css +++ b/src/assets/app/static/theme/deepoceanduck.css @@ -15,6 +15,9 @@ --error: #ff0000; --warning: var(--foreground); + + --outgoingTxForeground: #b76a6a; + --incomingTxForeground: #6d8b6d; } #liquidwallet #container .asset .cover { diff --git a/src/assets/app/static/theme/minimalsats.css b/src/assets/app/static/theme/minimalsats.css index f11b07d..571fc91 100644 --- a/src/assets/app/static/theme/minimalsats.css +++ b/src/assets/app/static/theme/minimalsats.css @@ -14,6 +14,9 @@ --error: #ff0000; --warning: #ff9800; + + --outgoingTxForeground: #b76a6a; + --incomingTxForeground: #6d8b6d; } #liquidwallet #logo { diff --git a/src/assets/app/static/theme/satoshilegacy.css b/src/assets/app/static/theme/satoshilegacy.css index 643cac3..10300a9 100644 --- a/src/assets/app/static/theme/satoshilegacy.css +++ b/src/assets/app/static/theme/satoshilegacy.css @@ -16,6 +16,9 @@ --error: #ff0000; --warning: var(--foreground); + + --outgoingTxForeground: #b76a6a; + --incomingTxForeground: #6d8b6d; } #liquidwallet #container .asset .cover { filter: blur(20px) grayscale(0.4) brightness(0.6); diff --git a/src/assets/app/static/theme/spacequack.css b/src/assets/app/static/theme/spacequack.css index 4911311..c1b4bee 100644 --- a/src/assets/app/static/theme/spacequack.css +++ b/src/assets/app/static/theme/spacequack.css @@ -15,6 +15,9 @@ --error: #ff0000; --warning: var(--foreground); + + --outgoingTxForeground: #b76a6a; + --incomingTxForeground: #6d8b6d; } #liquidwallet #container .asset .cover { filter: blur(20px) grayscale(0.4) brightness(0.6); diff --git a/src/js/AssetProvider.js b/src/js/AssetProvider.js index 7601791..bc4e61a 100644 --- a/src/js/AssetProvider.js +++ b/src/js/AssetProvider.js @@ -261,13 +261,13 @@ export default class AssetProvider { return price; } - async floatToStringValue(v, assetHash) { + async floatToStringValue(v, assetHash, useSpecialSymbols = false) { const info = await this.getAssetInfo(assetHash); let symbol = info.ticker; const precision = info.precision; let symbolBeforeValue = false; - if (this.specialSymbols[symbol]) { + if (useSpecialSymbols && this.specialSymbols[symbol]) { symbolBeforeValue = true; symbol = this.specialSymbols[symbol]; } diff --git a/src/js/LiquidWallet.js b/src/js/LiquidWallet.js index eb14cf2..03f4930 100644 --- a/src/js/LiquidWallet.js +++ b/src/js/LiquidWallet.js @@ -1443,7 +1443,7 @@ export default class LiquidWallet { * @param {string} targetAssetHash if unset means to use the base asset * @returns */ - human: async (targetAssetHash) => { + human: async (targetAssetHash, special = true) => { await this.check(); if (!targetAssetHash) targetAssetHash = assetHash; @@ -1451,7 +1451,7 @@ export default class LiquidWallet { amount = await this.assetProvider.getPrice(amount, assetHash, targetAssetHash); amount = await this.assetProvider.intToFloat(amount, targetAssetHash); - amount = await this.assetProvider.floatToStringValue(amount, targetAssetHash); + amount = await this.assetProvider.floatToStringValue(amount, targetAssetHash, special); return amount; }, diff --git a/src/js/ui/Html.js b/src/js/ui/Html.js index 3177115..0e4396a 100644 --- a/src/js/ui/Html.js +++ b/src/js/ui/Html.js @@ -1003,12 +1003,23 @@ class Html { el.classList.add("clickable"); const sliderEl = this.$(el, "slider", ["slider"], "input"); sliderEl.classList.add("clickable"); - const max = 100; + const max = 10; sliderEl.type = "range"; sliderEl.min = 0; sliderEl.max = max; sliderEl.value = 0; + el.setLabel = (pos, label) => { + const posSel = pos.toString().replace(".", "_"); + if (!label) { + this.$0(el, "#label" + posSel); + return; + } + const labelEl = this.$text(el, ["label"], "label" + posSel).setValue(label); + labelEl.style.left = `${pos * 100}%`; + return el; + }; + const debounce = Constants.DEBOUNCE_CALLBACK_TIME; let lastValue = 0; diff --git a/src/js/ui/stages/SendStage.js b/src/js/ui/stages/SendStage.js index 23d4fb7..964b154 100644 --- a/src/js/ui/stages/SendStage.js +++ b/src/js/ui/stages/SendStage.js @@ -147,8 +147,11 @@ export default class SendStage extends UIStage { const availableBalanceValueEl = $text(availableBalanceEl); const useAllEl = $button(availableBalanceEl, ["small"]).setValue("SEND ALL"); - $title(c01El).setValue("Priority"); + $title(c01El).setValue("Fee"); const prioritySlideEl = $inputSlide(c01El); + prioritySlideEl.setLabel(0, "Low (slow)"); + prioritySlideEl.setLabel(0.5, "Medium"); + prioritySlideEl.setLabel(1, "High (fast)"); const feeRowEl = $hlist(c01El, ["sub"]); $hsep(feeRowEl).grow(100); diff --git a/src/js/ui/stages/WalletStage.js b/src/js/ui/stages/WalletStage.js index 7eea3e5..30d2e90 100644 --- a/src/js/ui/stages/WalletStage.js +++ b/src/js/ui/stages/WalletStage.js @@ -60,7 +60,7 @@ export default class WalletPage extends UIStage { const balanceSecondaryEl = $text(balanceAltCntEl, ["sub"]); lq.v(balance.value, balance.asset) - .human() + .human(balance.asset, false) .then((value) => { balanceEl.setValue(value); }); @@ -201,9 +201,11 @@ export default class WalletPage extends UIStage { txElCnt.hide(); } else { if (txData.info.isIncoming) { + txElCnt.classList.add("incoming"); txDirectionEl.setValue("arrow_downward"); txDirectionEl.classList.add("incoming"); } else { + txElCnt.classList.add("outgoing"); txDirectionEl.setValue("arrow_upward"); txDirectionEl.classList.add("outgoing"); } @@ -245,7 +247,7 @@ export default class WalletPage extends UIStage { txSymbolEl.setValue(info.ticker); }); lq.v(txData.info.outAmount, txData.info.outAsset) - .human() + .human(txData.info.outAsset, false) .then((value) => { txAmountEl.setValue(value); }); diff --git a/src/less/stages/wallet.less b/src/less/stages/wallet.less index 6348a7f..cd7ffa3 100644 --- a/src/less/stages/wallet.less +++ b/src/less/stages/wallet.less @@ -6,6 +6,25 @@ /* filter: grayscale(40%); */ } +#liquidwallet #container.wallet.stage #history { + .tx.incoming { + .txAmount { + color: var(--incomingTxForeground); + } + .txAmount::before { + content: "+ "; + } + } + .tx.outgoing { + .txAmount { + color: var(--outgoingTxForeground); + } + .txAmount::before { + content: "- "; + } + } +} + #liquidwallet #container.wallet.stage .asset.h { width: 100%; } diff --git a/src/less/style.less b/src/less/style.less index 2e231b6..064a51a 100644 --- a/src/less/style.less +++ b/src/less/style.less @@ -16,6 +16,9 @@ --error: #ff0000; --warning: var(--elementsBackground); + + --outgoingTxForeground: #b76a6a; + --incomingTxForeground: #6d8b6d; } #liquidwallet { @@ -148,7 +151,26 @@ align-items: center; justify-content: space-between; width: 100%; + padding-bottom: 1rem; + + .label { + position: absolute; + color: var(--foreground); + font-size: 0.8rem; + text-align: center; + bottom: 0; + white-space: nowrap; + transform: translateX(-50%); + } + + .label:first-of-type { + transform: translateX(0%); + } + + .label:last-of-type { + transform: translateX(-100%); + } .slider { flex-grow: 1; padding: 0;