diff --git a/src/components/WalletViewer.tsx b/src/components/WalletViewer.tsx index 7034f14..23e7e8e 100644 --- a/src/components/WalletViewer.tsx +++ b/src/components/WalletViewer.tsx @@ -20,6 +20,8 @@ import { LogOut, ChevronDown, ChevronRight, + Eye, + EyeOff, } from "lucide-react"; import { Virtuoso } from "react-virtuoso"; import { useWallet } from "@/hooks/useWallet"; @@ -341,7 +343,11 @@ function TransactionLabel({ transaction }: { transaction: Transaction }) { } export default function WalletViewer() { - const { state, disconnectNWC: disconnectNWCFromState } = useGrimoire(); + const { + state, + disconnectNWC: disconnectNWCFromState, + toggleWalletBalancesBlur, + } = useGrimoire(); const { wallet, balance, @@ -1053,9 +1059,20 @@ export default function WalletViewer() { {/* Big Centered Balance */}
-
- {formatSats(balance)} -
+
{/* Send / Receive Buttons */} @@ -1145,7 +1162,9 @@ export default function WalletViewer() {

- {formatSats(tx.amount)} + {state.walletBalancesBlurred + ? "✦✦✦✦" + : formatSats(tx.amount)}

@@ -1233,7 +1252,9 @@ export default function WalletViewer() { : "Sent"}

- {formatSats(selectedTransaction.amount)} sats + {state.walletBalancesBlurred + ? "✦✦✦✦✦✦ sats" + : `${formatSats(selectedTransaction.amount)} sats`}

@@ -1267,7 +1288,9 @@ export default function WalletViewer() { Fees Paid

- {formatSats(selectedTransaction.fees_paid)} sats + {state.walletBalancesBlurred + ? "✦✦✦✦ sats" + : `${formatSats(selectedTransaction.fees_paid)} sats`}

)} diff --git a/src/components/nostr/user-menu.tsx b/src/components/nostr/user-menu.tsx index 3b04c00..7274dd6 100644 --- a/src/components/nostr/user-menu.tsx +++ b/src/components/nostr/user-menu.tsx @@ -1,4 +1,13 @@ -import { User, HardDrive, Palette, Wallet, X, RefreshCw } from "lucide-react"; +import { + User, + HardDrive, + Palette, + Wallet, + X, + RefreshCw, + Eye, + EyeOff, +} from "lucide-react"; import accounts from "@/services/accounts"; import { useProfile } from "@/hooks/useProfile"; import { use$ } from "applesauce-react/hooks"; @@ -66,7 +75,8 @@ function UserLabel({ pubkey }: { pubkey: string }) { export default function UserMenu() { const account = use$(accounts.active$); - const { state, addWindow, disconnectNWC } = useGrimoire(); + const { state, addWindow, disconnectNWC, toggleWalletBalancesBlur } = + useGrimoire(); const relays = state.activeAccount?.relays; const blossomServers = state.activeAccount?.blossomServers; const nwcConnection = state.nwcConnection; @@ -182,9 +192,22 @@ export default function UserMenu() { Balance:
- - {formatBalance(balance ?? nwcConnection.balance)} - +
diff --git a/src/core/logic.ts b/src/core/logic.ts index 328d004..07527c1 100644 --- a/src/core/logic.ts +++ b/src/core/logic.ts @@ -593,3 +593,12 @@ export const disconnectNWC = (state: GrimoireState): GrimoireState => { nwcConnection: undefined, }; }; + +export const toggleWalletBalancesBlur = ( + state: GrimoireState, +): GrimoireState => { + return { + ...state, + walletBalancesBlurred: !state.walletBalancesBlurred, + }; +}; diff --git a/src/core/state.ts b/src/core/state.ts index 6c84040..98f8618 100644 --- a/src/core/state.ts +++ b/src/core/state.ts @@ -370,6 +370,10 @@ export const useGrimoire = () => { setState((prev) => Logic.disconnectNWC(prev)); }, [setState]); + const toggleWalletBalancesBlur = useCallback(() => { + setState((prev) => Logic.toggleWalletBalancesBlur(prev)); + }, [setState]); + return { state, isTemporary, @@ -400,5 +404,6 @@ export const useGrimoire = () => { updateNWCBalance, updateNWCInfo, disconnectNWC, + toggleWalletBalancesBlur, }; }; diff --git a/src/types/app.ts b/src/types/app.ts index 1f8b561..b7d1e88 100644 --- a/src/types/app.ts +++ b/src/types/app.ts @@ -137,4 +137,5 @@ export interface GrimoireState { isPublished?: boolean; // Whether it has been published to Nostr }; nwcConnection?: NWCConnection; + walletBalancesBlurred?: boolean; // Privacy: blur balances and transaction amounts }