Improve payment dialogs

frontend/src/components/PaymentDialog.tsx

@@ -2,11 +2,14 @@ import { createEffect, createResource, createSignal, For, Show } from "solid-js"
 import QRCode from "qrcode"
 import Modal from "@/components/Modal"
 import PaymentSetup from "@/components/PaymentSetup"
+import { CardSetupBody } from "@/components/PaymentSetupShell"
+import { useCardPortal } from "@/lib/usePaymentSetup"
 import { getInvoice, getInvoiceBolt11, listInvoiceItems, type Invoice } from "@/lib/api"
 import { billingTenant } from "@/lib/state"
 
 type PayStatus = "idle" | "loading" | "success" | "error"
 type Bolt11Status = "idle" | "loading" | "ready" | "error"
+type PayMethod = "lightning" | "card"
 
 type PaymentInvoice = Pick<Invoice, "id" | "amount"> &
   Partial<Pick<Invoice, "period_start" | "period_end">>
@@ -24,6 +27,7 @@ export default function PaymentDialog(props: PaymentDialogProps) {
   const [bolt11Error, setBolt11Error] = createSignal("")
   const [payStatus, setPayStatus] = createSignal<PayStatus>("idle")
   const [payError, setPayError] = createSignal("")
+  const [payMethod, setPayMethod] = createSignal<PayMethod>("lightning")
   const [showPaymentSetup, setShowPaymentSetup] = createSignal(false)
   const [setupSaved, setSetupSaved] = createSignal(false)
   const [items] = createResource(
@@ -31,6 +35,10 @@ export default function PaymentDialog(props: PaymentDialogProps) {
     listInvoiceItems,
   )
 
+  // Card payment is a redirect to the Stripe billing portal; once a card is on
+  // file we retry collection on this invoice automatically.
+  const card = useCardPortal()
+
   const autopayConfigured = () => {
     const t = billingTenant()
     return Boolean(t?.nwc_is_set || t?.stripe_payment_method_id)
@@ -87,6 +95,8 @@ export default function PaymentDialog(props: PaymentDialogProps) {
     setBolt11Error("")
     setBolt11("")
     setQrDataUrl("")
+    setPayMethod("lightning")
+    card.reset()
     props.onClose()
   }
 
@@ -154,59 +164,75 @@ export default function PaymentDialog(props: PaymentDialogProps) {
                 </div>
               </Show>
 
-              <p class="text-xs font-medium text-gray-500 uppercase tracking-wide text-center">Pay with Lightning</p>
+              {/* Method switcher */}
-              <Show when={bolt11Status() === "idle" || bolt11Status() === "loading"}>
+              <div class="flex gap-2 border border-gray-200 rounded-lg p-1">
-                <div class="flex items-center justify-center py-12 text-sm text-gray-400">Generating invoice...</div>
+                <button
-              </Show>
+                  type="button"
-              <Show when={bolt11Status() === "error"}>
+                  class={`flex-1 rounded-md px-3 py-2 text-sm transition-colors ${payMethod() === "lightning" ? "bg-gray-900 text-white" : "text-gray-700 hover:bg-gray-50"}`}
-                <div class="rounded-lg border border-red-200 bg-red-50 p-4">
+                  onClick={() => setPayMethod("lightning")}
-                  <p class="text-sm font-medium text-red-700">Unable to generate invoice</p>
+                >
-                  <p class="mt-1 text-xs text-red-600 wrap-break-word">{bolt11Error()}</p>
+                  Lightning
-                  <button
+                </button>
-                    type="button"
+                <button
-                    onClick={() => void loadBolt11()}
+                  type="button"
-                    class="mt-3 inline-flex items-center rounded-lg bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-700"
+                  class={`flex-1 rounded-md px-3 py-2 text-sm transition-colors ${payMethod() === "card" ? "bg-gray-900 text-white" : "text-gray-700 hover:bg-gray-50"}`}
-                  >
+                  onClick={() => setPayMethod("card")}
-                    Retry
+                >
-                  </button>
+                  Card
-                </div>
+                </button>
-              </Show>
+              </div>
-              <Show when={bolt11Status() === "ready"}>
+
-                <img src={qrDataUrl()} alt="Lightning invoice QR code" class="mx-auto rounded-lg" />
+              {/* Lightning: pay this invoice via a bolt11 QR */}
-                <Show when={bolt11()}>
+              <Show when={payMethod() === "lightning"}>
-                  <div class="flex rounded-lg border border-gray-300">
+                <Show when={bolt11Status() === "idle" || bolt11Status() === "loading"}>
-                    <input
+                  <div class="flex items-center justify-center py-12 text-sm text-gray-400">Generating invoice...</div>
-                      type="text"
+                </Show>
-                      readOnly
+                <Show when={bolt11Status() === "error"}>
-                      value={bolt11()}
+                  <div class="rounded-lg border border-red-200 bg-red-50 p-4">
-                      class="min-w-0 flex-1 rounded-l-lg border-0 px-3 py-2 text-xs text-gray-500 bg-transparent focus:outline-none"
+                    <p class="text-sm font-medium text-red-700">Unable to generate invoice</p>
-                    />
+                    <p class="mt-1 text-xs text-red-600 wrap-break-word">{bolt11Error()}</p>
                     <button
                       type="button"
-                      class="flex items-center px-3 text-gray-400 hover:text-gray-700"
+                      onClick={() => void loadBolt11()}
-                      onClick={copyBolt11}
+                      class="mt-3 inline-flex items-center rounded-lg bg-red-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-red-700"
-                      title="Copy invoice"
                     >
-                      <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                      Retry
-                        <rect x="9" y="9" width="13" height="13" rx="2" />
-                        <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
-                      </svg>
                     </button>
                   </div>
                 </Show>
+                <Show when={bolt11Status() === "ready"}>
+                  <img src={qrDataUrl()} alt="Lightning invoice QR code" class="mx-auto rounded-lg" />
+                  <Show when={bolt11()}>
+                    <div class="flex rounded-lg border border-gray-300">
+                      <input
+                        type="text"
+                        readOnly
+                        value={bolt11()}
+                        class="min-w-0 flex-1 rounded-l-lg border-0 px-3 py-2 text-xs text-gray-500 bg-transparent focus:outline-none"
+                      />
+                      <button
+                        type="button"
+                        class="flex items-center px-3 text-gray-400 hover:text-gray-700"
+                        onClick={copyBolt11}
+                        title="Copy invoice"
+                      >
+                        <svg class="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                          <rect x="9" y="9" width="13" height="13" rx="2" />
+                          <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+                        </svg>
+                      </button>
+                    </div>
+                  </Show>
+                  <p class="text-xs text-gray-500 text-center">
+                    Scan this QR code with a Bitcoin Lightning wallet to pay.
+                  </p>
+                </Show>
               </Show>
 
-              {/* Card / automatic payment alternative */}
+              {/* Card: redirect to the Stripe billing portal */}
-              <div class="border-t border-gray-100 pt-3 text-center">
+              <Show when={payMethod() === "card"}>
-                <p class="text-xs text-gray-500 mb-1">Prefer to pay with a card?</p>
+                <CardSetupBody card={card} />
-                <button
+              </Show>
-                  type="button"
-                  onClick={() => setShowPaymentSetup(true)}
-                  class="text-sm font-medium text-blue-600 hover:text-blue-700"
-                >
-                  Pay with card or set up automatic payments
-                </button>
-              </div>
             </div>
           }
         >
@@ -232,9 +258,9 @@ export default function PaymentDialog(props: PaymentDialogProps) {
       </div>
 
       {/* Error */}
-      <Show when={payError()}>
+      <Show when={payError() || card.error()}>
         <div class="px-6 pb-2">
-          <p class="text-xs text-red-600">{payError()}</p>
+          <p class="text-xs text-red-600 text-center">{payError() || card.error()}</p>
         </div>
       </Show>
 
@@ -261,14 +287,16 @@ export default function PaymentDialog(props: PaymentDialogProps) {
           >
             Pay Later
           </button>
-          <button
+          <Show when={payMethod() === "lightning"}>
-            type="button"
+            <button
-            onClick={checkPayment}
+              type="button"
-            disabled={payStatus() === "loading" || bolt11Status() !== "ready"}
+              onClick={checkPayment}
-            class="py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+              disabled={payStatus() === "loading" || bolt11Status() !== "ready"}
-          >
+              class="py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
-            {payStatus() === "loading" ? "Checking..." : "Complete Payment"}
+            >
-          </button>
+              {payStatus() === "loading" ? "Checking..." : "Complete Payment"}
+            </button>
+          </Show>
         </Show>
       </div>
     </Modal>

frontend/src/components/PaymentSetup.tsx

@@ -1,8 +1,6 @@
 import { createEffect, createSignal, Show } from "solid-js"
-import Modal from "@/components/Modal"
+import { PaymentSetupShell, PaymentSetupBody, SetupFooter, NwcSetupBody, CardSetupBody } from "@/components/PaymentSetupShell"
-import { updateActiveTenant } from "@/lib/hooks"
+import { useCardPortal, useNwcSetup } from "@/lib/usePaymentSetup"
-import { createPortalSession } from "@/lib/api"
-import { account } from "@/lib/state"
 
 type Tab = "nwc" | "card"
 
@@ -22,73 +20,29 @@ export default function PaymentSetup(props: PaymentSetupProps) {
   createEffect(() => {
     if (props.open) setTab(props.initialTab ?? "nwc")
   })
-  const [nwcUrl, setNwcUrl] = createSignal("")
-  const [saving, setSaving] = createSignal(false)
-  const [saved, setSaved] = createSignal(false)
-  const [error, setError] = createSignal("")
-  const [redirecting, setRedirecting] = createSignal(false)
 
-  async function saveNwc() {
+  const nwc = useNwcSetup(() => props.onSaved?.())
-    const url = nwcUrl().trim()
+  const card = useCardPortal()
-    if (!url) return
-    setSaving(true)
-    setError("")
-    try {
-      await updateActiveTenant({ nwc_url: url })
-      setSaved(true)
-      props.onSaved?.()
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to save wallet connection")
-    } finally {
-      setSaving(false)
-    }
-  }
 
-  async function openPortal() {
+  // Surface only the active tab's error so a stale failure on one method doesn't
-    setRedirecting(true)
+  // bleed into the other.
-    setError("")
+  const error = () => (tab() === "nwc" ? nwc.error() : card.error())
-    try {
-      const { url } = await createPortalSession(account()!.pubkey, window.location.href)
-      window.location.href = url
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to open billing portal")
-      setRedirecting(false)
-    }
-  }
 
   function handleClose() {
-    setNwcUrl("")
+    nwc.reset()
-    setSaved(false)
+    card.reset()
-    setError("")
     props.onClose()
   }
 
   return (
-    <Modal
+    <PaymentSetupShell
       open={props.open}
       onClose={handleClose}
-      wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      title="Set Up Payments"
-      panelClass="w-full max-w-md rounded-2xl bg-white shadow-xl overflow-hidden"
+      description="Choose how you'd like to pay once invoices are issued for your relay."
+      error={error()}
+      footer={<SetupFooter saved={nwc.saved()} cancelLabel="Set up later" onClose={handleClose} />}
     >
-      <div class="px-6 pt-6 pb-4 border-b border-gray-100">
-        <div class="flex items-start justify-between gap-3">
-          <div>
-            <h2 class="text-lg font-semibold text-gray-900">Set Up Payments</h2>
-            <p class="text-sm text-gray-500 mt-1">Choose how you'd like to pay once invoices are issued for your relay.</p>
-          </div>
-          <button
-            type="button"
-            onClick={handleClose}
-            class="text-gray-400 hover:text-gray-700 rounded p-1 hover:bg-gray-100 flex-shrink-0"
-            aria-label="Close"
-          >
-            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-      </div>
-
       <div class="px-6 pt-4">
         <p class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">Pay with</p>
         <div class="flex gap-2 border border-gray-200 rounded-lg p-1">
@@ -109,92 +63,14 @@ export default function PaymentSetup(props: PaymentSetupProps) {
         </div>
       </div>
 
-      <div class="px-6 py-4 min-h-[180px] flex flex-col justify-center">
+      <PaymentSetupBody>
         <Show when={tab() === "nwc"}>
-          <Show
+          <NwcSetupBody nwc={nwc} />
-            when={!saved()}
-            fallback={
-              <div class="text-center">
-                <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-                  <svg class="w-6 h-6 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <polyline points="20 6 9 17 4 12" />
-                  </svg>
-                </div>
-                <p class="text-sm font-medium text-gray-900">Wallet connected!</p>
-                <p class="text-xs text-gray-500 mt-1">Automatic payments are now enabled.</p>
-              </div>
-            }
-          >
-            <div class="space-y-3">
-              <label class="block text-sm font-medium text-gray-700">Nostr Wallet Connect URL</label>
-              <input
-                type="text"
-                value={nwcUrl()}
-                onInput={(e) => setNwcUrl(e.currentTarget.value)}
-                placeholder="nostr+walletconnect://..."
-                class="w-full border border-gray-300 rounded-lg px-3 py-2"
-              />
-              <button
-                type="button"
-                onClick={saveNwc}
-                disabled={saving() || !nwcUrl().trim()}
-                class="w-full py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
-              >
-                {saving() ? "Saving..." : "Save"}
-              </button>
-            </div>
-          </Show>
         </Show>
-
         <Show when={tab() === "card"}>
-          <div class="text-center space-y-4">
+          <CardSetupBody card={card} />
-            <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
-              <svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
-                <line x1="1" y1="10" x2="23" y2="10" />
-              </svg>
-            </div>
-            <p class="text-sm text-gray-600">Add a payment card via Stripe to enable automatic billing. If an invoice is currently due, we will retry collection after card setup.</p>
-            <button
-              type="button"
-              onClick={openPortal}
-              disabled={redirecting()}
-              class="w-full py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
-            >
-              {redirecting() ? "Redirecting..." : "Add a payment card"}
-            </button>
-          </div>
         </Show>
-      </div>
+      </PaymentSetupBody>
-
+    </PaymentSetupShell>
-      <Show when={error()}>
-        <div class="px-6 pb-2">
-          <p class="text-xs text-red-600">{error()}</p>
-        </div>
-      </Show>
-
-      <div class="px-6 py-4 border-t border-gray-100">
-        <Show when={saved()}>
-          <div class="flex justify-end">
-            <button
-              type="button"
-              onClick={handleClose}
-              class="py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700"
-            >
-              Done
-            </button>
-          </div>
-        </Show>
-        <Show when={!saved()}>
-          <button
-            type="button"
-            onClick={handleClose}
-            class="py-2 px-4 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50 transition-colors"
-          >
-            Set up later
-          </button>
-        </Show>
-      </div>
-    </Modal>
   )
 }

frontend/src/components/PaymentSetupCard.tsx

@@ -1,7 +1,5 @@
-import { createSignal, Show } from "solid-js"
+import { PaymentSetupShell, PaymentSetupBody, SetupFooter, CardSetupBody } from "@/components/PaymentSetupShell"
-import Modal from "@/components/Modal"
+import { useCardPortal } from "@/lib/usePaymentSetup"
-import { createPortalSession } from "@/lib/api"
-import { account } from "@/lib/state"
 
 type PaymentSetupCardProps = {
   open: boolean
@@ -16,97 +14,29 @@ type PaymentSetupCardProps = {
 // there's no method switcher — adding/updating a card is a redirect to the
 // Stripe billing portal, which returns to wherever it was opened from.
 export default function PaymentSetupCard(props: PaymentSetupCardProps) {
-  const [redirecting, setRedirecting] = createSignal(false)
+  const card = useCardPortal()
-  const [error, setError] = createSignal("")
-
-  async function openPortal() {
-    setRedirecting(true)
-    setError("")
-    try {
-      const { url } = await createPortalSession(account()!.pubkey, window.location.href)
-      window.location.href = url
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to open billing portal")
-      setRedirecting(false)
-    }
-  }
 
   function handleClose() {
-    setError("")
+    card.reset()
     props.onClose()
   }
 
   return (
-    <Modal
+    <PaymentSetupShell
       open={props.open}
       onClose={handleClose}
-      wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      title={props.isUpdate ? "Manage Card" : "Add a Card"}
-      panelClass="w-full max-w-md rounded-2xl bg-white shadow-xl overflow-hidden"
+      description={
+        props.isUpdate
+          ? "Manage your saved card in the Stripe billing portal."
+          : "Add a card via the Stripe billing portal to pay invoices automatically."
+      }
+      error={card.error()}
+      footer={<SetupFooter cancelLabel="Cancel" onClose={handleClose} />}
     >
-      <div class="px-6 pt-6 pb-4 border-b border-gray-100">
+      <PaymentSetupBody>
-        <div class="flex items-start justify-between gap-3">
+        <CardSetupBody card={card} isUpdate={props.isUpdate} />
-          <div>
+      </PaymentSetupBody>
-            <h2 class="text-lg font-semibold text-gray-900">
+    </PaymentSetupShell>
-              {props.isUpdate ? "Manage Card" : "Add a Card"}
-            </h2>
-            <p class="text-sm text-gray-500 mt-1">
-              {props.isUpdate
-                ? "Manage your saved card in the Stripe billing portal."
-                : "Add a card via the Stripe billing portal to pay invoices automatically."}
-            </p>
-          </div>
-          <button
-            type="button"
-            onClick={handleClose}
-            class="text-gray-400 hover:text-gray-700 rounded p-1 hover:bg-gray-100 flex-shrink-0"
-            aria-label="Close"
-          >
-            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-      </div>
-
-      <div class="px-6 py-4 min-h-[180px] flex flex-col justify-center">
-        <div class="text-center space-y-4">
-          <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
-            <svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
-              <line x1="1" y1="10" x2="23" y2="10" />
-            </svg>
-          </div>
-          <p class="text-sm text-gray-600">
-            {props.isUpdate
-              ? "Update or remove your card in the Stripe billing portal. We'll retry any due invoice after you're done."
-              : "Add a payment card via Stripe to enable automatic billing. If an invoice is currently due, we will retry collection after card setup."}
-          </p>
-          <button
-            type="button"
-            onClick={openPortal}
-            disabled={redirecting()}
-            class="w-full py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
-          >
-            {redirecting() ? "Redirecting..." : props.isUpdate ? "Manage card" : "Add a payment card"}
-          </button>
-        </div>
-      </div>
-
-      <Show when={error()}>
-        <div class="px-6 pb-2">
-          <p class="text-xs text-red-600">{error()}</p>
-        </div>
-      </Show>
-
-      <div class="px-6 py-4 border-t border-gray-100">
-        <button
-          type="button"
-          onClick={handleClose}
-          class="py-2 px-4 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50 transition-colors"
-        >
-          Cancel
-        </button>
-      </div>
-    </Modal>
   )
 }

frontend/src/components/PaymentSetupNWC.tsx

@@ -1,6 +1,5 @@
-import { createSignal, Show } from "solid-js"
+import { PaymentSetupShell, PaymentSetupBody, SetupFooter, NwcSetupBody } from "@/components/PaymentSetupShell"
-import Modal from "@/components/Modal"
+import { useNwcSetup } from "@/lib/usePaymentSetup"
-import { updateActiveTenant } from "@/lib/hooks"
 
 type PaymentSetupNWCProps = {
   open: boolean
@@ -16,132 +15,29 @@ type PaymentSetupNWCProps = {
 // Lightning wallet", so there's no method switcher — the card path lives on its
 // own row that redirects to Stripe.
 export default function PaymentSetupNWC(props: PaymentSetupNWCProps) {
-  const [nwcUrl, setNwcUrl] = createSignal("")
+  const nwc = useNwcSetup(() => props.onSaved?.())
-  const [saving, setSaving] = createSignal(false)
-  const [saved, setSaved] = createSignal(false)
-  const [error, setError] = createSignal("")
-
-  async function save() {
-    const url = nwcUrl().trim()
-    if (!url) return
-    setSaving(true)
-    setError("")
-    try {
-      await updateActiveTenant({ nwc_url: url })
-      setSaved(true)
-      props.onSaved?.()
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to save wallet connection")
-    } finally {
-      setSaving(false)
-    }
-  }
 
   function handleClose() {
-    setNwcUrl("")
+    nwc.reset()
-    setSaved(false)
-    setError("")
     props.onClose()
   }
 
   return (
-    <Modal
+    <PaymentSetupShell
       open={props.open}
       onClose={handleClose}
-      wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      title={props.isUpdate ? "Update Lightning Wallet" : "Connect Lightning Wallet"}
-      panelClass="w-full max-w-md rounded-2xl bg-white shadow-xl overflow-hidden"
+      description={
+        props.isUpdate
+          ? "Paste a new Nostr Wallet Connect URL to replace your connected wallet."
+          : "Paste your Nostr Wallet Connect URL to pay invoices automatically over Lightning."
+      }
+      error={nwc.error()}
+      footer={<SetupFooter saved={nwc.saved()} cancelLabel="Cancel" onClose={handleClose} />}
     >
-      <div class="px-6 pt-6 pb-4 border-b border-gray-100">
+      <PaymentSetupBody>
-        <div class="flex items-start justify-between gap-3">
+        <NwcSetupBody nwc={nwc} />
-          <div>
+      </PaymentSetupBody>
-            <h2 class="text-lg font-semibold text-gray-900">
+    </PaymentSetupShell>
-              {props.isUpdate ? "Update Lightning Wallet" : "Connect Lightning Wallet"}
-            </h2>
-            <p class="text-sm text-gray-500 mt-1">
-              {props.isUpdate
-                ? "Paste a new Nostr Wallet Connect URL to replace your connected wallet."
-                : "Paste your Nostr Wallet Connect URL to pay invoices automatically over Lightning."}
-            </p>
-          </div>
-          <button
-            type="button"
-            onClick={handleClose}
-            class="text-gray-400 hover:text-gray-700 rounded p-1 hover:bg-gray-100 flex-shrink-0"
-            aria-label="Close"
-          >
-            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
-          </button>
-        </div>
-      </div>
-
-      <div class="px-6 py-4 min-h-[180px] flex flex-col justify-center">
-        <Show
-          when={!saved()}
-          fallback={
-            <div class="text-center">
-              <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
-                <svg class="w-6 h-6 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                  <polyline points="20 6 9 17 4 12" />
-                </svg>
-              </div>
-              <p class="text-sm font-medium text-gray-900">Wallet connected!</p>
-              <p class="text-xs text-gray-500 mt-1">Automatic payments are now enabled.</p>
-            </div>
-          }
-        >
-          <div class="space-y-3">
-            <label class="block text-sm font-medium text-gray-700">Nostr Wallet Connect URL</label>
-            <input
-              type="text"
-              value={nwcUrl()}
-              onInput={(e) => setNwcUrl(e.currentTarget.value)}
-              placeholder="nostr+walletconnect://..."
-              class="w-full border border-gray-300 rounded-lg px-3 py-2"
-            />
-            <button
-              type="button"
-              onClick={save}
-              disabled={saving() || !nwcUrl().trim()}
-              class="w-full py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
-            >
-              {saving() ? "Saving..." : "Save"}
-            </button>
-          </div>
-        </Show>
-      </div>
-
-      <Show when={error()}>
-        <div class="px-6 pb-2">
-          <p class="text-xs text-red-600">{error()}</p>
-        </div>
-      </Show>
-
-      <div class="px-6 py-4 border-t border-gray-100">
-        <Show
-          when={saved()}
-          fallback={
-            <button
-              type="button"
-              onClick={handleClose}
-              class="py-2 px-4 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50 transition-colors"
-            >
-              Cancel
-            </button>
-          }
-        >
-          <div class="flex justify-end">
-            <button
-              type="button"
-              onClick={handleClose}
-              class="py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700"
-            >
-              Done
-            </button>
-          </div>
-        </Show>
-      </div>
-    </Modal>
   )
 }

frontend/src/components/PaymentSetupShell.tsx

@@ -0,0 +1,159 @@
+import { Show, type JSX } from "solid-js"
+import Modal from "@/components/Modal"
+import type { CardPortal, NwcSetup } from "@/lib/usePaymentSetup"
+
+type PaymentSetupShellProps = {
+  open: boolean
+  onClose: () => void
+  title: string
+  description: string
+  error?: string
+  footer: JSX.Element
+  children: JSX.Element
+}
+
+// Shared chrome for the payment-setup dialogs: the modal frame, the
+// title/description header with a close button, the error line, and the footer
+// container. Each caller supplies the body (children) and footer buttons.
+export function PaymentSetupShell(props: PaymentSetupShellProps) {
+  return (
+    <Modal
+      open={props.open}
+      onClose={props.onClose}
+      wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
+      panelClass="w-full max-w-md rounded-2xl bg-white shadow-xl overflow-hidden"
+    >
+      <div class="px-6 pt-6 pb-4 border-b border-gray-100">
+        <div class="flex items-start justify-between gap-3">
+          <div>
+            <h2 class="text-lg font-semibold text-gray-900">{props.title}</h2>
+            <p class="text-sm text-gray-500 mt-1">{props.description}</p>
+          </div>
+          <button
+            type="button"
+            onClick={props.onClose}
+            class="text-gray-400 hover:text-gray-700 rounded p-1 hover:bg-gray-100 flex-shrink-0"
+            aria-label="Close"
+          >
+            <svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M18 6L6 18M6 6l12 12" />
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      {props.children}
+
+      <Show when={props.error}>
+        <div class="px-6 pb-2">
+          <p class="text-xs text-red-600">{props.error}</p>
+        </div>
+      </Show>
+
+      <div class="px-6 py-4 border-t border-gray-100">{props.footer}</div>
+    </Modal>
+  )
+}
+
+// The fixed-height content region between the header and footer.
+export function PaymentSetupBody(props: { children: JSX.Element }) {
+  return <div class="px-6 py-4 min-h-[180px] flex flex-col justify-center">{props.children}</div>
+}
+
+// Footer for every payment-setup dialog: a "Done" confirm once an action has
+// succeeded, otherwise a secondary dismiss button. Card setup never "saves" (it
+// redirects away), so it always shows the dismiss button.
+export function SetupFooter(props: { saved?: boolean; cancelLabel: string; onClose: () => void }) {
+  return (
+    <Show
+      when={props.saved}
+      fallback={
+        <button
+          type="button"
+          onClick={props.onClose}
+          class="py-2 px-4 border border-gray-300 text-gray-700 text-sm rounded-lg hover:bg-gray-50 transition-colors"
+        >
+          {props.cancelLabel}
+        </button>
+      }
+    >
+      <div class="flex justify-end">
+        <button
+          type="button"
+          onClick={props.onClose}
+          class="py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700"
+        >
+          Done
+        </button>
+      </div>
+    </Show>
+  )
+}
+
+// Lightning/NWC body: the URL input + save, or the success state once saved.
+export function NwcSetupBody(props: { nwc: NwcSetup }) {
+  const nwc = props.nwc
+  return (
+    <Show
+      when={!nwc.saved()}
+      fallback={
+        <div class="text-center">
+          <div class="mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-green-100">
+            <svg class="w-6 h-6 text-green-600" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <polyline points="20 6 9 17 4 12" />
+            </svg>
+          </div>
+          <p class="text-sm font-medium text-gray-900">Wallet connected!</p>
+          <p class="text-xs text-gray-500 mt-1">Automatic payments are now enabled.</p>
+        </div>
+      }
+    >
+      <div class="space-y-3">
+        <label class="block text-sm font-medium text-gray-700">Nostr Wallet Connect URL</label>
+        <input
+          type="text"
+          value={nwc.nwcUrl()}
+          onInput={(e) => nwc.setNwcUrl(e.currentTarget.value)}
+          placeholder="nostr+walletconnect://..."
+          class="w-full border border-gray-300 rounded-lg px-3 py-2"
+        />
+        <button
+          type="button"
+          onClick={nwc.save}
+          disabled={nwc.saving() || !nwc.nwcUrl().trim()}
+          class="w-full py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+        >
+          {nwc.saving() ? "Saving..." : "Save"}
+        </button>
+      </div>
+    </Show>
+  )
+}
+
+// Card body: an explanation plus the button that redirects to the Stripe portal.
+// `isUpdate` adjusts the copy for tenants who already have a card on file.
+export function CardSetupBody(props: { card: CardPortal; isUpdate?: boolean }) {
+  return (
+    <div class="text-center space-y-4">
+      <div class="mx-auto flex h-12 w-12 items-center justify-center rounded-full bg-gray-100">
+        <svg class="w-6 h-6 text-gray-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="1" y="4" width="22" height="16" rx="2" ry="2" />
+          <line x1="1" y1="10" x2="23" y2="10" />
+        </svg>
+      </div>
+      <p class="text-sm text-gray-600">
+        {props.isUpdate
+          ? "Update or remove your card in the Stripe billing portal. We'll retry any due invoice after you're done."
+          : "Add a payment card via Stripe to enable automatic billing. If an invoice is currently due, we will retry collection after card setup."}
+      </p>
+      <button
+        type="button"
+        onClick={props.card.openPortal}
+        disabled={props.card.redirecting()}
+        class="w-full py-2 px-4 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+      >
+        {props.card.redirecting() ? "Redirecting..." : props.isUpdate ? "Manage card" : "Add a payment card"}
+      </button>
+    </div>
+  )
+}

frontend/src/components/RelayListItem.tsx

@@ -28,7 +28,7 @@ export default function RelayListItem(props: RelayListItemProps) {
               class="inline-flex items-center rounded-full border border-red-200 bg-red-50 px-2.5 py-0.5 text-xs font-medium text-red-700 max-w-56 truncate"
               title={props.relay.sync_error}
             >
-              {props.relay.sync_error}
+              Failed to sync
             </span>
           </Show>
         </div>

frontend/src/index.css

@@ -23,4 +23,7 @@
   --color-blue-500: #c18254;
   --color-blue-600: #c18254;
   --color-blue-700: #a66d46;
+  --color-blue-800: #8a5a39;
+  --color-blue-900: #6f4730;
+  --color-blue-950: #45291a;
 }

frontend/src/lib/usePaymentSetup.ts

@@ -0,0 +1,67 @@
+import { createSignal } from "solid-js"
+import { updateActiveTenant } from "@/lib/hooks"
+import { createPortalSession } from "@/lib/api"
+import { account } from "@/lib/state"
+
+// Lightning/NWC save state machine, shared by the combined and focused setup
+// dialogs. `onSaved` fires once the wallet URL is persisted.
+export function useNwcSetup(onSaved?: () => void) {
+  const [nwcUrl, setNwcUrl] = createSignal("")
+  const [saving, setSaving] = createSignal(false)
+  const [saved, setSaved] = createSignal(false)
+  const [error, setError] = createSignal("")
+
+  async function save() {
+    const url = nwcUrl().trim()
+    if (!url) return
+    setSaving(true)
+    setError("")
+    try {
+      await updateActiveTenant({ nwc_url: url })
+      setSaved(true)
+      onSaved?.()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to save wallet connection")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  function reset() {
+    setNwcUrl("")
+    setSaved(false)
+    setError("")
+  }
+
+  return { nwcUrl, setNwcUrl, saving, saved, error, save, reset }
+}
+
+export type NwcSetup = ReturnType<typeof useNwcSetup>
+
+// Card setup is a full-page redirect to the Stripe billing portal (which returns
+// to wherever it was opened from), so there's no local "saved" state — only the
+// in-flight redirect and any failure to open the portal.
+export function useCardPortal() {
+  const [redirecting, setRedirecting] = createSignal(false)
+  const [error, setError] = createSignal("")
+
+  async function openPortal() {
+    setRedirecting(true)
+    setError("")
+    try {
+      const { url } = await createPortalSession(account()!.pubkey, window.location.href)
+      window.location.href = url
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to open billing portal")
+      setRedirecting(false)
+    }
+  }
+
+  function reset() {
+    setError("")
+  }
+
+  return { redirecting, error, openPortal, reset }
+}
+
+export type CardPortal = ReturnType<typeof useCardPortal>