fix(ceremony): save changes

ceremony/src/lib/components/Blink.svelte

@@ -2,15 +2,16 @@
 type Props = {
   loading?: boolean
   sleep?: boolean
+  love?: boolean
 }
 
-let { loading = false, sleep = false }: Props = $props()
+let { loading = false, sleep = false, love = false }: Props = $props()
 
-let eye = $state(sleep ? "-" : "0")
+let eye = $state(sleep ? "-" : love ? "♡" : "0")
 let blinkInterval: number | NodeJS.Timeout
 
 function blinkEye() {
-  if (!sleep) {
+  if (!(sleep || love)) {
     eye = "-"
     setTimeout(() => {
       eye = "0"
@@ -20,7 +21,7 @@ function blinkEye() {
 
 function startRandomBlinking() {
   blinkInterval = setInterval(() => {
-    if (!sleep && Math.random() < 0.05) {
+    if (!(sleep || love) && Math.random() < 0.05) {
       blinkEye()
     }
   }, 200)
@@ -30,6 +31,9 @@ $effect(() => {
   if (sleep) {
     eye = "×"
     clearInterval(blinkInterval)
+  } else if (love) {
+    eye = "♡"
+    clearInterval(blinkInterval)
   } else {
     eye = "0"
     startRandomBlinking()
@@ -73,31 +77,11 @@ $effect(() => {
         }
     }
 
-    .wobble span:nth-child(1) {
-        animation-delay: 0s;
-    }
-
-    .wobble span:nth-child(2) {
-        animation-delay: 0.1s;
-    }
-
-    .wobble span:nth-child(3) {
-        animation-delay: 0.2s;
-    }
-
-    .wobble span:nth-child(4) {
-        animation-delay: 0.3s;
-    }
-
-    .wobble span:nth-child(5) {
-        animation-delay: 0.4s;
-    }
-
-    .wobble span:nth-child(6) {
-        animation-delay: 0.5s;
-    }
-
-    .wobble span:nth-child(7) {
-        animation-delay: 0.6s;
-    }
+    .wobble span:nth-child(1) { animation-delay: 0s; }
+    .wobble span:nth-child(2) { animation-delay: 0.1s; }
+    .wobble span:nth-child(3) { animation-delay: 0.2s; }
+    .wobble span:nth-child(4) { animation-delay: 0.3s; }
+    .wobble span:nth-child(5) { animation-delay: 0.4s; }
+    .wobble span:nth-child(6) { animation-delay: 0.5s; }
+    .wobble span:nth-child(7) { animation-delay: 0.6s; }
 </style>

ceremony/src/lib/components/Button.svelte

@@ -20,12 +20,13 @@ let {
 }: Props = $props()
 
 const styles = {
-  primary: "bg-union-accent-500 text-black hover:text-black",
-  secondary: "bg-transparent text-white border-2 border-white hover:bg-neutral-800"
+  primary: "bg-union-accent-500 text-black hover:text-black disabled:bg-neutral-500",
+  secondary:
+    "bg-transparent text-white border-2 border-white hover:bg-neutral-800 disabled:bg-neutral-500"
 }
 const getClass = (type: "primary" | "secondary") => styles[type] || styles.primary
 let combinedClasses = $derived(
-  `flex items-center w-fit gap-2 px-4 py-2 font-bold uppercase justify-center ${getClass(variant)} ${className}`
+  `flex items-center w-fit gap-2 px-4 py-2 font-bold uppercase justify-center transition ${getClass(variant)} ${className}`
 )
 </script>
 

ceremony/src/lib/components/Ceremony.svelte

@@ -8,6 +8,8 @@ import Queue from "$lib/components/Queue.svelte"
 import Install from "$lib/components/Install.svelte"
 import Thanks from "$lib/components/Thanks.svelte"
 import { user } from "$lib/stores/user.svelte.ts"
+import Blink from "$lib/components/Blink.svelte"
+import Warning from "$lib/components/Warning.svelte"
 
 type Props = {
   contributor: ContributorState
@@ -28,34 +30,57 @@ $effect(() => {
   if (contributor.clientState !== "offline") {
     generate()
   }
-})
 
-window.addEventListener("beforeunload", (e: BeforeUnloadEvent) => {
-  e.preventDefault()
-  e.returnValue = ""
+  if (contributor.state === "contributing" || contributor.state === "inQueue") {
+    window.addEventListener("beforeunload", (e: BeforeUnloadEvent) => {
+      e.preventDefault()
+      e.returnValue = ""
+    })
+  }
 })
 </script>
 
 <div class="p-8 w-full flex items-center justify-center flex-col">
 
   {#if !contributor.userWallet}
     <Reward {contributor}/>
+
   {:else if contributor.state === 'contributed'}
     <Thanks {contributor}/>
-  {:else if contributor.clientState === 'offline'}
+
+  {:else if contributor.state === 'verifying'}
+    <H1 class="mb-4 text-7xl">
+      <Blink loading={true}/>
+    </H1>
+    <H1 class="py-8">Verifying your contribution...</H1>
+    <Warning stupid={false}/>
+
+  {:else if contributor.clientState !== 'offline'}
     <Install {contributor}/>
+
   {:else if !contributor.downloadedSecret}
     <Download {contributor}/>
+
   {:else if contributor.state === "inQueue"}
     <Queue {contributor}/>
+
   {:else if contributor.state === 'contribute'}
-    <H1>Starting contribution...</H1>
+    <H1 class="mb-4 text-7xl">
+      <Blink loading={true}/>
+    </H1>
+    <H1 class="py-8">Starting contribution...</H1>
+    <Warning />
+
   {:else if contributor.state === 'contributing'}
-    <H1>Contributing...</H1>
-  {:else if contributor.state === 'verifying'}
-    <H1>Verifying your contribution...</H1>
+    <H1 class="mb-4 text-7xl">
+      <Blink loading={true}/>
+    </H1>
+    <H1 class="py-8">Contributing...</H1>
+    <Warning />
+
   {:else}
     <H1>Not able to contribute at this time</H1>
+
   {/if}
 
 </div>

ceremony/src/lib/components/Download.svelte

@@ -39,7 +39,7 @@ function setDownloadedSecret() {
   <H1>Store your PGP secret</H1>
   <Text class="text-center mb-4">
     Please store your secret somewhere safe, such as in your password manager.
-    <br> Never share your secret.
+    <br> There's no need to open the file and remember to never share a secret.
     <br> This secret key is the only way to prove that you have contributed.
   </Text>
   <div class="flex gap-4">

ceremony/src/lib/components/Install.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-import Blink from "$lib/components/Blink.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"
 import Button from "$lib/components/Button.svelte"
 import { toast } from "svelte-sonner"
+import { isSafari } from "$lib/utils/utils.ts"
 
 type Props = {
   contributor: ContributorState
@@ -21,41 +21,72 @@ const copy = () => {
 </script>
 
 {#if contributor}
-  <div class="flex flex-col items-center  text-center mb-4">
+  <div class="flex flex-col items-center text-center mb-4">
 
-    <H1 class="mb-4">Run the mpc client</H1>
-    <Text>You need to have docker running to contribute.<br>
-      For macOS you need to install
+    <H1 class="mb-4">Run the MPC client</H1>
+    <Text>
+      You must have docker installed in order to contribute. <br> On linux, install docker through your package manager, and skip to step 5.
+      <br>
+      On macOS, we highly recommend
       <a href="https://orbstack.dev/"
          class="underline underline-offset-4 decoration-union-accent-500"
          target="_blank">OrbStack</a>
-      because docker desktop is too slow. <br>
-      If you use docker desktop it is extremely likely that you lose your contribution slot.
+      because <span class="text-rose-400">Docker Desktop is too slow.</span>
+      <br>
+      <strong>
+        If you use Docker Desktop it is extremely likely that you will <span class="text-rose-400">lose your contribution slot.</span>
+      </strong>
+    </Text>
+    <Text class="mt-4 !text-union-accent-500">
+      <a href="https://orbstack.dev/">1. Install OrbStack</a>
+    </Text>
+    <Text class="mt-4 !text-union-accent-500">
+      2. Open OrbStack from the Applications/ folder
+    </Text>
+    <Text class="mt-4 !text-union-accent-500">
+      3. Click allow on the OrbStack popups
+    </Text>
+    <Text class="mt-4 !text-union-accent-500">
+      4. Open Terminal from the Applications/Utilities/ folder
+    </Text>
+    <Text class="mt-4 !text-union-accent-500">
+      5. Paste the following command in Terminal to start the MPC client:
     </Text>
-    <Text class="mt-4 !text-union-accent-500">Once you have OrbStack/Docker running you should paste this in your terminal.</Text>
     <div class="max-w-4xl p-8">
-      <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 border-white border">
+      <button onclick={copy}>
+        <code
+              class="cursor-pointer text-sm sm:text-base inline-flex text-left items-center space-x-4 bg-black text-white p-4 pl-6 font-mono border-white border">
           <span class="flex gap-4">
               <span class="shrink-0 text-union-accent-500 select-none">
                   $
               </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>
+
+        </code>
+      </button>
     </div>
-    <Text>Is it running but still see this page? We support Chrome, FireFox and Brave. <br>For Brave disable the shields in the address bar.</Text>
+    <Text>
+      Once the MPC client is running you can return to this page.
+    </Text>
+    <Text class="mb-4">
+      If the MPC client is running but you still see this page, ensure that you are using either Chrome, FireFox or Brave.
+      <br>
+      For Brave, disable the shields in the address bar.
+    </Text>
+    {#if isSafari()}
+      <div class="border border-rose-400 bg-rose-400/10 text-rose-400 py-2 px-3">
+        Safari is not supported
+      </div>
+    {/if}
   </div>
-{/if}
+{/if}

ceremony/src/lib/components/Join.svelte

@@ -55,7 +55,7 @@ $effect(() => {
   <Text class="py-8">Or</Text>
   <H2>Don't have an invite?</H2>
   <Text>You can join the waitlist now to get priority access when the ceremony opens.</Text>
-  <Button class="bg-transparent text-white hover:text-white border-2 border-white hover:bg-neutral-800" loading={waitlistLoading} onclick={handleWaitlistJoin} type="button">
+  <Button variant="secondary" loading={waitlistLoading} onclick={handleWaitlistJoin} type="button">
     {isOpenToPublic ? "Join the queue" : "Join the waitlist"}
   </Button>
 </div>

ceremony/src/lib/components/Live.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+import { onDestroy } from "svelte"
+import { supabase } from "$lib/supabase/client"
+
+let live = $state<Array<any>>([])
+
+const handleInserts = (payload: { new: any }) => {
+  console.log(payload)
+  live.push(payload)
+}
+
+const subscription = supabase
+  .channel("table_db_changes")
+  .on(
+    "postgres_changes",
+    {
+      event: "INSERT",
+      schema: "public",
+      table: "log"
+    },
+    handleInserts
+  )
+  .subscribe()
+
+onDestroy(() => {
+  subscription.unsubscribe()
+})
+</script>
+
+<div class="flex-col">
+  {#each live as item (item.created_at)}
+    <div class="text-white">{JSON.stringify(item)}</div>
+  {/each}
+</div>

ceremony/src/lib/components/Queue.svelte

@@ -6,13 +6,19 @@ import Blink from "$lib/components/Blink.svelte"
 import SwimLoad from "$lib/components/SwimLoad.svelte"
 import H1 from "$lib/components/typography/H1.svelte"
 import { ContributorState } from "$lib/stores/state.svelte.js"
-import { start } from "$lib/client"
+import Text from "$lib/components/typography/Text.svelte"
+import Warning from "$lib/components/Warning.svelte"
 
 type Props = {
   contributor: ContributorState
 }
 
 let { contributor }: Props = $props()
+
+window.addEventListener("beforeunload", (e: BeforeUnloadEvent) => {
+  e.preventDefault()
+  e.returnValue = ""
+})
 </script>
 
 <H1 class="mb-4 text-7xl">
@@ -29,4 +35,5 @@ let { contributor }: Props = $props()
       (est.).
     </H3>
   </div>
+<Warning />
 </div>

ceremony/src/lib/components/Thanks.svelte

@@ -3,17 +3,18 @@ import Text from "$lib/components/typography/Text.svelte"
 import H1 from "$lib/components/typography/H1.svelte"
 import Tweet from "$lib/components/Tweet.svelte"
 import { ContributorState } from "$lib/stores/state.svelte.js"
+import Blink from "$lib/components/Blink.svelte"
 
 type Props = {
   contributor: ContributorState
 }
 
 let { contributor }: Props = $props()
 </script>
-<div class="flex flex-col justify-center items-center gap-4">
+<div class="flex flex-col justify-center items-center gap-4 text-center">
+  <H1>  <Blink love={true}/></H1>
   <H1>Thank you!</H1>
-  <Text>Your contribution is completed. Thank you for securing the Union proving system!</Text>
-  <Text>You can tweet the cryptographic attestation of your contribution for extra transparency.</Text>
+  <Text>Your contribution is complete. Thank you for securing the Union network. <br> Tweet your cryptographic attestation for extra transparency:</Text>
 
   <Tweet/>
   <a href="/contributions" class="underline underline-offset-4 decoration-union-accent-500 text-white uppercase"

ceremony/src/lib/components/Waitlist.svelte

@@ -13,7 +13,8 @@ let { contributor }: Props = $props()
 </script>
 
 <H1 class="mb-4">You're on the waitlist </H1>
-<Text class="mb-12">When the ceremony opens to the public you will have position <span>{contributor.waitListPosition}</span> of public queue.</Text>
+<Text class="mb-2">When the ceremony opens to the public you will have position <span>{contributor.waitListPosition}</span> of public queue.</Text>
+<Text class="mb-12">You will be emailed 12-18 hours before the public phase begins.</Text>
 <H4 class="mb-4">Received an invite?</H4>
 <Text class="mb-4">You can skip the waitlist and join now.</Text>
 <form class="flex flex-col items-center">