From 54926a73cd42646843d572b599405ce542504b8d Mon Sep 17 00:00:00 2001 From: Caleb Beery Date: Thu, 27 Jun 2024 02:39:40 -0700 Subject: [PATCH] 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. --- src/boot/base.js | 6 +++++- src/components/BalanceView.vue | 9 +++++++-- src/components/InvoiceDetailDialog.vue | 3 ++- src/components/PayInvoiceDialog.vue | 3 ++- src/stores/ui.ts | 1 + src/stores/wallet.ts | 7 ++++++- 6 files changed, 23 insertions(+), 6 deletions(-) diff --git a/src/boot/base.js b/src/boot/base.js index 964d7ede..0391d287 100644 --- 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 index 85fbf0b3..62dde710 100644 --- a/src/components/BalanceView.vue +++ b/src/components/BalanceView.vue @@ -31,8 +31,8 @@

{{ 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 + } }, }); diff --git a/src/components/InvoiceDetailDialog.vue b/src/components/InvoiceDetailDialog.vue index bdc9c125..953ea8b1 100644 --- 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 index f05724e8..da5c37c0 100644 --- a/src/components/PayInvoiceDialog.vue +++ b/src/components/PayInvoiceDialog.vue @@ -22,7 +22,8 @@ {{ formatCurrency( payInvoiceData.meltQuote.response.amount, - activeUnit + activeUnit, + true ) }}

diff --git a/src/stores/ui.ts b/src/stores/ui.ts index 1fd0a79e..ae1cb127 100644 --- a/src/stores/ui.ts +++ b/src/stores/ui.ts @@ -9,6 +9,7 @@ const unitTickerShortMap = { export const useUiStore = defineStore("ui", { state: () => ({ + hideBalance: useLocalStorage("cashu.ui.hideBalance", false), tickerLong: "Satoshis", showInvoiceDetails: false, showSendDialog: false, diff --git a/src/stores/wallet.ts b/src/stores/wallet.ts index 35190274..cacce241 100644 --- 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) {