feat(wallet): offer to install a Lightning node instead of failing an invoice

Creating a Lightning invoice with no Lightning implementation installed failed
at the RPC layer — lnd.createinvoice returned connection-refused and the
Receive screen rendered it as a red error. That reads as the wallet being
broken when the node simply has no Lightning node installed yet.

useLightningRequired() gates the three invoice paths (wallet Receive, the Web5
send/receive sheet, and the app launcher's paywall — both arms there, since
paying an invoice needs a node as much as minting one). With none installed it
raises a modal offering to install one and the caller bails without surfacing
an error at all.

The modal lists the choice rather than assuming LND: LND installs today, Core
Lightning is listed greyed as "Coming soon" so the platform doesn't read as
LND-only. When CLN ships it is two lines — flip `available` and add the id to
LIGHTNING_NODE_APP_IDS.

Detection is install state, NOT reachability, deliberately: an installed node
that is merely stopped or still starting is a different problem ("start it")
and must not be answered with "install a Lightning node".

Also fixes the credentials modal, which painted its own rgba(8,10,18,.98)
navy card instead of the house glass-card — it read as blue against every
other modal. It existed twice (Apps.vue and apps/AppIconGrid.vue); both now
use BaseModal, so they also inherit Esc/focus handling, body scroll lock and
the standard pinned-header/footer scroll contract they were missing. Dead
panel CSS removed from both.

Verified: 4 new tests; full suite 103 files / 826 tests green; npm run build
clean with the new strings present in the built bundle.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

neode-ui/src/views/Apps.vue

@@ -262,42 +262,36 @@
       @confirm="onConfirmUninstall"
     />
 
-    <Teleport to="body">
-    <Transition name="fade">
-      <div
-        v-if="credentialModal.show"
-        class="credential-modal-overlay fixed inset-0 z-[2700] flex items-center justify-center bg-black/80 backdrop-blur-md p-4"
-        @click.self="closeCredentialModal"
-      >
-        <div class="credential-modal-panel">
-          <div class="flex items-start justify-between gap-4 mb-5">
-            <div>
-              <h2 class="text-lg font-semibold text-white">{{ credentialModal.title }}</h2>
-              <p class="text-sm text-white/55 mt-1">{{ credentialModal.description }}</p>
-            </div>
-            <button type="button" class="sideload-close-btn" aria-label="Close" @click="closeCredentialModal">
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-          <div class="credential-modal-body space-y-3">
-            <div v-for="cred in credentialModal.credentials" :key="cred.label" class="rounded-lg border border-white/10 bg-white/[0.04] p-3">
-              <div class="flex items-center justify-between gap-3 mb-1">
-                <span class="text-white/60 text-xs uppercase tracking-wide">{{ cred.label }}</span>
-                <button type="button" class="text-xs text-orange-300 hover:text-orange-200" @click="copyModalCredential(cred.label, cred.value)">{{ credentialModal.copied === cred.label ? 'Copied' : 'Copy' }}</button>
-              </div>
-              <p class="font-mono text-sm text-white break-all">{{ cred.value }}</p>
-            </div>
-          </div>
-          <div class="credential-modal-actions mt-5 flex flex-col sm:flex-row gap-3">
-            <button type="button" class="w-full sm:flex-1 glass-button px-4 py-3 rounded-lg" @click="closeCredentialModal">Cancel</button>
-            <button type="button" class="w-full sm:flex-1 glass-button px-4 py-3 rounded-lg font-semibold" @click="continueCredentialLaunch">Continue to app</button>
+    <!-- House modal (BaseModal glass-card), not a hand-rolled panel: the old
+         one painted its own rgba(8,10,18,.98) navy card, which read as blue
+         against every other modal in the app. BaseModal also brings the
+         standard scroll contract, Esc/focus handling and body scroll lock. -->
+    <BaseModal
+      :show="credentialModal.show"
+      :title="credentialModal.title"
+      max-width="max-w-lg"
+      z-index="z-[2700]"
+      @close="closeCredentialModal"
+    >
+      <p v-if="credentialModal.description" class="text-sm text-white/55 -mt-1 mb-4">
+        {{ credentialModal.description }}
+      </p>
+      <div class="space-y-3">
+        <div v-for="cred in credentialModal.credentials" :key="cred.label" class="rounded-lg border border-white/10 bg-white/[0.04] p-3">
+          <div class="flex items-center justify-between gap-3 mb-1">
+            <span class="text-white/60 text-xs uppercase tracking-wide">{{ cred.label }}</span>
+            <button type="button" class="text-xs text-orange-300 hover:text-orange-200" @click="copyModalCredential(cred.label, cred.value)">{{ credentialModal.copied === cred.label ? 'Copied' : 'Copy' }}</button>
           </div>
