Wallet UX polish: elegant recovery-phrase reveal, separate amounts, loading states

Continued the wallet audit with a focus on intuitive, minimal, elegant UX.

• Recovery phrase — replaced the raw browser alert() (which dumped the seed
  as unstyled, uncopyable plaintext) with a proper RecoveryPhraseDialog:
  hidden/blurred by default with a deliberate "tap to reveal" gate (no
  shoulder-surfing on open), a numbered 12-word chip grid for accurate
  transcription, a copy button (enabled only after reveal), and an honest
  "paper is safest, clipboards leak" note. Re-hides on every close. This was
  the wallet's most sensitive surface and its worst blemish.

• Fixed shared-state bug: "Create Cashu Token" and "Pay Lightning Address"
  both wrote to the same `sendAmount`, so switching between them carried a
  stale amount across two unrelated intents. The address form now owns its
  own amount state.

• Added loading feedback + double-tap protection to every money action that
  lacked it — Generate Invoice ("Generating…"), Create Token ("Creating…"),
  Receive Token ("Receiving…"), Pay Lightning Address ("Sending…"). Each hook
  now exposes an in-flight flag and guards re-entry.

WalletPage and the browser "app-only" notice were already clean/elegant —
left as-is.

Bumps to 1.2.22 (Android versionCode 10222 auto-derived).

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "skate-spots",
   "private": true,
