Fetch transfer details (#3523)

- **feat(app): fetch ibc-union packet details**
- **feat(app): improve packet-path styling**
- **feat(app): show basic ibc-union transfer details**
- **feat(app): show traces for ibc-union transfers**
- **feat(app): render transfer details**
- **fix(app): gracefully handle (un)availability of token details**
- **fix(app): address overflow with truncation**

app/src/lib/components/packet-details.svelte

@@ -15,20 +15,19 @@ const packetSourceDestination = {
   source_chain_id: packet.source_chain_id ?? "unknown",
   source_connection_id: packet.source_connection_id ?? "unknown",
   source_channel_id: packet.source_channel_id ?? "unknown",
-  source_sequence: packet.source_sequence?.toString() ?? "unknown",
   destination_chain_id: packet.destination_chain_id ?? "unknown",
   destination_connection_id: packet.destination_connection_id ?? "unknown",
-  destination_channel_id: packet.destination_channel_id ?? "unknown",
-  destination_sequence: packet.destination_sequence?.toString() ?? "unknown"
+  destination_channel_id: packet.destination_channel_id ?? "unknown"
 }
 </script>  
 
 
+
 <Card.Root class="break-words">
   <Card.Header
     class="font-bold text-md text-center break-words text-muted-foreground flex flex-row gap-2 justify-center"
   >
-    PACKET {packet.source_sequence}
+    PACKET 
   </Card.Header>
   <Card.Content class="flex flex-col gap-8">
     <PacketPath {chains} packet={packetSourceDestination}/>

app/src/lib/components/packet-path.svelte

@@ -6,13 +6,11 @@ import MoveRightIcon from "virtual:icons/lucide/move-right"
 export let chains: Array<Chain>
 export let packet: {
   source_chain_id: string
-  source_connection_id: string
-  source_channel_id: string
-  source_sequence: string
+  source_connection_id: number
+  source_channel_id: number
   destination_chain_id: string
-  destination_connection_id: string
-  destination_channel_id: string
-  destination_sequence: string
+  destination_connection_id: number
+  destination_channel_id: number
 }
 </script>
 
@@ -23,45 +21,38 @@ export let packet: {
     >
       {toDisplayName(packet.source_chain_id, chains)}
     </h2>
+    <div class="flex divide-x-2 divide-muted-background">
     <a 
       href={`/explorer/packets/${packet.source_chain_id}`}
-      class="block text-sm underline text-muted-foreground">
+      class="pr-2 block text-sm underline text-muted-foreground">
 
       {packet.source_chain_id}
     </a>
+
     <a
       href={`/explorer/packets/${packet.source_chain_id}/${packet.source_connection_id}`}
       class={cn(
-        "black text-sm underline",
+        "px-2 black text-sm underline",
         packet.source_connection_id
           ? "text-muted-foreground"
           : "text-transparent"
       )}
     >
       {packet.source_connection_id}
     </a>
+
     <a
       href={`/explorer/packets/${packet.source_chain_id}/${packet.source_connection_id}/${packet.source_channel_id}`}
       class={cn(
-        "text-sm block underline",
+        "pl-2 text-sm block underline",
         packet.source_channel_id
           ? "text-muted-foreground"
           : "text-transparent"
       )}
     >
       {packet.source_channel_id}
     </a>
-    <a
-      href={`/explorer/packets/${packet.source_chain_id}/${packet.source_connection_id}/${packet.source_channel_id}/${packet.source_sequence}`}
-      class={cn(
-        "text-sm block underline",
-        packet.source_sequence
-          ? "text-muted-foreground"
-          : "text-transparent"
-      )}
-    >
-      {packet.source_sequence}
-    </a>
+    </div>
   </div>
   <div class="flex items-center justify-center px-8">
     <MoveRightIcon class="text-foreground size-8" />
@@ -72,16 +63,17 @@ export let packet: {
     >
       {toDisplayName(packet.destination_chain_id, chains)}
     </h2>
+    <div class="flex justify-end divide-x-2 divide-muted-background">
     <a 
       href={`/explorer/packets/${packet.destination_chain_id}`}
-      class="block text-sm underline text-muted-foreground">
+      class="pr-2 block text-sm underline text-muted-foreground">
 
       {packet.destination_chain_id}
     </a>
     <a
       href={`/explorer/packets/${packet.destination_chain_id}/${packet.destination_connection_id}`}
       class={cn(
-        "text-sm block underline",
+        "px-2 text-sm block underline",
         packet.destination_connection_id
           ? "text-muted-foreground"
           : "text-transparent"
@@ -92,13 +84,14 @@ export let packet: {
     <a
       href={`/explorer/packets/${packet.destination_chain_id}/${packet.destination_connection_id}/${packet.destination_channel_id}`}
       class={cn(
-        "text-sm block underline",
+        "pl-2 text-sm block underline",
         packet.destination_channel_id
           ? "text-muted-foreground"
           : "text-transparent"
       )}
     >
       {packet.destination_channel_id}
     </a>
+    </div>
   </div>
 </section>