From 4645d209e4b2c6b77c9f6510c82cdd2f2a77dac6 Mon Sep 17 00:00:00 2001
From: o-az <omaraziz.dev@proton.me>
Date: Thu, 12 Sep 2024 17:33:40 -0700
Subject: [PATCH] feat: ceremony address form

---
 ceremony/.gitignore                           |  1 +
 ceremony/ceremony.nix                         |  7 +-
 ceremony/package-lock.json                    | 58 +++++++++++--
 ceremony/package.json                         |  5 +-
 .../lib/components/address/AddressForm.svelte | 73 ++++++++++++++++
 ceremony/src/lib/components/address/index.ts  |  5 ++
 .../src/lib/components/address/validator.ts   | 15 ++++
 ceremony/src/routes/+page.svelte              | 85 +++++++++----------
 8 files changed, 194 insertions(+), 55 deletions(-)
 create mode 100644 ceremony/src/lib/components/address/AddressForm.svelte
 create mode 100644 ceremony/src/lib/components/address/index.ts
 create mode 100644 ceremony/src/lib/components/address/validator.ts

diff --git a/ceremony/.gitignore b/ceremony/.gitignore
index 74350ccacd..8fd5367561 100644
--- a/ceremony/.gitignore
+++ b/ceremony/.gitignore
@@ -33,3 +33,4 @@ vite.config.ts.timestamp-*
 
 # Stats directory
 stats
