Added ability to hide amounts in the UI with **** (#187)

* Added ability to hide amounts in the UI with **** * Made invoice amount visible when paying. * Updated hide amounts to use the UI store instead of mints store.
cashubtc · Jun 27, 2024 · 54926a7 · 54926a7
1 parent 969966b
commit 54926a7
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 6 deletions.
diff --git a/src/boot/base.js b/src/boot/base.js
@@ -1,4 +1,5 @@
 import { copyToClipboard } from "quasar";
+import { useUiStore } from "stores/ui";
 
 window.LOCALE = "en";
 // window.EventHub = new Vue();
@@ -35,10 +36,13 @@ window.windowMixin = {
         });
       });
     },
-    formatCurrency: function (value, currency) {
+    formatCurrency: function (value, currency, showBalance = false) {
       if (currency == undefined) {
         currency = "sat";
       }
+      if (useUiStore().hideBalance && !showBalance) {
+        return "****"
+      }
       if (currency == "sat") return this.formatSat(value);
       if (currency == "usd") value = value / 100;
       return new Intl.NumberFormat(window.LOCALE, {

diff --git a/src/components/BalanceView.vue b/src/components/BalanceView.vue
@@ -31,8 +31,8 @@
           <div class="row">
             <div class="col-12">
               <h3
-                class="q-my-none q-py-none"
-                @click="activeUnit = toggleUnit()"
+                class="q-my-none q-py-none cursor-pointer"
+                @click="toggleHideBalance"
               >
                 <strong>
                   {{ formatCurrency(getTotalBalance, activeUnit) }}
@@ -113,6 +113,7 @@ import { mapState, mapWritableState, mapActions } from "pinia";
 import { useMintsStore } from "stores/mints";
 import { useSettingsStore } from "stores/settings";
 import { useTokensStore } from "stores/tokens";
+import { useUiStore } from "stores/ui";
 import { useWalletStore } from "stores/wallet";
 import ToggleUnit from "components/ToggleUnit.vue";
 
@@ -147,6 +148,7 @@ export default defineComponent({
     ...mapState(useTokensStore, ["historyTokens"]),
     ...mapState(useSettingsStore, ["getBitcoinPrice"]),
     ...mapWritableState(useMintsStore, ["activeUnit"]),
+    ...mapWritableState(useUiStore, ["hideBalance"]),
     pendingBalance: function () {
       return -this.historyTokens
         .filter((t) => t.status == "pending")
@@ -218,6 +220,9 @@ export default defineComponent({
         units[(units.indexOf(this.activeUnit) + 1) % units.length];
       return this.activeUnit;
     },
+    toggleHideBalance() {
+      this.hideBalance = !this.hideBalance
+    }
   },
 });
 </script>
diff --git a/src/components/InvoiceDetailDialog.vue b/src/components/InvoiceDetailDialog.vue
@@ -176,7 +176,8 @@ export default defineComponent({
     displayUnit: function () {
       let display = this.formatCurrency(
         this.invoiceData.amount,
-        this.invoiceData.unit
+        this.invoiceData.unit,
+        true
       );
       return display;
     },

diff --git a/src/components/PayInvoiceDialog.vue b/src/components/PayInvoiceDialog.vue
@@ -22,7 +22,8 @@
               {{
                 formatCurrency(
                   payInvoiceData.meltQuote.response.amount,
-                  activeUnit
+                  activeUnit,
+                  true
                 )
               }}
             </h6>

diff --git a/src/stores/ui.ts b/src/stores/ui.ts
@@ -9,6 +9,7 @@ const unitTickerShortMap = {
 
 export const useUiStore = defineStore("ui", {
   state: () => ({
+    hideBalance: useLocalStorage<boolean>("cashu.ui.hideBalance", false),
     tickerLong: "Satoshis",
     showInvoiceDetails: false,
     showSendDialog: false,

diff --git a/src/stores/wallet.ts b/src/stores/wallet.ts
@@ -50,7 +50,6 @@ type KeysetCounter = {
 
 const receiveStore = useReceiveTokensStore();
 const tokenStore = useTokensStore();
-const uIStore = useUiStore();
 
 export const useWalletStore = defineStore("wallet", {
   state: () => {
@@ -275,6 +274,7 @@ export const useWalletStore = defineStore("wallet", {
       return selectedProofs
     },
     spendableProofs: function (proofs: WalletProof[], amount: number) {
+      const uIStore = useUiStore();
       const proofsStore = useProofsStore();
       const mintStore = useMintsStore();
       const spendableProofs = proofsStore.getUnreservedProofs(proofs);
@@ -358,6 +358,7 @@ export const useWalletStore = defineStore("wallet", {
       /*
       uses split to receive new tokens.
       */
+      const uIStore = useUiStore();
       const mintStore = useMintsStore();
       receiveStore.showReceiveTokens = false;
       console.log("### receive tokens", receiveStore.receiveData.tokensBase64);
@@ -537,6 +538,7 @@ export const useWalletStore = defineStore("wallet", {
       }
     },
     melt: async function () {
+      const uIStore = useUiStore();
       const proofsStore = useProofsStore();
       const mintStore = useMintsStore();
       const tokenStore = useTokensStore();
@@ -708,6 +710,7 @@ export const useWalletStore = defineStore("wallet", {
       checks whether a base64-encoded token (from the history table) has been spent already.
       if it is spent, the appropraite entry in the history table is set to paid.
       */
+      const uIStore = useUiStore();
       const mintStore = useMintsStore();
       const tokenStore = useTokensStore();
       const proofsStore = useProofsStore();
@@ -763,6 +766,7 @@ export const useWalletStore = defineStore("wallet", {
       return true;
     },
     checkInvoice: async function (quote: string, verbose = true) {
+      const uIStore = useUiStore();
       const mintStore = useMintsStore();
       console.log("### checkInvoice.quote", quote);
       const invoice = this.invoiceHistory.find((i) => i.quote === quote);
@@ -786,6 +790,7 @@ export const useWalletStore = defineStore("wallet", {
       }
     },
     checkOutgoingInvoice: async function (quote: string, verbose = true) {
+      const uIStore = useUiStore();
       const mintStore = useMintsStore();
       const invoice = this.invoiceHistory.find((i) => i.quote === quote);
       if (!invoice) {