Clean up relay form

frontend/src/components/RelayForm.tsx

@@ -1,63 +1,61 @@
 import { createEffect, createSignal } from "solid-js"
 import type { Relay } from "@/lib/hooks"
 import { slugify } from "@/lib/slugify"
+import { PLANS } from "@/lib/api"
 
-export type RelayFormValues = {
+export type RelayFormValues = Pick<Relay, "info_name" | "subdomain" | "info_icon" | "info_description" | "plan">
-  info_name: string
-  subdomain: string
-  info_icon: string
-  info_description: string
-}
 
 type RelayFormProps = {
-  initialValues: Pick<Relay, "info_name" | "subdomain" | "info_icon" | "info_description">
+  initialValues?: Partial<RelayFormValues>
   syncSubdomainWithName?: boolean
-  onSubmit: (values: RelayFormValues, e: Event) => void | Promise<void>
+  onSubmit: (values: RelayFormValues) => Promise<void> | void
-  submitting: boolean
-  error?: string
   submitLabel: string
   submittingLabel: string
 }
 
 export default function RelayForm(props: RelayFormProps) {
-  const [name, setName] = createSignal(props.initialValues.info_name)
+  const [plan, setPlan] = createSignal(props.initialValues?.plan ?? "")
-  const [subdomain, setSubdomain] = createSignal(props.initialValues.subdomain)
+  const [name, setName] = createSignal(props.initialValues?.info_name ?? "")
-  const [icon, setIcon] = createSignal(props.initialValues.info_icon)
+  const [subdomain, setSubdomain] = createSignal(props.initialValues?.subdomain ?? "")
-  const [description, setDescription] = createSignal(props.initialValues.info_description)
+  const [icon, setIcon] = createSignal(props.initialValues?.info_icon ?? "")
+  const [description, setDescription] = createSignal(props.initialValues?.info_description ?? "")
+  const [submitting, setSubmitting] = createSignal(false)
+  const [error, setError] = createSignal("")
 
-  createEffect(() => {
+  async function handleSubmit(e: Event) {
-    setName(props.initialValues.info_name)
-    setSubdomain(props.initialValues.subdomain)
-    setIcon(props.initialValues.info_icon)
-    setDescription(props.initialValues.info_description)
-  })
-
-  function handleSubmit(e: Event) {
     e.preventDefault()
-    void props.onSubmit(
+    setError("")
-      {
+    setSubmitting(true)
+
+    try {
+      await props.onSubmit({
+        plan: plan(),
         info_name: name(),
         subdomain: subdomain(),
         info_icon: icon(),
         info_description: description(),
-      },
+      })
-      e,
+    } catch (e) {
-    )
+      setError(e instanceof Error ? e.message : "Failed to save relay")
+    } finally {
+      setSubmitting(false)
+    }
   }
 
+  createEffect(() => {
+    if (props.syncSubdomainWithName) {
+      setSubdomain(slugify(name()))
+    }
+  })
+
   return (
     <form onSubmit={handleSubmit} class="space-y-6">
-      {/* Basic info */}
       <div>
         <label class="block text-sm font-medium text-gray-700 mb-1">Relay Name</label>
         <input
-          value={name()}
-          onInput={e => {
-            const value = e.currentTarget.value
-            setName(value)
-            if (props.syncSubdomainWithName) setSubdomain(slugify(value))
-          }}
           required
+          value={name()}
+          onInput={e => setName(e.currentTarget.value)}
           class="w-full border border-gray-300 rounded-lg px-3 py-2"
         />
       </div>
@@ -85,19 +83,41 @@ export default function RelayForm(props: RelayFormProps) {
       <div>
         <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
         <textarea
+          rows={3}
           value={description()}
           onInput={e => setDescription(e.currentTarget.value)}
-          rows={3}
           class="w-full border border-gray-300 rounded-lg px-3 py-2"
         />
       </div>
-      {props.error && <p class="text-sm text-red-600">{props.error}</p>}
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-3">Plan</label>
+        <div class="grid grid-cols-3 gap-3">
+          {PLANS.map(p => (
+            <button
+              type="button"
+              onClick={() => setPlan(p.id)}
+              class={`border-2 rounded-xl p-4 text-left transition-colors ${
+                plan() === p.id
+                  ? "border-blue-600 bg-blue-50"
+                  : "border-gray-200 hover:border-gray-300"
+              }`}
+            >
+              <div class="font-bold text-gray-900">{p.label}</div>
+              <div class="text-sm text-gray-500 mt-1">
+                {p.price === 0 ? "Free" : `${p.price.toLocaleString()} sats/mo`}
+              </div>
+              <div class="text-xs text-gray-500 mt-2">{p.members} members</div>
+            </button>
+          ))}
+        </div>
+      </div>
+      {error() && <p class="text-sm text-red-600">{error()}</p>}
       <button
         type="submit"
-        disabled={props.submitting}
+        disabled={submitting()}
         class="w-full py-2 px-4 bg-blue-600 text-white font-medium rounded-lg hover:bg-blue-700 disabled:opacity-50"
       >
-        {props.submitting ? props.submittingLabel : props.submitLabel}
+        {submitting() ? props.submittingLabel : props.submitLabel}
       </button>
     </form>
   )

frontend/src/lib/api.ts

@@ -31,6 +31,14 @@ export class ApiError extends Error {
 
 export type Plan = Record<string, unknown>
 
+export const PLANS = [
+  { id: "free", label: "Free", price: 0, members: "Up to 10", blossom: false, livekit: false },
+  { id: "basic", label: "Basic", price: 10_000, members: "Up to 100", blossom: true, livekit: true },
+  { id: "growth", label: "Growth", price: 50_000, members: "Unlimited", blossom: true, livekit: true },
+] as const
+
+export type PlanId = (typeof PLANS)[number]["id"]
+
 export type Relay = {
   id: string
   tenant: string

frontend/src/lib/hooks.ts

@@ -96,7 +96,26 @@ export const useAdminTenant = (pubkey: () => string) => createResource(pubkey, g
 
 export const useAdminTenantRelays = (pubkey: () => string) => createResource(pubkey, listTenantRelays)
 
-export const createRelayForActiveTenant = (input: CreateRelayInput) => createRelay({ ...input, tenant: account()!.pubkey })
+export const createRelayForActiveTenant = (input: CreateRelayInput) => {
+  const defaults = {
+    info_name: "",
+    info_icon: "",
+    info_description: "",
+    policy_public_join: 0,
+    policy_strip_signatures: 0,
+    groups_enabled: 1,
+    management_enabled: 1,
+    push_enabled: 1,
+  }
+
+  const overrides = {
+    tenant: account()!.pubkey,
+    blossom_enabled: input.plan === "free" ? 0 : 1,
+    livekit_enabled: input.plan === "free" ? 0 : 1,
+  }
+
+  return createRelay({...defaults, ...input, ...overrides})
+}
 
 export const updateActiveTenantBilling = (nwc_url: string) => updateTenantBilling(account()!.pubkey, { nwc_url })
 

frontend/src/pages/Home.tsx

@@ -8,81 +8,32 @@ import Modal from "@/components/Modal"
 import Login from "@/views/Login"
 import { createRelayForActiveTenant } from "@/lib/hooks"
 import { account } from "@/lib/state"
-import { slugify } from "@/lib/slugify"
 
 export default function Home() {
   const navigate = useNavigate()
   const [showRelayModal, setShowRelayModal] = createSignal(false)
   const [showLoginModal, setShowLoginModal] = createSignal(false)
-  const [name, setName] = createSignal("")
+  const [draftRelay, setDraftRelay] = createSignal<RelayFormValues>()
-  const [subdomain, setSubdomain] = createSignal("")
-  const [icon, setIcon] = createSignal("")
-  const [description, setDescription] = createSignal("")
-  const [pendingRelay, setPendingRelay] = createSignal(false)
-  const [error, setError] = createSignal("")
-
-  function resetForm() {
-    setName("")
-    setSubdomain("")
-    setIcon("")
-    setDescription("")
-    setError("")
-    setPendingRelay(false)
-  }
-
-  function openRelayFlow() {
-    setError("")
-    setShowRelayModal(true)
-  }
-
-  async function createRelayAndRedirect() {
-    setError("")
-    setPendingRelay(true)
-
-    try {
-      const relay = await createRelayForActiveTenant({
-        subdomain: slugify(subdomain()),
-        plan: "free",
-        info_name: name().trim(),
-        info_icon: icon().trim(),
-        info_description: description().trim(),
-        policy_public_join: 0,
-        policy_strip_signatures: 0,
-        groups_enabled: 1,
-        management_enabled: 1,
-        blossom_enabled: 0,
-        livekit_enabled: 0,
-        push_enabled: 1,
-      })
-
-      setShowLoginModal(false)
-      setShowRelayModal(false)
-      resetForm()
-      navigate(`/relays/${relay.id}`)
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to create relay")
-      setShowLoginModal(false)
-      setShowRelayModal(true)
-    } finally {
-      setPendingRelay(false)
-    }
-  }
-
-  async function handleRelaySubmit(values: RelayFormValues, e: Event) {
-    e.preventDefault()
-    setError("")
-    setName(values.info_name)
-    setSubdomain(values.subdomain)
-    setIcon(values.info_icon)
-    setDescription(values.info_description)
 
+  async function onRelayFormSubmit(values: RelayFormValues) {
     if (account()) {
-      await createRelayAndRedirect()
+      const relay = await createRelayForActiveTenant(values)
-      return
-    }
 
-    setShowRelayModal(false)
+      navigate(`/relays/${relay.id}`)
-    setShowLoginModal(true)
+    } else {
+      setDraftRelay(values)
+      setShowLoginModal(true)
+    }
+  }
+
+  async function onAuthenticated() {
+    const relay = draftRelay()
+
+    if (relay) {
+      onRelayFormSubmit(relay)
+    } else {
+      navigate("/relays")
+    }
   }
 
   return (
@@ -135,7 +86,7 @@ export default function Home() {
           <div class="flex flex-col sm:flex-row items-center justify-center gap-4">
             <button
               type="button"
-              onClick={openRelayFlow}
+              onClick={() => setShowRelayModal(true)}
               class="inline-flex items-center gap-2 py-3 px-8 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 active:scale-95 transition-all shadow-lg shadow-blue-200"
             >
               Get started free
@@ -353,7 +304,7 @@ export default function Home() {
           </p>
           <button
             type="button"
-            onClick={openRelayFlow}
+            onClick={() => setShowRelayModal(true)}
             class="inline-flex items-center gap-2 py-3 px-10 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 active:scale-95 transition-all shadow-lg shadow-blue-200 text-lg"
           >
             Create your relay
@@ -379,9 +330,7 @@ export default function Home() {
 
       <Modal
         open={showRelayModal()}
-        onClose={() => {
+        onClose={() => setShowRelayModal(false)}
-          if (!pendingRelay()) setShowRelayModal(false)
-        }}
         wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
         panelClass="w-full max-w-2xl rounded-2xl bg-white p-6 sm:p-8 shadow-2xl"
       >
@@ -393,9 +342,7 @@ export default function Home() {
           <button
             type="button"
             class="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700"
-            onClick={() => {
+            onClick={() => setShowRelayModal(false)}
-              if (!pendingRelay()) setShowRelayModal(false)
-            }}
             aria-label="Close"
           >
             <svg class="h-5 w-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>
@@ -403,16 +350,8 @@ export default function Home() {
         </div>
 
         <RelayForm
-          initialValues={{
-            info_name: name(),
-            subdomain: subdomain(),
-            info_icon: icon(),
-            info_description: description(),
-          }}
           syncSubdomainWithName
-          onSubmit={handleRelaySubmit}
+          onSubmit={onRelayFormSubmit}
-          submitting={pendingRelay()}
-          error={error()}
           submitLabel="Continue"
           submittingLabel="Creating..."
         />
@@ -420,26 +359,14 @@ export default function Home() {
 
       <Modal
         open={showLoginModal()}
-        onClose={() => {
+        onClose={() => setShowLoginModal(false)}
-          if (!pendingRelay()) setShowLoginModal(false)
-        }}
         wrapperClass="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4"
         panelClass="w-full max-w-4xl rounded-2xl"
       >
         <Login
           inModal
-          onClose={() => {
+          onClose={() => setShowLoginModal(false)}
-            if (!pendingRelay()) setShowLoginModal(false)
+          onAuthenticated={onAuthenticated}
-          }}
-          onAuthenticated={async () => {
-            if (name().trim() && subdomain().trim()) {
-              await createRelayAndRedirect()
-              return
-            }
-
-            setShowLoginModal(false)
-            navigate("/relays")
-          }}
         />
       </Modal>
     </div>

frontend/src/pages/admin/AdminRelayEdit.tsx

@@ -1,5 +1,5 @@
 import { useNavigate, useParams } from "@solidjs/router"
-import { Show, createSignal } from "solid-js"
+import { Show } from "solid-js"
 import RelayForm, { type RelayFormValues } from "@/components/RelayForm"
 import { slugify } from "@/lib/slugify"
 import BackLink from "@/components/BackLink"
@@ -15,26 +15,14 @@ export default function AdminRelayEdit() {
   const [relay] = useRelay(relayId)
   const loading = useMinLoading(() => relay.loading)
 
-  const [error, setError] = createSignal("")
+  async function handleSubmit(values: RelayFormValues) {
-  const [submitting, setSubmitting] = createSignal(false)
+    await updateRelayById(relayId(), {
-
+      subdomain: slugify(values.subdomain),
-  async function handleSubmit(values: RelayFormValues, e: Event) {
+      info_name: values.info_name.trim(),
-    e.preventDefault()
+      info_icon: values.info_icon.trim(),
-    setError("")
+      info_description: values.info_description.trim(),
-    setSubmitting(true)
+    })
-    try {
+    navigate(`/admin/relays/${relayId()}`)
-      await updateRelayById(relayId(), {
-        subdomain: slugify(values.subdomain),
-        info_name: values.info_name.trim(),
-        info_icon: values.info_icon.trim(),
-        info_description: values.info_description.trim(),
-      })
-      navigate(`/admin/relays/${relayId()}`)
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to update relay")
-    } finally {
-      setSubmitting(false)
-    }
   }
 
   return (
@@ -53,8 +41,6 @@ export default function AdminRelayEdit() {
         <RelayForm
           initialValues={relay()!}
           onSubmit={handleSubmit}
-          submitting={submitting()}
-          error={error()}
           submitLabel="Save Changes"
           submittingLabel="Saving..."
         />

frontend/src/pages/relays/RelayEdit.tsx

@@ -1,5 +1,5 @@
 import { useNavigate, useParams } from "@solidjs/router"
-import { Show, createSignal } from "solid-js"
+import { Show } from "solid-js"
 import RelayForm, { type RelayFormValues } from "@/components/RelayForm"
 import { slugify } from "@/lib/slugify"
 import BackLink from "@/components/BackLink"
@@ -15,26 +15,14 @@ export default function RelayEdit() {
   const [relay] = useRelay(relayId)
   const loading = useMinLoading(() => relay.loading)
 
-  const [error, setError] = createSignal("")
+  async function handleSubmit(values: RelayFormValues) {
-  const [submitting, setSubmitting] = createSignal(false)
+    await updateRelayById(relayId(), {
-
+      subdomain: slugify(values.subdomain),
-  async function handleSubmit(values: RelayFormValues, e: Event) {
+      info_name: values.info_name.trim(),
-    e.preventDefault()
+      info_icon: values.info_icon.trim(),
-    setError("")
+      info_description: values.info_description.trim(),
-    setSubmitting(true)
+    })
-    try {
+    navigate(`/relays/${relayId()}`)
-      await updateRelayById(relayId(), {
-        subdomain: slugify(values.subdomain),
-        info_name: values.info_name.trim(),
-        info_icon: values.info_icon.trim(),
-        info_description: values.info_description.trim(),
-      })
-      navigate(`/relays/${relayId()}`)
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to update relay")
-    } finally {
-      setSubmitting(false)
-    }
   }
 
   return (
@@ -53,8 +41,6 @@ export default function RelayEdit() {
         <RelayForm
           initialValues={relay()!}
           onSubmit={handleSubmit}
-          submitting={submitting()}
-          error={error()}
           submitLabel="Save Changes"
           submittingLabel="Saving..."
         />

frontend/src/pages/relays/RelayNew.tsx

@@ -2,14 +2,7 @@ import { Show, createSignal } from "solid-js"
 import { useNavigate } from "@solidjs/router"
 import { slugify } from "@/lib/slugify"
 import { createRelayForActiveTenant } from "@/lib/hooks"
-
+import { PLANS, type PlanId } from "@/lib/api"
-const PLANS = [
-  { id: "free", label: "Free", price: 0, members: "Up to 10", blossom: false, livekit: false },
-  { id: "basic", label: "Basic", price: 10_000, members: "Up to 100", blossom: true, livekit: true },
-  { id: "growth", label: "Growth", price: 50_000, members: "Unlimited", blossom: true, livekit: true },
-] as const
-
-type PlanId = (typeof PLANS)[number]["id"]
 
 export default function RelayNew() {
   const navigate = useNavigate()