Frontend refactor

2026-06-01 17:57:06 -07:00
parent 08e59e3b40
commit bd5f4b1cd0
52 changed files with 1490 additions and 1073 deletions
@@ -0,0 +1,66 @@
+import { Show } from "solid-js"
+
+type Bolt11Status = "idle" | "loading" | "ready" | "error"
+
+// Presentational lightning payment body: loading/error/ready states, the bolt11
+// QR + input, and copy. All fetching/QR generation stays in PaymentDialog and is
+// surfaced via accessors/callbacks. Props are reactive only when read lazily, so
+// access props.* inside JSX, never destructure signal-bearing props at the top.
+type LightningPayBodyProps = {
+  bolt11Status: () => Bolt11Status
+  bolt11: () => string
+  qrDataUrl: () => string
+  bolt11Error: () => string
+  onRetry: () => void
+  onCopy: () => void
+}
+
+export default function LightningPayBody(props: LightningPayBodyProps) {
+  return (
+    <>
+      <Show when={props.bolt11Status() === "idle" || props.bolt11Status() === "loading"}>
+        <div class="flex items-center justify-center py-12 text-sm text-gray-400">Generating invoice...</div>
+      </Show>
+      <Show when={props.bolt11Status() === "error"}>
+        <div class="rounded-lg border border-red-200 bg-red-50 p-4">
+          <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">{props.bolt11Error()}</p>
+          <button
+            type="button"
+            onClick={props.onRetry}
+            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"
+          >
+            Retry
+          </button>
+        </div>
+      </Show>
+      <Show when={props.bolt11Status() === "ready"}>
+        <img src={props.qrDataUrl()} alt="Lightning invoice QR code" class="mx-auto rounded-lg" />
+        <Show when={props.bolt11()}>
+          <div class="flex rounded-lg border border-gray-300">
+            <input
+              type="text"
+              readOnly
+              value={props.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={props.onCopy}
+              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>
+    </>
+  )
+}