From 09c019f60525c7e3632b5e07ce4720df4fcad46f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 18 Jan 2026 22:18:41 +0000
Subject: [PATCH] refactor: improve privacy UX with stars and clearer send flow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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.
---
 src/components/WalletViewer.tsx    | 21 +++++++++------------
 src/components/nostr/user-menu.tsx |  8 ++++----
 2 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/src/components/WalletViewer.tsx b/src/components/WalletViewer.tsx
index 66325d5..23e7e8e 100644
--- a/src/components/WalletViewer.tsx
+++ b/src/components/WalletViewer.tsx
@@ -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>
                     )}
diff --git a/src/components/nostr/user-menu.tsx b/src/components/nostr/user-menu.tsx
index bf113ff..7274dd6 100644
--- a/src/components/nostr/user-menu.tsx
+++ b/src/components/nostr/user-menu.tsx
@@ -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}