+          <p class="font-mono text-sm text-white break-all">{{ cred.value }}</p>
         </div>
       </div>
-    </Transition>
-    </Teleport>
+      <template #footer>
+        <div class="flex flex-col sm:flex-row gap-3">
+          <button type="button" class="w-full sm:flex-1 glass-button px-4 py-3 rounded-lg" @click="closeCredentialModal">Cancel</button>
+          <button type="button" class="w-full sm:flex-1 glass-button px-4 py-3 rounded-lg font-semibold" @click="continueCredentialLaunch">Continue to app</button>
+        </div>
+      </template>
+    </BaseModal>
 
     <Teleport to="body">
     <Transition name="fade">
@@ -388,6 +382,7 @@ import { useServerStore } from '@/stores/server'
 import { useAppLauncherStore } from '@/stores/appLauncher'
 import { rpcClient } from '@/api/rpc-client'
 import { type AppCredential, type AppCredentialsResponse, type PackageDataEntry, type PackageState } from '@/types/api'
+import BaseModal from '@/components/BaseModal.vue'
 import AppCard from './apps/AppCard.vue'
 import AppIconGrid from './apps/AppIconGrid.vue'
 import AppsUninstallModal from './apps/AppsUninstallModal.vue'
@@ -910,34 +905,4 @@ async function submitSideload() {
 }
 .sideload-input::placeholder { color: rgba(255, 255, 255, 0.38); }
 .sideload-input:focus { border-color: rgba(255, 255, 255, 0.38); }
