fix(ceremony): save progress

ceremony/src/lib/client/index.ts

@@ -3,7 +3,7 @@ import type { ContributeBody, Status } from "$lib/client/types.ts"
 import { user } from "$lib/stores/user.svelte.ts"
 import { getQueuePayloadId } from "$lib/supabase/queries.ts"
 
-export const contribute = async (): Promise<Status | undefined> => {
+export const start = async (): Promise<Status | undefined> => {
   const userId = user?.session?.user.id
 
   if (!userId) {

ceremony/src/routes/app/install/+page.svelte → ceremony/src/lib/components/Install.svelte

@@ -1,13 +1,13 @@
 <script lang="ts">
-import { toast } from "svelte-sonner"
-import H1 from "$lib/components/typography/H1.svelte"
-import Button from "$lib/components/Button.svelte"
+  import { toast } from "svelte-sonner"
+  import H1 from "$lib/components/typography/H1.svelte"
+  import Button from "$lib/components/Button.svelte"
 
-let command = "docker run -p 4919:4919 -it haitlahcen/union-mpc-cli:latest"
-const copy = () => {
-  navigator.clipboard.writeText(command)
-  toast.success("Copied to clipboard", { position: "bottom-right" })
-}
+  let command = "docker run -p 4919:4919 -it haitlahcen/union-mpc-cli:latest"
+  const copy = () => {
+    navigator.clipboard.writeText(command)
+    toast.success("Copied to clipboard", { position: "bottom-right" })
+  }
 </script>
 
 <div class="p-8  bg-gradient-to-t from-transparent via-black/50 to-transparent backdrop-blur w-full flex items-center flex-col">

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

@@ -42,9 +42,8 @@ async function logout() {
       <div class="hidden md:block">
         {#if user.session}
           <div class="flex items-center gap-4">
-            <NavLink href="/app">Dashboard</NavLink>
-            <NavLink href="/app/client">Client</NavLink>
-            <NavLink href="/app/install">Install</NavLink>
+
+            <NavLink href="/app">Contribute</NavLink>
             <Button onclick={logout}>{"Log out"}</Button>
           </div>
         {:else}

ceremony/src/routes/app/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-let { children } = $props()
+  let { children } = $props()
 </script>
 
 {@render children()}
 
+

ceremony/src/routes/app/+page.svelte

@@ -1,58 +1,90 @@
 <script lang="ts">
-import { user } from "$lib/stores/user.svelte.ts"
-import Text from "$lib/components/typography/Text.svelte"
-import { createQuery } from "@tanstack/svelte-query"
-import Spinner from "$lib/components/Spinner.svelte"
-import { reactiveQueryArgs } from "$lib/utils/utils.svelte.ts"
-import H2 from "$lib/components/typography/H2.svelte"
-import { checkContributionStatus, getUserQueueInfo } from "$lib/supabase"
-import Button from "$lib/components/Button.svelte"
-import { goto } from "$app/navigation"
-
-let userQueueStats = createQuery(
-  reactiveQueryArgs(() => ({
-    queryKey: ["userPosition"],
-    queryFn: () => getUserQueueInfo(),
-    refetchInterval: 5_000,
-    retry: 2,
-    retryDelay: 1000
-  }))
-)
-
-let { isLoading, data: userQueue, error } = $derived($userQueueStats)
-
-let contributionStore = createQuery(
-  reactiveQueryArgs(() => ({
-    queryKey: ["contribution"],
-    queryFn: () => checkContributionStatus(),
-    refetchInterval: 5_000,
-    retry: false
-  }))
-)
-
-let {
-  error: contributionError,
-  isLoading: contributionIsLoading,
-  data: contributionData
-} = $derived($contributionStore)
+  import { user } from "$lib/stores/user.svelte.ts"
+  import Text from "$lib/components/typography/Text.svelte"
+  import { createQuery } from "@tanstack/svelte-query"
+  import Spinner from "$lib/components/Spinner.svelte"
+  import { reactiveQueryArgs } from "$lib/utils/utils.svelte.ts"
+  import H2 from "$lib/components/typography/H2.svelte"
+  import { checkContributionStatus, getUserQueueInfo } from "$lib/supabase"
+  import Button from "$lib/components/Button.svelte"
+  import { checkStatus, start } from "$lib/client";
+  import Install from "$lib/components/Install.svelte";
+
+  let clientQuery = createQuery(
+    reactiveQueryArgs(() => ({
+      queryKey: ["client"],
+      queryFn: () => checkStatus(),
+      refetchInterval: 5_000,
+      retry: false
+    }))
+  )
+
+  let contributionQuery = createQuery(
+    reactiveQueryArgs(() => ({
+      queryKey: ["contribution"],
+      queryFn: () => checkContributionStatus(),
+      refetchInterval: 5_000,
+      retry: false
+    }))
+  )
+
+  let queueQuery = createQuery(
+    reactiveQueryArgs(() => ({
+      queryKey: ["userPosition"],
+      queryFn: () => getUserQueueInfo(),
+      refetchInterval: 5_000,
+      retry: 2,
+      retryDelay: 1000
+    }))
+  )
+
+  let {data: queue, isLoading: queueLoading, error: queueError} = $derived($queueQuery)
+  let {data: contribute, isLoading: contributeLoading, error: contributeError} = $derived($contributionQuery)
+  let {data: client, isLoading: clientLoading, error: clientError} = $derived($clientQuery)
+
 </script>
 
 
 <div class="p-8  bg-gradient-to-t from-transparent via-black/50 to-transparent backdrop-blur w-full flex items-center flex-col">
 
   <Text class="uppercase">USER: <span class="text-union-accent-500">{user?.session?.user.email}</span></Text>
 
-  {#if isLoading}
+<!--  First we check if the user is in the queue, if so we show the queue position.
+
+  If not they might be the current contributor or already contributed or we are verifying their contribution.
+
+  If they are able to contribute they need to have the client installed.-->
+
+  {#if queueLoading}
     <Spinner class="size-4 text-union-accent-500"/>
-  {:else if userQueue.inQueue}
+  {:else if queue.inQueue}
+
     <H2>You are in queue</H2>
-    <Text>Position: {userQueue.position}/{userQueue.count + 1}</Text>
-  {:else if contributionData?.canContribute && contributionData?.shouldContribute}
-    <H2>You can contribute</H2>
-    <Button onclick={() => goto("/app/client")}>Contribute</Button>
-  {:else if contributionData?.isVerifying}
+    <Text>Position: {queue.position}/{queue.count + 1}</Text>
+
+  {:else if contribute?.canContribute && contribute?.shouldContribute}
+
+    {#if clientError}
+      <Text>Client connected?</Text>
+      <Install />
+    {:else if clientLoading}
+      <Spinner class="size-4 text-red-500"/>
+    {:else if client}
+      <Text>{client.status}</Text>
+      <H2>You can contribute</H2>
+      <Button onclick={start}>Contribute</Button>
+    {:else}
+      <Text>Waiting for client...</Text>
+    {/if}
+
+  {:else if contribute?.isVerifying}
+
     <H2>Your contribution is being verified</H2>
+
   {:else}
+
     <H2>Not eligible for contribution at this time</H2>
+
   {/if}
+
 </div>

ceremony/src/routes/auth/register/+page.svelte

@@ -12,7 +12,7 @@ let loading = false
 
 async function register() {
   loading = true
-  await auth(`${$page.url.origin}/app/install`)
+  await auth(`${$page.url.origin}/app`)
 }
 </script>