feat(app): add port id (#2453)

Add port id to channels

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

@@ -1,17 +1,28 @@
 <script lang="ts">
 import { cn } from "$lib/utilities/shadcn.ts"
+import * as Tooltip from "$lib/components/ui/tooltip"
+import { truncate } from "$lib/utilities/format.ts"
 
 export let value: {
   chain_display_name: string
   chain_id: string
   connection_id: string
   channel_id: string
+  port_id: string
 }
 </script>
 
-<div  class={cn("flex flex-col ")} {...$$restProps}>
+<div {...$$restProps} class={cn("flex flex-col ")}>
   <div class="font-bold">{value.chain_display_name}</div>
   <div>{value.chain_id}</div>
   <div>{value.connection_id}</div>
   <div>{value.channel_id}</div>
+  <Tooltip.Root>
+    <Tooltip.Trigger>
+      <div class="text-start">{truncate(value.port_id, 10)}</div>
+    </Tooltip.Trigger>
+    <Tooltip.Content>
+      {value.port_id}
+    </Tooltip.Content>
+  </Tooltip.Root>
 </div>

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

@@ -21,13 +21,15 @@ let channels = createQuery({
         chain_display_name: channel.source?.display_name,
         chain_id: channel.from_chain_id ?? "unknown",
         connection_id: channel.to_connection_id ?? "unknown",
-        channel_id: channel.from_channel_id ?? "unknown"
+        channel_id: channel.from_channel_id ?? "unknown",
+        port_id: channel.from_port_id ?? "unknown"
       },
       destination: {
         chain_display_name: channel.destination?.display_name,
         chain_id: channel.to_chain_id ?? "unknown",
         connection_id: channel.to_connection_id ?? "unknown",
-        channel_id: channel.to_channel_id ?? "unknown"
+        channel_id: channel.to_channel_id ?? "unknown",
+        port_id: channel.to_port_id ?? "unknown"
       },
       status: channel.status
     }))