-  "version": "1.2.21",
+  "version": "1.2.22",
   "type": "module",
   "homepage": "https://skate-spots.com",
   "scripts": {

src/components/wallet/CashuWalletCard.tsx

@@ -39,6 +39,7 @@ import {
 import { useToast } from '@/hooks/useToast';
 import { QRScannerModal } from '@/components/wallet/QRScannerModal';
 import { MintPrivacyManager } from '@/components/wallet/MintPrivacyManager';
+import { RecoveryPhraseDialog } from '@/components/wallet/RecoveryPhraseDialog';
 import { isNativePlatform } from '@/lib/platform';
 import { Smartphone } from 'lucide-react';
 
@@ -168,6 +169,7 @@ function CashuWalletCardNative() {
     setShowInvoiceModal,
     currentInvoice,
     handleLightningReceive,
+    isGeneratingInvoice,
     lightningInvoice,
     setLightningInvoice,
     isProcessingPayment,
@@ -178,9 +180,11 @@ function CashuWalletCardNative() {
     tokenInput,
     setTokenInput,
     handleTokenReceive,
+    isReceivingToken,
     sendAmount,
     setSendAmount,
     handleTokenSend,
+    isCreatingToken,
     sentToken,
     setSentToken,
     sentTokenQRCode,
@@ -194,9 +198,15 @@ function CashuWalletCardNative() {
 
   // QR Scanner state
   const [showQRScanner, setShowQRScanner] = useState(false);
-  
+
-  // Lightning address state
+  // Recovery-phrase reveal dialog
+  const [showRecoveryPhrase, setShowRecoveryPhrase] = useState(false);
+
+  // Lightning address state. Its amount is kept SEPARATE from the token-send
+  // amount (`sendAmount`) so switching between "Create Token" and "Pay Address"
+  // never carries a stale value between two unrelated intents.
   const [lightningAddress, setLightningAddress] = useState('');
+  const [lightningAddressAmount, setLightningAddressAmount] = useState('');
 
   // Set first mint as active if none selected
   useEffect(() => {
@@ -242,34 +252,39 @@ function CashuWalletCardNative() {
   }, [coco, setTokenInput, setLightningInvoice, toast]);
 
   // Handle paying a Lightning address
+  const [isPayingAddress, setIsPayingAddress] = useState(false);
   const handlePayLightningAddress = useCallback(async () => {
-    if (!lightningAddress || !sendAmount || !coco || !activeMintUrl) return;
+    if (!lightningAddress || !lightningAddressAmount || !coco || !activeMintUrl) return;
-    
+
     try {
-      const amount = parseInt(sendAmount);
+      const amount = parseInt(lightningAddressAmount);
       if (isNaN(amount) || amount <= 0) {
         toast({ variant: 'destructive', title: 'Invalid amount', description: 'Please enter a valid amount' });
         return;
       }
 
+      setIsPayingAddress(true);
+
       // First resolve the Lightning address to get an invoice
       const invoice = await getLightningInvoice({ lightningAddress, amountSats: amount });
-      
+
       // Then pay the invoice using Cashu
       const meltQuote = await coco.quotes.createMeltQuote(activeMintUrl, invoice);
       await coco.quotes.payMeltQuote(activeMintUrl, meltQuote.quote);
-      
+
       toast({ title: 'Payment sent', description: `Sent ${amount} sats to ${lightningAddress}` });
       setLightningAddress('');
-      setSendAmount('');
+      setLightningAddressAmount('');
     } catch (err) {
       toast({ 
         variant: 'destructive', 
         title: 'Payment failed', 
         description: err instanceof Error ? err.message : 'Unknown error' 
       });
+    } finally {
+      setIsPayingAddress(false);
     }
-  }, [lightningAddress, sendAmount, coco, activeMintUrl, getLightningInvoice, toast, setSendAmount]);
+  }, [lightningAddress, lightningAddressAmount, coco, activeMintUrl, getLightningInvoice, toast]);
 
   // Copy to clipboard helper
   const copyToClipboard = async (text: string, label: string) => {
@@ -406,10 +421,10 @@ function CashuWalletCardNative() {
                      />
                      <Button
                        onClick={handleLightningReceive}
-                       disabled={!activeMintUrl || !quoteAmount}
+                       disabled={!activeMintUrl || !quoteAmount || isGeneratingInvoice}
                        className="h-11 bg-orange-500 hover:bg-orange-600 font-bold"
                      >
-                       Generate Invoice
+                       {isGeneratingInvoice ? 'Generating…' : 'Generate Invoice'}
                      </Button>
                    </div>
                  </div>
@@ -446,10 +461,10 @@ function CashuWalletCardNative() {
                      />
                      <Button
                        onClick={handleTokenReceive}
-                       disabled={!tokenInput}
+                       disabled={!tokenInput || isReceivingToken}
                        className="w-full h-11 bg-green-600 hover:bg-green-700 font-bold"
                      >
-                       Receive Token
+                       {isReceivingToken ? 'Receiving…' : 'Receive Token'}
                      </Button>
                    </div>
                  </div>
@@ -471,10 +486,10 @@ function CashuWalletCardNative() {
                      />
                      <Button
                        onClick={handleTokenSend}
-                       disabled={!activeMintUrl || !sendAmount}
+                       disabled={!activeMintUrl || !sendAmount || isCreatingToken}
                        className="h-11 bg-orange-500 hover:bg-orange-600 font-bold"
                      >
-                       Create Token
+                       {isCreatingToken ? 'Creating…' : 'Create Token'}
                      </Button>
                    </div>
                  </div>
@@ -543,16 +558,16 @@ function CashuWalletCardNative() {
                        type="number"
                        inputMode="numeric"
                        placeholder="Amount in sats"
-                       value={sendAmount}
+                       value={lightningAddressAmount}
-                       onChange={(e) => setSendAmount(e.target.value)}
+                       onChange={(e) => setLightningAddressAmount(e.target.value)}
                        className="h-11"
                      />
                      <Button
                        onClick={handlePayLightningAddress}
-                       disabled={!lightningAddress || !sendAmount || isResolvingAddress || isProcessingPayment}
+                       disabled={!lightningAddress || !lightningAddressAmount || isResolvingAddress || isPayingAddress}
                        className="w-full h-11 bg-purple-600 hover:bg-purple-700 font-bold"
                      >
-                       {isResolvingAddress ? 'Resolving...' : 'Send to Address'}
+                       {isResolvingAddress || isPayingAddress ? 'Sending…' : 'Send to Address'}
                      </Button>
                    </div>
                  </div>
@@ -668,9 +683,7 @@ function CashuWalletCardNative() {
               Your wallet is secured with a 12-word recovery phrase. Save it safely — you'll need it to restore your balance if you clear browser data.
             </p>
             <Button
-              onClick={() => {
+              onClick={() => setShowRecoveryPhrase(true)}
-                alert(`Your backup phrase:\n\n${mnemonic}\n\nWrite these words down and store them safely!`);
-              }}
               variant="outline"
               className="w-full h-11 border-amber-500/50 text-amber-600 hover:bg-amber-500/10 font-bold"
             >
@@ -770,6 +783,16 @@ function CashuWalletCardNative() {
         </DialogContent>
       </Dialog>
 
+      {/* Recovery Phrase Dialog — replaces the old raw alert() with an elegant,
+          hidden-by-default reveal */}
+      {mnemonic && (
+        <RecoveryPhraseDialog
+          open={showRecoveryPhrase}
+          onOpenChange={setShowRecoveryPhrase}
+          mnemonic={mnemonic}
+        />
+      )}
+
       {/* QR Scanner Modal */}
       <QRScannerModal
         isOpen={showQRScanner}

src/components/wallet/RecoveryPhraseDialog.tsx

@@ -0,0 +1,141 @@
+import { useState } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { useToast } from '@/hooks/useToast';
+import { cn } from '@/lib/utils';
+import { Shield, Eye, EyeOff, Copy, Check } from 'lucide-react';
+
+interface RecoveryPhraseDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** Space-separated BIP-39 mnemonic. */
+  mnemonic: string;
+}
+
+/**
+ * An elegant, security-conscious recovery-phrase reveal — the wallet's single
+ * most sensitive surface, so it deserves better than a raw `alert()`.
+ *
+ * Principles:
+ *  • Hidden by default (blurred word grid) so the seed can't be shoulder-surfed
+ *    just by opening the dialog; the user must deliberately tap "Reveal".
+ *  • Numbered word chips make it easy to transcribe accurately onto paper.
+ *  • Copy is available but explicitly discouraged in the warning (clipboards
+ *    leak); paper is the safe path.
+ *  • The seed is cleared from the reveal state whenever the dialog closes.
+ */
+export function RecoveryPhraseDialog({ open, onOpenChange, mnemonic }: RecoveryPhraseDialogProps) {
+  const [revealed, setRevealed] = useState(false);
+  const [copied, setCopied] = useState(false);
+  const { toast } = useToast();
+
+  const words = mnemonic.trim().split(/\s+/);
+
+  const handleOpenChange = (next: boolean) => {
+    // Re-hide on every close so re-opening always starts concealed.
+    if (!next) {
+      setRevealed(false);
+      setCopied(false);
+    }
+    onOpenChange(next);
+  };
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(mnemonic);
+      setCopied(true);
+      toast({ title: 'Copied', description: 'Recovery phrase copied — paste it somewhere safe, then clear your clipboard.' });
+      setTimeout(() => setCopied(false), 2500);
+    } catch {
+      toast({ variant: 'destructive', title: 'Copy failed', description: 'Please write the words down instead.' });
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="w-[calc(100%-1rem)] sm:max-w-md p-5 sm:p-6">
+        <DialogHeader>
+          <div className="mx-auto mb-2 flex h-12 w-12 items-center justify-center rounded-2xl bg-amber-500/15">
+            <Shield className="h-6 w-6 text-amber-500" />
+          </div>
+          <DialogTitle className="text-center text-lg font-black">Recovery Phrase</DialogTitle>
+          <DialogDescription className="text-center text-xs leading-relaxed">
+            These 12 words are the only way to restore your ecash balance. Write them down in order
+            and store them offline — never share them with anyone.
+          </DialogDescription>
+        </DialogHeader>
+
+        {/* Word grid */}
+        <div className="relative">
+          <div
+            className={cn(
+              'grid grid-cols-2 gap-2 rounded-2xl border border-amber-500/20 bg-amber-500/[0.04] p-3 transition-all sm:grid-cols-3',
+              !revealed && 'select-none blur-sm',
+            )}
+            aria-hidden={!revealed}
+          >
+            {words.map((word, i) => (
+              <div
+                key={`${i}-${word}`}
+                className="flex items-center gap-2 rounded-lg bg-background/60 px-2.5 py-2"
+              >
+                <span className="w-4 text-right text-[10px] font-bold tabular-nums text-muted-foreground">
+                  {i + 1}
+                </span>
+                <span className="font-mono text-sm font-semibold">{word}</span>
+              </div>
+            ))}
+          </div>
+
+          {/* Reveal overlay */}
+          {!revealed && (
+            <button
+              type="button"
+              onClick={() => setRevealed(true)}
+              className="absolute inset-0 flex flex-col items-center justify-center gap-1.5 rounded-2xl bg-background/40 backdrop-blur-[2px] transition-colors hover:bg-background/30 active:scale-[0.99]"
+            >
+              <span className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-500/20">
+                <Eye className="h-5 w-5 text-amber-500" />
+              </span>
+              <span className="text-xs font-bold uppercase tracking-wide text-amber-400">
+                Tap to reveal
+              </span>
+              <span className="text-[10px] text-muted-foreground">Make sure nobody's watching</span>
+            </button>
+          )}
+        </div>
+
+        {/* Actions */}
+        <div className="flex gap-2">
+          <Button
+            variant="outline"
+            className="flex-1 gap-2"
+            onClick={() => setRevealed((v) => !v)}
+          >
+            {revealed ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+            {revealed ? 'Hide' : 'Reveal'}
+          </Button>
+          <Button
+            variant="outline"
+            className="flex-1 gap-2"
+            onClick={handleCopy}
+            disabled={!revealed}
+          >
+            {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+            {copied ? 'Copied' : 'Copy'}
+          </Button>
+        </div>
+
+        <p className="text-center text-[11px] leading-relaxed text-muted-foreground">
+          Writing it on paper is safest — copying to your clipboard can leak to other apps.
+        </p>
+      </DialogContent>
+    </Dialog>
+  );
+}

src/hooks/wallet/useLightningOperations.ts

@@ -27,6 +27,10 @@ export function useLightningOperations({
     expiry: number;
   } | null>(null);
 
+  // Receive-generation in-flight flag (so the button can show progress and
+  // can't be double-tapped into two invoices).
+  const [isGeneratingInvoice, setIsGeneratingInvoice] = useState(false);
+
   // Send state
   const [lightningInvoice, setLightningInvoice] = useState('');
   const [isProcessingPayment, setIsProcessingPayment] = useState(false);
@@ -35,7 +39,7 @@ export function useLightningOperations({
 
   // Handle receive (create mint quote/invoice)
   const handleLightningReceive = useCallback(async () => {
-    if (!coco || !quoteAmount || !activeMintUrl) return;
+    if (isGeneratingInvoice || !coco || !quoteAmount || !activeMintUrl) return;
 
     try {
       const amount = parseInt(quoteAmount);
@@ -47,6 +51,8 @@ export function useLightningOperations({
         });
         return;
       }
+
+      setIsGeneratingInvoice(true);
       
       const quote = await coco.quotes.createMintQuote(activeMintUrl, amount);
       const qrCodeUrl = await generateQRCode(quote.request);
@@ -103,8 +109,10 @@ export function useLightningOperations({
           ? `${activeMintUrl?.replace(/^https?:\/\//, '')} can't be reached from your browser (no CORS). Switch to a web-friendly mint in wallet settings — or use the native app, where any mint works.`
           : raw,
       });
+    } finally {
+      setIsGeneratingInvoice(false);
     }
-  }, [coco, quoteAmount, activeMintUrl, generateQRCode, toast]);
+  }, [coco, quoteAmount, activeMintUrl, generateQRCode, isGeneratingInvoice, toast]);
 
   // Handle send (pay Lightning invoice)
   const handleLightningSend = useCallback(async () => {
@@ -159,6 +167,7 @@ export function useLightningOperations({
     currentInvoice,
     setCurrentInvoice,
     handleLightningReceive,
+    isGeneratingInvoice,
     
     // Send
     lightningInvoice,

src/hooks/wallet/useTokenOperations.ts

@@ -21,10 +21,12 @@ export function useTokenOperations({
   
   // Receive state
   const [tokenInput, setTokenInput] = useState('');
-  
+  const [isReceivingToken, setIsReceivingToken] = useState(false);
+
   // Send state
   const [sendAmount, setSendAmount] = useState('');
-  
+  const [isCreatingToken, setIsCreatingToken] = useState(false);
+
   // Transaction output state
   const [sentToken, setSentToken] = useState<string | null>(null);
   const [sentTokenQRCode, setSentTokenQRCode] = useState<string>('');
@@ -83,8 +85,9 @@ export function useTokenOperations({
 
   // Handle receive (token)
   const handleTokenReceive = useCallback(async () => {
-    if (!coco || !tokenInput) return;
+    if (isReceivingToken || !coco || !tokenInput) return;
 
+    setIsReceivingToken(true);
     try {
       const tokenToProcess = tokenInput.trim();
       
@@ -113,12 +116,14 @@ export function useTokenOperations({
         title: 'Receive failed', 
         description: err instanceof Error ? err.message : 'Unknown error' 
       });
+    } finally {
+      setIsReceivingToken(false);
     }
-  }, [coco, tokenInput, handleUnknownMintError, toast]);
+  }, [coco, tokenInput, isReceivingToken, handleUnknownMintError, toast]);
 
   // Handle send (token)
   const handleTokenSend = useCallback(async () => {
-    if (!coco || !sendAmount || !activeMintUrl) return;
+    if (isCreatingToken || !coco || !sendAmount || !activeMintUrl) return;
 
     try {
       const amount = parseInt(sendAmount);
@@ -130,7 +135,8 @@ export function useTokenOperations({
         });
         return;
       }
-      
+
+      setIsCreatingToken(true);
       const token = await coco.wallet.send(activeMintUrl, amount);
       const encodedToken = getEncodedToken(token);
       setSentToken(encodedToken);
@@ -147,18 +153,22 @@ export function useTokenOperations({
         title: 'Send failed', 
         description: err instanceof Error ? err.message : 'Unknown error' 
       });
+    } finally {
+      setIsCreatingToken(false);
     }
-  }, [coco, sendAmount, activeMintUrl, getEncodedToken, generateSentTokenQRCode, toast]);
+  }, [coco, sendAmount, activeMintUrl, isCreatingToken, getEncodedToken, generateSentTokenQRCode, toast]);
 
   return {
     // Receive state
     tokenInput,
     setTokenInput,
     handleTokenReceive,
+    isReceivingToken,
     // Send state
     sendAmount,
     setSendAmount,
     handleTokenSend,
+    isCreatingToken,
     // Transaction output state
     sentToken,
     setSentToken,