feat(ceremony): save terminal progress

unionlabs · Sep 25, 2024 · 09bc2ad · 09bc2ad
1 parent 7825221
commit 09bc2ad
Show file tree

Hide file tree

Showing 4 changed files with 79 additions and 69 deletions.
diff --git a/ceremony/src/lib/components/Terminal/index.svelte b/ceremony/src/lib/components/Terminal/index.svelte
@@ -1,74 +1,74 @@
 <script lang="ts">
-  import {getState} from "$lib/state/index.svelte.ts"
-  import {logout} from "$lib/state/session.svelte.ts"
-  import Contributions from "./Contributors.svelte"
-  import {goto} from "$app/navigation"
-  import {onDestroy} from "svelte"
-  import Print from "$lib/components/Terminal/Print.svelte"
-  import Activity from "$lib/components/Terminal/Activity.svelte"
-  import Blink from "$lib/components/Blink.svelte";
+import { getState } from "$lib/state/index.svelte.ts"
+import { logout } from "$lib/state/session.svelte.ts"
+import Contributions from "./Contributors.svelte"
+import { goto } from "$app/navigation"
+import { onDestroy } from "svelte"
+import Print from "$lib/components/Terminal/Print.svelte"
+import Activity from "$lib/components/Terminal/Activity.svelte"
+import Blink from "$lib/components/Blink.svelte"
 
-  const {terminal} = getState()
+const { terminal } = getState()
 
-  let {children} = $props()
+let { children } = $props()
 
