Fetch ibc-union packet list in app

app/src/lib/components/table-cells/cell-sequence.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
 import { cn } from "$lib/utilities/shadcn.ts"
+import Truncate from "../truncate.svelte"
 import CellTimestamp from "./cell-timestamp.svelte"
 
 export let value: {
-  sequence: number | undefined
+  transaction_hash: string | undefined
   timestamp: string | undefined
 }
+
+// NOTE: this cell component name is outdated.
+// It's no longer a sequence, but rather a tx_hash timestamp combo
 </script>
 
-<div class={cn("flex flex-col")} {...$$restProps}>
-  {#if value.sequence}<div class="text-xl">{value.sequence}</div>{/if}
+<div class={cn("flex flex-col items-start")} {...$$restProps}>
+  {#if value.transaction_hash}<Truncate value={value.transaction_hash} type="hash"/>{/if}
   <div class="text-muted-foreground">{#if value.timestamp}<CellTimestamp value={value.timestamp}/>{/if}</div>
 </div>

app/src/lib/components/tables/packets.svelte

@@ -14,11 +14,12 @@ import {
   packetsByChannelIdQuery
 } from "$lib/queries/packets"
 import { timestamp } from "$lib/stores/page.ts"
+import CellCopy from "../table-cells/cell-copy.svelte"
 
 // export let chains: Array<Chain>
 export let chain_id: string | undefined = undefined
-export let connection_id: string | undefined = undefined
-export let channel_id: string | undefined = undefined
+export let connection_id: number | undefined = undefined
+export let channel_id: number | undefined = undefined
 // export let pageSize: number // must be even
 
 let packets = chain_id
@@ -50,8 +51,11 @@ const columns: Array<ColumnDef<PacketRow>> = [
     cell: info => flexRender(CellOriginChannel, { value: info.getValue() })
   },
   {
-    header: () => "Sequence",
-    accessorKey: "source_sequence",
+    accessorKey: "send",
+    cell: info => flexRender(CellSequence, { value: info.getValue() })
+  },
+  {
+    accessorKey: "recv",
     cell: info => flexRender(CellSequence, { value: info.getValue() })
   }
 ]

app/src/lib/graphql/fragments/packets.ts

@@ -6,12 +6,14 @@ export const packetListDataFragment = graphql(/* GraphQL */ `
       source_connection_id
       source_channel_id
       source_port_id
+      packet_send_transaction_hash
       packet_send_block_hash
       packet_send_timestamp
       destination_chain_id
       destination_connection_id
       destination_channel_id
       destination_port_id
+      packet_recv_transaction_hash
       packet_recv_block_hash
       packet_recv_timestamp
       source_chain {

app/src/lib/queries/packets.ts

@@ -19,31 +19,31 @@ import { packetDetailsQueryDocument } from "$lib/graphql/queries/packet-details"
 const packetTransform = (p: FragmentOf<typeof packetListDataFragment>) => {
   const packet = readFragment(packetListDataFragment, p)
   return {
-    url: `/explorer/packets/${packet.source_chain_id}/${packet.source_connection_id}/${packet.source_channel_id}/${packet.source_sequence}`,
+    url: `/explorer/packets/${packet.source_chain_id}/${packet.source_connection_id}/${packet.source_channel_id}/${packet.packet_send_transaction_hash}`,
     source: {
       chain_id: packet.source_chain_id ?? "unknown",
       connection_id: packet.source_connection_id ?? "unknown",
       channel_id: packet.source_channel_id ?? "unknown",
       port_id: packet.source_port_id ?? "unknown",
-      sequence: packet.source_sequence ?? "unknown"
+      transaction_hash: packet.packet_send_transaction_hash ?? "unknown"
     },
     destination: {
       chain_id: packet.destination_chain_id ?? "unknown",
       connection_id: packet.destination_connection_id ?? "unknown",
       channel_id: packet.destination_channel_id ?? "unknown",
       port_id: packet.destination_port_id ?? "unknown",
-      sequence: packet.destination_sequence ?? "unknown"
+      sequence: packet.packet_recv_transaction_hash ?? "unknown"
     },
-    source_sequence: {
-      sequence: packet.source_sequence,
-      timestamp: packet.source_timestamp
+    send: {
+      transaction_hash: packet.packet_send_transaction_hash,
+      timestamp: packet.packet_send_timestamp
     },
-    destination_sequence: {
-      sequence: packet.destination_sequence,
-      timestamp: packet.destination_timestamp
+    recv: {
+      transaction_hash: packet.packet_recv_transaction_hash,
+      timestamp: packet.packet_recv_timestamp
     },
-    timestamp: packet.source_timestamp,
-    destination_time: packet.destination_timestamp
+    timestamp: packet.packet_send_timestamp,
+    destination_time: packet.packet_recv_timestamp
   }
 }
 
@@ -134,7 +134,7 @@ export async function packetsByChannelIdLatest({
   limit: number
   chain_id: string
   connection_id: number
-  channel_id: string
+  channel_id: number
 }): PacketsReturnType {
   const { v1_ibc_union_packets } = await request(URLS().GRAPHQL, packetsByChannelIdLatestQuery, {
     limit,
@@ -155,7 +155,7 @@ export async function packetsByChannelIdTimestamp({
   limit: number
   chain_id: string
   connection_id: number
-  channel_id: string
+  channel_id: number
   timestamp: string
 }): PacketsReturnType {
   const { newer, older } = await request(URLS().GRAPHQL, packetsByChannelIdTimestampQuery, {
@@ -252,7 +252,7 @@ export const packetsByChannelIdQuery = (
   limit: number,
   chain_id: string,
   connection_id: number,
-  channel_id: string,
+  channel_id: number,
   timestamp: Readable<string | null>
 ) =>
   createQuery(
@@ -286,7 +286,7 @@ export const packetsByChannelIdQuery = (
 export const packetDetailsQuery = (
   chain_id: string,
   connection_id: number,
-  channel_id: string,
+  channel_id: number,
   sequence: number
 ) =>
   createQuery({