ui: simplify wallet connection flow

src/components/WalletModal.tsx

@@ -68,13 +68,7 @@ const AddWalletContent = forwardRef<HTMLDivElement, {
 });
 AddWalletContent.displayName = 'AddWalletContent';
 
-// Recommended wallets for NWC
+
-const RECOMMENDED_WALLETS = [
-  { name: 'Alby', url: 'https://getalby.com', type: 'extension' },
-  { name: 'Minibits', url: 'https://www.minibits.cash', type: 'mobile' },
-  { name: 'Zeus', url: 'https://zeusln.com', type: 'mobile' },
-  { name: 'Coinos', url: 'https://coinos.io', type: 'web' },
-];
 
 // Extracted WalletContent to prevent re-renders
 const WalletContent = forwardRef<HTMLDivElement, {
@@ -101,11 +95,13 @@ const WalletContent = forwardRef<HTMLDivElement, {
     {/* NWC First - Primary Option */}
     <div className="space-y-3">
       <div className="flex items-center justify-between">
-        <h3 className="font-medium text-sm sm:text-base">Nostr Wallet Connect</h3>
+        <h3 className="font-medium text-sm sm:text-base">{t('walletUi.modal.connectWallet')}</h3>
-        <Button size="sm" variant="outline" onClick={() => setAddDialogOpen(true)}>
+        {connections.length > 0 && (
-          <Plus className="h-4 w-4 mr-1" />
+          <Button size="sm" variant="outline" onClick={() => setAddDialogOpen(true)}>
-          {t('walletUi.modal.addWallet')}
+            <Plus className="h-4 w-4 mr-1" />
-        </Button>
+            {t('walletUi.modal.addWallet')}
+          </Button>
+        )}
       </div>
       
       {/* Connected Wallets List */}
@@ -166,7 +162,8 @@ const WalletContent = forwardRef<HTMLDivElement, {
 
     <Separator />
 
-    {/* WebLN - Secondary Option */}
+    {/* WebLN - show only when a provider is actually detected. */}
+    {webln && (
     <div className="space-y-2">
       <div className="flex items-center justify-between p-2 sm:p-3 border rounded-lg">
         <div className="flex items-center gap-2 sm:gap-3">
@@ -184,35 +181,19 @@ const WalletContent = forwardRef<HTMLDivElement, {
         </div>
       </div>
     </div>
-
-    {/* Recommended Wallets - Show when no wallet connected */}
-    {!webln && connections.length === 0 && (
-      <>
-        <Separator />
-        <div className="space-y-3">
-          <h4 className="text-sm font-medium text-muted-foreground">{t('walletUi.modal.getNwcFrom')}</h4>
-          <div className="grid gap-2">
-            {RECOMMENDED_WALLETS.map((wallet) => (
-              <a
-                key={wallet.name}
-                href={wallet.url}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="flex items-center justify-between p-2 border rounded-lg hover:bg-accent transition-colors"
-              >
-                <div className="flex items-center gap-2">
-                  <Zap className="h-4 w-4 text-yellow-500" />
-                  <span className="text-sm font-medium">{wallet.name}</span>
-                </div>
-                <Badge variant="outline" className="text-[10px]">
-                  {wallet.type}
-                </Badge>
-              </a>
-            ))}
-          </div>
-        </div>
-      </>
     )}
+
+    <p className="text-[11px] leading-relaxed text-muted-foreground">
+      {t('walletUi.modal.nwcHelp')}{' '}
+      <a
+        href="https://planb.academy/en/tutorials/wallet"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="text-orange-400 underline underline-offset-2 hover:text-orange-300"
+      >
+        {t('walletUi.page.learnPlanB')}
+      </a>
+    </p>
   </div>
   );
 });

src/i18n/en.ts

@@ -5874,6 +5874,7 @@ walletUi: {
       ready: 'Ready',
       notFound: 'Not Found',
       getNwcFrom: 'Get NWC from:',
+      nwcHelp: 'Open your wallet’s Nostr Wallet Connect settings, create a connection, and paste the link here.',
       connectionRequired: 'Connection URI required',
       connectionRequiredDesc: 'Please enter a valid NWC connection URI.',
       activeChanged: 'Active wallet changed',

src/i18n/es.ts

@@ -5874,6 +5874,7 @@ walletUi: {
       ready: 'Lista',
       notFound: 'No encontrada',
       getNwcFrom: 'Consigue NWC en:',
+      nwcHelp: 'Abre los ajustes de Nostr Wallet Connect de tu cartera, crea una conexión y pega el enlace aquí.',
       connectionRequired: 'URI de conexión obligatoria',
       connectionRequiredDesc: 'Introduce una URI de conexión NWC válida.',
       activeChanged: 'Cartera activa cambiada',

src/pages/WalletPage.tsx

@@ -93,61 +93,27 @@ function StatusPill({
 
 function GetAWallet() {
   const { t } = useTranslation();
-  const [open, setOpen] = useState(false);
-
-  const wallets = [
-    { name: 'Minibits', desc: t('walletUi.page.walletMinibits'), url: 'https://www.minibits.cash', color: 'text-orange-400' },
-    { name: 'Alby', desc: t('walletUi.page.walletAlby'), url: 'https://getalby.com', color: 'text-yellow-400' },
-    { name: 'Zeus', desc: t('walletUi.page.walletZeus'), url: 'https://zeusln.com', color: 'text-blue-400' },
-    { name: 'Coinos', desc: t('walletUi.page.walletCoinos'), url: 'https://coinos.io', color: 'text-green-400' },
-  ];
 
   return (
     <div className="rounded-2xl border border-white/8 overflow-hidden">
-      <button
+      <div className="flex items-center gap-2 px-4 py-3.5 bg-white/3">
-        onClick={() => setOpen((v) => !v)}
+        <Zap className="h-4 w-4 text-yellow-400" />
-        className="w-full flex items-center justify-between px-4 py-3.5 bg-white/3 hover:bg-white/5 transition-all"
+        <span className="text-sm font-black uppercase tracking-wide text-white">{t('walletUi.page.getAWallet')}</span>
-      >
+      </div>
-        <div className="flex items-center gap-2">
+      <div className="space-y-2 px-4 py-3">
-          <Zap className="h-4 w-4 text-yellow-400" />
+        <p className="text-xs leading-relaxed text-muted-foreground">
-          <span className="text-sm font-black uppercase tracking-wide text-white">{t('walletUi.page.getAWallet')}</span>
+          {t('walletUi.modal.nwcHelp')}
-        </div>
+        </p>
-        {open
+        <a
-          ? <ChevronUp className="h-4 w-4 text-muted-foreground" />
+          href="https://planb.academy/en/tutorials/wallet"
-          : <ChevronDown className="h-4 w-4 text-muted-foreground" />
+          target="_blank"
-        }
+          rel="noopener noreferrer"
-      </button>
+          className="text-xs text-orange-400 hover:text-orange-300 transition-colors flex items-center gap-1.5"
-
+        >
-      {open && (
+          <ExternalLink className="h-3 w-3" />
-        <div className="divide-y divide-white/5">
+          {t('walletUi.page.learnPlanB')}
-          {wallets.map((w) => (
+        </a>
-            <a
+      </div>
-              key={w.name}
-              href={w.url}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="flex items-center justify-between px-4 py-3 hover:bg-white/5 active:scale-[0.99] transition-all"
-            >
-              <div className="min-w-0">
-                <p className={cn('font-bold text-sm', w.color)}>{w.name}</p>
-                <p className="text-xs text-muted-foreground">{w.desc}</p>
-              </div>
-              <ExternalLink className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
-            </a>
-          ))}
-          <div className="px-4 py-3">
-            <a
-              href="https://planb.academy/en/tutorials/wallet"
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-xs text-orange-400 hover:text-orange-300 transition-colors flex items-center gap-1.5"
-            >
-              <ExternalLink className="h-3 w-3" />
-              {t('walletUi.page.learnPlanB')}
-            </a>
-          </div>
-        </div>
-      )}
     </div>
   );
 }