Ceremony fixes (#2992)

ceremony/src/lib/components/Ceremony.svelte

@@ -55,7 +55,7 @@ $effect(() => {
     <H1 class="py-8">Verifying your contribution...</H1>
     <Warning stupid={false}/>
 
-  {:else if contributor.clientState !== 'offline'}
+  {:else if contributor.clientState === 'offline'}
     <Install {contributor}/>
 
   {:else if !contributor.downloadedSecret}

ceremony/src/lib/components/Reward.svelte

@@ -36,15 +36,15 @@ const skip = async () => {
 }
 </script>
 
-
 <div class="text-center flex flex-col items-center gap-4">
   <H2 class="">Add an address</H2>
   <Text class="">You may receive rewards for successful contributions.</Text>
+  <Text>You can enter your union or any cosmos address.</Text>
   <AddressForm class="" onValidation={result => (addressValidState = result)} {contributor} />
   <Text class="py-8">Or</Text>
   <H4>I don't want rewards</H4>
-  <Text>You can contribute without adding an address</Text>
-  <Button onclick={skip} class="bg-transparent text-white hover:text-white border-2 border-white hover:bg-neutral-800">Skip
+  <Text>You can contribute without adding an address.</Text>
+  <Button onclick={skip} variant="secondary">Skip
     rewards
   </Button>
 </div>

ceremony/src/lib/components/Waitlist.svelte

@@ -4,6 +4,7 @@ import Code from "$lib/components/Code.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 { getNumberSuffix } from "$lib/utils/utils.ts"
 
 type Props = {
   contributor: ContributorState
@@ -13,8 +14,8 @@ let { contributor }: Props = $props()
 </script>
 
 <H1 class="mb-4">You're on the waitlist </H1>
-<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>
+<Text class="mb-2">When the ceremony opens to the public, you will be <span class="text-union-accent-500">{contributor.waitListPosition}{getNumberSuffix(contributor.waitListPosition)}</span> in the public queue.</Text>
+<Text class="mb-12">You will receive an email 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">

ceremony/src/lib/layout/Navbar/index.svelte

@@ -25,7 +25,7 @@ async function logout() {
 let loggedIn = $derived(!!user.session?.user.id)
 </script>
 
-<header class="fixed bg-black top-0 inset-x-0 flex items-center justify-between gap-4  px-2 md:h-16 md:px-4 z-50">
+<header class="fixed bg-black top-0 inset-x-0 flex items-center justify-between gap-4 px-2 md:h-16 md:px-4 z-50">
   <nav class=" w-full p-4">
     <div class="flex justify-between items-center">
       <div class="mr-auto flex flex-1 flex-shrink-0 items-center justify-start gap-3">

ceremony/src/routes/+page.svelte

@@ -37,7 +37,7 @@ async function diveIn(provider: AuthProviders) {
   <div class="text-5xl font-supermolot font-bold">
     <Blink/>
   </div>
-  <H1>Welcome to the Union Ceremony</H1>
+  <H1 class="text-center">Welcome to the Union Ceremony</H1>
   <div class="text-center">
     <Text>Participation is currently invite only.</Text>
     <Text>If you don’t have an invitation, please join the waitlist.</Text>

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

@@ -1,8 +1,9 @@
 <script lang="ts">
+import { getContributions } from "$lib/supabase"
 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"
+import Blink from "$lib/components/Blink.svelte"
+import H4 from "$lib/components/typography/H4.svelte"
 
 let intervalId: NodeJS.Timeout | number
 let contributions = $state()
@@ -19,32 +20,40 @@ $effect(() => {
     if (intervalId) clearInterval(intervalId)
   }
 })
+
+function getFirstLetter(str: string): string | undefined {
+  return str.length > 0 ? str[0] : undefined
+}
 </script>
 
 {#if contributions}
-  <div class="flex flex-col items-center h-svh overflow-y-auto pb-24 pt-36 w-full">
+  <div class="flex flex-col-reverse items-center h-svh overflow-y-auto pb-24 pt-36 w-full">
     <div class="w-full h-48 bg-gradient-to-b via-black from-black to-transparent absolute top-0"></div>
-    <div class="flex flex-col items-center max-w-md">
-      <div class="rounded-full border-[2px] h-8 w-8"></div>
-      <div class="h-24 w-[2px] bg-white"></div>
+    <div class="flex flex-col items-center max-w-sm">
       {#each contributions as contribution, index }
-        <a href="/contributions/{contribution.public_key_hash}" class="flex items-center gap-4 w-full">
-
-          <Text>{(index + 1) * 10}M</Text>
-          <div class="text-white flex gap-1 items-center border-white border px-3 py-2 w-full">
+        {#if index !== 0}
+          <div class="h-8 w-[2px] bg-white"></div>
+        {/if}
+        <a href="/contributions/{contribution.public_key_hash}"
+           class="text-white flex gap-1 items-center border-white border px-3 py-2 w-full">
+          {#if contribution.avatar_url}
             <img class="size-7" src={contribution.avatar_url} alt="">
-            <Text class="uppercase max-w-48 truncate">{contribution.user_name}</Text>
-          </div>
+          {:else}
+            <div class="flex size-7 bg-union-accent-500 items-center justify-center text-black">{getFirstLetter(contribution.user_name)}</div>
+          {/if}
+          <Text class="uppercase max-w-48 truncate">{contribution.user_name}</Text>
         </a>
-        {#if index !== contributions.length - 1}
-          <div class="h-12 w-[2px] bg-white"></div>
-        {/if}
       {/each}
+      <div class="h-8 w-[2px] bg-white"></div>
+      <div class="text-white flex gap-2 items-center border-white border px-3 py-2 mb-16">
+        <Spinner class="size-5 text-union-accent-500"/>
+        <span>Next contribution...</span>
+      </div>
+      <H4>
+        <Blink/>
+      </H4>
     </div>
   </div>
 {:else}
   <Spinner class="size-5 text-union-accent-500"/>
-{/if}
-
-<Live />
-
+{/if}

ceremony/src/routes/contributions/[hash]/+page.svelte

@@ -30,31 +30,41 @@ async function copyToClipboard(text: string, label: string) {
   }
 }
 
-const imagePath = "/images/ceremony.png"
-let imageUrl = $derived(new URL(imagePath, $page.url.origin).href)
+const imagePath = "https://ceremony.union.build/images/ceremony.png"
 </script>
 
 <svelte:head>
-  <meta property="og:type" content="Website"/>
+  <title>Union Ceremony</title>
+  <meta name="description" content=""/>
+
+  <meta property="og:title" content="Union Ceremony"/>
+  <meta property="og:description" content=""/>
+  <meta property="og:type" content="website"/>
+  <meta property="og:url" content="https://ceremony.union.build"/>
   <meta property="og:site_name" content="Union Ceremony"/>
-  <meta property="og:locale" content="en"/>
+  <meta property="og:locale" content="en_US"/>
+  <meta property="og:image" content={imagePath}/>
+  <meta property="og:image:secure_url" content={imagePath}/>
   <meta property="og:image:type" content="image/png"/>
   <meta property="og:image:width" content="1200"/>
   <meta property="og:image:height" content="675"/>
+  <meta property="og:image:alt" content="Union Ceremony event banner"/>
+
+  <meta name="twitter:title" content=""/>
+  <meta name="twitter:description" content=""/>
   <meta name="twitter:card" content="summary_large_image"/>
   <meta name="twitter:site" content="@union_build"/>
   <meta name="twitter:creator" content="@union_build"/>
-  <meta property="og:image" content={imageUrl}/>
-  <meta property="og:image:secure_url" content={imageUrl}/>
-  <meta name="twitter:image" content={imageUrl}/>
+  <meta name="twitter:image" content={imagePath}/>
+  <meta name="twitter:image:alt" content="Union Ceremony event banner"/>
 </svelte:head>
 
-<div class="w-full flex justify-center">
+<div class="w-full flex justify-center mt-[80px] pb-16">
   {#await getUserContribution(hash)}
     <Spinner class="size-5 text-union-accent-500"/>
   {:then contribution}
     {#if contribution}
-      <div class="flex flex-col items-start gap-1 px-3 py-2 px-4">
+      <div class="flex flex-col items-start gap-1 py-2 px-4">
         <div>
           <H2>Contributor: <span class="!text-union-accent-500">{contribution.user_name}</span></H2>
         </div>