feat(app): explorer transfers table

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

@@ -1,20 +1,19 @@
 import { graphql } from "gql.tada"
 
-export const transfersQuery = graphql(/* GraphQL */ `
-query PacketsQuery($limit: Int = 100) {
-  v0_packets(limit: $limit, order_by: {destination_time: desc_nulls_last, source_time: desc_nulls_last}) {
-    from_chain_id
-    from_channel_id
-    source_port
-    source_block_hash
-    source_time
-    to_chain_id
-    to_channel_id
-    to_port_id
-    destination_block_hash
-    destination_time
-    source_data
-    status
+export const allTransfersQueryDocument = graphql(/* GraphQL */ `
+  query AllTransfersQuery @cached(ttl: 5) {
+    v0_transfers(limit: 50, order_by: {source_timestamp: desc}) {
+      sender
+      normalized_sender
+      source_chain_id
+      source_channel_id
+      receiver
+      normalized_receiver
+      destination_chain_id
+      destination_channel_id
+      assets
+      source_timestamp
+      destination_timestamp
+    }
   }
-}
 `)

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

@@ -9,7 +9,7 @@ import {
   getFilteredRowModel,
   getPaginationRowModel
 } from "@tanstack/svelte-table"
-import { writable, type Writable } from "svelte/store"
+import { writable, type Readable } from "svelte/store"
 import { cn } from "$lib/utilities/shadcn.ts"
 import * as Table from "$lib/components/ui/table"
 import { createVirtualizer } from "@tanstack/svelte-virtual"
@@ -18,7 +18,7 @@ import * as Card from "$lib/components/ui/card/index.ts"
 export let columns: Array<ColumnDef<any>>
 // https://github.com/TanStack/table/issues/4241
 // @ts-ignore
-export let dataStore: Writable<Array<any>>
+export let dataStore: Readable<Array<any>>
 
 const options = writable<TableOptions<any>>({
   data: $dataStore,

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

@@ -23,6 +23,11 @@ export const load = (loadEvent => {
 
   return {
     tables: [
+      {
+        route: "transfers",
+        icon: BlocksIcon,
+        description: "All UCS-01 transfers"
+      },
       {
         route: "blocks",
         icon: BlocksIcon,

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

@@ -0,0 +1,86 @@
+<script lang="ts">
+  import request from "graphql-request"
+  import { allTransfersQueryDocument} from "$lib/graphql/documents/transfers.ts"
+  import { createQuery } from "@tanstack/svelte-query"
+  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"
+
+  let transfers = createQuery ({
+    queryKey: ["transfers"],
+    refetchInterval: 2_000,
+    queryFn: async () => (await request(URLS.GRAPHQL, allTransfersQueryDocument, {})).v0_transfers
+  })
+
+  let transfersData = derived(transfers, ($transfers) => $transfers.isSuccess ? $transfers.data : []);
+
+
+  const columns: Array<ColumnDef<{ chain_id: string }>> = [
+  {
+    accessorKey: "source_chain_id",
+    header: () => "Source Chain",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "source_channel_id",
+    header: () => "Source Channel",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  // {
+  //   accessorKey: "source_port",
+  //   header: () => "Source Port",
+  //   size: 200,
+  //   cell: info => info.getValue()
+  // },
+  {
+    accessorKey: "destination_chain_id",
+    header: () => "Destination Chain",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "destination_channel_id",
+    header: () => "Destination Channel",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    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)
+      })
+  }
+]
+</script>
+
+<Table bind:dataStore={transfersData} {columns} />