global: private xpub support part 2

website_next/wallets/setup/index.js

@@ -0,0 +1,62 @@
+import { createElement } from "../dom.js";
+
+/**
+ * @typedef {Object} SetupOptions
+ * @property {(password: string, button: HTMLButtonElement, status: HTMLElement) => void | Promise<void>} onCreate
+ */
+
+/**
+ * @param {string} text
+ */
+function createDescriptionText(text) {
+  const paragraph = document.createElement("p");
+
+  paragraph.append(text);
+
+  return paragraph;
+}
+
+/**
+ * @param {SetupOptions} options
+ */
+export function createSetup(options) {
+  const section = createElement("section", "wallets__setup");
+  const title = document.createElement("h1");
+  const description = createElement("div", "wallets__setup-description");
+  const form = createElement("form", "wallets__setup-form");
+  const password = document.createElement("input");
+  const button = document.createElement("button");
+  const status = createElement("p", "wallets__status");
+
+  title.append("Wallets");
+  description.append(
+    createDescriptionText(
+      "A privacy-preserving xpub viewer that runs in your browser and never uploads your xpub.",
+    ),
+    createDescriptionText(
+      "Import an xpub or watch-only descriptor to view a Bitcoin wallet without spending access.",
+    ),
+    createDescriptionText(
+      "Addresses are derived locally, checked through prefix buckets, and saved encrypted in this browser.",
+    ),
+    createDescriptionText(
+      "Privacy benefits can be drastically reduced if those addresses are already linked together on-chain.",
+    ),
+  );
+  password.name = "password";
+  password.type = "password";
+  password.autocomplete = "new-password";
+  password.placeholder = "Set password";
+  password.required = true;
+  button.type = "submit";
+  button.append("Continue");
+  status.setAttribute("role", "status");
+  form.append(password, button);
+  form.addEventListener("submit", (event) => {
+    event.preventDefault();
+    void options.onCreate(password.value, button, status);
+  });
+  section.append(title, description, form, status);
+
+  return section;
+}

website_next/wallets/setup/style.css

@@ -0,0 +1,63 @@
+main.wallets {
+  .wallets__setup {
+    display: grid;
+    gap: 1rem;
+    place-content: center;
+    max-width: 36rem;
+    min-height: 16rem;
+    margin-inline: auto;
+    text-align: center;
+
+    h1 {
+      margin: 0;
+      font-family: var(--font-serif);
+      font-size: 5rem;
+      font-weight: 400;
+      line-height: 0.9;
+    }
+
+    p {
+      margin: 0;
+    }
+  }
+
+  .wallets__setup-description {
+    display: grid;
+    gap: 0.625rem;
+    color: var(--gray);
+    font-size: var(--font-size-md);
+    line-height: var(--line-height-md);
+  }
+
+  .wallets__setup-form {
+    display: grid;
+    grid-template-columns: minmax(12rem, 18rem) auto;
+    gap: 0.75rem;
+    align-items: end;
+    justify-content: center;
+  }
+}
+
+@media (max-width: 56rem) {
+  main.wallets {
+    .wallets__setup {
+      h1 {
+        font-size: 4rem;
+      }
+    }
+  }
+}
+
+@media (max-width: 34rem) {
+  main.wallets {
+    .wallets__setup {
+      h1 {
+        font-size: 3rem;
+      }
+    }
+
+    .wallets__setup-form {
+      grid-template-columns: 1fr;
+    }
+  }
+}