fix(ceremony): changes (#2948)

ceremony/src/lib/client/http.ts

@@ -19,26 +19,34 @@ export const get = async <T>(
     )
     const res = await _fetch(url, browser && credentials ? { credentials: "include" } : {})
     if (!res.ok) throw res.status
-    const data: T = await res.json()
-    return data ?? undefined
+    const data = await res.json()
+    return data as T
   } catch (error) {
     return undefined
   }
 }
 
-export const post = async <T>(resource: string, params: Params, body: object, _fetch = fetch) => {
+export const post = async <T>(
+  resource: string,
+  params: Params,
+  body: Record<string, unknown>,
+  _fetch: Fetch = fetch
+): Promise<T | undefined> => {
   try {
     const url = new URL(`${host}/${resource}`)
     Object.entries(params).forEach(
       ([key, value]) => value !== undefined && url.searchParams.set(key, `${value}`)
     )
     const res = await _fetch(url, {
       method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
       body: JSON.stringify(body)
     })
     if (!res.ok) throw res.status
-    const data: T = await res.json()
-    return data ?? undefined
+    const data = await res.json()
+    return data as T
   } catch (error) {
     return undefined
   }

ceremony/src/lib/client/index.ts

@@ -1,20 +1,21 @@
 import { get, post } from "$lib/client/http.ts"
-import type { ContributeBody, Status } from "$lib/client/types.ts"
 import { user } from "$lib/stores/user.svelte.ts"
 import { getQueuePayloadId } from "$lib/supabase/queries.ts"
+import type { ClientState, ContributeBody } from "$lib/client/types.ts"
 
-export const start = async (): Promise<Status | undefined> => {
+export const start = async (): Promise<ClientState | undefined> => {
   const userId = user?.session?.user.id
+  const email = user?.session?.user?.email
 
   if (!userId) {
-    console.error("User not logged in")
+    console.log("User not logged in")
     return
   }
 
   const { data, error } = await getQueuePayloadId(userId)
 
   if (error) {
-    console.error("Error fetching payload_id:", error)
+    console.log("Error fetching payload_id:", error)
     return
   }
 
@@ -29,21 +30,20 @@ export const start = async (): Promise<Status | undefined> => {
     jwt: user?.session?.access_token,
     supabaseProject: import.meta.env.VITE_SUPABASE_URL,
     apiKey: import.meta.env.VITE_SUPABASE_ANON_KEY,
-    bucket: import.meta.env.VITE_BUCKET_ID
+    bucket: import.meta.env.VITE_BUCKET_ID,
+    userEmail: email
   }
 
-  return post<Status>("contribute", {}, contributeBody)
+  return post<ClientState>("contribute", {}, contributeBody)
 }
 
-export const checkStatus = async (): Promise<{ status: Status }> => {
+export const checkState = async (): Promise<ClientState> => {
   try {
-    const status = await get<Status>("contribute", {})
-    if (status === undefined) {
-      throw new Error("Status is undefined. Is the client up?")
-    }
-    return { status }
+    const response = await get<ClientState>("contribute", {})
+
+    return response ?? "offline"
   } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : String(error)
-    throw new Error(`Error fetching status: ${errorMessage}`)
+    console.log("Error fetching status:", error)
+    return "offline"
   }
 }

ceremony/src/lib/client/types.ts

@@ -1,15 +1,17 @@
-export interface Status {
-  status: "idle" | "initializing" | "contributionStarted" | "contributionEnded" | "successful"
-  downloadStarted?: string
-  downloading?: {
-    file: string
-    progress: number
-  }
-  downloadEnded?: string
-  uploadStarted?: string
-  uploadEnded?: string
-  failed?: string
-}
+export type ClientState =
+  | "idle"
+  | "initializing"
+  | "downloadStarted"
+  | "downloading"
+  | "downloadEnded"
+  | "contributionStarted"
+  | "contributionEnded"
+  | "uploadStarted"
+  | "uploadEnded"
+  | "failed"
+  | "successful"
+  | "offline"
+  | undefined
 
 export interface ContributeBody {
   supabaseProject: string
@@ -18,9 +20,5 @@ export interface ContributeBody {
   apiKey: string
   contributorId: string
   payloadId: string
-}
-
-export interface QueueData {
-  id: string
-  joined: string
+  userEmail: string
 }

ceremony/src/lib/components/Button.svelte

@@ -1,7 +1,14 @@
 <script lang="ts">
-let { children, class: className = "", ...props } = $props()
+import Spinner from "$lib/components/Spinner.svelte"
+
+let { children, class: className = "", loading = false, ...props } = $props()
 </script>
 
-<button {...props} class={`flex items-center gap-2 px-4 py-2 text-black font-bold hover:text-black bg-union-accent-500 uppercase ${className}`}>
+<button
+        {...props}
+        class={`flex items-center gap-2 px-4 py-2 text-black font-bold hover:text-black bg-union-accent-500 uppercase ${className}`}>
   {@render children()}
+  {#if loading}
+    <Spinner class="size-4"/>
+  {/if}
 </button>

ceremony/src/lib/components/Ceremony.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+import type { ContributorState } from "$lib/stores/state.svelte.ts"
+import H1 from "$lib/components/typography/H1.svelte"
+import H3 from "$lib/components/typography/H3.svelte"
+import H2 from "$lib/components/typography/H2.svelte"
+import Install from "$lib/components/Install.svelte"
+import { start } from "$lib/client"
+import H4 from "$lib/components/typography/H4.svelte"
+import { AddressForm, type ValidState } from "$lib/components/address"
+
+type Props = {
+  contributor: ContributorState
+}
+
+let { contributor }: Props = $props()
+
+$effect(() => {
+  console.info(`ADDRESS VALIDITY STATE: ${addressValidState}`)
+  if (contributor?.state === "contribute") {
+    start()
+  }
+})
+
+window.addEventListener("beforeunload", (e: BeforeUnloadEvent) => {
+  e.preventDefault()
+  e.returnValue = ""
+})
+
+let addressValidState: ValidState = $state("PENDING")
+</script>
+
+<div class="p-8 bg-gradient-to-t from-transparent via-black/50 to-transparent backdrop-blur w-full flex items-center justify-center flex-col min-h-48">
+
+  {#if contributor.state === 'inQueue'}
+    <H1>Your position: <span class="text-union-accent-500">{contributor.queueState.position}</span></H1>
+    <H2>Queue length: <span class="text-union-accent-500">{contributor.queueState.count}</span></H2>
+
+    <!--Todo format time correctly if we want this, can probably be thousands of minutes?-->
+    <H3>Waiting time: <span class="text-union-accent-500">{contributor.queueState.estimatedTime} minutes</span> (est.).
+    </H3>
+
+    {#if contributor.clientState === 'offline'}
+      <Install/>
+    {/if}
+
+  {:else if contributor.state === 'contribute'}
+    <H1>Starting contribution...</H1>
+  {:else if contributor.state === 'contributing'}
+    <H1>Contributing...</H1>
+  {:else if contributor.state === 'verifying'}
+    <H1>Verifying your contribution...</H1>
+  {:else if contributor.state === 'contributed'}
+
+    <div class="flex flex-col justify-center items-center gap-4">
+      <H1>Thank you! Your contribution is completed.</H1>
+      <H2>Get your nft</H2>
+      <AddressForm class="" onValidation={result => (addressValidState = result)}/>
+    </div>
+
+  {:else if contributor.state === 'noClient'}
+    <H1>No client. Cannot start contribution.</H1>
+    <Install/>
+
+  {:else}
+    <H1>Not able to contribute at this time</H1>
+  {/if}
+
+</div>
+
+
+<div class="absolute bottom-10 left-10">
+  <H4>Client: <span class="text-union-accent-500">{contributor.clientState}</span></H4>
+</div>

ceremony/src/lib/components/Counter/index.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+import Zero from "./numbers/zero.svelte"
+import One from "./numbers/one.svelte"
+import Two from "./numbers/two.svelte"
+import Three from "./numbers/three.svelte"
+import Four from "./numbers/four.svelte"
+import Five from "./numbers/five.svelte"
+import Six from "./numbers/six.svelte"
+import Seven from "./numbers/seven.svelte"
+import Eight from "./numbers/eight.svelte"
+import Nine from "./numbers/nine.svelte"
+import H4 from "$lib/components/typography/H4.svelte"
+
+type Props = {
+  targetTimestamp: number
+}
+
+const { targetTimestamp }: Props = $props()
+
+let hours = $state("00")
+let minutes = $state("00")
+let seconds = $state("00")
+
+const components = [Zero, One, Two, Three, Four, Five, Six, Seven, Eight, Nine]
+
+let interval: ReturnType<typeof setInterval>
+
+function updateCountdown(): void {
+  const now: number = Math.floor(Date.now() / 1000)
+  const distance: number = targetTimestamp - now
+
+  if (distance < 0) {
+    clearInterval(interval)
+    hours = minutes = seconds = "00"
+    return
+  }
+
+  hours = Math.floor(distance / 3600)
+    .toString()
+    .padStart(2, "0")
+  minutes = Math.floor((distance % 3600) / 60)
+    .toString()
+    .padStart(2, "0")
+  seconds = Math.floor(distance % 60)
+    .toString()
+    .padStart(2, "0")
+}
+
+$effect(() => {
+  updateCountdown()
+  interval = setInterval(updateCountdown, 1000)
+
+  return () => {
+    clearInterval(interval)
+  }
+})
+</script>
+
+<div class="p-8 bg-gradient-to-t from-transparent via-black/70 to-transparent backdrop-blur w-full flex items-center justify-center flex-col min-h-48">
+  <div class="flex flex-col md:flex-row  justify-center items-center gap-8">
+    {@render pair(hours, 'hours')}
+    {@render pair(minutes, 'minutes')}
+    {@render pair(seconds, 'seconds')}
+  </div>
+</div>
+
+{#snippet pair(time: string, timeType: string)}
+<div>
+  <div class="flex">
+    {#each time.split('') as digit, index (index + time)}
+      <div class="w-20 flex items-center justify-center text-white rounded mb-2">
+        {#if /^[0-9]$/.test(digit)}
+          {@const Component = components[parseInt(digit)]}
+          <Component/>
+        {/if}
+      </div>
+    {/each}
+  </div>
+  <H4>{timeType}</H4>
+</div>
+{/snippet}

ceremony/src/lib/components/Counter/numbers/eight.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+type Props = {
+  className?: string
+}
+
+let { className = "size-24" }: Props = $props()
+</script>
+
+<svg class="{className}" viewBox="0 0 98 145" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-elu2rkv2p7-1">
+      <stop stop-color="#FFFFFF" stop-opacity="0.692444274" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-elu2rkv2p7-2">
+      <stop stop-color="#FFFFFF" stop-opacity="0.321350524" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.1">
+    <path d="M30.5,144.5 C24.5,144.5 19.2333333,143.266667 14.7,140.8 C10.1666667,138.333333 6.66666667,134.833333 4.2,130.3 C1.73333333,125.766667 0.5,120.5 0.5,114.5 L0.5,97.834375 C0.5,92.3677083 1.5109375,87.6677083 3.5328125,83.734375 C5.5546875,79.8010417 8.065625,76.7677083 11.065625,74.634375 C14.065625,72.5010417 17.0770833,71.234375 20.1,70.834375 L20.1,69.365625 C17.4770833,68.7885417 14.8546875,67.4557292 12.2328125,65.3671875 C9.6109375,63.2786458 7.44427083,60.4119792 5.7328125,56.7671875 C4.02135417,53.1223958 3.165625,48.8114583 3.165625,43.834375 L3.165625,30.5 C3.165625,24.5 4.39895833,19.2333333 6.865625,14.7 C9.33229167,10.1666667 12.8322917,6.66666667 17.365625,4.2 C21.8989583,1.73333333 27.165625,0.5 33.165625,0.5 L64.83125,0.5 C70.83125,0.5 76.0979167,1.73333333 80.63125,4.2 C85.1645833,6.66666667 88.6645833,10.1666667 91.13125,14.7 C93.5979167,19.2333333 94.83125,24.5 94.83125,30.5 L94.83125,43.834375 C94.83125,48.8114583 93.9760417,53.1223958 92.265625,56.7671875 C90.5552083,60.4119792 88.3885417,63.2786458 85.765625,65.3671875 C83.1427083,67.4557292 80.5208333,68.7885417 77.9,69.365625 L77.9,70.834375 C80.9208333,71.234375 83.93125,72.5010417 86.93125,74.634375 C89.93125,76.7677083 92.4427083,79.8010417 94.465625,83.734375 C96.4885417,87.6677083 97.5,92.3677083 97.5,97.834375 L97.5,114.5 C97.5,120.5 96.2666667,125.766667 93.8,130.3 C91.3333333,134.833333 87.8333333,138.333333 83.3,140.8 C78.7666667,143.266667 73.5,144.5 67.5,144.5 L30.5,144.5 Z M57.365625,117.834375 C60.609375,117.834375 63.109375,116.956771 64.865625,115.201563 C66.621875,113.446354 67.5,110.945833 67.5,107.7 L67.5,93.965625 C67.5,90.721875 66.621875,88.2223958 64.865625,86.4671875 C63.109375,84.7119792 60.609375,83.834375 57.365625,83.834375 L40.63125,83.834375 C37.3875,83.834375 34.8875,84.7119792 33.13125,86.4671875 C31.375,88.2223958 30.496875,90.721875 30.496875,93.965625 L30.496875,107.7 C30.496875,110.945833 31.375,113.446354 33.13125,115.201563 C34.8875,116.956771 37.3875,117.834375 40.63125,117.834375 L57.365625,117.834375 Z M54.7,57.834375 C57.94375,57.834375 60.44375,56.95625 62.2,55.2 C63.95625,53.44375 64.834375,50.94375 64.834375,47.7 L64.834375,37.3 C64.834375,34.0541667 63.95625,31.5536458 62.2,29.7984375 C60.44375,28.0432292 57.94375,27.165625 54.7,27.165625 L43.3,27.165625 C40.0541667,27.165625 37.5536458,28.0432292 35.7984375,29.7984375 C34.0432292,31.5536458 33.165625,34.0541667 33.165625,37.3 L33.165625,47.7 C33.165625,50.94375 34.0432292,53.44375 35.7984375,55.2 C37.5536458,56.95625 40.0541667,57.834375 43.3,57.834375 L54.7,57.834375 Z"
+          id="Shape" stroke="url(#linearGradient-elu2rkv2p7-2)" fill="url(#linearGradient-elu2rkv2p7-1)"
+          fill-rule="nonzero"></path>
+  </g>
+</svg>

ceremony/src/lib/components/Counter/numbers/five.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+type Props = {
+  className?: string
+}
+
+let { className = "size-24" }: Props = $props()
+</script>
+
+<svg class="{className}" viewBox="0 0 90.665625 141" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-opv6ixb_aj-1">
+      <stop stop-color="#FFFFFF" stop-opacity="0.692444274" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-opv6ixb_aj-2">
+      <stop stop-color="#FFFFFF" stop-opacity="0.321350524" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.1">
+    <path d="M0.5,140.5 L0.5,113.16875 L50.034375,113.16875 C53.278125,113.16875 55.778125,112.290625 57.534375,110.534375 C59.290625,108.778125 60.16875,106.278125 60.16875,103.034375 L60.16875,89.3 C60.16875,86.05625 59.290625,83.55625 57.534375,81.8 C55.778125,80.04375 53.278125,79.165625 50.034375,79.165625 L2.5,79.165625 L2.5,0.5 L86.165625,0.5 L86.165625,19.165625 L77.5,27.83125 L32.83125,27.83125 L32.83125,52.5 L60.165625,52.5 C66.165625,52.5 71.4322917,53.7333333 75.965625,56.2 C80.4989583,58.6666667 83.9989583,62.1666667 86.465625,66.7 C88.9322917,71.2333333 90.165625,76.5 90.165625,82.5 L90.165625,110.5 C90.165625,116.5 88.9322917,121.766667 86.465625,126.3 C83.9989583,130.833333 80.4989583,134.333333 75.965625,136.8 C71.4322917,139.266667 66.165625,140.5 60.165625,140.5 L0.5,140.5 Z"
+          id="Path" stroke="url(#linearGradient-opv6ixb_aj-2)" fill="url(#linearGradient-opv6ixb_aj-1)"
+          fill-rule="nonzero"></path>
+  </g>
+</svg>

ceremony/src/lib/components/Counter/numbers/four.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+type Props = {
+  className?: string
+}
+
+let { className = "size-24" }: Props = $props()
+</script>
+
+
+<svg class="{className}" viewBox="0 0 105.665625 141" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+  <defs>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-q8wv9ww4od-1">
+      <stop stop-color="#FFFFFF" stop-opacity="0.692444274" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-q8wv9ww4od-2">
+      <stop stop-color="#FFFFFF" stop-opacity="0.321350524" offset="0%"></stop>
+      <stop stop-color="#5FDFFC" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.1">
+    <polygon id="Path" stroke="url(#linearGradient-q8wv9ww4od-2)" fill="url(#linearGradient-q8wv9ww4od-1)"
+             fill-rule="nonzero"
+             points="59.834375 140.5 59.834375 111.834375 0.5 111.834375 0.5 85.834375 43.165625 0.5 66.83125 0.5 66.83125 15.165625 32.83125 83.5 32.83125 84.5 62.165625 84.5 62.165625 54.5 90.496875 54.5 90.496875 84.5 105.165625 84.5 105.165625 111.834375 90.496875 111.834375 90.496875 140.5"></polygon>
+  </g>
+</svg>