feat(app): better transfers view

app/src/lib/graphql/documents/transfers.ts

@@ -6,10 +6,12 @@ export const allTransfersQueryDocument = graphql(/* GraphQL */ `
       sender
       normalized_sender
       source_chain_id
+      source_connection_id
       source_channel_id
       receiver
       normalized_receiver
       destination_chain_id
+      destination_connection_id
       destination_channel_id
       assets
       source_timestamp

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

@@ -0,0 +1,15 @@
+<script lang="ts">
+import { truncate } from "$lib/utilities/format"
+import { cn } from "$lib/utilities/shadcn.ts"
+
+export let value: object
+</script>
+
+<div  class={cn("flex flex-col")} {...$$restProps}>
+  {#each Object.entries(value) as [denom, info]}
+    <div class="font-semibold">{info.amount} {truncate(denom, 6)}</div>
+    <!--<div class="text-muted-foreground font-mono">{JSON.stringify(info)}</div>!-->
+
+  {/each}
+
+</div>

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

@@ -0,0 +1,21 @@
+<script lang="ts">
+import { cn } from "$lib/utilities/shadcn.ts"
+import { Duration } from "svelte-ux"
+import { DurationUnits } from "svelte-ux"
+
+export let value: {
+  name: string
+  chain: unknown
+  connection: unknown
+  channel: unknown
+  timestamp: unknown
+}
+</script>
+
+<div  class={cn("flex flex-col text-xs")} {...$$restProps}>
+  <div class="text-md font-semibold">{value.name}</div>
+  <div class="text-muted-foreground">{value.chain}</div>
+  <div class="text-muted-foreground">{value.connection}</div>
+  <div class="text-muted-foreground">{value.channel}</div>
+  <div class="text-muted-foreground">{#if value.timestamp && value.timestamp !== undefined}<Duration totalUnits={3} variant="short" minUnits={DurationUnits.Second} start={value.timestamp}/>{:else}in transit{/if}</div>
+</div>

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

@@ -19,13 +19,13 @@ export interface Table {
 
 export const load = (loadEvent => {
   // Redirect if the user is visiting /explorer
-  if (loadEvent.url.pathname === "/explorer") throw redirect(302, "/explorer/blocks")
+  if (loadEvent.url.pathname === "/explorer") throw redirect(302, "/explorer/transfers")
 
   return {
     tables: [
       {
         route: "transfers",
-        icon: BlocksIcon,
+        icon: RocketIcon,
         description: "All UCS-01 transfers"
       },
       {
@@ -41,11 +41,6 @@ export const load = (loadEvent => {
       },
       { 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,

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

@@ -6,80 +6,90 @@ import { URLS } from "$lib/constants"
 import Table from "../(components)/table.svelte"
 import { flexRender, type ColumnDef } from "@tanstack/svelte-table"
 import { derived, writable } from "svelte/store"
-import CellStatus from "../(components)/cell-status.svelte"
-import { DurationUnits } from "svelte-ux"
-import CellDurationText from "../(components)/cell-duration-text.svelte"
+import CellOrigin from "../(components)/cell-origin.svelte"
+import CellAssets from "../(components)/cell-assets.svelte"
+import { chainsQuery } from "$lib/queries/chains"
+import { truncate } from "$lib/utilities/format"
 
 let transfers = createQuery({
   queryKey: ["transfers"],
-  refetchInterval: 1_000,
+  refetchInterval: 3_000,
   queryFn: async () => (await request(URLS.GRAPHQL, allTransfersQueryDocument, {})).v0_transfers
 })
 
-let transfersData = derived(transfers, $transfers => ($transfers.isSuccess ? $transfers.data : []))
+let chains = chainsQuery()
+
+let transfersData = derived([transfers, chains], ([$transfers, $chains]) => {
+  if (!($transfers.isSuccess && $chains.isSuccess)) return []
+  return $transfers.data.map(transfer => {
+    const sourceDisplayName = $chains.data.find(
+      chain => chain.chain_id === transfer.source_chain_id
+    )?.display_name
+    const destinationDisplayName = $chains.data.find(
+      chain => chain.chain_id === transfer.destination_chain_id
+    )?.display_name
+
+    return {
+      source: {
+        name: sourceDisplayName,
+        chain: transfer.source_chain_id,
+        connection: transfer.source_connection_id,
+        channel: transfer.source_channel_id,
+        timestamp: transfer.source_timestamp
+      },
+
+      sender: transfer.sender,
+
+      destination: {
+        name: destinationDisplayName,
+        chain: transfer.destination_chain_id,
+        connection: transfer.destination_connection_id,
+        channel: transfer.destination_channel_id,
+        timestamp: transfer.destination_timestamp
+      },
+
+      receiver: transfer.receiver,
+      assets: transfer.assets
+    }
+  })
+})
 
 const columns: Array<ColumnDef<{ chain_id: string }>> = [
   {
-    accessorKey: "source_chain_id",
-    header: () => "Source Chain",
+    accessorKey: "source",
+    header: () => "Source",
     size: 200,
-    cell: info => info.getValue()
+    cell: info => flexRender(CellOrigin, { value: info.getValue() })
   },
   {
-    accessorKey: "source_channel_id",
-    header: () => "Source Channel",
+    accessorKey: "destination",
+    header: () => "Destination",
     size: 200,
-    cell: info => info.getValue()
+    cell: info => flexRender(CellOrigin, { value: info.getValue() })
   },
-  // {
-  //   accessorKey: "source_port",
-  //   header: () => "Source Port",
-  //   size: 200,
-  //   cell: info => info.getValue()
-  // },
   {
-    accessorKey: "destination_chain_id",
-    header: () => "Destination Chain",
+    accessorKey: "sender",
+    header: () => "Sender",
     size: 200,
-    cell: info => info.getValue()
+    cell: info => truncate(info.getValue(), 8)
   },
   {
-    accessorKey: "destination_channel_id",
-    header: () => "Destination Channel",
+    accessorKey: "receiver",
+    header: () => "Receiver",
     size: 200,
-    cell: info => info.getValue()
+    cell: info => truncate(info.getValue(), 8)
   },
   {
     accessorKey: "assets",
     header: () => "Assets",
     size: 200,
-    cell: info => JSON.stringify(info.getValue())
-  },
-  {
-    accessorKey: "source_timestamp",
-    header: () => "Source Time",
-    size: 200,
-    cell: info =>
-      flexRender(CellDurationText, {
-        totalUnits: 3,
-        variant: "short",
-        minUnits: DurationUnits.Second,
-        start: new Date(info.getValue() as string)
-      })
-  },
-  {
-    accessorKey: "destination_timestamp",
-    header: () => "Destination Time",
-    size: 200,
-    cell: info =>
-      flexRender(CellDurationText, {
-        totalUnits: 3,
-        variant: "short",
-        minUnits: DurationUnits.Second,
-        start: new Date(info.getValue() as string)
-      })
+    cell: info => flexRender(CellAssets, { value: info.getValue() })
   }
 ]
 </script>
 
-<Table bind:dataStore={transfersData} {columns} />
+{#if $transfers.isLoading}
+  <div>Loading...</div>
+{:else if $transfers.isSuccess}
+  <Table bind:dataStore={transfersData} {columns} />
+{/if}