highperfocused/grimoire
1
0
Fork 0
mirror of https://github.com/purrgrammer/grimoire.git synced 2026-04-12 08:27:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

refactor: improve privacy UX with stars and clearer send flow

Browse Source 
Three UX improvements to the wallet privacy feature:

1. Don't hide amounts in send confirmation dialog
   - Users need to verify invoice amounts before sending
   - Privacy mode now only affects viewing, not sending

2. Replace bullet placeholders (••••) with stars (✦✦✦✦)
   - More visually distinct and recognizable as privacy indicator
   - Unicode BLACK FOUR POINTED STAR (U+2726)
   - Better matches common "redacted" aesthetic

3. Reduce eye icon sizes for subtler presence
   - Main balance: size-6 → size-5
   - Wallet info dialog: size-3.5 → size-3
   - Smaller icons feel less intrusive

Result: Clearer privacy state, safer payment flow, better aesthetics.
This commit is contained in:
Claude
2026-01-18 22:18:41 +00:00
parent 2a3da97b49
commit 09c019f605
2 changed files with 13 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/WalletViewer.tsx
View File

@@ -1065,12 +1065,12 @@ export default function WalletViewer() {
title="Click to toggle privacy blur"
>
<span>
{state.walletBalancesBlurred ? "••••••" : formatSats(balance)}
{state.walletBalancesBlurred ? "✦✦✦✦✦✦" : formatSats(balance)}
</span>
{state.walletBalancesBlurred ? (
<EyeOff className="size-6 text-muted-foreground" />
<EyeOff className="size-5 text-muted-foreground" />
) : (
<Eye className="size-6 text-muted-foreground" />
<Eye className="size-5 text-muted-foreground" />
)}
</button>
</div>
@@ -1163,7 +1163,7 @@ export default function WalletViewer() {
<div className="flex-shrink-0 ml-4">
<p className="text-sm font-semibold font-mono">
{state.walletBalancesBlurred
? "••••"
? "✦✦✦✦"
: formatSats(tx.amount)}
</p>
</div>
@@ -1253,7 +1253,7 @@ export default function WalletViewer() {
</p>
<p className="text-2xl font-bold font-mono">
{state.walletBalancesBlurred
? "•••••• sats"
? "✦✦✦✦✦✦ sats"
: `${formatSats(selectedTransaction.amount)} sats`}
</p>
</div>
@@ -1289,7 +1289,7 @@ export default function WalletViewer() {
</Label>
<p className="text-sm font-mono">
{state.walletBalancesBlurred
? "•••• sats"
? "✦✦✦✦ sats"
: `${formatSats(selectedTransaction.fees_paid)} sats`}
</p>
</div>
@@ -1447,9 +1447,8 @@ export default function WalletViewer() {
<div className="flex justify-between">
<span className="text-muted-foreground">Amount:</span>
<span className="font-semibold font-mono">
{state.walletBalancesBlurred
? "•••••• sats"
: `${Math.floor(invoiceDetails.amount).toLocaleString()} sats`}
{Math.floor(invoiceDetails.amount).toLocaleString()}{" "}
sats
</span>
</div>
)}
@@ -1457,9 +1456,7 @@ export default function WalletViewer() {
<div className="flex justify-between">
<span className="text-muted-foreground">Amount:</span>
<span className="font-semibold font-mono">
{state.walletBalancesBlurred
? "•••••• sats"
: `${parseInt(sendAmount).toLocaleString()} sats`}
{parseInt(sendAmount).toLocaleString()} sats
</span>
</div>
)}

8
src/components/nostr/user-menu.tsx
View File

@@ -199,13 +199,13 @@ export default function UserMenu() {
>
<span>
{state.walletBalancesBlurred
? "••••••"
? "✦✦✦✦✦✦"
: formatBalance(balance ?? nwcConnection.balance)}
</span>
{state.walletBalancesBlurred ? (
<EyeOff className="size-3.5 text-muted-foreground" />
<EyeOff className="size-3 text-muted-foreground" />
) : (
<Eye className="size-3.5 text-muted-foreground" />
<Eye className="size-3 text-muted-foreground" />
)}
</button>
<Button
@@ -350,7 +350,7 @@ export default function UserMenu() {
nwcConnection.balance !== undefined ? (
<span className="text-sm">
{state.walletBalancesBlurred
? "••••"
? "✦✦✦✦"
: formatBalance(balance ?? nwcConnection.balance)}
</span>
) : null}