From 3172288ecf07dd5e61ecbb95f8406e19889425d0 Mon Sep 17 00:00:00 2001
From: Alejandro <alejandrogomez@bitrefill.com>
Date: Sun, 18 Jan 2026 20:28:46 +0100
Subject: [PATCH] feat: use RelayLink component in wallet info dropdown (#139)

Replace plain text relay URL with RelayLink component in WalletViewer's
info dropdown. This provides:
- Clickable relay URLs that open relay detail window
- Relay icon display (if available)
- Insecure relay warnings (ws://)
- Consistent styling with other relay displays

Also removes unused ExternalLink import.

Co-authored-by: Claude <noreply@anthropic.com>
---
 src/components/WalletViewer.tsx | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/WalletViewer.tsx b/src/components/WalletViewer.tsx
index 60c2064..091c201 100644
--- a/src/components/WalletViewer.tsx
+++ b/src/components/WalletViewer.tsx
@@ -19,7 +19,6 @@ import {
   ArrowDownLeft,
   LogOut,
   ChevronDown,
-  ExternalLink,
 } from "lucide-react";
 import { Virtuoso } from "react-virtuoso";
 import { useWallet } from "@/hooks/useWallet";
@@ -49,6 +48,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import ConnectWalletDialog from "./ConnectWalletDialog";
+import { RelayLink } from "@/components/nostr/RelayLink";
 
 interface Transaction {
   type: "incoming" | "outgoing";
@@ -825,21 +825,17 @@ export default function WalletViewer() {
                     )}
                     {state.nwcConnection?.relays &&
                       state.nwcConnection.relays.length > 0 && (
-                        <div className="flex justify-between text-xs">
-                          <span className="text-muted-foreground">Relay</span>
-                          <a
-                            href={state.nwcConnection.relays[0]}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className="font-mono text-primary hover:underline flex items-center gap-1"
-                          >
-                            <span className="truncate max-w-[180px]">
-                              {state.nwcConnection.relays[0]
-                                .replace("wss://", "")
-                                .replace("ws://", "")}
-                            </span>
-                            <ExternalLink className="size-3 flex-shrink-0" />
-                          </a>
+                        <div className="space-y-1">
+                          <span className="text-xs text-muted-foreground">
+                            Relay
+                          </span>
+                          <RelayLink
+                            url={state.nwcConnection.relays[0]}
+                            className="py-0"
+                            urlClassname="text-xs"
+                            iconClassname="size-3"
+                            showInboxOutbox={false}
+                          />
                         </div>
                       )}
                   </div>