Fetch connections, channels, index status, and basic packets in app

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

@@ -7,6 +7,7 @@ import { truncate } from "$lib/utilities/format.ts"
 import { copyTextAction } from "$lib/actions/copy.ts"
 
 export let value: string
+export let label: string | null = null
 export let trunc = 0
 
 let copyClicked = false
@@ -18,6 +19,7 @@ export { buttonClass as class }
 </script>
 
 <div class="text-start flex items-center gap-2 group cursor-default">
+  {#if label}<span class="text-muted-foreground">{label}</span>{/if}
   {#if trunc}
     {truncate(value, trunc)}
   {:else}

app/src/lib/components/table-cells/cell-origin-channel.svelte

@@ -13,8 +13,8 @@ export let value: {
 
 <div {...$$restProps} class={cn("flex flex-col ")}>
   {#if value.chain_display_name}<CellCopy value={value.chain_display_name}/>{/if}
-  {#if value.chain_id}<CellCopy value={value.chain_id}/>{/if}
-  {#if value.connection_id}<CellCopy value={value.connection_id}/>{/if}
-  {#if value.channel_id}<CellCopy value={value.channel_id}/>{/if}
-  <div class="text-muted-foreground">{#if value.port_id}<CellCopy trunc={10} value={value.port_id}/>{/if}</div>
+  {#if value.chain_id}<CellCopy label="Chain ID: " value={value.chain_id}/>{/if}
+  {#if value.connection_id}<CellCopy label="Connection ID: " value={value.connection_id}/>{/if}
+  {#if value.channel_id}<CellCopy label="Channel ID: " value={value.channel_id}/>{/if}
+  {#if value.port_id}<CellCopy label="Port: " trunc={10} value={value.port_id}/>{/if}
 </div>

app/src/lib/components/table-cells/cell-origin-connection.svelte

@@ -12,7 +12,7 @@ export let value: {
 
 <div  class={cn("flex flex-col ")} {...$$restProps}>
   <CellCopy value={value.chain_display_name}/>
-  <CellCopy value={value.chain_id}/>
-  <CellCopy value={value.connection_id}/>
-  <CellCopy value={value.client_id}/>
+  <CellCopy label="Chain ID:"  value={value.chain_id}/>
+  <CellCopy label="Connection ID:" value={value.connection_id}/>
+  <CellCopy label="Client ID:" value={value.client_id}/>
 </div>

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

@@ -1,38 +1,42 @@
 import { graphql } from "gql.tada"
 
 export const packetListDataFragment = graphql(/* GraphQL */ `
-  fragment PacketListData on v1_packets {
+  fragment PacketListData on v1_ibc_union_packets {
       source_chain_id
       source_connection_id
       source_channel_id
       source_port_id
-      source_block_hash
-      source_timestamp
-      source_sequence
+      packet_send_block_hash
+      packet_send_timestamp
       destination_chain_id
       destination_connection_id
       destination_channel_id
       destination_port_id
-      destination_block_hash
-      destination_timestamp
-      destination_sequence
+      packet_recv_block_hash
+      packet_recv_timestamp
+      source_chain {
+          chain_id
+      }
+      destination_chain {
+          chain_id
+      }
   }
 `)
 
 export const packetDetailsFragment = graphql(/* GraphQL */ `
-    fragment PacketDetails on v1_packets {
+    fragment PacketDetails on v1_ibc_union_packets {
         source_chain_id,
-        source_block_hash,
-        source_height,
-        source_timestamp,
-        source_transaction_hash,
-        source_transaction_index,
-        source_sequence,
+        packet_send_block_hash,
+        packet_send_height,
+        packet_send_timestamp,
+        packet_send_transaction_hash,
+        packet_send_transaction_index,
         source_port_id,
         source_channel_id,
-        source_timeout_timestamp,
-        source_event_json,
-        source_packet_data,
+        timeout_timestamp
+        timeout_height
+        data
+        data_decoded
         source_chain_id,
         source_connection_id,
         source_channel_id,
@@ -42,16 +46,18 @@ export const packetDetailsFragment = graphql(/* GraphQL */ `
         destination_channel_id,
         destination_port_id,
         destination_chain_id,
-        destination_block_hash,
-        destination_height,
-        destination_timestamp,
-        destination_transaction_hash,
-        destination_transaction_index,
-        destination_sequence,
+        packet_recv_block_hash,
+        packet_recv_height,
+        packet_recv_timestamp,
+        packet_recv_transaction_hash,
+        packet_recv_transaction_index,
         destination_port_id,
         destination_channel_id,
-        destination_timeout_timestamp,
-        destination_event_json,
-        destination_packet_data
+        source_chain {
+            chain_id
+        }
+        destination_chain {
+            chain_id
+        }
     }
 `)

app/src/lib/graphql/queries/channels.ts

@@ -2,8 +2,8 @@ import { graphql } from "gql.tada"
 
 export const channelsQuery =
   graphql(/* GraphQL */ `query ChannelsQuery($limit: Int = 500) @cached(ttl: 30) {
-  v1_channels(
-    where: {source_chain: {enabled: {_eq: true}}, destination_chain: {enabled: {_eq: true}}},
+  v1_ibc_union_channels(
+    # where: {source_chain: {enabled: {_eq: true}}, destination_chain: {enabled: {_eq: true}}},
     order_by: [
     {status: asc}, 
     {source_chain_id: asc},