-  const changeTab = async (tab: number) => {
-    if (tab === 4 && terminal.hash) {
-      console.log("change tab 4", tab)
-      terminal.setTab(tab)
-      await goto(`/0____0/${terminal.hash}`)
-    } else if (tab <= 3) {
-      console.log("change tab 1, 2, 3", tab)
-      terminal.setTab(tab)
-      await goto("/")
-    }
+const changeTab = async (tab: number) => {
+  if (tab === 4 && terminal.hash) {
+    console.log("change tab 4", tab)
+    terminal.setTab(tab)
+    await goto(`/0____0/${terminal.hash}`)
+  } else if (tab <= 3) {
+    console.log("change tab 1, 2, 3", tab)
+    terminal.setTab(tab)
+    await goto("/")
   }
+}
 
-  const unsubscribe = terminal.keys.subscribe(event => {
-    if (event) {
-      if (event.type === "keydown" && (event.shiftKey || event.ctrlKey)) {
-        switch (event.key) {
-          case "!": {
-            changeTab(1)
-            break
-          }
-          case "@": {
-            changeTab(2)
-            break
-          }
-          case "#": {
-            changeTab(3)
-            break
-          }
-          case "$": {
-            changeTab(4)
-            break
-          }
-          case "X": {
-            logout(terminal)
-            break
-          }
+const unsubscribe = terminal.keys.subscribe(event => {
+  if (event) {
+    if (event.type === "keydown" && (event.shiftKey || event.ctrlKey)) {
+      switch (event.key) {
+        case "!": {
+          changeTab(1)
+          break
+        }
+        case "@": {
+          changeTab(2)
+          break
+        }
+        case "#": {
+          changeTab(3)
+          break
+        }
+        case "$": {
+          changeTab(4)
+          break
+        }
+        case "X": {
+          logout(terminal)
+          break
         }
       }
     }
-  })
+  }
+})
 
-  onDestroy(unsubscribe)
+onDestroy(unsubscribe)
 
-  function autoScroll(node: HTMLElement) {
-    const scroll = () => {
-      node.scrollTop = node.scrollHeight
-    }
+function autoScroll(node: HTMLElement) {
+  const scroll = () => {
+    node.scrollTop = node.scrollHeight
+  }
 
-    const observer = new MutationObserver(scroll)
-    observer.observe(node, {childList: true, subtree: true})
+  const observer = new MutationObserver(scroll)
+  observer.observe(node, { childList: true, subtree: true })
 
-    return {
-      destroy() {
-        observer.disconnect()
-      }
+  return {
+    destroy() {
+      observer.disconnect()
     }
   }
+}
 </script>
 
 <section class="flex flex-col sm:justify-center items-center w-full h-full z-10">

diff --git a/ceremony/src/lib/state/contributor.svelte.ts b/ceremony/src/lib/state/contributor.svelte.ts
@@ -4,8 +4,7 @@ import {
   getUserQueueInfo,
   getContributionState,
   getUserWallet,
-  getWaitListPosition,
-  checkIfOpen
+  getWaitListPosition
 } from "$lib/supabase"
 
 type IntervalID = NodeJS.Timeout | number
@@ -22,6 +21,7 @@ type State =
   | "noClient"
 
 export type AllowanceState = "hasRedeemed" | "inWaitlist" | "inQueue" | "join" | undefined
+
 export type ContributionState = "contribute" | "contributed" | "verifying" | "notContributed"
 
 interface UserContext {
@@ -45,6 +45,7 @@ interface QueueInfoError {
 type QueueInfoResult = QueueInfoSuccess | QueueInfoError
 
 const second = 1000
+const CLIENT_POLING_INTERVAL = second
 const CONTRIBUTION_POLLING_INTERVAL = second * 5
 const QUEUE_POLLING_INTERVAL = second * 5
 
@@ -55,12 +56,10 @@ export class Contributor {
   pollingState = $state<"stopped" | "polling">("stopped")
   state = $state<State>("loading")
 
-  openToPublic = $state(false)
   contributionState = $state<ContributionState>("notContributed")
   userWallet = $state("")
   waitListPosition = $state<number | undefined>(undefined)
   downloadedSecret = $state<boolean>(localStorage.getItem("downloaded-secret") === "true")
-
   queueState = $state<UserContext>({
     position: null,
     count: null,
@@ -69,11 +68,9 @@ export class Contributor {
   })
 
   private pollIntervals: {
-    client: IntervalID | null
     queue: IntervalID | null
     contribution: IntervalID | null
   } = {
-    client: null,
     queue: null,
     contribution: null
   }
@@ -83,7 +80,6 @@ export class Contributor {
       this.userId = userId
       this.loggedIn = true
       this.checkCurrentUserState(userId)
-      this.checkIfOpen()
       this.startPolling()
     }
     onDestroy(() => {
@@ -102,10 +98,6 @@ export class Contributor {
     }
   }
 
-  async checkIfOpen() {
-    this.openToPublic = await checkIfOpen()
-  }
-
   async checkWaitListPosition(_userId: string | undefined): Promise<number | undefined> {
     this.waitListPosition = await getWaitListPosition()
     return this.waitListPosition
@@ -155,13 +147,15 @@ export class Contributor {
     this.stopContributionStatePolling()
   }
 
+
   private stopClientStatePolling() {
     if (this.pollIntervals.client) {
       clearInterval(this.pollIntervals.client)
       this.pollIntervals.client = null
     }
   }
 
+
   private startQueueInfoPolling() {
     this.pollQueueInfo()
     this.pollIntervals.queue = setInterval(
@@ -212,6 +206,7 @@ export class Contributor {
     }
   }
 
+
   private updateQueueInfo(queueInfo: QueueInfoResult) {
     if (queueInfo.inQueue) {
       this.queueState = {
@@ -228,16 +223,31 @@ export class Contributor {
         estimatedTime: null
       }
     }
+    this.updateState()
   }
 
   private updateContributionState(state: ContributionState) {
     this.contributionState = state
+    this.updateState()
   }
 
   private setError(message: string) {
     this.queueState = { ...this.queueState, error: message }
     this.state = "error"
   }
+
+  private updateState() {
+    if (this.contributionState === "contribute") {
+    } else if (this.queueState.position !== null) {
+      this.state = "inQueue"
+    } else if (this.contributionState === "contributed") {
+      this.state = "contributed"
+    } else if (this.contributionState === "verifying") {
+      this.state = "verifying"
+    } else {
+      this.state = "loading"
+    }
+  }
 }
 
 const CONTRIBUTOR_KEY = Symbol("CONTRIBUTOR")

diff --git a/ceremony/src/lib/supabase/index.ts b/ceremony/src/lib/supabase/index.ts
@@ -121,11 +121,11 @@ export const getCurrentUserState = async (userId: string | undefined): Promise<A
   const { data, error } = await queryCurrentUserState()
   if (error || !data) return undefined
 
+  return "inQueue"
   if (data.has_redeemed) return "hasRedeemed"
   if (data.in_queue) return "inQueue"
   if (data.in_waitlist) return "inWaitlist"
 
-  return "join"
 }
 
 export const getContributions = async () => {

diff --git a/ceremony/src/routes/+layout.svelte b/ceremony/src/routes/+layout.svelte
@@ -6,7 +6,7 @@ import "../styles/tailwind.css"
 import { watch } from "runed"
 import { checkAuth } from "$lib/state/session.svelte.ts"
 import Terminal from "$lib/components/Terminal/index.svelte"
-import Circles from "$lib/components/Circles.svelte";
+import Circles from "$lib/components/Circles.svelte"
 
 let { children } = $props()