From 6417a61393896b0b7f00728490980d0f75eb5ef1 Mon Sep 17 00:00:00 2001
From: Lukas <Lukas.nyberg@gmail.com>
Date: Thu, 19 Sep 2024 16:14:38 +0200
Subject: [PATCH] feat(ceremony): save progress

---
 .../src/lib/components/Contribution.svelte    |  85 ++++++++++++++
 .../src/lib/components/Contributions.svelte   |  48 ++++++++
 ceremony/src/lib/layout/Navbar/index.svelte   |   4 +
 ceremony/src/lib/supabase/queries.ts          |   1 +
 .../src/routes/contributions/+page.svelte     | 109 +-----------------
 ceremony/static/images/ceremony.png           |   3 +
 6 files changed, 146 insertions(+), 104 deletions(-)
 create mode 100644 ceremony/src/lib/components/Contribution.svelte
 create mode 100644 ceremony/src/lib/components/Contributions.svelte
 create mode 100644 ceremony/static/images/ceremony.png

diff --git a/ceremony/src/lib/components/Contribution.svelte b/ceremony/src/lib/components/Contribution.svelte
new file mode 100644
index 0000000000..65c2fcc3c5
--- /dev/null
+++ b/ceremony/src/lib/components/Contribution.svelte
@@ -0,0 +1,85 @@
+<script lang="ts">
+import { getUserContribution } from "$lib/supabase"
+import Spinner from "$lib/components/Spinner.svelte"
+import H2 from "$lib/components/typography/H2.svelte"
+import Button from "$lib/components/Button.svelte"
+import { toast } from "svelte-sonner"
+import { page } from "$app/stores"
+
+type Props = {
+  hash: string
+}
+
+let { hash }: Props = $props()
+
+function hexToUint8Array(hexString: string) {
+  return new Uint8Array(hexString.match(/.{1,2}/g)?.map(byte => Number.parseInt(byte, 16)) || [])
+}
+
+function uint8ArrayToUtf8(bytes: Uint8Array) {
+  return new TextDecoder().decode(bytes)
+}
+
+function decodeHexString(hexString: string) {
+  return uint8ArrayToUtf8(hexToUint8Array(hexString))
+}
+
+async function copyToClipboard(text: string, label: string) {
+  try {
+    await navigator.clipboard.writeText(text)
+    toast.success(`Copied ${label}!`)
+  } catch (err) {
+    console.error("Failed to copy text: ", err)
+    toast.error(`Failed to copy ${label} to clipboard.`)
+  }
+}
+
+const imagePath = "/images/ceremony.png"
+let imageUrl = $derived(new URL(imagePath, $page.url.origin).href)
+</script>
+
+<svelte:head>
+  <meta property="og:type" content="Website"/>
+  <meta property="og:site_name" content="Union Ceremony"/>
+  <meta property="og:locale" content="en"/>
+  <meta property="og:image:type" content="image/png"/>
+  <meta property="og:image:width" content="1200"/>
+  <meta property="og:image:height" content="675"/>
+  <meta name="twitter:card" content="summary_large_image"/>
+  <meta name="twitter:site" content="@union_build"/>
+  <meta name="twitter:creator" content="@union_build"/>
+  <meta property="og:image" content={imageUrl}/>
+  <meta property="og:image:secure_url" content={imageUrl}/>
+  <meta name="twitter:image" content={imageUrl}/>
+</svelte:head>
+
+{#await getUserContribution(hash)}
+  <Spinner class="size-5 text-union-accent-500"/>
+{:then contribution}
+  {#if contribution}
+    <div class="flex flex-col items-start gap-1 px-3 py-2">
+      <div>
+        <H2>Contributor: <span class="!text-union-accent-500">{contribution.user_name}</span></H2>
+      </div>
+
+      <div class="flex flex-col gap-4">
+        <div>
+          <H2 class="mb-2">Public key</H2>
+          <pre class="text-white whitespace-pre-wrap bg-neutral-800 p-4 mb-4">{decodeHexString(contribution.public_key)}</pre>
+          <Button onclick={() => copyToClipboard(decodeHexString(contribution.public_key), "public key")}>Copy
+            Public
+            key
+          </Button>
+        </div>
+
+        <div>
+          <H2 class="mb-2">Signature</H2>
+          <pre class="text-white whitespace-pre-wrap bg-neutral-800 p-4 mb-4">{decodeHexString(contribution.signature)}</pre>
+          <Button onclick={() => copyToClipboard(decodeHexString(contribution.signature), "signature")}>Copy
+            Signature
+          </Button>
+        </div>
+      </div>
+    </div>
+  {/if}
+{/await}
\ No newline at end of file
diff --git a/ceremony/src/lib/components/Contributions.svelte b/ceremony/src/lib/components/Contributions.svelte
new file mode 100644
index 0000000000..ef688e5f3a
--- /dev/null
+++ b/ceremony/src/lib/components/Contributions.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+  import Spinner from "$lib/components/Spinner.svelte"
+  import H4 from "$lib/components/typography/H4.svelte"
+  import Blink from "$lib/components/Blink.svelte"
+  import Text from "$lib/components/typography/Text.svelte"
+  import {getContributions} from "$lib/supabase"
+
+  let intervalId: NodeJS.Timeout | number
+  let contributions = $state()
+
+  async function loadContributions() {
+    contributions = await getContributions()
+  }
+
+  $effect(() => {
+    loadContributions()
+    intervalId = setInterval(loadContributions, 1000 * 5)
+
+    return () => {
+      if (intervalId) clearInterval(intervalId)
+    }
+  })
+</script>
+{#if contributions}
+
+  <div class="flex flex-col items-center h-svh overflow-y-auto pb-24 pt-36 w-full">
+    <div class="w-full h-48 bg-gradient-to-b via-black from-black to-transparent absolute top-0"></div>
+    <div class="flex flex-col items-center max-w-md">
+      <div class="rounded-full border-[2px] h-8 w-8"></div>
+      <div class="h-24 w-[2px] bg-white"></div>
+      {#each contributions as contribution, index }
+        <a href="/contributions?hash={contribution.public_key_hash}" class="flex items-center gap-4 w-full">
+
+          <Text>{(index + 1) * 10}M</Text>
+          <div class="text-white flex gap-1 items-center border-white border px-3 py-2 w-full">
+            <img class="size-7" src={contribution.avatar_url} alt="">
+            <Text class="uppercase max-w-48 truncate">{contribution.user_name}</Text>
+          </div>
+        </a>
+        {#if index !== contributions.length - 1}
+          <div class="h-12 w-[2px] bg-white"></div>
+        {/if}
+      {/each}
+    </div>
+  </div>
+{:else}
+  <Spinner class="size-5 text-union-accent-500"/>
+{/if}
\ No newline at end of file
diff --git a/ceremony/src/lib/layout/Navbar/index.svelte b/ceremony/src/lib/layout/Navbar/index.svelte
index 19dd503b55..d38d1f9ab2 100644
--- a/ceremony/src/lib/layout/Navbar/index.svelte
+++ b/ceremony/src/lib/layout/Navbar/index.svelte
@@ -54,10 +54,12 @@ let loggedIn = $derived(!!user.session?.user.id)
       <div class="hidden md:block">
         {#if user.session}
           <div class="flex items-center gap-4">
+            <NavLink class="p-2" href="/contributions">Contributions</NavLink>
             <Button onclick={logout}>Log out</Button>
           </div>
         {:else}
           <div class="flex items-center gap-4">
+            <NavLink class="p-2" href="/contributions">Contributions</NavLink>
             <NavLink href="/auth/dive">Dive in</NavLink>
           </div>
         {/if}
@@ -74,8 +76,10 @@ let loggedIn = $derived(!!user.session?.user.id)
       <div class="md:hidden mt-4 w-full bg-black">
         <div class="flex flex-col divide-y divide-white/50">
           {#if user.session}
+            <NavLink class="p-2" href="/contributions">Contributions</NavLink>
             <Button class="py-2" onclick={logout}>Log out</Button>
           {:else}
+            <NavLink class="p-2" href="/contributions">Contributions</NavLink>
             <NavLink class="p-2" href="/auth/dive">Dive in</NavLink>
           {/if}
         </div>
diff --git a/ceremony/src/lib/supabase/queries.ts b/ceremony/src/lib/supabase/queries.ts
index d87f7f3f91..0b26d324f4 100644
--- a/ceremony/src/lib/supabase/queries.ts
+++ b/ceremony/src/lib/supabase/queries.ts
@@ -71,6 +71,7 @@ export const queryContributions = async () => {
   const { data, error } = await supabase
     .from("users_contribution")
     .select("public_key_hash, user_name, avatar_url")
+    .order('time_verified', { ascending: false })
 
   return { data, error }
 }
diff --git a/ceremony/src/routes/contributions/+page.svelte b/ceremony/src/routes/contributions/+page.svelte
index b353603e33..5128ba04ba 100644
--- a/ceremony/src/routes/contributions/+page.svelte
+++ b/ceremony/src/routes/contributions/+page.svelte
@@ -1,112 +1,13 @@
 <script lang="ts">
-import { getContributions, getUserContribution } from "$lib/supabase"
-import Spinner from "$lib/components/Spinner.svelte"
-import Text from "$lib/components/typography/Text.svelte"
-import Blink from "$lib/components/Blink.svelte"
-import H4 from "$lib/components/typography/H4.svelte"
 import { page } from "$app/stores"
-import H2 from "$lib/components/typography/H2.svelte"
-import Button from "$lib/components/Button.svelte"
-import { toast } from "svelte-sonner"
+import Contribution from "$lib/components/Contribution.svelte"
+import Contributions from "$lib/components/Contributions.svelte"
 
 let hash = $derived($page.url.searchParams.get("hash"))
-
-function hexToUint8Array(hexString: string) {
-  return new Uint8Array(hexString.match(/.{1,2}/g)?.map(byte => Number.parseInt(byte, 16)) || [])
-}
-
-function uint8ArrayToUtf8(bytes: Uint8Array) {
-  return new TextDecoder().decode(bytes)
-}
-
-function decodeHexString(hexString: string) {
-  return uint8ArrayToUtf8(hexToUint8Array(hexString))
-}
-
-async function copyToClipboard(text: string, label: string) {
-  try {
-    await navigator.clipboard.writeText(text)
-    toast.success(`Copied ${label}!`)
-  } catch (err) {
-    console.error("Failed to copy text: ", err)
-    toast.error(`Failed to copy ${label} to clipboard.`)
-  }
-}
-
-let intervalId: NodeJS.Timeout | number
-let contributions = $state()
-
-async function loadContributions() {
-  contributions = await getContributions()
-}
-
-$effect(() => {
-  loadContributions()
-  intervalId = setInterval(loadContributions, 1000 * 5)
-
-  return () => {
-    if (intervalId) clearInterval(intervalId)
-  }
-})
 </script>
 
 {#if hash}
-  {#await getUserContribution(hash)}
-    <Spinner class="size-5 text-union-accent-500"/>
-  {:then contribution}
-    {#if contribution}
-      <div class="flex flex-col items-start gap-1 px-3 py-2">
-        <div>
-          <H2>Contributor: <span class="!text-union-accent-500">{contribution.user_name}</span></H2>
-        </div>
-
-        <div class="flex flex-col gap-4">
-          <div>
-            <H2 class="mb-2">Public key</H2>
-            <pre class="text-white whitespace-pre-wrap bg-neutral-800 p-4 mb-4">{decodeHexString(contribution.public_key)}</pre>
-            <Button onclick={() => copyToClipboard(decodeHexString(contribution.public_key), "public key")}>Copy
-              Public
-              key
-            </Button>
-          </div>
-
-          <div>
-            <H2 class="mb-2">Signature</H2>
-            <pre class="text-white whitespace-pre-wrap bg-neutral-800 p-4 mb-4">{decodeHexString(contribution.signature)}</pre>
-            <Button onclick={() => copyToClipboard(decodeHexString(contribution.signature), "signature")}>Copy
-              Signature
-            </Button>
-          </div>
-        </div>
-      </div>
-    {/if}
-  {/await}
-  {:else}
-  {#if contributions}
-    <div class="flex flex-col-reverse items-center h-svh overflow-y-auto pb-24 pt-36 w-full">
-      <div class="w-full h-48 bg-gradient-to-b via-black from-black to-transparent absolute top-0"></div>
-      <div class="flex flex-col items-center max-w-sm">
-        {#each contributions as contribution, index }
-          {#if index !== 0}
-            <div class="h-4 w-[2px] bg-white"></div>
-          {/if}
-          <a href="/contributions?hash={contribution.public_key_hash}"
-             class="text-white flex gap-1 items-center border-white border px-3 py-2 w-full">
-            <img class="size-7" src={contribution.avatar_url} alt="">
-            <Text class="uppercase max-w-48 truncate">{contribution.user_name}</Text>
-          </a>
-        {/each}
-        <div class="h-4 w-[2px] bg-white"></div>
-        <div class="text-white flex gap-2 items-center border-white border px-3 py-2 mb-16">
-          <Spinner class="size-7 text-union-accent-500"/>
-          <span>Next contribution...</span>
-        </div>
-        <H4>
-          <Blink/>
-        </H4>
-      </div>
-    </div>
-  {:else}
-    <Spinner class="size-5 text-union-accent-500"/>
-  {/if}
+  <Contribution {hash}/>
+{:else}
+  <Contributions/>
 {/if}
diff --git a/ceremony/static/images/ceremony.png b/ceremony/static/images/ceremony.png
new file mode 100644
index 0000000000..685127048d
--- /dev/null
+++ b/ceremony/static/images/ceremony.png
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:fdd699998da7cb22a835aeb3d974e1e54b2b4d61ffd074a826e9c9ab80458c73
+size 299774