show submit state on merchants list

src/routes/(app)/players/+page.svelte

@@ -1,24 +1,26 @@
 <script lang="ts">
     import Page from "$lib/components/page.svelte";
     import { page } from "$app/stores";
-    import { onMount } from "svelte";
-    import type { Address } from "viem";
+    import { zeroHash, type Address, type Hex } from "viem";
     import { goto } from "$app/navigation";
     import { browser } from "$app/environment";
     import { PUBLIC_DATA_URL } from "$env/static/public";
     import Lede from "$lib/components/lede.svelte";
     import CatSpinner from "$lib/components/cat-spinner.svelte";
-    import { base } from "$app/paths";
     import { createBusy, type BusyState } from "$lib/kit";
     import { UserError, getFriendlyErrorMsg } from "$lib/util";
     import Player from "$lib/components/player.svelte";
+    import { multiReadContestContract } from "$lib/contest";
+    import { getSiteContext } from "$lib/site";
 
     interface Player {
         name: string;
         address: Address;
         created: Date;
+        submitted: boolean;
     }
 
+    const { publicClient, seasons } = getSiteContext();
     let busyState: BusyState;
     const busyAwait = createBusy(s => busyState = s);
     enum SortOption {
@@ -39,10 +41,19 @@
             }
         }
     }
-    $: players = sortPlayers(players, sortBy);
+    $: {
+        if ($seasons.length) {
+            fetchPlayers();
+        }
+    }
+    $: {
+        if (sortBy) {
+            players = sortPlayers(players, sortBy);
+        }
+    }
 
-    onMount(async () => {
-        await busyAwait((async () => {
+    async function fetchPlayers(): Promise<void> {
+        return busyAwait((async () => {
             const resp = await fetch(`${PUBLIC_DATA_URL}/players`, {
                 headers: {
                     'content-type': 'application/json',
@@ -52,14 +63,27 @@
                 const { error: errorMsg } = await resp.json();
                 throw new UserError(`Failed to fetch players: ${errorMsg}`);
             }
-            players = (await resp.json()).map((p: any) => ({
+            const players_ = (await resp.json()).map((p: any) => ({
                 name: p.name,
                 address: p.address,
                 created: new Date(p.created),
-            }));
+                submitted: false,
+            })) as Player[];
+            if ($seasons.length) {
+                const playerCodeHashes = await multiReadContestContract<Hex[]>({
+                    client: publicClient,
+                    calls: players_.map(p => ({
+                        fn: 'playerCodeHash', args: [$seasons.length - 1, p.address],
+                    })),
+                });
+                for (let i = 0; i < playerCodeHashes.length; ++i) {
+                    players_[i].submitted = playerCodeHashes[i] !== zeroHash;
+                }
+            }
+            players = players_;
             sortBy = $page.url.searchParams.get('sortBy') as any ?? 'name';
         })());
-    });
+    }
 
     function sortPlayers(players_: Player[], sortBy_: typeof sortBy): Player[] {
         if (sortBy_ === 'joined') {
@@ -77,11 +101,21 @@
     ol {
         max-width: min-content;
         padding-inline-start: 0;
-    }
-    li {
-        display: flex;
-        gap: 4ex;
-        justify-content: space-between;
+        display: table;
+        li {
+            display: table-row;
+
+            > * {
+                display: table-cell;
+                padding: 0.1em 1ex;
+                width: fit-content;
+                white-space: nowrap;
+            }
+
+            > .submitted {
+                color: green;
+            }
+        }
     }
 
     .sort-options {
@@ -126,9 +160,14 @@
             <ol>
                 {#each players as player, i (player.address)}
                 <li>
-                    <span>{i + 1}.</span>
-                    <span><Player name={player.name} /></span>
-                    <span>{player.created.toLocaleDateString()}</span>
+                    <div>{i + 1}.</div>
+                    <div><Player name={player.name} /></div>
+                    <div class="submitted">
+                        {#if player.submitted}
+                        📄 ✓
+                        {/if}
+                    </div>
+                    <div>Joined {player.created.toLocaleDateString()}</div>
                 </li>
                 {/each}
             </ol>