Ceremony fixes (#3055)

ceremony/ceremony.nix

@@ -19,7 +19,7 @@ _: {
     {
       packages = {
         ceremony = unstablePkgs.buildNpmPackage {
-          npmDepsHash = "sha256-H8IOpVmeV1rTpTJKHz3ku0KyzD+R65sLFMnkf4RXRzg=";
+          npmDepsHash = "sha256-2s556is4PJaGmxQhIUPZLINh6J6ngeTf32bwDtl+v6Q=";
           src = ./.;
           sourceRoot = "ceremony";
           npmFlags = [ "--legacy-peer-deps" ];

ceremony/package.json

@@ -26,6 +26,7 @@
     "vite": "^5.0.3"
   },
   "dependencies": {
+    "@axiomhq/js": "^1.2.0",
     "@scure/base": "^1.1.8",
     "@splinetool/runtime": "^1.9.23",
     "@supabase/supabase-js": "^2.45.3",

ceremony/src/hooks.client.ts

@@ -0,0 +1,9 @@
+import { generateUserErrorMessage, sendSvelteErrorLog } from "$lib/utils/error"
+import type { HandleClientError } from "@sveltejs/kit"
+
+export const handleError = (async ({ error, event, message, status }) => {
+  const errorId = await sendSvelteErrorLog({ error, event, message, status }, "client")
+  return {
+    message: generateUserErrorMessage(errorId)
+  }
+}) satisfies HandleClientError

ceremony/src/lib/client/index.ts

@@ -1,8 +1,10 @@
 import { get, post } from "$lib/client/http.ts"
-import { getQueuePayloadId } from "$lib/supabase/queries.ts"
+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()
@@ -20,7 +22,7 @@ export const start = async (): Promise<ClientState | undefined> => {
     return
   }
 
-  const { data, error } = await getQueuePayloadId(userId)
+  const { data, error } = await queryQueuePayloadId(userId)
 
   if (error) {
     console.log("Error fetching payload_id:", error)
@@ -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,8 +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()
 
@@ -14,23 +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") {
-    console.log("XX keydown")
     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()
   }
@@ -59,6 +92,7 @@ async function handleCodeJoin() {
     } else {
       terminal.updateHistory({ text: "The code is not valid", duplicate: true })
       terminal.updateHistory({ text: "", lineBreak: true, duplicate: true })
+      axiom.ingest("monitor", [{ user: user.session?.user.id, type: "invalid_code" }])
       onCancel()
     }
   } catch (error) {
@@ -74,7 +108,6 @@ function onCancel() {
 }
 
 function trigger(value: "enter" | "cancel") {
-  console.log("XX trigger 2")
   if (value === "enter") {
     handleCodeJoin()
   } else if (value === "cancel") {

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

@@ -3,6 +3,8 @@ import { onDestroy, onMount } from "svelte"
 import { getState } from "$lib/state/index.svelte.ts"
 import { 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"
 
 type Props = {
   change: () => void
@@ -17,17 +19,20 @@ 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 = [
-    { text: "---", duplicate: true },
     {
       text: "You must have docker installed and running in order to contribute. Once you have docker running, copy the following command in your terminal:"
     },
     { text: "---", duplicate: true },
     { text: command, duplicate: true },
     { text: "---", duplicate: true },
     { text: "Once the MPC client is running you can return to this page.", duplicate: true },
+    { text: "---", duplicate: true },
     {
-      text: "If the MPC client is running but you still see this page, ensure that you are using either Chrome, FireFox or Brave. For Brave, disable the shields in the address bar.",
+      text: "If the MPC client is running but you still see this page, ensure that you are using Chrome, Firefox, or Brave. Also, make sure to temporarily turn off ad-blockers or browser shields (especially in Brave).",
+      type: "warning",
       duplicate: true
     }
   ]

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

@@ -3,6 +3,8 @@ import { onDestroy, onMount } from "svelte"
 import { getState } from "$lib/state/index.svelte.ts"
 import { 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"
 
 type Props = {
   change: () => void
@@ -17,14 +19,15 @@ 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 = [
-    { text: "---" },
     {
       text: "You must have OrbStack installed in order to contribute, because Docker Desktop is too slow. If you use Docker Desktop it is extremely likely that you will lose your contribution slot."
     },
     { text: "---" },
     {
-      text: '1. <a class="underline-offset-4 decoration-union-accent-500 underline" href="https://orbstack.dev/ ">Install OrbStack</a>'
+      text: '1. <a class="underline-offset-4 decoration-union-accent-500 underline" href="https://orbstack.dev/" target="_blank">Install OrbStack</a>'
     },
     { text: "2. Open OrbStack from the Applications/ folder" },
     { text: "3. Click allow on the OrbStack popups" },
@@ -40,8 +43,10 @@ onMount(() => {
     {
       text: "Once the MPC client is running you can return to this page."
     },
+    { text: "---", duplicate: true },
     {
-      text: "If the MPC client is running but you still see this page, ensure that you are using either Chrome, FireFox or Brave. For Brave, disable the shields in the address bar."
+      text: "If the MPC client is running but you still see this page, ensure that you are using Chrome, Firefox, or Brave. Also, make sure to temporarily turn off ad-blockers or browser shields (especially in Brave).",
+      type: "warning"
     }
   ]