-.credential-modal-panel {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 34rem;
-  /* Centered card that never exceeds the visible viewport (minus safe areas),
-     matching the wallet receive modal / AppIconGrid credential modal. The body
-     scrolls if content overflows rather than the panel stretching edge-to-edge. */
-  max-height: calc(
-    100dvh - var(--safe-area-top, env(safe-area-inset-top, 0px)) -
-      var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) - 2rem
-  );
-  min-height: 0;
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  border-radius: 1.5rem;
-  background: rgba(8, 10, 18, 0.98);
-  padding: 1.25rem;
-  padding-bottom: calc(1.25rem + var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)));
-  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
-}
-.credential-modal-body {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-.credential-modal-actions {
-  flex-shrink: 0;
-}
 </style>

neode-ui/src/views/apps/AppIconGrid.vue

@@ -91,43 +91,41 @@
       ></button>
     </div>
 
-    <Teleport to="body">
-    <Transition name="fade">
-      <div v-if="credentialModal.show" class="credential-modal-overlay fixed inset-0 z-[2700] flex items-center justify-center bg-black/80 backdrop-blur-md p-4" @click.self="closeCredentialModal">
-        <div class="credential-modal-panel">
-          <div class="flex items-start justify-between gap-4 mb-5">
-            <div>
-              <h2 class="text-lg font-semibold text-white">{{ credentialModal.title }}</h2>
-              <p class="text-sm text-white/55 mt-1">{{ credentialModal.description }}</p>
-            </div>
-            <button type="button" class="sideload-close-btn" aria-label="Close" @click="closeCredentialModal">
-              <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
-              </svg>
-            </button>
-          </div>
-          <div class="credential-modal-body space-y-3">
-            <div v-for="cred in credentialModal.credentials" :key="cred.label" class="rounded-lg border border-white/10 bg-white/[0.04] p-3">
-              <div class="flex items-center justify-between gap-3 mb-1">
-                <span class="text-white/60 text-xs uppercase tracking-wide">{{ cred.label }}</span>
-                <button type="button" class="text-xs text-orange-300 hover:text-orange-200" @click="copyModalCredential(cred.label, cred.value)">{{ credentialModal.copied === cred.label ? 'Copied' : 'Copy' }}</button>
-              </div>
-              <p class="font-mono text-sm text-white break-all">{{ cred.value }}</p>
-            </div>
-          </div>
-          <div class="credential-modal-actions mt-5 flex flex-col sm:flex-row gap-3">
-            <button type="button" class="w-full sm:flex-1 glass-button px-4 py-3 rounded-lg" @click="closeCredentialModal">Cancel</button>
-            <button type="button" class="w-full sm:flex-1 glass-button px-4 py-3 rounded-lg font-semibold" @click="continueCredentialLaunch">Continue to app</button>
+    <!-- House modal (BaseModal glass-card), not a hand-rolled panel: the old
+         one painted its own rgba(8,10,18,.98) navy card, which read as blue
+         against every other modal in the app. -->
+    <BaseModal
+      :show="credentialModal.show"
+      :title="credentialModal.title"
+      max-width="max-w-lg"
+      z-index="z-[2700]"
+      @close="closeCredentialModal"
+    >
+      <p v-if="credentialModal.description" class="text-sm text-white/55 -mt-1 mb-4">
+        {{ credentialModal.description }}
+      </p>
+      <div class="space-y-3">
+        <div v-for="cred in credentialModal.credentials" :key="cred.label" class="rounded-lg border border-white/10 bg-white/[0.04] p-3">
+          <div class="flex items-center justify-between gap-3 mb-1">
+            <span class="text-white/60 text-xs uppercase tracking-wide">{{ cred.label }}</span>
+            <button type="button" class="text-xs text-orange-300 hover:text-orange-200" @click="copyModalCredential(cred.label, cred.value)">{{ credentialModal.copied === cred.label ? 'Copied' : 'Copy' }}</button>
           </div>
+          <p class="font-mono text-sm text-white break-all">{{ cred.value }}</p>
         </div>
       </div>
-    </Transition>
-    </Teleport>
+      <template #footer>
+        <div class="flex flex-col sm:flex-row gap-3">
+          <button type="button" class="w-full sm:flex-1 glass-button px-4 py-3 rounded-lg" @click="closeCredentialModal">Cancel</button>
+          <button type="button" class="w-full sm:flex-1 glass-button px-4 py-3 rounded-lg font-semibold" @click="continueCredentialLaunch">Continue to app</button>
+        </div>
+      </template>
+    </BaseModal>
   </div>
 </template>
 
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
+import BaseModal from '@/components/BaseModal.vue'
 import { useServerStore } from '@/stores/server'
 import { useAppLauncherStore } from '@/stores/appLauncher'
 import type { AppCredential, AppCredentialsResponse, PackageDataEntry } from '@/types/api'
@@ -367,33 +365,4 @@ function scrollToPage(index: number) {
   background: rgba(255, 255, 255, 0.1);
   color: white;
 }
-.credential-modal-body {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-.credential-modal-panel {
-  display: flex;
-  flex-direction: column;
-  width: 100%;
-  max-width: 34rem;
-  /* Centered card that never exceeds the visible viewport (minus safe areas),
-     matching the wallet receive modal. The body scrolls if content overflows
-     rather than the panel stretching edge-to-edge. */
-  max-height: calc(
-    100dvh - var(--safe-area-top, env(safe-area-inset-top, 0px)) -
-      var(--safe-area-bottom, env(safe-area-inset-bottom, 0px)) - 2rem
-  );
-  min-height: 0;
-  overflow: hidden;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  border-radius: 1.5rem;
-  background: rgba(8, 10, 18, 0.98);
-  padding: 1.25rem;
-  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
-}
-.credential-modal-actions {
-  flex-shrink: 0;
-}
 </style>

neode-ui/src/views/web5/Web5SendReceiveModals.vue

@@ -180,11 +180,14 @@
 import { ref, computed, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { rpcClient } from '@/api/rpc-client'
+import { useLightningRequired } from '@/composables/useLightningRequired'
 import { useTransportStore } from '@/stores/transport'
 import { useMeshStore } from '@/stores/mesh'
 import { explainReceiveAddressFailure } from '@/utils/bitcoinReceive'
 import { safeClipboardWrite } from './utils'
 
+const lightning = useLightningRequired()
+
 const { t } = useI18n()
 const transportStore = useTransportStore()
 const meshStore = useMeshStore()
@@ -466,6 +469,9 @@ async function unifiedReceive() {
   unifiedReceiveError.value = ''
   try {
     if (receiveMethod.value === 'lightning') {
+      // Missing prerequisite, not an error — raise the install modal rather
+      // than letting lnd.createinvoice fail with connection-refused.
+      if (!lightning.requireLightningNode()) return
       if (!receiveInvoiceAmount.value || receiveInvoiceAmount.value < 1) {
         unifiedReceiveError.value = t('web5.enterAmount')
         return