+_
diff --git a/ceremony/ceremony.nix b/ceremony/ceremony.nix
index 51a2711d82..5ad75e22ba 100644
--- a/ceremony/ceremony.nix
+++ b/ceremony/ceremony.nix
@@ -9,7 +9,7 @@
     {
       packages = {
         ceremony = unstablePkgs.buildNpmPackage {
-          npmDepsHash = "sha256-iL4+qO73/tXPDPI7d6B8UywQN9vhchPzy91WiRLYXUI=";
+          npmDepsHash = "sha256-CEZJ8lBuOrOf65oInkexsrXOaU+rJeUpQ2SGmlTgYbI=";
           src = ./.;
           sourceRoot = "ceremony";
           npmFlags = [ "--legacy-peer-deps" ];
@@ -39,6 +39,11 @@
               ${ensureAtRepositoryRoot}
               cd ceremony/
 
+              export NODE_OPTIONS="--no-warnings"
+              export VITE_BUCKET_ID="contributions"
+              export VITE_SUPABASE_URL="https://otfaamdxmgnkjqsosxye.supabase.co/"
+              export VITE_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im90ZmFhbWR4bWdua2pxc29zeHllIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MjEzMjA5NDMsImV4cCI6MjAzNjg5Njk0M30.q91NJPFFHKJXnbhbpUYwsB0NmimtD7pGPx6PkbB_A3w"
+
               npm install
               npm run dev
             '';
diff --git a/ceremony/package-lock.json b/ceremony/package-lock.json
index 8ca2be2664..410005af2b 100644
--- a/ceremony/package-lock.json
+++ b/ceremony/package-lock.json
@@ -8,18 +8,21 @@
       "name": "union-cermony",
       "version": "0.0.0",
       "dependencies": {
+        "@scure/base": "^1.1.8",
         "@splinetool/runtime": "^1.9.23",
         "@supabase/supabase-js": "^2.45.3",
         "@tanstack/svelte-query": "^5.54.1",
         "neverthrow": "^7.1.0",
+        "runed": "^0.15.2",
         "svelte-sonner": "^0.3.27"
       },
       "devDependencies": {
         "@sveltejs/adapter-static": "^3.0.4",
         "@sveltejs/kit": "^2.0.0",
-        "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
+        "@sveltejs/vite-plugin-svelte": "^4.0.0-next.7",
         "@total-typescript/ts-reset": "^0.6.1",
         "autoprefixer": "^10.4.20",
+        "clsx": "^2.1.1",
         "postcss": "^8.4.44",
         "svelte": "^5.0.0-next.1",
         "svelte-check": "^3.6.0",
@@ -798,6 +801,15 @@
         "win32"
       ]
     },
+    "node_modules/@scure/base": {
+      "version": "1.1.8",
+      "resolved": "https://registry.npmjs.org/@scure/base/-/base-1.1.8.tgz",
+      "integrity": "sha512-6CyAclxj3Nb0XT7GHK6K4zK6k2xJm6E4Ft0Ohjt4WgegiFUHEtFb2CGzmPmGBwoIhrLsqNLYfLr04Y1GePrzZg==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
     "node_modules/@splinetool/runtime": {
       "version": "1.9.23",
       "resolved": "https://registry.npmjs.org/@splinetool/runtime/-/runtime-1.9.23.tgz",
@@ -925,9 +937,9 @@
       }
     },
     "node_modules/@sveltejs/vite-plugin-svelte": {
-      "version": "4.0.0-next.6",
-      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-4.0.0-next.6.tgz",
-      "integrity": "sha512-7+bEFN5F9pthG6nOEHNz9yioHxNXK6yl+0GnTy9WOfxN/SvPykkH/Hs6MqTGjo47a9G2q3QXQnzuxG5WXNX4Tg==",
+      "version": "4.0.0-next.7",
+      "resolved": "https://registry.npmjs.org/@sveltejs/vite-plugin-svelte/-/vite-plugin-svelte-4.0.0-next.7.tgz",
+      "integrity": "sha512-yMUnAqquoayvBDztk1rWUgdtvjv7YcHgopCAB7sWl9SQht8U/7lqwTlJU0ZTAY09pFFRe6bbakd7YoiyyIvJiA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -936,7 +948,7 @@
         "deepmerge": "^4.3.1",
         "kleur": "^4.1.5",
         "magic-string": "^0.30.11",
-        "vitefu": "^0.2.5"
+        "vitefu": "^1.0.2"
       },
       "engines": {
         "node": "^18.0.0 || ^20.0.0 || >=22"
@@ -1320,6 +1332,16 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1545,7 +1567,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.0.0.tgz",
       "integrity": "sha512-Cf6VksWPsTuW01vU9Mk/3vRue91Zevka5SjyNf3nEpokFRuqt/KjUQoGAwq9qMmhpLTHmXzSIrFRw8zxWzmFBA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/esrap": {
@@ -2544,6 +2565,21 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/runed": {
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/runed/-/runed-0.15.2.tgz",
+      "integrity": "sha512-4rqCpoq3IezYYxgGo4ukboXdZ86Z7xPkQJzdIO0h0NVHVX0Hwg+X5rOnRWoqRHMYIwEGpr+tSA2ywhlzOcMF5g==",
+      "funding": [
+        "https://github.com/sponsors/huntabyte",
+        "https://github.com/sponsors/tglide"
+      ],
+      "dependencies": {
+        "esm-env": "^1.0.0"
+      },
+      "peerDependencies": {
+        "svelte": "^5.0.0-next.1"
+      }
+    },
     "node_modules/sade": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
@@ -3225,11 +3261,15 @@
       }
     },
     "node_modules/vitefu": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-0.2.5.tgz",
-      "integrity": "sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/vitefu/-/vitefu-1.0.2.tgz",
+      "integrity": "sha512-0/iAvbXyM3RiPPJ4lyD4w6Mjgtf4ejTK6TPvTNG3H32PLwuT0N/ZjJLiXug7ETE/LWtTeHw9WRv7uX/tIKYyKg==",
       "dev": true,
       "license": "MIT",
+      "workspaces": [
+        "tests/deps/*",
+        "tests/projects/*"
+      ],
       "peerDependencies": {
         "vite": "^3.0.0 || ^4.0.0 || ^5.0.0"
       },
diff --git a/ceremony/package.json b/ceremony/package.json
index 0d619c6e16..7c01d425b5 100644
--- a/ceremony/package.json
+++ b/ceremony/package.json
@@ -13,9 +13,10 @@
   "devDependencies": {
     "@sveltejs/adapter-static": "^3.0.4",
     "@sveltejs/kit": "^2.0.0",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0-next.7",
     "@total-typescript/ts-reset": "^0.6.1",
     "autoprefixer": "^10.4.20",
+    "clsx": "^2.1.1",
     "postcss": "^8.4.44",
     "svelte": "^5.0.0-next.1",
     "svelte-check": "^3.6.0",
@@ -25,10 +26,12 @@
     "vite": "^5.0.3"
   },
   "dependencies": {
+    "@scure/base": "^1.1.8",
     "@splinetool/runtime": "^1.9.23",
     "@supabase/supabase-js": "^2.45.3",
     "@tanstack/svelte-query": "^5.54.1",
     "neverthrow": "^7.1.0",
+    "runed": "^0.15.2",
     "svelte-sonner": "^0.3.27"
   }
 }
