feat(ceremony): save progress

unionlabs · Sep 19, 2024 · bba89af · bba89af
1 parent 59ab156
commit bba89af
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 40 deletions.
diff --git a/ceremony/src/lib/components/Blink.svelte b/ceremony/src/lib/components/Blink.svelte
@@ -28,7 +28,7 @@ function startRandomBlinking() {
 
 $effect(() => {
   if (sleep) {
-    eye = "-"
+    eye = "×"
     clearInterval(blinkInterval)
   } else {
     eye = "0"

diff --git a/ceremony/src/lib/components/Ceremony.svelte b/ceremony/src/lib/components/Ceremony.svelte
@@ -5,12 +5,13 @@ import H3 from "$lib/components/typography/H3.svelte"
 import H2 from "$lib/components/typography/H2.svelte"
 import Install from "$lib/components/Install.svelte"
 import { start } from "$lib/client"
-import H4 from "$lib/components/typography/H4.svelte"
 import { AddressForm, type ValidState } from "$lib/components/address"
 import Blink from "$lib/components/Blink.svelte"
 import Tweet from "$lib/components/Tweet.svelte"
 import SwimLoad from "$lib/components/SwimLoad.svelte"
 import { getNumberSuffix } from "$lib/utils/utils.ts"
+import Text from "$lib/components/typography/Text.svelte"
+import Status from "$lib/components/Status.svelte"
 
 type Props = {
   contributor: ContributorState
@@ -30,23 +31,12 @@ let addressValidState: ValidState = $state("PENDING")
 
 <div class="p-8 w-full flex items-center justify-center flex-col">
 
-  <H1>
-    <Blink
-            loading={contributor.state === 'contributing'}
-            sleep={contributor.clientState === 'offline'}
-    />
-  </H1>
-  <H1>{contributor.clientState}</H1>
-
-  {#if contributor.clientState === 'offline'}
-    <Install/>
-  {/if}
+  {#if contributor.state !== 'inQueue'}
 
-
-  {#if contributor.state === 'inQueue'}
+    <Status {contributor} />
 
     <div class="border p-8 w-full max-w-4xl flex flex-col items-center">
-      <H1>You are <span class="!text-union-accent-500">{contributor.queueState.position}<span
+      <H1 class="mb-6">You are <span class="!text-union-accent-500">{contributor.queueState.position}<span
               class="lowercase">{getNumberSuffix(contributor.queueState.position)}</span> </span> in queue</H1>
 
       <SwimLoad max={contributor.queueState.count} current={contributor.queueState.position}/>
@@ -66,12 +56,15 @@ let addressValidState: ValidState = $state("PENDING")
 
 
   {:else if contributor.state === 'contribute'}
+    <Status {contributor} />
     <H1>Starting contribution...</H1>
 
   {:else if contributor.state === 'contributing'}
+    <Status {contributor} />
     <H1>Contributing...</H1>
 
   {:else if contributor.state === 'verifying'}
+    <Status {contributor} />
     <H1>Verifying your contribution...</H1>
 
   {:else if contributor.state === 'contributed'}
@@ -82,8 +75,9 @@ let addressValidState: ValidState = $state("PENDING")
     </div>
 
   {:else if contributor.state === 'noClient'}
+
+    <Status {contributor} />
     <H1>No client. Cannot start contribution.</H1>
-    <Install/>
 
   {:else}
     <H1>Not able to contribute at this time</H1>

diff --git a/ceremony/src/lib/components/Install.svelte b/ceremony/src/lib/components/Install.svelte
@@ -3,6 +3,8 @@ import { toast } from "svelte-sonner"
 import H1 from "$lib/components/typography/H1.svelte"
 import Button from "$lib/components/Button.svelte"
 
+let open = $state(false)
+
 let command = "docker run -p 4919:4919 -it haitlahcen/union-mpc-cli:latest"
 
 const copy = () => {
@@ -11,27 +13,36 @@ const copy = () => {
 }
 </script>
 
+{#if open}
+  <section class="fixed inset-0 h-full w-full bg-black flex justify-center z-50">
+    <div class="max-w-4xl p-8">
+      <H1>How to</H1>
+      <code class="text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-black text-white p-4 pl-6 font-mono">
+          <span class="flex gap-4">
+              <span class="shrink-0 text-union-accent-500">
+                  $
+              </span>
+
+              <span class="flex-1">
+                  <span>{command}</span>
+              </span>
+          </span>
+
+        <Button onclick={copy} class="!bg-transparent text-neutral-500">
+          <svg class="shrink-0 h-5 w-5" xmlns="http://www.w3.org/2000/svg"
+               viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z"></path>
+            <path
+                    d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z">
+            </path>
+          </svg>
+        </Button>
+      </code>
+      <Button onclick={() => open = !open}>Close</Button>
+    </div>
+  </section>
+{/if}
+
+<Button onclick={() => open = !open}>Install Client</Button>
 
 
-<code class="text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-black text-white p-4 pl-6 font-mono">
-    <span class="flex gap-4">
-        <span class="shrink-0 text-union-accent-500">
-            $
-        </span>
-
-        <span class="flex-1">
-            <span>{command}</span>
-        </span>
-    </span>
-
-  <Button onclick={copy} class="!bg-transparent text-neutral-500">
-    <svg class="shrink-0 h-5 w-5" xmlns="http://www.w3.org/2000/svg"
-         viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-      <path d="M8 2a1 1 0 000 2h2a1 1 0 100-2H8z"></path>
-      <path
-              d="M3 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v6h-4.586l1.293-1.293a1 1 0 00-1.414-1.414l-3 3a1 1 0 000 1.414l3 3a1 1 0 001.414-1.414L10.414 13H15v3a2 2 0 01-2 2H5a2 2 0 01-2-2V5zM15 11h2a1 1 0 110 2h-2v-2z">
-      </path>
-    </svg>
-  </Button>
-</code>
-
diff --git a/ceremony/src/lib/components/Status.svelte b/ceremony/src/lib/components/Status.svelte
@@ -0,0 +1,25 @@
+<script lang="ts">
+import Blink from "$lib/components/Blink.svelte"
+import Install from "$lib/components/Install.svelte"
+import Text from "$lib/components/typography/Text.svelte"
+import H1 from "$lib/components/typography/H1.svelte"
+import type { ContributorState } from "$lib/stores/state.svelte.ts"
+
+type Props = {
+  contributor: ContributorState
+}
+let { contributor }: Props = $props()
+</script>
+
+{#if contributor}
+  <div class="flex flex-col items-center  text-center mb-4">
+    <H1 class="mb-4 text-7xl">
+      <Blink loading={contributor.state === 'contributing'} sleep={contributor.clientState === 'offline'}/>
+    </H1>
+    <H1 class="mb-4 text-6xl">{contributor.clientState}</H1>
+    {#if contributor.clientState === 'offline'}
+      <Install/>
+      <Text class="mt-4">*You must be running the Ceremony Client to be able to contribute.</Text>
+    {/if}
+  </div>
+{/if}
diff --git a/ceremony/src/lib/stores/state.svelte.ts b/ceremony/src/lib/stores/state.svelte.ts
@@ -226,7 +226,7 @@ export class ContributorState {
         ...this.queueState,
         position: queueInfo.position,
         count: queueInfo.count,
-        estimatedTime: queueInfo.position * 30
+        estimatedTime: queueInfo.position * 60
       }
     } else {
       this.queueState = {