fix(ceremony): save progress

ceremony/src/lib/components/Ceremony.svelte

@@ -1,25 +1,33 @@
 <script lang="ts">
 import type { ContributorState } from "$lib/stores/state.svelte.ts"
 import H1 from "$lib/components/typography/H1.svelte"
-import { start } from "$lib/client"
-import Text from "$lib/components/typography/Text.svelte"
+import { generateSecret, start } from "$lib/client"
 import Reward from "$lib/components/Reward.svelte"
 import Download from "$lib/components/Download.svelte"
 import Queue from "$lib/components/Queue.svelte"
 import Install from "$lib/components/Install.svelte"
 import Thanks from "$lib/components/Thanks.svelte"
+import { user } from "$lib/stores/user.svelte.ts"
 
 type Props = {
   contributor: ContributorState
 }
 
 let { contributor }: Props = $props()
 
+async function generate() {
+  const email = user.session?.user.email
+  await generateSecret(email)
+}
+
 $effect(() => {
   if (contributor?.contributionState === "contribute" && contributor.state !== "contributing") {
-    console.log("Call client start")
     start()
   }
+
+  if (contributor.clientState !== "offline") {
+    generate()
+  }
 })
 
 window.addEventListener("beforeunload", (e: BeforeUnloadEvent) => {
@@ -31,32 +39,25 @@ window.addEventListener("beforeunload", (e: BeforeUnloadEvent) => {
 <div class="p-8 w-full flex items-center justify-center flex-col">
 
   {#if !contributor.userWallet}
-    <Reward {contributor} />
-  {:else if contributor.state === 'inQueue'}
-    {#if contributor.clientState === "offline"}
-      <Install {contributor} />
-    {:else if !contributor.downloadedSecret}
-      <Download {contributor} />
-    {:else}
-      <Queue {contributor}/>
-    {/if}
+    <Reward {contributor}/>
+  {:else if contributor.clientState === 'offline'}
+    <Install {contributor}/>
+  {:else if !contributor.downloadedSecret}
+    <Download {contributor}/>
+  {:else if contributor.state === "inQueue"}
+    <Queue {contributor}/>
   {:else if contributor.state === 'contribute'}
-    <H1>Starting contribution...</H1>
+  <H1>Starting contribution...</H1>
   {:else if contributor.state === 'contributing'}
-    <H1>Contributing...</H1>
+  <H1>Contributing...</H1>
   {:else if contributor.state === 'verifying'}
-    <H1>Verifying your contribution...</H1>
+  <H1>Verifying your contribution...</H1>
   {:else if contributor.state === 'contributed'}
-    <Thanks {contributor}/>
+  <Thanks {contributor}/>
   {:else}
-    <H1>Not able to contribute at this time</H1>
-  {/if}
-  {#if contributor.state !== "contributed"}
-    <div class="text-center font-bold text-lg">
-      <Text>You are connected to your MPC Client.</Text>
-      <Text>Do not close this tab or your terminal running the MPC Client.</Text>
-    </div>
+  <H1>Not able to contribute at this time</H1>
   {/if}
+
 </div>
 
 <div class="absolute bottom-10 flex flex-col px-8 text-center gap-4"></div>

ceremony/src/lib/components/Code.svelte

@@ -49,16 +49,16 @@ async function handleCodeJoin() {
 }
 
 function handleKeyDown(event: KeyboardEvent, index: number) {
-  if (event.key === "Enter") {
+  if (event.key === "Enter" || event.key === " ") {
     event.preventDefault()
     if (index < words.length - 1) {
       // Move to next input
       const nextInput = document.querySelector(
         `input:nth-child(${2 * index + 3})`
       ) as HTMLInputElement
       nextInput?.focus()
-    } else {
-      // On last input, trigger the USE CODE button
+    } else if (event.key === "Enter") {
+      // On last input, trigger the USE CODE button only for Enter key
       handleCodeJoin()
     }
   } else if (event.key === "Backspace" && words[index] === "" && index > 0) {

ceremony/src/lib/components/Download.svelte

@@ -26,11 +26,6 @@ function setDownloadedSecret() {
   localStorage.setItem("downloaded-secret", "true")
   contributor.downloadedSecret = true
 }
-
-onMount(async () => {
-  const email = user.session?.user.email
-  await generateSecret(email)
-})
 </script>
 
 {#if !download}

ceremony/src/lib/components/Queue.svelte

@@ -6,6 +6,7 @@ import Blink from "$lib/components/Blink.svelte"
 import SwimLoad from "$lib/components/SwimLoad.svelte"
 import H1 from "$lib/components/typography/H1.svelte"
 import { ContributorState } from "$lib/stores/state.svelte.js"
+import { start } from "$lib/client"
 
 type Props = {
   contributor: ContributorState
@@ -21,7 +22,7 @@ let { contributor }: Props = $props()
   <H1 class="mb-6">You are <span class="!text-union-accent-500">{contributor.queueState.position}<span
           class="lowercase">{getNumberSuffix(contributor.queueState.position)}</span> </span> in queue</H1>
 
-  <SwimLoad max={100} current={90}/>
+  <SwimLoad max={contributor.queueState.count} current={contributor.queueState.position}/>
   <div class="mb-4 text-center">
     <H2>Queue length: <span class="text-union-accent-500">{contributor.queueState.count}</span></H2>
     <H3>Waiting time: <span class="text-union-accent-500">{contributor.queueState.estimatedTime} minutes</span>

ceremony/src/lib/components/Waitlist.svelte

@@ -15,7 +15,7 @@ let { contributor }: Props = $props()
 <H1 class="mb-4">You're on the waitlist </H1>
 <Text class="mb-12">When the ceremony opens to the public you will have position <span>{contributor.waitListPosition}</span> of public queue.</Text>
 <H4 class="mb-4">Received an invite?</H4>
-<Text class="mb-4">You can skip the waitlist and join now</Text>
+<Text class="mb-4">You can skip the waitlist and join now.</Text>
 <form class="flex flex-col items-center">
   <Code {contributor} secondary={true}/>
 </form>

ceremony/src/lib/layout/Navbar/index.svelte

@@ -53,7 +53,7 @@ let loggedIn = $derived(!!user.session?.user.id)
         {#if user.session}
           <div class="flex items-center gap-4">
             <NavLink class="p-2" href="/contributions">Contributions</NavLink>
-            <Button class="bg-transparent text-white hover:text-white border-2 border-white hover:bg-neutral-800" onclick={logout}>Log out</Button>
+            <Button variant="primary" class="bg-transparent text-white hover:text-white border-2 border-white hover:bg-neutral-800" onclick={logout}>Log out</Button>
           </div>
         {:else}
           <div class="flex items-center gap-4">

ceremony/src/lib/supabase/index.ts

@@ -24,13 +24,13 @@ export const callJoinQueue = async (code: string | null): Promise<boolean> => {
     const { error } = await supabase.rpc("join_queue", { code_id: code })
 
     if (error) {
-      console.error("Error joining queue:", error)
+      console.log("Error joining queue:", error)
       return false
     }
 
     return true
   } catch (err) {
-    console.error("Unexpected error:", err)
+    console.log("Unexpected error:", err)
     return false
   }
 }
@@ -51,7 +51,7 @@ export const getUserQueueInfo = async () => {
   const { count, error: countError } = await getQueueCount()
 
   if (error) {
-    console.error("Error getting user queue position:", error)
+    console.log("Error getting user queue position:", error)
     return { error }
   }
 
@@ -129,8 +129,6 @@ export const getContributions = async () => {
 }
 
 export const getUserContribution = async (hash: string) => {
-  console.log(hash)
-
   const { data, error } = await queryUserContribution(hash)
   if (error || !data) return undefined
 

ceremony/src/lib/supabase/queries.ts

@@ -30,15 +30,7 @@ export const getContribution = async (userId: string) => {
 export const getUserQueuePosition = async (userId: string) => {
   const { data, error } = await supabase.from("current_queue").select("*").eq("id", userId).single()
 
-  if (error) {
-    if (error.code === "PGRST116") {
-      return { data: undefined, error: undefined }
-    }
-    console.log("Error getting user data:", error)
-    return { data: undefined, error }
-  }
-
-  return { data, error: undefined }
+  return { data, error }
 }
 
 export const getQueueCount = async () => {

ceremony/src/routes/+layout.svelte

@@ -10,6 +10,7 @@ import { setContributorState } from "$lib/stores/state.svelte.ts"
 import "../styles/tailwind.css"
 
 import { watch } from "runed"
+import { generateSecret } from "$lib/client"
 
 let { children } = $props()