diff --git a/ceremony/src/lib/components/address/AddressForm.svelte b/ceremony/src/lib/components/address/AddressForm.svelte
new file mode 100644
index 0000000000..675c4da080
--- /dev/null
+++ b/ceremony/src/lib/components/address/AddressForm.svelte
@@ -0,0 +1,73 @@
+<script lang="ts">
+import clsx from "clsx"
+import { toast } from "svelte-sonner"
+import { watch, Debounced } from "runed"
+import type { ValidState } from "./index.ts"
+import { isValidBech32Address } from "./validator.ts"
+import type { HTMLInputAttributes } from "svelte/elements"
+
+interface Props extends HTMLInputAttributes {
+  class?: string
+  onValidation: (valid: ValidState) => ValidState
+}
+
+let { onValidation, class: className = "", ...props }: Props = $props()
+
+let inputText = $state("")
+const debouncedInputText = new Debounced(
+  () => inputText,
+  /**
+   * TODO: change this to 1s and during debounce, show a loading state
+   */
+  0
+)
+
+let validState: ValidState = $state("PENDING")
+
+$effect(() => {
+  if (validState === "INVALID") toast.error(`Address is not valid`)
+})
+
+const onAddressSubmit = (event: Event) => {
+  event.preventDefault()
+  if (!debouncedInputText.current) return
+  const addressValidation = isValidBech32Address(debouncedInputText.current)
+  validState = addressValidation ? "VALID" : "INVALID"
+  onValidation(validState)
+}
+</script>
+
+<form class="flex flex-col gap-2 min-w-[355px]">
+  <input
+    {...props}
+    type="text"
+    autocorrect="off"
+    autocomplete="off"
+    spellcheck="false"
+    autocapitalize="none"
+    bind:value={inputText}
+    placeholder="union1qp0wtsfltjk9rnvyu3fkdv0s0skp4y5y3py96f"
+    class={clsx([
+      className,
+      'text-md font-supermolot h-9 px-2 outline-none border-2',
+      validState === 'VALID'
+        ? 'border-2 border-green-500'
+        : validState === 'INVALID'
+          ? 'border-2 border-red-500'
+          : 'border-transparent',
+    ])}
+  />
+  <button
+    type="button"
+    onclick={onAddressSubmit}
+    disabled={inputText.length === 0}
+    class={clsx([
+      'hover:font-bold hover:bg-[#5FDFFC]',
+      'uppercase text-black w-full bg-[#A0ECFD] text-md font-supermolot h-9 px-2 font-semibold',
+    ])}
+  >
+    submit
+  </button>
+</form>
+
+<style lang="postcss"></style>
diff --git a/ceremony/src/lib/components/address/index.ts b/ceremony/src/lib/components/address/index.ts
new file mode 100644
index 0000000000..9603cf679d
--- /dev/null
+++ b/ceremony/src/lib/components/address/index.ts
@@ -0,0 +1,5 @@
+import AddressForm from "./AddressForm.svelte"
+
+export type ValidState = "PENDING" | "VALID" | "INVALID"
+
+export { AddressForm }
diff --git a/ceremony/src/lib/components/address/validator.ts b/ceremony/src/lib/components/address/validator.ts
new file mode 100644
index 0000000000..812c568048
--- /dev/null
+++ b/ceremony/src/lib/components/address/validator.ts
@@ -0,0 +1,15 @@
+import { bech32 } from "@scure/base"
+
+type Bech32Address<T extends string = string> = `${T}1${string}`
+export function isValidBech32Address(address: unknown): address is Bech32Address {
+  if (typeof address !== "string") return false
+
+  try {
+    const { prefix: _, words } = bech32.decode(address as Bech32Address)
+    const size = words.length
+    if ([20, 32].indexOf(size) === -1) return false
+    return true
+  } catch {
+    return false
+  }
+}
diff --git a/ceremony/src/routes/+page.svelte b/ceremony/src/routes/+page.svelte
index 6b6a714302..c9e0e1fa20 100644
--- a/ceremony/src/routes/+page.svelte
+++ b/ceremony/src/routes/+page.svelte
@@ -1,66 +1,63 @@
 <script lang="ts">
 import H1 from "$lib/components/typography/H1.svelte"
