App Sed

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/lib/graphql/documents/voyager-queue.ts

@@ -0,0 +1,12 @@
+import { graphql } from "gql.tada"
+
+export const voyagerQueueQuery = graphql(/* GraphQL */ `
+  query VoyagerQueue($limit: Int = 10) {
+    queue(order_by: {id: desc}, limit: $limit, where: {status: {_eq: "ready"}}) {
+      id
+      item
+      message
+      parent
+    }
+  }
+`)

app/src/routes/+page.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 import * as Card from "$lib/components/ui/card/index.ts"
 </script>
+
 <main class="flex flex-col items-center size-full p-4 mt-16">
   <Card.Root class="max-w-lg">
     <Card.Header>

app/src/routes/explorer/(components)/cell-duration-text.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+import { Duration } from "svelte-ux"
+
+let _class: string
+export let start: Date
+export let minUnits: number
+export let totalUnits: number
+export let variant: "long" | "short" = "short"
+export { _class as class }
+</script>
+
+<Duration {totalUnits} {variant} {minUnits} {start} class={_class} {...$$restProps} />
+

app/src/routes/explorer/(components)/menu.svelte

@@ -61,7 +61,7 @@ let alwaysCollapsed = innerWidth <= alwaysCollapsedWidth
         )}
       >
         <svelte:component this={icon} class={'size-4.5'} />
-        <span class="block">{route}</span>
+        <div>{route.replaceAll('-', ' ')}</div>
       </Button>
     {/if}
   {/each}

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

@@ -6,29 +6,39 @@ import { cn } from "$lib/utilities/shadcn.ts"
 import * as Resizable from "$lib/components/ui/resizable"
 import GripVerticalIcon from "virtual:icons/tabler/grip-vertical"
 import { ScrollArea } from "$lib/components/ui/scroll-area/index.ts"
+import { page } from "$app/stores"
+import { derived } from "svelte/store"
+import { onNavigate } from "$app/navigation"
 
 export let data: LayoutData
 
-let windowSize = { width: window.innerWidth, height: window.innerHeight }
+// Pane collapse on resize has been disabled because it was throwing console errors.
 
-const handleResize = () => {
-  requestAnimationFrame(() => {
-    windowSize = { width: window.innerWidth, height: window.innerHeight }
-  })
-}
+// let windowSize = { width: window.innerWidth, height: window.innerHeight }
 
-onMount(() => {
-  window.addEventListener("resize", handleResize)
-  return () => {
-    window.removeEventListener("resize", handleResize)
-  }
-})
+// const handleResize = () => {
+//   requestAnimationFrame(() => {
+//     windowSize = { width: window.innerWidth, height: window.innerHeight }
+//   })
+// }
+
+// onMount(() => {
+//   window.addEventListener("resize", handleResize)
+//   return () => {
+//     window.removeEventListener("resize", handleResize)
+//   }
+// })
+
+// $: if (windowSize?.width < 900) {
+//   try {
+//     leftPane.collapse()
+//     // biome-ignore lint/suspicious/noEmptyBlockStatements: <explanation>
+//   } catch {}
+// }
 
 let isCollapsed = false
 let leftPane: Resizable.PaneAPI
