Let's get this started

src/lib/components/LightningSettings.svelte

@@ -0,0 +1,156 @@
+<script lang="ts">
+  import Button from "./Button.svelte";
+  import { BASE_DOMAIN } from "$lib/config";
+  import { onMount } from "svelte";
+  import { getNpub } from "$lib/cashu.svelte";
+
+  let username = $state("");
+  let existingUsername = $state("");
+  let hasExistingUsername = $state(false);
+  let registrationStatus = $state("");
+  let isRegistering = $state(false);
+  let isCheckingUsername = $state(true);
+
+  onMount(async () => {
+    await checkExistingUsername();
+  });
+
+  async function checkExistingUsername() {
+    try {
+      const userNpub = await getNpub();
+      const response = await fetch(
+        `/api/check-username?npub=${encodeURIComponent(userNpub)}`
+      );
+      if (response.ok) {
+        const data = await response.json();
+        if (data.username) {
+          existingUsername = data.username;
+          hasExistingUsername = true;
+        }
+      }
+    } catch (err) {
+      console.error("Failed to check existing username:", err);
+    } finally {
+      isCheckingUsername = false;
+    }
+  }
+
+  async function registerUsername() {
+    if (!username.trim()) {
+      registrationStatus = "Please enter a username";
+      return;
+    }
+
+    isRegistering = true;
+    registrationStatus = "";
+
+    try {
+      const userNpub = await getNpub();
+      const response = await fetch(
+        `/.well-known/lnurlp/${encodeURIComponent(username)}`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            npub: userNpub,
+          }),
+        }
+      );
+
+      if (response.ok) {
+        registrationStatus = "Username registered successfully!";
+        existingUsername = username;
+        hasExistingUsername = true;
+        username = "";
+      } else {
+        const errorText = await response.text();
+        registrationStatus = `Registration failed: ${errorText}`;
+      }
+    } catch (err) {
+      registrationStatus = `Registration failed: ${err instanceof Error ? err.message : "Unknown error"}`;
+    } finally {
+      isRegistering = false;
+    }
+  }
+</script>
+
+<div class="retro-card">
+  <h2>Lightning Address</h2>
+
+  {#if isCheckingUsername}
+    <p>Checking for existing username...</p>
+  {:else if hasExistingUsername}
+    <p>
+      Your Lightning address: <strong>{existingUsername}@{BASE_DOMAIN}</strong>
+    </p>
+  {:else}
+    <p>
+      Register a username to receive Lightning payments at {username ||
+        "yourname"}@{BASE_DOMAIN}
+    </p>
+
+    <div class="form-group">
+      <label for="username">Username:</label>
+      <input
+        id="username"
+        type="text"
+        value={username}
+        oninput={(e) => (username = (e.target as HTMLInputElement).value)}
+        placeholder="Enter username"
+        class="retro-input"
+        disabled={isRegistering}
+      />
+    </div>
+
+    <Button
+      variant="primary"
+      onclick={registerUsername}
+      disabled={isRegistering}
+    >
+      {isRegistering ? "Registering..." : "Register Username"}
+    </Button>
+
+    {#if registrationStatus}
+      <p
+        class="status-message"
+        class:error={registrationStatus.includes("failed")}
+      >
+        {registrationStatus}
+      </p>
+    {/if}
+  {/if}
+</div>
+
+<style>
+  h2 {
+    margin: 0 0 1rem 0;
+    font-size: 1rem;
+  }
+
+  .form-group {
+    margin-bottom: 1rem;
+  }
+
+  label {
+    display: block;
+    margin-bottom: 0.5rem;
+    font-size: 0.8rem;
+  }
+
+  .retro-input {
+    width: 100%;
+    margin-bottom: 0.5rem;
+  }
+
+  .status-message {
+    margin-top: 0.5rem;
+    font-size: 0.7rem;
+    color: var(--success-color);
+  }
+
+  .status-message.error {
+    color: var(--error-color);
+  }
+</style>