feat(app): add index status to explorer

app/src/lib/constants/index.ts

@@ -10,6 +10,7 @@ export const UNO = {
 export const URLS = {
   GRAPHQL: "https://graphql.union.build/v1/graphql",
   GRAPHQL_WSS: "wss://noble-pika-27.hasura.app/v1/graphql",
+  GRAPHQL_REST: "https://graphql.union.build/api/rest",
   UNION: {
     /**
      * TODO: add array of RPCs and pass to `viem`'s `fallback` array

app/src/routes/explorer/+layout.ts

@@ -7,6 +7,7 @@ import BlocksIcon from "virtual:icons/lucide/blocks"
 import ConnectionIcon from "virtual:icons/mdi/connection"
 import SendHorizontalIcon from "virtual:icons/lucide/send-horizontal"
 import RocketIcon from "virtual:icons/lucide/rocket"
+import DatabaseIcon from "virtual:icons/lucide/database"
 
 const tables = ["blocks", "packets", "channels", "connections"] as const
 
@@ -25,7 +26,8 @@ export const load = (loadEvent => {
       { route: "channels", icon: TvIcon },
       { route: "packets", icon: SendHorizontalIcon },
       { route: "connections", icon: ConnectionIcon },
-      { route: "voyager-queue", icon: RocketIcon }
+      { route: "voyager-queue", icon: RocketIcon },
+      { route: "index-status", icon: DatabaseIcon }
     ] as Array<Table>
   }
 }) satisfies LayoutLoad

app/src/routes/explorer/index-status/+page.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+import { voyagerQueueQuery} from "$lib/graphql/documents/voyager-queue.ts"
+import { createQuery } from "@tanstack/svelte-query"
+import { URLS } from "$lib/constants"
+
+$: indexStatus = createQuery({
+  queryKey: ["index-status"],
+  refetchInterval: 1_000,
+  // enabled: false,
+  queryFn: async () => {
+    const response = await fetch(`${URLS.GRAPHQL_REST}/index_status`)
+    const json = await response.json() as { v0_index_status: unknown } ;
+    return json.v0_index_status;
+  }
+})
+
+  
+</script>
+
+<h1>Index Status</h1>
+
+{#if $indexStatus?.data }
+<pre class="overflow-scroll">
+  {JSON.stringify($indexStatus?.data, null, 2)}
+</pre>
+{/if}