-$: [leftSize, rightSize] = [12, 88]
-
-$: if (windowSize.width < 900) leftPane.collapse()
+$: [leftSize, rightSize] = [14, 88]
 
 const onLayoutChange: Resizable.PaneGroupProps["onLayoutChange"] = sizes => {
   document.cookie = `PaneForge:layout=${JSON.stringify(sizes)}`
@@ -43,21 +53,29 @@ const onExpand: Resizable.PaneProps["onExpand"] = () => {
   isCollapsed = false
   document.cookie = `PaneForge:collapsed=${false}`
 }
+
+let explorerRoute = $page.route.id?.split("/").at(-1)
+$: explorerPageDescription = data.tables.filter(t => t.route === explorerRoute)[0].description
+onNavigate(navigation => {
+  if (navigation.to?.route.id?.split("/").at(1) === "explorer") {
+    explorerRoute = navigation.to?.route.id?.split("/").at(2)
+  }
+})
 </script>
 
-<main class="flex flex-row flex-1 overflow-y-hidden resize">
+<main class="flex flex-row flex-1 overflow-y-hidden">
   <Resizable.PaneGroup direction="horizontal" class="w-full rounded-lg bg-re" {onLayoutChange}>
     <Resizable.Pane
       {onExpand}
       {onCollapse}
       maxSize={14}
-      minSize={12}
+      minSize={14}
       collapsible={true}
       collapsedSize={4.5}
       bind:pane={leftPane}
       defaultSize={leftSize}
       class={cn(
-        isCollapsed ? 'min-w-13 max-w-13' : 'min-w-[160px] max-w-[180px]',
+        isCollapsed ? 'min-w-13 max-w-13' : 'min-w-[180px] max-w-[180px]',
         'w-full border-r border-solid border-r-secondary',
       )}
     >
@@ -71,9 +89,11 @@ const onExpand: Resizable.PaneProps["onExpand"] = () => {
         <GripVerticalIcon />
       </div>
     </Resizable.Handle>
-    <Resizable.Pane defaultSize={rightSize} class="rounded-lg">
-      <ScrollArea class="size-full flex-1">
-        <slot />
+    <Resizable.Pane defaultSize={rightSize} class="rounded-lg p-0">
+      <ScrollArea orientation="both" class="size-full flex-1 pr-6 pl-2">
+        <h2 class="text-4xl font-bold tracking-tight mt-8 capitalize">{explorerRoute?.replaceAll('-', ' ')}</h2>
+        <p class="text-muted-foreground pb-4">{explorerPageDescription}</p>
+        <slot/>
       </ScrollArea>
     </Resizable.Pane>
   </Resizable.PaneGroup>

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

@@ -4,6 +4,8 @@ import type { SvelteComponent } from "svelte"
 
 import TvIcon from "virtual:icons/lucide/tv"
 import BlocksIcon from "virtual:icons/lucide/blocks"
+import RocketIcon from "virtual:icons/lucide/rocket"
+import DatabaseIcon from "virtual:icons/lucide/database"
 import ConnectionIcon from "virtual:icons/mdi/connection"
 import SendHorizontalIcon from "virtual:icons/lucide/send-horizontal"
 
@@ -12,6 +14,7 @@ const tables = ["blocks", "packets", "channels", "connections"] as const
 export interface Table {
   route: (typeof tables)[number]
   icon: typeof SvelteComponent
+  description: string
 }
 
 export const load = (loadEvent => {
@@ -20,10 +23,24 @@ export const load = (loadEvent => {
 
   return {
     tables: [
-      { route: "blocks", icon: BlocksIcon },
-      { route: "channels", icon: TvIcon },
-      { route: "packets", icon: SendHorizontalIcon },
-      { route: "connections", icon: ConnectionIcon }
+      {
+        route: "blocks",
+        icon: BlocksIcon,
+        description: "Blocks from all chains indexed by Hubble"
+      },
+      { route: "connections", icon: ConnectionIcon, description: "Open IBC Connections" },
+      { route: "channels", icon: TvIcon, description: "Open IBC Channels" },
+      { route: "packets", icon: SendHorizontalIcon, description: "Packets sent through Union" },
+      {
+        route: "voyager-queue",
+        icon: RocketIcon,
+        description: "Voyager Relayer VM Operations Queue"
+      },
+      {
+        route: "index-status",
+        icon: DatabaseIcon,
+        description: "Statuses of Hubble indices for connected chains"
+      }
     ] as Array<Table>
   }
 }) satisfies LayoutLoad

app/src/routes/explorer/blocks/+page.svelte

@@ -11,16 +11,17 @@ import {
 import request from "graphql-request"
 import { URLS } from "$lib/constants"
 import { writable } from "svelte/store"
+import { DurationUnits } from "svelte-ux"
 import { cn } from "$lib/utilities/shadcn.ts"
 import { CHAIN_MAP } from "$lib/constants/chains"
 import * as Table from "$lib/components/ui/table"
-import { Duration, DurationUnits } from "svelte-ux"
 import { createQuery } from "@tanstack/svelte-query"
-import CellText from "../(components)/cell-text.svelte"
 import { removeArrayDuplicates } from "$lib/utilities"
 import type { Override } from "$lib/utilities/types.ts"
 import { createVirtualizer } from "@tanstack/svelte-virtual"
 import Button from "$lib/components/ui/button/button.svelte"
+import CellText from "../(components)/cell-plain-text.svelte"
+import CellDurationText from "../(components)/cell-duration-text.svelte"
 import { cosmosBlocksQuery } from "$lib/graphql/documents/cosmos-blocks.ts"
 
 $: cosmosBlocks = createQuery({
@@ -47,26 +48,24 @@ $: if (blockData) {
 const defaultColumns: Array<ColumnDef<CosmosBlock>> = [
   {
     accessorKey: "time",
-    size: 105,
-    maxSize: 105,
+    size: 100,
     meta: {
       class: "ml-1.5 justify-start"
     },
     header: info => "Time",
     cell: info =>
-      flexRender(Duration, {
+      flexRender(CellDurationText, {
         totalUnits: 3,
         variant: "short",
+        class: "pl-2 text-clip",
         minUnits: DurationUnits.Second,
-        start: new Date(info.getValue() as string),
-        class: "pl-2 after:content-['_ago'] sm:after:content-[''] text-clip"
+        start: new Date(info.getValue() as string)
       })
   },
   {
     accessorKey: "height",
     header: info => "Height",
     size: 100,
-    maxSize: 100,
     meta: {
       class: "w-full justify-start"
     },
@@ -98,11 +97,10 @@ const defaultColumns: Array<ColumnDef<CosmosBlock>> = [
   {
     accessorKey: "hash",
     meta: {
-      class: "w-full justify-end"
+      class: "w-full justify-start ml-1.5"
     },
-    header: info => flexRender(CellText, { value: "Hash", class: "text-right pr-3" }),
-    size: 400,
-    maxSize: 400,
+    header: info => flexRender(CellText, { value: "Hash", class: "text-left" }),
+    size: 1000,
     cell: info =>
       flexRender(Button, {
         class: "py-0 px-2.5 max-w-[600px]",
@@ -152,12 +150,13 @@ $: virtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
 })
 </script>
 
-<div
-  class="p-4 w-full flex justify-center"
->
+<svelte:head>
+  <title>Union - Explorer</title>
+</svelte:head>
+
   <div
     bind:this={virtualListElement}
-    class={cn('rounded-md border border-secondary border-solid w-full max-w-[965px]')}
+    class={cn('rounded-md border border-secondary border-solid w-full')}
   >
     <Table.Root class={cn('size-full mx-auto rounded-md w-full')}>
       <Table.Header
@@ -177,7 +176,7 @@ $: virtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
                     on:click={header.column.getToggleSortingHandler()}
                     class={cn(
                       header.column.columnDef.meta?.class,
-                      'cursor-pointer select-none capitalize px-0 hover:bg-transparent font-mono text-md',
+                      'cursor-pointer select-none capitalize px-0 hover:bg-transparent text-md',
                     )}
                   >
                     <svelte:component
@@ -211,11 +210,9 @@ $: virtualizer = createVirtualizer<HTMLDivElement, HTMLTableRowElement>({
       </Table.Body>
     </Table.Root>
   </div>
-</div>
 
 <style lang="postcss">
   :global(tr td:last-child) {
-    text-align: right;
     font-variant-numeric: tabular-nums;
     font-variant: common-ligatures tabular-nums;
   }

app/src/routes/explorer/channels/+page.svelte

@@ -2,6 +2,3 @@
 import { cn } from "$lib/utilities/shadcn.ts"
 </script>
 
-<section class={cn('py-3')}>
-  <h1>Channels</h1>
-</section>

app/src/routes/explorer/connections/+page.svelte

@@ -1,7 +1 @@
-<script lang="ts">
-import { cn } from "$lib/utilities/shadcn.ts"
-</script>
 
-<section class={cn('py-3')}>
-  <h1>Connections</h1>
-</section>

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

@@ -0,0 +1,24 @@
+<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}

app/src/routes/explorer/packets/+page.svelte

@@ -1,7 +1,3 @@
 <script lang="ts">
 import { cn } from "$lib/utilities/shadcn.ts"
 </script>
-
-<section class={cn('py-3')}>
-  <h1>Packets</h1>
-</section>

app/src/routes/explorer/voyager-queue/+page.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+import { voyagerQueueQuery } from "$lib/graphql/documents/voyager-queue.ts"
+import { createQuery } from "@tanstack/svelte-query"
+import request from "graphql-request"
+import { URLS } from "$lib/constants"
+
+$: voyagerQueue = createQuery({
+  queryKey: ["voyager-queue"],
+  refetchInterval: 6_000,
+  // enabled: false,
+  queryFn: async () => request(URLS.GRAPHQL, voyagerQueueQuery, { limit: 10 })
+})
+</script>
+
+
+{#if $voyagerQueue?.data?.queue }
+<pre class="overflow-scroll">
+  {JSON.stringify($voyagerQueue.data.queue, null, 2)}
+</pre>
+{/if}