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.
This commit is contained in:
Claude
2026-01-18 09:01:39 +00:00
parent be0e0bfa29
commit f4869b7428
2 changed files with 50 additions and 54 deletions

View File

@@ -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

View File

@@ -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