tweak

lnbits/static/js/pages/wallet.js

@@ -120,6 +120,9 @@ window.PageWallet = {
         0
       )
     },
+    selectedTotalBreakdownSat() {
+      return Math.round(this.selectedTotalBreakdownMsat / 1000)
+    },
     selectedTotalBreakdownCount() {
       return this.selectedTotalBreakdownRows.reduce(
         (total, row) => total + row.payments_count,
@@ -128,15 +131,28 @@ window.PageWallet = {
     },
     formattedTotalBreakdown() {
       return this.utils.formatBalance(
-        this.selectedTotalBreakdownMsat / 1000,
+        this.selectedTotalBreakdownSat,
         this.g.denomination
       )
     },
     formattedTotalBreakdownFiat() {
       if (!this.g.fiatTracking) return null
-      const sats = this.selectedTotalBreakdownMsat / 1000
+      const amount =
-      const amount = (sats / 100000000) * this.g.exchangeRate
+        (this.selectedTotalBreakdownSat / 100000000) * this.g.exchangeRate
       return LNbits.utils.formatCurrency(amount, this.g.wallet.currency)
+    },
+    primaryTotalBreakdownValue() {
+      if (this.g.isFiatPriority && this.g.fiatTracking) {
+        return this.formattedTotalBreakdownFiat || this.formattedTotalBreakdown
+      }
+      return this.formattedTotalBreakdown
+    },
+    secondaryTotalBreakdownValue() {
+      if (!this.g.fiatTracking) return null
+      if (this.g.isFiatPriority) {
+        return this.formattedTotalBreakdown
+      }
+      return this.formattedTotalBreakdownFiat
     }
   },
   methods: {
@@ -180,7 +196,10 @@ window.PageWallet = {
         .reduce((total, row) => total + row.total, 0)
     },
     formatTotalBreakdownMsat(msat) {
-      return this.utils.formatBalance(msat / 1000, this.g.denomination)
+      return this.utils.formatBalance(
+        Math.round(msat / 1000),
+        this.g.denomination
+      )
     },
     handleSendLnurl(lnurl) {
       this.parse.data.request = lnurl

lnbits/templates/pages/wallet.vue

@@ -247,13 +247,13 @@
           <div class="col">
             <div
               class="text-h4 text-bold"
-              v-text="formattedTotalBreakdown"
+              v-text="primaryTotalBreakdownValue"
             ></div>
             <div
-              v-if="formattedTotalBreakdownFiat"
+              v-if="secondaryTotalBreakdownValue"
               class="text-h6 text-italic"
               style="opacity: 0.75"
-              v-text="formattedTotalBreakdownFiat"
+              v-text="secondaryTotalBreakdownValue"
             ></div>
             <div
               class="text-caption text-grey-5"
@@ -290,41 +290,43 @@
 
         <q-separator v-if="hasFiatTotalBreakdown" class="q-mb-md"></q-separator>
 
-        <q-list dense>
+        <div style="max-height: min(52vh, 420px); overflow-y: auto">
-          <q-item
+          <q-list dense>
-            v-for="tag in totalBreakdownTags"
+            <q-item
-            :key="totalBreakdownTagKey(tag)"
+              v-for="tag in totalBreakdownTags"
-            tag="label"
+              :key="totalBreakdownTagKey(tag)"
-            v-ripple
+              tag="label"
-          >
+              v-ripple
-            <q-item-section side>
+            >
-              <q-checkbox
+              <q-item-section side>
-                v-model="totalBreakdown.selectedTags"
+                <q-checkbox
-                :val="totalBreakdownTagKey(tag)"
+                  v-model="totalBreakdown.selectedTags"
-              ></q-checkbox>
+                  :val="totalBreakdownTagKey(tag)"
-            </q-item-section>
+                ></q-checkbox>
-            <q-item-section>
+              </q-item-section>
-              <q-item-label>
+              <q-item-section>
-                <q-badge
+                <q-item-label>
-                  v-if="tag"
+                  <q-badge
-                  color="yellow"
+                    v-if="tag"
-                  text-color="black"
+                    color="yellow"
-                  v-text="'#' + tag"
+                    text-color="black"
-                ></q-badge>
+                    v-text="'#' + tag"
-                <span v-else v-text="totalBreakdownTagLabel(tag)"></span>
+                  ></q-badge>
-              </q-item-label>
+                  <span v-else v-text="totalBreakdownTagLabel(tag)"></span>
-              <q-item-label
+                </q-item-label>
-                caption
+                <q-item-label
-                v-text="totalBreakdownTagCount(tag) + ' payments'"
+                  caption
-              ></q-item-label>
+                  v-text="totalBreakdownTagCount(tag) + ' payments'"
-            </q-item-section>
+                ></q-item-label>
-            <q-item-section side>
+              </q-item-section>
-              <span
+              <q-item-section side>
-                v-text="formatTotalBreakdownMsat(totalBreakdownTagMsat(tag))"
+                <span
-              ></span>
+                  v-text="formatTotalBreakdownMsat(totalBreakdownTagMsat(tag))"
-            </q-item-section>
+                ></span>
-          </q-item>
+              </q-item-section>
-        </q-list>
+            </q-item>
+          </q-list>
+        </div>
 
         <div v-if="!totalBreakdown.loading && !totalBreakdown.rows.length">
           <q-banner class="bg-transparent text-grey-5">