-import { onMount } from "svelte"
-//
-// let imageVisible = false
-// onMount(() => {
-//   imageVisible = true
-// })
+import { AddressForm, type ValidState } from "$lib/components/address/index.ts"
+
+let addressValidState: ValidState = $state("PENDING")
+
+$effect(() => {
+  console.info(`ADDRESS VALIDITY STATE: ${addressValidState}`)
+})
 </script>
 
 <section class="relative w-full h-full flex items-center justify-center overflow-hidden">
+  <AddressForm class="" onValidation={result => (addressValidState = result)} />
   <div class="max-w-7xl sm:px-6 lg:px-8">
     <div class="max-w-7xl sm:px-6 lg:px-8 fade-in-text">
       <H1 class="text-center">
-        Welcome to<br>Union Ceremony
+        Welcome to<br />Union Ceremony
       </H1>
     </div>
   </div>
-<!--  <img-->
-<!--          src="/images/whale.png"-->
-<!--          alt=""-->
-<!--          class="absolute -z-10 w-full h-full object-cover deep-sea-rise"-->
-<!--          class:visible={imageVisible}/>-->
 </section>
 
 <style>
-    .deep-sea-rise {
-        opacity: 0;
-        transform: scale(0.5) translateY(140px);
-        filter: brightness(0.1);
-        animation: riseFromDepth 2.5s ease-out forwards;
-    }
+  .deep-sea-rise {
+    opacity: 0;
+    transform: scale(0.5) translateY(140px);
+    filter: brightness(0.1);
+    animation: riseFromDepth 2.5s ease-out forwards;
+  }
 
-    .deep-sea-rise.visible {
-        opacity: 1;
-    }
+  .deep-sea-rise.visible {
+    opacity: 1;
+  }
 
-    @keyframes riseFromDepth {
-        0% {
-            opacity: 0;
-            transform: scale(0.5) translateY(140px);
-            filter: brightness(0.1);
-        }
-
-        100% {
-            opacity: 1;
-            transform: scale(1) translateY(0);
-            filter: brightness(1);
-        }
+  @keyframes riseFromDepth {
+    0% {
+      opacity: 0;
+      transform: scale(0.5) translateY(140px);
+      filter: brightness(0.1);
     }
 
-    .fade-in-text {
-        opacity: 0;
-        animation: fadeInText 1.5s ease-out forwards;
-        animation-delay: 2s;
+    100% {
+      opacity: 1;
+      transform: scale(1) translateY(0);
+      filter: brightness(1);
     }
+  }
+
+  .fade-in-text {
+    opacity: 0;
+    animation: fadeInText 1.5s ease-out forwards;
+    animation-delay: 2s;
+  }
 
-    @keyframes fadeInText {
-        0% {
-            opacity: 0;
-        }
-        100% {
-            opacity: 1;
-        }
+  @keyframes fadeInText {
+    0% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
     }
+  }
 </style>