fix(ceremony): flow and time/queue display changes

ceremony/src/lib/client/index.ts

@@ -3,6 +3,8 @@ import { queryQueuePayloadId } from "$lib/supabase/queries.ts"
 import type { ContributeBody } from "$lib/client/types.ts"
 import { supabase } from "$lib/supabase/client.ts"
 import type { ClientState } from "$lib/state/contributor.svelte.ts"
+import { axiom } from "$lib/utils/axiom.ts"
+import { user } from "$lib/state/session.svelte.ts"
 
 export const start = async (): Promise<ClientState | undefined> => {
   const { data: session, error: sessionError } = await supabase.auth.refreshSession()
@@ -48,7 +50,9 @@ export const start = async (): Promise<ClientState | undefined> => {
 export const checkState = async (): Promise<ClientState> => {
   try {
     const response = await get<ClientState>("contribute", {})
-
+    axiom.ingest("monitor", [
+      { user: user.session?.user.id, type: `client_state_${response ?? "offline"}` }
+    ])
     return response ?? "offline"
   } catch (error) {
     console.log("Error fetching status:", error)

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

@@ -10,6 +10,7 @@ let redirecting = $state(false)
 const { terminal } = getState()
 
 onMount(() => {
+  terminal.setStep(1)
   terminal.updateHistory({ text: "Unauthenticated user", replace: true })
   terminal.updateHistory({ text: "Please authenticate with one of the following", replace: true })
 })

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

@@ -3,10 +3,11 @@ import { getState } from "$lib/state/index.svelte.ts"
 import { onDestroy, onMount } from "svelte"
 import Print from "$lib/components/Terminal/Print.svelte"
 import Buttons from "$lib/components/Terminal/Install/Buttons.svelte"
-import { sleep } from "$lib/utils/utils.ts"
-import { callJoinQueue } from "$lib/supabase"
+import { formatWaitTime, sleep } from "$lib/utils/utils.ts"
+import { callJoinQueue, getAverageTimes } from "$lib/supabase"
 import { axiom } from "$lib/utils/axiom.ts"
 import { user } from "$lib/state/session.svelte.ts"
+import { queryQueueCount } from "$lib/supabase/queries.ts"
 
 const { terminal, contributor } = getState()
 
@@ -16,22 +17,53 @@ let inputElement: HTMLInputElement
 let showConfirm = $state(false)
 let showInput = $state(true)
 
-function handleKeyDown(event: KeyboardEvent) {
+async function handleKeyDown(event: KeyboardEvent) {
   if (event.key === "Enter") {
     event.preventDefault()
+
+    let queue = await queryQueueCount()
+    const averages = await getAverageTimes()
+
+    terminal.updateHistory({ text: "", lineBreak: true, duplicate: true })
     terminal.updateHistory({ text: `Entered code: ${inputCode}`, duplicate: true })
     terminal.updateHistory({
-      text: "If you enter the queue then you must have your browser and terminal open when it is your turn. you cannot leave the queue, and when it is your turn you need to contribute",
+      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
     })
-    terminal.updateHistory({ text: "", lineBreak: true })
+    if (queue.count !== null) {
+      if (queue.count > 0) {
+        terminal.updateHistory({ text: "", lineBreak: true, duplicate: true })
+        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 {
+        terminal.updateHistory({ text: "", lineBreak: true, duplicate: true })
+        terminal.updateHistory({
+          text: "The queue is currently empty. You'll be the next to contribute if you enter now.",
+          type: "warning",
+          duplicate: true
+        })
+      }
+    }
+
     showInput = false
     showConfirm = true
   }
 }
 
 onMount(() => {
+  terminal.setStep(5)
   if (inputElement) {
     inputElement.focus()
   }

ceremony/src/lib/components/Terminal/Install/Linux.svelte

@@ -19,6 +19,7 @@ let command =
   "mkdir -p ceremony && docker pull ghcr.io/unionlabs/union/mpc-client:latest && docker run -v $(pwd)/ceremony:/ceremony -w /ceremony -p 4919:4919 --rm -it ghcr.io/unionlabs/union/mpc-client:latest"
 
 onMount(() => {
+  terminal.setStep(3)
   axiom.ingest("monitor", [{ user: user.session?.user.id, type: "mount_linux" }])
   const messages = [
     {

ceremony/src/lib/components/Terminal/Install/MacOS.svelte

@@ -19,6 +19,7 @@ let command =
   "mkdir -p ceremony && docker pull ghcr.io/unionlabs/union/mpc-client:latest && docker run -v $(pwd)/ceremony:/ceremony -w /ceremony -p 4919:4919 --rm -it ghcr.io/unionlabs/union/mpc-client:latest"
 
 onMount(() => {
+  terminal.setStep(3)
   axiom.ingest("monitor", [{ user: user.session?.user.id, type: "mount_macos" }])
   const messages = [
     {

ceremony/src/lib/components/Terminal/Install/SelectOS.svelte

@@ -19,6 +19,7 @@ const selections = [
 ]
 
 onMount(() => {
+  terminal.setStep(2)
   terminal.updateHistory({
     text: "Warning: Can't connect to the local client. This might be because:",
     replace: true,

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { callJoinQueue } from "$lib/supabase"
+import { callJoinQueue, getAverageTimes } from "$lib/supabase"
 import { toast } from "svelte-sonner"
 import { getState } from "$lib/state/index.svelte.ts"
 import { onDestroy, onMount } from "svelte"
@@ -17,8 +17,8 @@ let selected = $state(false)
 let code = $state(false)
 
 onMount(() => {
+  terminal.setStep(4)
   terminal.updateHistory({ text: "Access the ceremony", replace: true })
-  terminal.updateHistory({ text: "", lineBreak: true })
   terminal.updateHistory({
     text: "We officially support Linux and macOS on Chrome, Firefox, or Brave browsers.",
     replace: true,

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

@@ -7,6 +7,7 @@ import { user } from "$lib/state/session.svelte.ts"
 const { terminal } = getState()
 
 onMount(() => {
+  terminal.setStep(9)
   terminal.updateHistory({ text: "Too bad, you missed your slot.", replace: true })
   axiom.ingest("monitor", [{ user: user.session?.user.id, type: "missed" }])
 })

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

@@ -6,13 +6,15 @@ import LoadingBar from "$lib/components/Terminal/LoadingBar.svelte"
 import { getAverageTimes, type TimeResult } from "$lib/supabase"
 import { axiom } from "$lib/utils/axiom.ts"
 import { user } from "$lib/state/session.svelte.ts"
+import { formatWaitTime } from "$lib/utils/utils.js"
 
 const { contributor, terminal } = getState()
 
-let waitingTime = $state("")
+let waitingTime = $state<number>(0)
 let averages = $state<TimeResult>()
 
 onMount(async () => {
+  terminal.setStep(6)
   terminal.updateHistory({ text: "You are in queue" })
   axiom.ingest("monitor", [{ user: user.session?.user.id, type: "mount_queue" }])
   averages = await getAverageTimes()
@@ -25,15 +27,15 @@ onDestroy(() => {
 
 $effect(() => {
   if (averages && contributor.queueState.count) {
-    waitingTime = ((contributor.queueState.count * averages.totalMs) / 1000 / 60).toFixed(0)
+    waitingTime = (contributor.queueState.count * averages.totalMs) / 1000 / 60
   }
 })
 </script>
 
 <!--TODO add new time-->
 <Print>Your position:  {contributor.queueState.position ?? 1}</Print>
 <Print>Queue length: {contributor.queueState.count ?? 2}</Print>
-<Print>Estimated waiting time: {waitingTime} minutes</Print>
+<Print>Estimated waiting time: {formatWaitTime(waitingTime)}</Print>
 <Print><br></Print>
 <LoadingBar max={contributor.queueState.count} current={contributor.queueState.position}/>
 <Print><br></Print>

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

@@ -15,6 +15,7 @@ let validation = (val: ValidState) => {
 }
 
 onMount(() => {
+  terminal.setStep(5)
   terminal.updateHistory({
     text: "Add an address, you may receive rewards for successful contributions."
   })

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

@@ -14,6 +14,7 @@ let buttons = $state<Array<HTMLButtonElement>>([])
 let focusedIndex = $state(0)
 
 onMount(() => {
+  terminal.setStep(4)
   axiom.ingest("monitor", [{ user: user.session?.user.id, type: "mount_secret" }])
 })
 

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 import Print from "$lib/components/Terminal/Print.svelte"
 import { getState } from "$lib/state/index.svelte.ts"
+import { user } from "$lib/state/session.svelte.ts"
 
 const { terminal, contributor } = getState()
 
@@ -10,19 +11,26 @@ let progressBar = $derived(
 </script>
 
 <div class="py-2 px-4 border-t border-[#48494C] w-full flex justify-between">
-  <div class="flex items-center gap-2">
-    <div class="text-center font-mono">
-      <Print>[<span class="text-union-accent-500">{progressBar}</span>]</Print>
+  <div class="flex gap-2 items-center">
+    <div class="flex items-center gap-2">
+      <div class="text-center font-mono">
+        <Print>[<span class="text-union-accent-500">{progressBar}</span>]</Print>
+      </div>
+      <Print>{terminal.currentStep}/{terminal.maxStep} COMPLETED | </Print>
     </div>
-    <Print>{terminal.currentStep}/{terminal.maxStep} COMPLETED</Print>
+    {#if user?.session?.user?.email}
+      <p class="text-xs font-mono text-white uppercase">
+        {user.session.user.email}
+      </p>
+    {/if}
   </div>
 
   {#if contributor.clientState !== "offline" && contributor.clientState !== undefined}
     <div class="flex items-center gap-2">
       <div class="w-2 h-2 bg-union-accent-500 rounded-full"></div>
       <Print>CONNECTED</Print>
     </div>
-    {:else }
+  {:else }
     <div class="flex items-center gap-2">
       <div class="w-2 h-2 bg-[#FD6363] rounded-full"></div>
       <Print>DISCONNECTED</Print>

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

@@ -10,6 +10,7 @@ import { user } from "$lib/state/session.svelte.ts"
 const { terminal } = getState()
 
 onMount(() => {
+  terminal.setStep(10)
   terminal.updateHistory({ text: "Thank you!", replace: true })
   terminal.updateHistory({ text: "-------------" })
   terminal.updateHistory({

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

@@ -7,60 +7,45 @@ import { user } from "$lib/state/session.svelte.ts"
 const { contributor } = getState()
 
 let countdown = $state("LOADING")
-let startTimestamp = $state<number>()
 let expireTimestamp = $state<number>()
 
 async function fetchTimestamps() {
   const userId = user.session?.user.id
   if (!userId) return
   const window = await queryContributionWindow(userId)
-  startTimestamp = new Date(window.data?.started).getTime()
   expireTimestamp = new Date(window.data?.expire).getTime()
 }
 
 function updateCountdown() {
-  if (!(startTimestamp && expireTimestamp)) return
+  if (!expireTimestamp) return
   const now = Date.now()
 
-  let targetTime: number
-  let prefix = ""
-  let suffix = ""
+  if (now < expireTimestamp) {
+    const distance = expireTimestamp - now
 
-  if (now < startTimestamp) {
-    targetTime = startTimestamp
-    prefix = "ETA "
-  } else if (now < expireTimestamp) {
-    targetTime = expireTimestamp
-    suffix = " LEFT"
+    const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
+    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
+    const seconds = Math.floor((distance % (1000 * 60)) / 1000)
+
+    countdown = `${hours}H ${minutes}M ${seconds}S LEFT`
   } else {
     countdown = "EXPIRED"
-    return
   }
-
-  const distance = targetTime - now
-
-  const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
-  const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60))
-  const seconds = Math.floor((distance % (1000 * 60)) / 1000)
-
-  countdown = `${prefix}${hours}H ${minutes}M ${seconds}S${suffix}`
 }
 
 $effect(() => {
   fetchTimestamps()
 })
 
 $effect(() => {
-  if (!(startTimestamp && expireTimestamp)) return
+  if (!expireTimestamp) return
   const timer = setInterval(updateCountdown, 1000)
   updateCountdown()
   return () => clearInterval(timer)
 })
 
 let show = $derived(
-  contributor.contributionState === "contribute" ||
-    contributor.contributionState === "verifying" ||
-    contributor.queueState.position !== null
+  contributor.contributionState === "contribute" || contributor.contributionState === "verifying"
 )
 </script>
 

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

@@ -9,7 +9,7 @@ import { user } from "$lib/state/session.svelte.ts"
 const { terminal } = getState()
 
 onMount(async () => {
-  terminal.setStep(3)
+  terminal.setStep(5)
   terminal.updateHistory({ text: "You're on the waitlist" })
   terminal.updateHistory({
     text: `When the ceremony opens to the public, you will get priority in the queue.`