better differentiate incoming/outgoing txs, improve fee slider

riccardobl · Jan 3, 2024 · a309c7c · a309c7c
1 parent 6ade738
commit a309c7c
Show file tree

Hide file tree

Showing 11 changed files with 77 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -1443,15 +1443,15 @@ 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;
 
                 let amount = inAmount;
                 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;