From f4869b7428a3b6f85b4cf8455c85b89d00e60fe8 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 18 Jan 2026 09:01:39 +0000
Subject: [PATCH] feat: improve wallet UX with profile-based naming and better
 layout

UX improvements:
- Use service pubkey username/profile as wallet name instead of alias
- Remove format hint text from connection string input
- Move wallet to single row directly below user name (remove label)
- Use RelayLink component for relay URLs in wallet info dialog
- Show wallet name from service profile with fallback to alias/pubkey

This provides better integration with Nostr profiles and a cleaner,
more compact menu layout. The wallet service provider's identity is
now shown using their actual Nostr profile name.
---
 src/components/ConnectWalletDialog.tsx |   3 -
 src/components/nostr/user-menu.tsx     | 101 ++++++++++++-------------
 2 files changed, 50 insertions(+), 54 deletions(-)

diff --git a/src/components/ConnectWalletDialog.tsx b/src/components/ConnectWalletDialog.tsx
index 084bcb9..cce8910 100644
--- a/src/components/ConnectWalletDialog.tsx
+++ b/src/components/ConnectWalletDialog.tsx
@@ -157,9 +157,6 @@ export default function ConnectWalletDialog({
               disabled={loading}
               autoComplete="off"
             />
-            <p className="text-xs text-muted-foreground">
-              Format: nostr+walletconnect://pubkey?relay=...&secret=...
-            </p>
           </div>
 
           <Button
diff --git a/src/components/nostr/user-menu.tsx b/src/components/nostr/user-menu.tsx
index b746452..e0f6562 100644
--- a/src/components/nostr/user-menu.tsx
+++ b/src/components/nostr/user-menu.tsx
@@ -75,6 +75,9 @@ export default function UserMenu() {
   const [showWalletInfo, setShowWalletInfo] = useState(false);
   const { themeId, setTheme, availableThemes } = useTheme();
 
+  // Get wallet service profile for display name
+  const walletServiceProfile = useProfile(nwcConnection?.service);
+
   function openProfile() {
     if (!account?.pubkey) return;
     addWindow(
@@ -101,6 +104,16 @@ export default function UserMenu() {
     toast.success("Wallet disconnected");
   }
 
+  function getWalletName(): string {
+    if (!nwcConnection) return "";
+    // Use service pubkey profile name, fallback to alias, then pubkey slice
+    return (
+      getDisplayName(nwcConnection.service, walletServiceProfile) ||
+      nwcConnection.info?.alias ||
+      nwcConnection.service.slice(0, 8)
+    );
+  }
+
   return (
     <>
       <SettingsDialog open={showSettings} onOpenChange={setShowSettings} />
@@ -130,15 +143,11 @@ export default function UserMenu() {
                 </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>
-              )}
+              {/* Wallet Name */}
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">Wallet:</span>
+                <span className="text-sm font-medium">{getWalletName()}</span>
+              </div>
 
               {/* Lightning Address */}
               {nwcConnection.lud16 && (
@@ -177,12 +186,13 @@ export default function UserMenu() {
                 <span className="text-sm text-muted-foreground">Relays:</span>
                 <div className="mt-2 space-y-1">
                   {nwcConnection.relays.map((relay) => (
-                    <div
+                    <RelayLink
                       key={relay}
-                      className="text-xs font-mono text-muted-foreground"
-                    >
-                      {relay}
-                    </div>
+                      url={relay}
+                      className="py-1"
+                      urlClassname="text-xs"
+                      iconClassname="size-3.5"
+                    />
                   ))}
                 </div>
               </div>
@@ -227,6 +237,32 @@ export default function UserMenu() {
                 </DropdownMenuLabel>
               </DropdownMenuGroup>
 
+              {/* Wallet Section */}
+              {nwcConnection ? (
+                <DropdownMenuItem
+                  className="cursor-crosshair flex items-center justify-between"
+                  onClick={() => setShowWalletInfo(true)}
+                >
+                  <div className="flex items-center gap-2">
+                    <Zap className="size-4 text-yellow-500" />
+                    <span className="text-sm">
+                      {formatBalance(nwcConnection.balance)}
+                    </span>
+                  </div>
+                  <span className="text-xs text-muted-foreground">
+                    {getWalletName()}
+                  </span>
+                </DropdownMenuItem>
+              ) : (
+                <DropdownMenuItem
+                  className="cursor-crosshair"
+                  onClick={() => setShowConnectWallet(true)}
+                >
+                  <Wallet className="size-4 text-muted-foreground mr-2" />
+                  <span className="text-sm">Connect Wallet</span>
+                </DropdownMenuItem>
+              )}
+
               {relays && relays.length > 0 && (
                 <>
                   <DropdownMenuSeparator />
@@ -277,43 +313,6 @@ export default function UserMenu() {
                 </>
               )}
 
-              {/* Wallet Section */}
-              <DropdownMenuSeparator />
-              <DropdownMenuGroup>
-                <DropdownMenuLabel className="text-xs text-muted-foreground font-normal flex items-center gap-1.5">
-                  <Wallet className="size-3.5" />
-                  <span>Lightning Wallet</span>
-                </DropdownMenuLabel>
-                {nwcConnection ? (
-                  <>
-                    <DropdownMenuItem
-                      className="cursor-crosshair flex items-center justify-between"
-                      onClick={() => setShowWalletInfo(true)}
-                    >
-                      <div className="flex items-center gap-2">
-                        <Zap className="size-4 text-yellow-500" />
-                        <span className="text-sm">
-                          {formatBalance(nwcConnection.balance)}
-                        </span>
-                      </div>
-                      {nwcConnection.info?.alias && (
-                        <span className="text-xs text-muted-foreground">
-                          {nwcConnection.info.alias}
-                        </span>
-                      )}
-                    </DropdownMenuItem>
-                  </>
-                ) : (
-                  <DropdownMenuItem
-                    className="cursor-crosshair"
-                    onClick={() => setShowConnectWallet(true)}
-                  >
-                    <Wallet className="size-4 text-muted-foreground mr-2" />
-                    <span className="text-sm">Connect Wallet</span>
-                  </DropdownMenuItem>
-                )}
-              </DropdownMenuGroup>
-
               <DropdownMenuSeparator />
               <DropdownMenuItem onClick={logout} className="cursor-crosshair">
                 Log out