From 954954ba78f6f45e24b084d91b6a5ddef88e41bc Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sat, 17 Jan 2026 22:24:08 +0000
Subject: [PATCH] feat: improve wallet button UX and add detailed info dialog

UI improvements:
- Remove border and padding from wallet button (use ghost variant)
- Remove "sats" suffix from balance display (show just the number)
- Change click behavior to show detailed wallet info dialog

Wallet info dialog:
- Show balance prominently without suffix
- Display wallet alias if available
- Show lightning address (lud16) if present
- List all supported NWC methods as badges
- Display connected relay URLs
- Add disconnect button with confirmation toast

This provides a cleaner header appearance and better wallet
management with all details accessible in one place.
---
 src/components/WalletButton.tsx | 127 ++++++++++++++++++++++++++++++--
 1 file changed, 121 insertions(+), 6 deletions(-)

diff --git a/src/components/WalletButton.tsx b/src/components/WalletButton.tsx
index 06b82d3..69f9a98 100644
--- a/src/components/WalletButton.tsx
+++ b/src/components/WalletButton.tsx
@@ -1,13 +1,22 @@
 import { useState } from "react";
-import { Wallet, Zap } from "lucide-react";
+import { Wallet, Zap, X } from "lucide-react";
 import { useGrimoire } from "@/core/state";
 import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog";
 import ConnectWalletDialog from "@/components/ConnectWalletDialog";
+import { toast } from "sonner";
 
 export default function WalletButton() {
-  const { state } = useGrimoire();
+  const { state, disconnectNWC } = useGrimoire();
   const nwcConnection = state.nwcConnection;
   const [showConnectWallet, setShowConnectWallet] = useState(false);
+  const [showWalletInfo, setShowWalletInfo] = useState(false);
 
   function formatBalance(millisats?: number): string {
     if (millisats === undefined) return "—";
@@ -15,6 +24,20 @@ export default function WalletButton() {
     return sats.toLocaleString();
   }
 
+  function handleDisconnect() {
+    disconnectNWC();
+    setShowWalletInfo(false);
+    toast.success("Wallet disconnected");
+  }
+
+  function handleClick() {
+    if (nwcConnection) {
+      setShowWalletInfo(true);
+    } else {
+      setShowConnectWallet(true);
+    }
+  }
+
   return (
     <>
       <ConnectWalletDialog
@@ -22,12 +45,104 @@ export default function WalletButton() {
         onOpenChange={setShowConnectWallet}
       />
 
+      {/* Wallet Info Dialog */}
+      {nwcConnection && (
+        <Dialog open={showWalletInfo} onOpenChange={setShowWalletInfo}>
+          <DialogContent className="sm:max-w-md">
+            <DialogHeader>
+              <DialogTitle>Wallet Info</DialogTitle>
+              <DialogDescription>
+                Connected Lightning wallet details
+              </DialogDescription>
+            </DialogHeader>
+
+            <div className="space-y-4">
+              {/* Balance */}
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">Balance:</span>
+                <span className="text-lg font-semibold">
+                  {formatBalance(nwcConnection.balance)}
+                </span>
+              </div>
+
+              {/* Wallet Alias */}
+              {nwcConnection.info?.alias && (
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-muted-foreground">Wallet:</span>
+                  <span className="text-sm font-medium">
+                    {nwcConnection.info.alias}
+                  </span>
+                </div>
+              )}
+
+              {/* Lightning Address */}
+              {nwcConnection.lud16 && (
+                <div className="flex items-center justify-between">
+                  <span className="text-sm text-muted-foreground">
+                    Address:
+                  </span>
+                  <span className="text-sm font-mono">
+                    {nwcConnection.lud16}
+                  </span>
+                </div>
+              )}
+
+              {/* Supported Methods */}
+              {nwcConnection.info?.methods &&
+                nwcConnection.info.methods.length > 0 && (
+                  <div>
+                    <span className="text-sm text-muted-foreground">
+                      Supported Methods:
+                    </span>
+                    <div className="mt-2 flex flex-wrap gap-1">
+                      {nwcConnection.info.methods.map((method) => (
+                        <span
+                          key={method}
+                          className="inline-flex items-center rounded-md bg-muted px-2 py-1 text-xs font-medium"
+                        >
+                          {method}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+              {/* Relays */}
+              <div>
+                <span className="text-sm text-muted-foreground">Relays:</span>
+                <div className="mt-2 space-y-1">
+                  {nwcConnection.relays.map((relay) => (
+                    <div
+                      key={relay}
+                      className="text-xs font-mono text-muted-foreground"
+                    >
+                      {relay}
+                    </div>
+                  ))}
+                </div>
+              </div>
+
+              {/* Disconnect Button */}
+              <Button
+                onClick={handleDisconnect}
+                variant="destructive"
+                className="w-full"
+              >
+                <X className="mr-2 size-4" />
+                Disconnect Wallet
+              </Button>
+            </div>
+          </DialogContent>
+        </Dialog>
+      )}
+
+      {/* Wallet Button */}
       {nwcConnection ? (
         <Button
           size="sm"
-          variant="outline"
+          variant="ghost"
           className="gap-2"
-          onClick={() => setShowConnectWallet(true)}
+          onClick={handleClick}
           title={
             nwcConnection.info?.alias
               ? `${nwcConnection.info.alias} - ${formatBalance(nwcConnection.balance)} sats`
@@ -36,14 +151,14 @@ export default function WalletButton() {
         >
           <Zap className="size-4 text-yellow-500" />
           <span className="text-sm font-medium">
-            {formatBalance(nwcConnection.balance)} sats
+            {formatBalance(nwcConnection.balance)}
           </span>
         </Button>
       ) : (
         <Button
           size="sm"
           variant="ghost"
-          onClick={() => setShowConnectWallet(true)}
+          onClick={handleClick}
           title="Connect Wallet"
         >
           <Wallet className="size-4 text-muted-foreground" />