fix(ceremony): can't use dynamic route due to prerender

unionlabs · Sep 19, 2024 · 6897ab9 · 6897ab9
1 parent 06d8150
commit 6897ab9
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 308 deletions.
diff --git a/ceremony/src/lib/supabase/index.ts b/ceremony/src/lib/supabase/index.ts
@@ -129,20 +129,9 @@ export const getContributions = async () => {
 }
 
 export const getUserContribution = async (hash: string) => {
+  console.log(hash)
   const { data, error } = await queryUserContribution(hash)
-  if (error || !data)
-    return {
-      id: "5515a415-a96e-4ec6-9cca-05d7cac203f0",
-      user_name: "Lukas",
-      avatar_url: "https://avatars.githubusercontent.com/u/36674091?v=4",
-      seq: 12,
-      payload_id: "d6533ce0-17e3-48d1-b738-f915d009d5c9",
-      public_key:
-        "2d2d2d2d2d424547494e20504750205055424c4943204b455920424c4f434b2d2d2d2d2d0a0a786a4d455a7572793268594a4b7759424241486152773842415164416b544d3875744d6b6562554d653173666a5a4c5877367054446d4d7457665259526d4c560a3849504f50464c4e466d78316132467a4c6d3535596d56795a30426e625746706243356a6232334367775151466767414b77495a415155435a7572327a5149620a4167494c4351495641414557466945452b486957756b356a46307a412b6c477158726b2f61467831412f554143676b5158726b2f61467831412f58597867442b0a4a4170655675726872596676615659754170545550354e68666238732b616a796353517967365953417863412f32313163634a555477632f5251525a62582b750a62344b6f4e496465786f346a6b5262306b59716c2b3441480a3d3171504d0a2d2d2d2d2d454e4420504750205055424c4943204b455920424c4f434b2d2d2d2d2d0a",
-      signature:
-        "2d2d2d2d2d424547494e20504750205349474e4544204d4553534147452d2d2d2d2d0a486173683a205348413235360a0a305f5f5f5f5f5f30202d2030303030303030302d303030302d303030302d303030302d303030303030303030303030202d2064363533336365302d313765332d343864312d623733382d663931356430303964356339202d20383562323331323233363138633665343830373963393365356335623439373366383030623733323530313337326564333231383139316464356434366138300a2d2d2d2d2d424547494e20504750205349474e41545552452d2d2d2d2d0a0a776e5545415259494142305749515434654a6136546d4d58544d4436556170657554396f58485544395155435a7572327a51414b435242657554396f584855440a39555737415143654943472f76686534483674556775476d416135683248444d4252356a776b6c59715647596e2f5375346744384474536f2f634f77426768360a485657726f393842526e324d317952704d684279745839513847767876676b3d0a3d4d4235480a2d2d2d2d2d454e4420504750205349474e41545552452d2d2d2d2d0a",
-      public_key_hash: "174874cebccadc3e169c8826b00171268200050e428427d0757937d2cf407d36"
-    }
+  if (error || !data) return undefined
 
   return data
 }
diff --git a/ceremony/src/lib/supabase/queries.ts b/ceremony/src/lib/supabase/queries.ts
@@ -82,7 +82,5 @@ export const queryUserContribution = async (hash: string) => {
     .eq("public_key_hash", hash)
     .single()
 
-  console.log(data)
-
   return { data, error }
 }
diff --git a/ceremony/src/routes/contributions/+page.svelte b/ceremony/src/routes/contributions/+page.svelte
@@ -1,217 +1,46 @@
 <script lang="ts">
-import { getContributions } from "$lib/supabase"
+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"
 
