From 2a3da97b49e50316670594df4638fb3d6edec215 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 18 Jan 2026 22:05:36 +0000
Subject: [PATCH] refactor: replace blur with fixed-width placeholders for
 privacy
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prevent balance size information leakage by using fixed-width
placeholder characters instead of blur effect. A blurred "1000000"
would still reveal it's a large balance vs "100" even when blurred.

Changes:
- Replace blur-sm class with conditional placeholder text
- Use "••••••" for main balances
- Use "••••" for transaction amounts in lists
- Use "•••••• sats" for detailed amounts with unit
- Use "•••• sats" for smaller amounts like fees

Security improvement: No information about balance size is leaked
when privacy mode is enabled. All hidden amounts appear identical.
---
 src/components/WalletViewer.tsx    | 45 +++++++++++++++---------------
 src/components/nostr/user-menu.tsx | 16 +++++------
 2 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/src/components/WalletViewer.tsx b/src/components/WalletViewer.tsx
index 2d37ad2..66325d5 100644
--- a/src/components/WalletViewer.tsx
+++ b/src/components/WalletViewer.tsx
@@ -1064,8 +1064,8 @@ export default function WalletViewer() {
           className="text-4xl font-bold font-mono hover:opacity-70 transition-opacity cursor-pointer flex items-center gap-3"
           title="Click to toggle privacy blur"
         >
-          <span className={state.walletBalancesBlurred ? "blur-sm" : ""}>
-            {formatSats(balance)}
+          <span>
+            {state.walletBalancesBlurred ? "••••••" : formatSats(balance)}
           </span>
           {state.walletBalancesBlurred ? (
             <EyeOff className="size-6 text-muted-foreground" />
@@ -1161,10 +1161,10 @@ export default function WalletViewer() {
                       <TransactionLabel transaction={tx} />
                     </div>
                     <div className="flex-shrink-0 ml-4">
-                      <p
-                        className={`text-sm font-semibold font-mono ${state.walletBalancesBlurred ? "blur-sm" : ""}`}
-                      >
-                        {formatSats(tx.amount)}
+                      <p className="text-sm font-semibold font-mono">
+                        {state.walletBalancesBlurred
+                          ? "••••"
+                          : formatSats(tx.amount)}
                       </p>
                     </div>
                   </div>
@@ -1251,10 +1251,10 @@ export default function WalletViewer() {
                         ? "Received"
                         : "Sent"}
                     </p>
-                    <p
-                      className={`text-2xl font-bold font-mono ${state.walletBalancesBlurred ? "blur-sm" : ""}`}
-                    >
-                      {formatSats(selectedTransaction.amount)} sats
+                    <p className="text-2xl font-bold font-mono">
+                      {state.walletBalancesBlurred
+                        ? "•••••• sats"
+                        : `${formatSats(selectedTransaction.amount)} sats`}
                     </p>
                   </div>
                 </div>
@@ -1287,10 +1287,10 @@ export default function WalletViewer() {
                         <Label className="text-xs text-muted-foreground">
                           Fees Paid
                         </Label>
-                        <p
-                          className={`text-sm font-mono ${state.walletBalancesBlurred ? "blur-sm" : ""}`}
-                        >
-                          {formatSats(selectedTransaction.fees_paid)} sats
+                        <p className="text-sm font-mono">
+                          {state.walletBalancesBlurred
+                            ? "•••• sats"
+                            : `${formatSats(selectedTransaction.fees_paid)} sats`}
                         </p>
                       </div>
                     )}
@@ -1446,21 +1446,20 @@ export default function WalletViewer() {
                     {invoiceDetails?.amount && !sendAmount && (
                       <div className="flex justify-between">
                         <span className="text-muted-foreground">Amount:</span>
-                        <span
-                          className={`font-semibold font-mono ${state.walletBalancesBlurred ? "blur-sm" : ""}`}
-                        >
-                          {Math.floor(invoiceDetails.amount).toLocaleString()}{" "}
-                          sats
+                        <span className="font-semibold font-mono">
+                          {state.walletBalancesBlurred
+                            ? "•••••• sats"
+                            : `${Math.floor(invoiceDetails.amount).toLocaleString()} sats`}
                         </span>
                       </div>
                     )}
                     {sendAmount && (
                       <div className="flex justify-between">
                         <span className="text-muted-foreground">Amount:</span>
-                        <span
-                          className={`font-semibold font-mono ${state.walletBalancesBlurred ? "blur-sm" : ""}`}
-                        >
-                          {parseInt(sendAmount).toLocaleString()} sats
+                        <span className="font-semibold font-mono">
+                          {state.walletBalancesBlurred
+                            ? "•••••• sats"
+                            : `${parseInt(sendAmount).toLocaleString()} sats`}
                         </span>
                       </div>
                     )}
diff --git a/src/components/nostr/user-menu.tsx b/src/components/nostr/user-menu.tsx
index ca93faf..bf113ff 100644
--- a/src/components/nostr/user-menu.tsx
+++ b/src/components/nostr/user-menu.tsx
@@ -197,10 +197,10 @@ export default function UserMenu() {
                       className="text-lg font-semibold hover:opacity-70 transition-opacity cursor-pointer flex items-center gap-1.5"
                       title="Click to toggle privacy blur"
                     >
-                      <span
-                        className={state.walletBalancesBlurred ? "blur-sm" : ""}
-                      >
-                        {formatBalance(balance ?? nwcConnection.balance)}
+                      <span>
+                        {state.walletBalancesBlurred
+                          ? "••••••"
+                          : formatBalance(balance ?? nwcConnection.balance)}
                       </span>
                       {state.walletBalancesBlurred ? (
                         <EyeOff className="size-3.5 text-muted-foreground" />
@@ -348,10 +348,10 @@ export default function UserMenu() {
                 <Wallet className="size-4 text-muted-foreground" />
                 {balance !== undefined ||
                 nwcConnection.balance !== undefined ? (
-                  <span
-                    className={`text-sm ${state.walletBalancesBlurred ? "blur-sm" : ""}`}
-                  >
-                    {formatBalance(balance ?? nwcConnection.balance)}
+                  <span className="text-sm">
+                    {state.walletBalancesBlurred
+                      ? "••••"
+                      : formatBalance(balance ?? nwcConnection.balance)}
                   </span>
                 ) : null}
               </div>