no ceremony names (#3018)

- feat(ceremony): show uuids instead of names - refactor(ceremony): use snippets
unionlabs · Sep 24, 2024 · ea8814b · ea8814b
2 parents 8ce409a + acb84b1
commit ea8814b
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 18 deletions.
diff --git a/ceremony/src/lib/supabase/queries.ts b/ceremony/src/lib/supabase/queries.ts
@@ -62,7 +62,7 @@ export const queryCurrentUserState = async () => {
 export const queryContributions = async () => {
   const { data, error } = await supabase
     .from("users_contribution")
-    .select("public_key_hash, user_name, avatar_url")
+    .select("public_key_hash, user_name, avatar_url, payload_id")
     .order("time_verified", { ascending: false })
 
   return { data, error }

diff --git a/ceremony/src/routes/contributions/+page.svelte b/ceremony/src/routes/contributions/+page.svelte
@@ -27,29 +27,33 @@ function getFirstLetter(str: string): string | undefined {
 {#if contributions}
   <div class="flex flex-col items-center pb-24 pt-36 w-full overflow-y-scroll">
     <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-sm">
+    <div class="flex flex-col items-stretch max-w-sm">
       <div class="text-white flex gap-2 items-center border-white border px-3 py-2">
         <Spinner class="size-5 text-union-accent-500"/>
         <span>Next contribution...</span>
       </div>
-      <div class="h-8 w-[2px] bg-white"></div>
+      {@render ContributionConnector()}
       {#each contributions as contribution, index }
-        <a href="/contributions/{contribution.public_key_hash}"
-           class="text-white flex gap-2 items-center border-white border p-2 w-full">
-          {#if contribution.avatar_url}
-            <img class="size-7" src={contribution.avatar_url} alt="">
-          {: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-8 w-[2px] bg-white"></div>
-        {/if}
+        {@render ContributionBox(contribution)}
+      {@render ContributionConnector()}
       {/each}
+      {@render ContributionBox({ user_name: "Genesis", payload_id: "00000000-0000-0000-0000-000000000000"})}
     </div>
   </div>
 
 {:else}
   <Spinner class="size-5 text-union-accent-500"/>
-{/if}
+{/if}
+
+
+{#snippet ContributionBox(contribution: unknown)}
+  <a href="/contributions/{contribution.public_key_hash}"
+     class="text-white flex gap-2 items-center border-white border p-2 pr-3  w-full">
+      <div class="flex size-7 bg-union-accent-500 items-center justify-center text-black">{getFirstLetter(contribution.user_name)}</div>
+    <Text class="uppercase text-sm font-mono">{contribution.payload_id}</Text>
+  </a>
+{/snippet}
+
+{#snippet ContributionConnector()}
+  <div class="h-8 w-[1px] bg-white self-center"></div>
+{/snippet}
diff --git a/ceremony/src/routes/contributions/[hash]/+page.svelte b/ceremony/src/routes/contributions/[hash]/+page.svelte
@@ -67,7 +67,7 @@ const imagePath = "https://ceremony.union.build/images/ceremony.png"
     {#if contribution}
       <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>
+          <H2><span class="!text-union-accent-500">{contribution.payload_id}</span></H2>
         </div>
 
         <div class="flex flex-col gap-4">
@@ -99,4 +99,4 @@ const imagePath = "https://ceremony.union.build/images/ceremony.png"
         word-break: break-word;
         overflow-wrap: break-word;
     }
-</style>
+</style>