-let intervalId: NodeJS.Timeout | number
-let contributions = $state([
-  {
-    public_key_hash: "174874cebccadc3e169c8826b00171268200050e428427d0757937d2cf407d36",
-    user_name: "Lukas",
-    avatar_url: "https://avatars.githubusercontent.com/u/36674091?v=4"
-  },
-  {
-    public_key_hash: "39945feba9bcc2ee19861935144a5a71df572d73702eb84b24427810c9707200",
-    user_name: "Hussein AIT LAHCEN",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocKJJ_6Rtsc9qEp8-tMsR3cnxXm2YZbo2TCQslR9THnHbaL6=s96-c"
-  },
-  {
-    public_key_hash: "e8feb4e87a8dba95f1b6b07c9d856a0f3e079769cafc497ea1e9cc9c239f6f0c",
-    user_name: "cor",
-    avatar_url: "https://avatars.githubusercontent.com/u/4728062?v=4"
-  },
-  {
-    public_key_hash: "98442419f2e7cf932fe001081a293ed19966aa29ef50353586f100cf1d524d8f",
-    user_name: "Kaylei Fleming",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocK2e14tsvQf67Pkds0U6kXNdpzfzOYv1BsZgHCoiWeUBvcEeg=s96-c"
-  },
-  {
-    public_key_hash: "174874cebccadc3e169c8826b00171268200050e428427d0757937d2cf407d36",
-    user_name: "Lukas",
-    avatar_url: "https://avatars.githubusercontent.com/u/36674091?v=4"
-  },
-  {
-    public_key_hash: "39945feba9bcc2ee19861935144a5a71df572d73702eb84b24427810c9707200",
-    user_name: "Hussein AIT LAHCEN",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocKJJ_6Rtsc9qEp8-tMsR3cnxXm2YZbo2TCQslR9THnHbaL6=s96-c"
-  },
-  {
-    public_key_hash: "e8feb4e87a8dba95f1b6b07c9d856a0f3e079769cafc497ea1e9cc9c239f6f0c",
-    user_name: "cor",
-    avatar_url: "https://avatars.githubusercontent.com/u/4728062?v=4"
-  },
-  {
-    public_key_hash: "98442419f2e7cf932fe001081a293ed19966aa29ef50353586f100cf1d524d8f",
-    user_name: "Kaylei Fleming",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocK2e14tsvQf67Pkds0U6kXNdpzfzOYv1BsZgHCoiWeUBvcEeg=s96-c"
-  },
-  {
-    public_key_hash: "174874cebccadc3e169c8826b00171268200050e428427d0757937d2cf407d36",
-    user_name: "Lukas",
-    avatar_url: "https://avatars.githubusercontent.com/u/36674091?v=4"
-  },
-  {
-    public_key_hash: "39945feba9bcc2ee19861935144a5a71df572d73702eb84b24427810c9707200",
-    user_name: "Hussein AIT LAHCEN",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocKJJ_6Rtsc9qEp8-tMsR3cnxXm2YZbo2TCQslR9THnHbaL6=s96-c"
-  },
-  {
-    public_key_hash: "e8feb4e87a8dba95f1b6b07c9d856a0f3e079769cafc497ea1e9cc9c239f6f0c",
-    user_name: "cor",
-    avatar_url: "https://avatars.githubusercontent.com/u/4728062?v=4"
-  },
-  {
-    public_key_hash: "98442419f2e7cf932fe001081a293ed19966aa29ef50353586f100cf1d524d8f",
-    user_name: "Kaylei Fleming",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocK2e14tsvQf67Pkds0U6kXNdpzfzOYv1BsZgHCoiWeUBvcEeg=s96-c"
-  },
-  {
-    public_key_hash: "bf75d0b4d76e7ffa96a532109dd6fd6a57a0f76b0cbd5492b6db2caccbcc1ae5",
-    user_name: "ben",
-    avatar_url: "https://avatars.githubusercontent.com/u/57334811?v=4"
-  },
-  {
-    public_key_hash: "39945feba9bcc2ee19861935144a5a71df572d73702eb84b24427810c9707200",
-    user_name: "Hussein AIT LAHCEN",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocKJJ_6Rtsc9qEp8-tMsR3cnxXm2YZbo2TCQslR9THnHbaL6=s96-c"
-  },
-  {
-    public_key_hash: "e8feb4e87a8dba95f1b6b07c9d856a0f3e079769cafc497ea1e9cc9c239f6f0c",
-    user_name: "cor",
-    avatar_url: "https://avatars.githubusercontent.com/u/4728062?v=4"
-  },
-  {
-    public_key_hash: "98442419f2e7cf932fe001081a293ed19966aa29ef50353586f100cf1d524d8f",
-    user_name: "Kaylei Fleming",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocK2e14tsvQf67Pkds0U6kXNdpzfzOYv1BsZgHCoiWeUBvcEeg=s96-c"
-  },
-  {
-    public_key_hash: "174874cebccadc3e169c8826b00171268200050e428427d0757937d2cf407d36",
-    user_name: "Lukas",
-    avatar_url: "https://avatars.githubusercontent.com/u/36674091?v=4"
-  },
-  {
-    public_key_hash: "39945feba9bcc2ee19861935144a5a71df572d73702eb84b24427810c9707200",
-    user_name: "Hussein AIT LAHCEN",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocKJJ_6Rtsc9qEp8-tMsR3cnxXm2YZbo2TCQslR9THnHbaL6=s96-c"
-  },
-  {
-    public_key_hash: "e8feb4e87a8dba95f1b6b07c9d856a0f3e079769cafc497ea1e9cc9c239f6f0c",
-    user_name: "cor",
-    avatar_url: "https://avatars.githubusercontent.com/u/4728062?v=4"
-  },
-  {
-    public_key_hash: "98442419f2e7cf932fe001081a293ed19966aa29ef50353586f100cf1d524d8f",
-    user_name: "Kaylei Fleming",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocK2e14tsvQf67Pkds0U6kXNdpzfzOYv1BsZgHCoiWeUBvcEeg=s96-c"
-  },
-  {
-    public_key_hash: "174874cebccadc3e169c8826b00171268200050e428427d0757937d2cf407d36",
-    user_name: "Lukas",
-    avatar_url: "https://avatars.githubusercontent.com/u/36674091?v=4"
-  },
-  {
-    public_key_hash: "39945feba9bcc2ee19861935144a5a71df572d73702eb84b24427810c9707200",
-    user_name: "Hussein AIT LAHCEN",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocKJJ_6Rtsc9qEp8-tMsR3cnxXm2YZbo2TCQslR9THnHbaL6=s96-c"
-  },
-  {
-    public_key_hash: "e8feb4e87a8dba95f1b6b07c9d856a0f3e079769cafc497ea1e9cc9c239f6f0c",
-    user_name: "cor",
-    avatar_url: "https://avatars.githubusercontent.com/u/4728062?v=4"
-  },
-  {
-    public_key_hash: "98442419f2e7cf932fe001081a293ed19966aa29ef50353586f100cf1d524d8f",
-    user_name: "Kaylei Fleming",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocK2e14tsvQf67Pkds0U6kXNdpzfzOYv1BsZgHCoiWeUBvcEeg=s96-c"
-  },
-  {
-    public_key_hash: "174874cebccadc3e169c8826b00171268200050e428427d0757937d2cf407d36",
-    user_name: "Lukas",
-    avatar_url: "https://avatars.githubusercontent.com/u/36674091?v=4"
-  },
-  {
-    public_key_hash: "39945feba9bcc2ee19861935144a5a71df572d73702eb84b24427810c9707200",
-    user_name: "Hussein AIT LAHCEN",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocKJJ_6Rtsc9qEp8-tMsR3cnxXm2YZbo2TCQslR9THnHbaL6=s96-c"
-  },
-  {
-    public_key_hash: "e8feb4e87a8dba95f1b6b07c9d856a0f3e079769cafc497ea1e9cc9c239f6f0c",
-    user_name: "cor",
-    avatar_url: "https://avatars.githubusercontent.com/u/4728062?v=4"
-  },
-  {
-    public_key_hash: "98442419f2e7cf932fe001081a293ed19966aa29ef50353586f100cf1d524d8f",
-    user_name: "Kaylei Fleming",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocK2e14tsvQf67Pkds0U6kXNdpzfzOYv1BsZgHCoiWeUBvcEeg=s96-c"
-  },
-  {
-    public_key_hash: "bf75d0b4d76e7ffa96a532109dd6fd6a57a0f76b0cbd5492b6db2caccbcc1ae5",
-    user_name: "ben",
-    avatar_url: "https://avatars.githubusercontent.com/u/57334811?v=4"
-  },
-  {
-    public_key_hash: "39945feba9bcc2ee19861935144a5a71df572d73702eb84b24427810c9707200",
-    user_name: "Hussein AIT LAHCEN",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocKJJ_6Rtsc9qEp8-tMsR3cnxXm2YZbo2TCQslR9THnHbaL6=s96-c"
-  },
-  {
-    public_key_hash: "e8feb4e87a8dba95f1b6b07c9d856a0f3e079769cafc497ea1e9cc9c239f6f0c",
-    user_name: "cor",
-    avatar_url: "https://avatars.githubusercontent.com/u/4728062?v=4"
-  },
-  {
-    public_key_hash: "98442419f2e7cf932fe001081a293ed19966aa29ef50353586f100cf1d524d8f",
-    user_name: "Kaylei Fleming",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocK2e14tsvQf67Pkds0U6kXNdpzfzOYv1BsZgHCoiWeUBvcEeg=s96-c"
-  },
-  {
-    public_key_hash: "39945feba9bcc2ee19861935144a5a71df572d73702eb84b24427810c9707200",
-    user_name: "Hussein AIT LAHCEN",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocKJJ_6Rtsc9qEp8-tMsR3cnxXm2YZbo2TCQslR9THnHbaL6=s96-c"
-  },
-  {
-    public_key_hash: "e8feb4e87a8dba95f1b6b07c9d856a0f3e079769cafc497ea1e9cc9c239f6f0c",
-    user_name: "cor",
-    avatar_url: "https://avatars.githubusercontent.com/u/4728062?v=4"
-  },
-  {
-    public_key_hash: "98442419f2e7cf932fe001081a293ed19966aa29ef50353586f100cf1d524d8f",
-    user_name: "Kaylei Fleming",
-    avatar_url:
-      "https://lh3.googleusercontent.com/a/ACg8ocK2e14tsvQf67Pkds0U6kXNdpzfzOYv1BsZgHCoiWeUBvcEeg=s96-c"
+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()
 
-function loadContributions() {
-  contributions.push({
-    public_key_hash: "e8feb4e87a8dba95f1b6b07c9d856a0f3e079769cafc497ea1e9cc9c239f6f0c",
-    user_name: "cor",
-    avatar_url: "https://avatars.githubusercontent.com/u/4728062?v=4"
-  })
-  // contributions = await getContributions();
+async function loadContributions() {
+  contributions = await getContributions()
 }
 
 $effect(() => {
+  loadContributions()
   intervalId = setInterval(loadContributions, 1000 * 5)
 
   return () => {
@@ -220,30 +49,63 @@ $effect(() => {
 })
 </script>
 
-{#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/{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>
+{#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>
-      <H4>
-        <Blink/>
-      </H4>
     </div>
-  </div>
-{:else}
-  <Spinner class="size-5 text-union-accent-500"/>
-{/if}
+  {:else}
+    <Spinner class="size-5 text-union-accent-500"/>
+  {/if}
+{/if}