feat(ceremony): preparing queue (#3163)

ceremony/src/lib/components/Terminal/Join.svelte

@@ -1,20 +1,18 @@
 <script lang="ts">
 import { callJoinQueue, getAverageTimes } from "$lib/supabase"
-import { toast } from "svelte-sonner"
 import { getState } from "$lib/state/index.svelte.ts"
 import { onDestroy, onMount } from "svelte"
-import { cn, sleep } from "$lib/utils/utils.ts"
-import Code from "$lib/components/Terminal/Code.svelte"
-import Button from "$lib/components/Terminal/Button.svelte"
+import { formatWaitTime, sleep } from "$lib/utils/utils.ts"
 import Buttons from "$lib/components/Terminal/Install/Buttons.svelte"
 import { axiom } from "$lib/utils/axiom.ts"
 import { user } from "$lib/state/session.svelte.ts"
+import { queryQueueCount } from "$lib/supabase/queries.ts"
+import Print from "$lib/components/Terminal/Print.svelte"
 
 const { contributor, terminal } = getState()
 
-let isOpenToPublic = $state(false)
-let selected = $state(false)
-let code = $state(false)
+let showConfirm = $state(false)
+let loading = $state(true)
 
 onMount(() => {
   terminal.setStep(6)
@@ -40,49 +38,87 @@ onDestroy(() => {
   terminal.clearHistory()
 })
 
-async function handleWaitlistJoin() {
+async function joinQueue() {
   try {
-    await callJoinQueue(null)
-    if (isOpenToPublic) {
-      contributor.setAllowanceState("inQueue")
+    terminal.clearHistory()
+    showConfirm = true
+    loading = true
+
+    const [queue, averages] = await Promise.all([
+      queryQueueCount(),
+      getAverageTimes().catch(() => ({ totalMs: null }))
+    ])
+
+    await sleep(1000)
+    loading = false
+
+    terminal.updateHistory({
+      text: "Warning: you must have your browser open and terminal running when it is your turn to contribute. You cannot leave the queue, and when it is your turn you have 1 hour to contribute.",
+      type: "warning",
+      duplicate: true
+    })
+
+    if (queue.count === null) {
+      throw new Error("Failed to fetch queue information")
+    }
+
+    terminal.updateHistory({ text: "", lineBreak: true, duplicate: true })
+
+    if (queue.count > 0) {
+      let message = `There ${queue.count === 1 ? "is" : "are"} ${queue.count} ${queue.count === 1 ? "person" : "people"} ahead of you in the queue.`
+
+      if (averages.totalMs) {
+        const waitTimeMinutes = (averages.totalMs / 1000 / 60) * queue.count
+        const formattedWaitTime = formatWaitTime(waitTimeMinutes)
+        message += ` Average wait time: ${formattedWaitTime}.`
+      }
+
+      terminal.updateHistory({
+        text: message,
+        type: "warning",
+        duplicate: true
+      })
     } else {
-      contributor.setAllowanceState("inWaitlist")
+      terminal.updateHistory({
+        text: "The queue is currently empty. You'll be the next to contribute if you enter now.",
+        type: "warning",
+        duplicate: true
+      })
     }
+
+    return queue
   } catch (error) {
-    console.error("Error joining waitlist:", error)
+    loading = false
+    terminal.updateHistory({
+      text: error.message,
+      type: "error",
+      duplicate: true
+    })
+    throw error
   }
 }
 
-async function trigger(value: string) {
-  if (value === "waitlist") {
-    selected = true
-    terminal.updateHistory({ text: "Adding user to the waitlist..." })
+async function confirm() {
+  terminal.updateHistory({ text: "Adding user to the queue..." })
+
+  try {
+    await callJoinQueue(null)
     await sleep(1000)
-    handleWaitlistJoin()
-    axiom.ingest("monitor", [{ user: user.session?.user.id, type: "join_waitlist" }])
-  } else if (value === "code") {
-    code = true
-    axiom.ingest("monitor", [{ user: user.session?.user.id, type: "join_code" }])
+    contributor.setAllowanceState("inQueue")
+    axiom.ingest("monitor", [{ user: user.session?.user.id, type: "join_queue" }])
+  } catch (error) {
+    console.error("Error joining queue:", error)
   }
 }
-
-const buttons = [
-  {
-    text: "I have an invitation code",
-    action: "code"
-  },
-  {
-    text: "I want to join the waitlist",
-    action: "waitlist"
-  }
-]
 </script>
 
-{#if !selected}
-  {#if code }
-    <Code />
-  {:else }
-    <Buttons data={buttons} trigger={(value: 'code' | 'waitlist') => trigger(value)}/>
+{#if !showConfirm}
+  <Buttons data={[{text: "Join queue",action: "queue"}]} trigger={joinQueue}/>
+{:else}
+  {#if loading}
+    <Print>Loading...</Print>
+  {:else}
+    <Buttons data={[{text: "Confirm", action: "confirm"}]} trigger={confirm}/>
   {/if}
 {/if}
 

ceremony/src/lib/state/contributor.svelte.ts

@@ -22,7 +22,7 @@ type State =
   | "noClient"
   | "missed"
 
-export type AllowanceState = "hasRedeemed" | "inWaitlist" | "inQueue" | "join" | undefined
+export type AllowanceState = "hasRedeemed" | "inQueue" | "join" | undefined
 
 export type ContributionState =
   | "contribute"
@@ -116,7 +116,7 @@ export class Contributor {
     this.state = "loading"
     this.clientState = undefined
     this.contributionState = undefined
-    this.userWallet = null
+    this.userWallet = undefined
     this.queueState = {
       position: null,
       count: null

ceremony/src/lib/supabase/index.ts

@@ -140,7 +140,6 @@ export const getCurrentUserState = async (userId: string | undefined): Promise<A
 
   if (data.in_queue) return "inQueue"
   if (data.has_redeemed) return "hasRedeemed"
-  if (data.in_waitlist) return "inWaitlist"
 
   return "join"
 }

ceremony/src/lib/supabase/queries.ts

@@ -58,7 +58,7 @@ export const queryQueuePayloadId = async (userId: string) => {
 export const queryCurrentUserState = async () => {
   const { data, error } = await supabase
     .from("current_user_state")
-    .select("in_waitlist, has_redeemed, in_queue, waitlist_position")
+    .select("has_redeemed, in_queue, waitlist_position")
     .single()
 
   return { data, error }

ceremony/src/routes/+page.svelte

@@ -63,16 +63,18 @@ onMount(() => {
           <Print>Loading</Print>
         {/if}
 
-      {:else if contributor.currentUserState === "inWaitlist"}
-        <Waitlist/>
+      <!--{:else if contributor.currentUserState === "inWaitlist"}-->
+      <!--  <Waitlist/>-->
 
       {:else if contributor.currentUserState === "join"}
         <Join/>
 
       {/if}
     {/if}
+
   {:else if user.session === null && terminal.tab === 1}
     <Authenticate/>
   {/if}
+
 {/if}