fix(ceremony): save changes

ceremony/src/lib/components/Ceremony.svelte

@@ -40,22 +40,31 @@ window.addEventListener("beforeunload", (e: BeforeUnloadEvent) => {
 
   {#if !contributor.userWallet}
     <Reward {contributor}/>
+
   {:else if contributor.state === 'contributed'}
     <Thanks {contributor}/>
+
+  {:else if contributor.state === 'verifying'}
+    <H1>Verifying your contribution...</H1>
+
   {: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>
+
   {:else if contributor.state === 'contributing'}
     <H1>Contributing...</H1>
-  {:else if contributor.state === 'verifying'}
-    <H1>Verifying your contribution...</H1>
+
   {:else}
     <H1>Not able to contribute at this time</H1>
+
   {/if}
 
 </div>

ceremony/src/lib/components/Install.svelte

@@ -32,7 +32,8 @@ const copy = () => {
       because docker desktop is too slow. <br>
       If you use docker desktop it is extremely likely that you lose your contribution slot.
     </Text>
-    <Text class="mt-4 !text-union-accent-500">Once you have OrbStack/Docker running you should paste this in your terminal.</Text>
+    <Text class="mt-4 !text-union-accent-500">Once you have OrbStack/Docker running you should open a terminal window and paste the command to start the MPC client then come back here.
+    </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">
           <span class="flex gap-4">
@@ -56,6 +57,8 @@ const copy = () => {
         </Button>
       </code>
     </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>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>
   </div>
 {/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,7 +6,7 @@ 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"
 
 type Props = {
   contributor: ContributorState
@@ -29,4 +29,8 @@ let { contributor }: Props = $props()
       (est.).
     </H3>
   </div>
+  <div class="text-center font-bold text-lg">
+    <Text>You are connected to your MPC Client.</Text>
+    <Text>Do not close this tab or your terminal running the MPC Client.</Text>
+  </div>
 </div>

ceremony/src/lib/components/address/AddressForm.svelte

@@ -70,7 +70,7 @@ const onAddressSubmit = async (event: Event) => {
     spellcheck="false"
     autocapitalize="none"
     bind:value={inputText}
-    placeholder="union1qp0wtsfltjk9rnvyu3fkdv0s0skp4y5y3py96f"
+    placeholder="union1ab…."
     class={clsx([
       className,
       'text-md font-supermolot h-9 px-2 outline-none border-2',

ceremony/src/routes/+page.svelte

@@ -7,6 +7,7 @@ import { ContributorState, getContributorState } from "$lib/stores/state.svelte.
 import Text from "$lib/components/typography/Text.svelte"
 import { supabase } from "$lib/supabase/client.ts"
 import { page } from "$app/stores"
+import H4 from "$lib/components/typography/H4.svelte"
 
 const contributor: ContributorState = getContributorState()
 
@@ -43,9 +44,12 @@ async function diveIn(provider: AuthProviders) {
     <Text>Participation is currently exclusive to those who have an invitation.</Text>
     <Text>If you don't have a invitation you can still join the waitlist.</Text>
   </div>
-  <div class="flex gap-4">
-    {#each providers as provider}
-      {@render Dive(provider)}
-    {/each}
+  <div>
+    <H4 class="text-center mb-4">Log in</H4>
+    <div class="flex gap-4">
+      {#each providers as provider}
+        {@render Dive(provider)}
+      {/each}
+    </div>
   </div>
 </section>

ceremony/src/routes/contributions/+page.svelte

@@ -2,6 +2,7 @@
 import Spinner from "$lib/components/Spinner.svelte"
 import Text from "$lib/components/typography/Text.svelte"
 import { getContributions } from "$lib/supabase"
+import Live from "$lib/components/Live.svelte"
 
 let intervalId: NodeJS.Timeout | number
 let contributions = $state()
@@ -45,3 +46,5 @@ $effect(() => {
   <Spinner class="size-5 text-union-accent-500"/>
 {/if}
 
+<Live />
+