Packet explorer, URL-based pagination (#4025)

- **feat(app2): store page in URL**
- **fix(app2): cleanup**
- **feat(app2): store transfer fibers in store**
- **fix(app2): dry**
- **fix(app2): explain sortorder types**
- **chore(app2): update graphql schema**
- **feat(app2): WIP packet explorer**
- **fix(app2): chain fetching**
- **fix(app2): wip universal_chain_id fixes**
- **feat(app2): nicer packet details page**
- **fix(app2): refine packet hash page**
- **feat(app2): better packet page**
- **fix(app2): decode ports**
- **feat(app2): colors**
- **chore: fmt**

Author: cor

app2/CONVENTIONS.md

@@ -3,15 +3,19 @@
 ## Type Safety
 
 - Use Effect's type-safe alternatives where possible:
+
   ```typescript
   // Instead of:
   let value: string | null | undefined
 
   // Use:
   let value: Option<string>
   ```
+
 - Never use `try {} catch {}` blocks. always use Effect. When dealing with unsafe functions from libraries, use `Effect.tryPromie(() => somePromiseFn())`
 
+- Do NOT do `Option.isSome(Option.fromNullable(T))` if `T` is already an `Option` type
+
 ## Styling
 
 - Use Tailwind's zinc color palette instead of gray for neutral colors

app2/src/app.css

@@ -1,3 +1,7 @@
 @import "tailwindcss";
 
 @custom-variant dark (&:where(.dark, .dark *));
+
+@theme {
+  --color-zinc-925: oklch(0.1755 0.0055 285.854);
+}

app2/src/generated/graphql-env.d.ts

@@ -3,20 +3,46 @@ import ConnectWalletButton from "$lib/components/ui/ConnectWalletButton.svelte"
 import { uiStore } from "$lib/stores/ui.svelte"
 import Button from "$lib/components/ui/Button.svelte"
 import SharpSettingsIcon from "$lib/components/icons/SharpSettingsIcon.svelte"
-import { page } from "$app/stores"
+import { page } from "$app/state"
 import { cn } from "$lib/utils"
 import { onMount } from "svelte"
 import { navigation } from "./navigation.js"
 
-const isCurrentPath = (path: string) => $page.url.pathname === path
+const isCurrentPath = (path: string) => {
+  // Exact match
+  if (page.url.pathname === path) return true
+
+  // Check if current path is a subroute of the navigation item
+  // For example, /explorer/packets/123 should highlight /explorer/packets
+  if (path !== "/" && page.url.pathname.startsWith(`${path}/`)) return true
+
+  return false
+}
 
 let highlightElement: HTMLElement
 
 const updateHighlightPosition = () => {
-  if ($page.url.pathname && highlightElement) {
-    const newActive = document.querySelector(`[data-path="${$page.url.pathname}"]`) as HTMLElement
-    if (newActive) {
-      const rect = newActive.getBoundingClientRect()
+  if (page.url.pathname && highlightElement) {
+    // Find the best matching navigation item
+    let bestMatch: HTMLElement | null = null
+    let bestMatchLength = 0
+
+    // Check all navigation items to find the best match
+    const allNavItems = document.querySelectorAll("[data-path]")
+    allNavItems.forEach(item => {
+      const itemPath = item.getAttribute("data-path")
+      if (
+        itemPath &&
+        (page.url.pathname === itemPath ||
+          (page.url.pathname.startsWith(`${itemPath}/`) && itemPath.length > bestMatchLength))
+      ) {
+        bestMatch = item as HTMLElement
+        bestMatchLength = itemPath.length
+      }
+    })
+
+    if (bestMatch) {
+      const rect = bestMatch.getBoundingClientRect()
       highlightElement.style.top = `${rect.top}px`
       highlightElement.style.left = `${rect.left}px`
       highlightElement.style.width = `${rect.width}px`
@@ -29,7 +55,7 @@ const updateHighlightPosition = () => {
 }
 
 $effect(() => {
-  if ($page.url.pathname) {
+  if (page.url.pathname) {
     updateHighlightPosition()
   }
 })
@@ -73,8 +99,7 @@ onMount(() => {
                 isCurrentPath(item.path) ? "" : "dark:hover:bg-zinc-900"
               )}
             >
-              <svelte:component 
-                this={item.icon} 
+              <item.icon 
                 class="size-5 text-zinc-500" 
               />
               {item.title}

app2/src/generated/schema.graphql

@@ -0,0 +1,58 @@
+<script lang="ts">
+import type { PacketListItem } from "$lib/schema/packet"
+import { chains } from "$lib/stores/chains.svelte"
+import { getChain } from "$lib/schema/chain"
+import { Option } from "effect"
+import ChainComponent from "./ChainComponent.svelte"
+import DateTimeComponent from "$lib/components/ui/DateTimeComponent.svelte"
+import { goto } from "$app/navigation"
+import SharpRightArrowIcon from "../icons/SharpRightArrowIcon.svelte"
+
+type Props = {
+  packet: PacketListItem
+}
+
+const { packet }: Props = $props()
+
+const sourceChain = $derived(
+  Option.flatMap(chains.data, chainsData => getChain(chainsData, packet.source_universal_chain_id))
+)
+
+const destinationChain = $derived(
+  Option.flatMap(chains.data, chainsData =>
+    getChain(chainsData, packet.destination_universal_chain_id)
+  )
+)
+
+const handleClick = () => {
+  goto(`/explorer/packets/${packet.packet_hash}`)
+}
+</script>
+
+<!-- svelte-ignore a11y_click_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+  <div
+    class="flex justify-between gap-8 px-4 py-3 h-16 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors duration-75 items-center"
+    onclick={handleClick}
+  >
+    <div>
+      <div class="font-mono">
+        {packet.packet_hash}
+      </div>
+      <div class="flex items-center gap-1 text-zinc-400 text-sm">
+        {#if Option.isSome(sourceChain)}
+          <ChainComponent chain={sourceChain.value} />
+        {:else}
+          <div class="text-zinc-500">{packet.source_universal_chain_id}</div>
+        {/if}
+        <SharpRightArrowIcon class="size-5" />
+        {#if Option.isSome(destinationChain)}
+          <ChainComponent chain={destinationChain.value} />
+        {:else}
+          <div class="text-zinc-500">{packet.destination_universal_chain_id}</div>
+        {/if}
+      </div>
+    </div>
+  <div class="text-sm">{packet.channel_version}</div>
+  <DateTimeComponent value={packet.packet_send_timestamp} />
+</div>

app2/src/lib/components/layout/Sidebar/index.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+import Skeleton from "$lib/components/ui/Skeleton.svelte"
+</script>
+
+<div class="flex justify-between gap-8 px-4 py-3 h-16 items-center border-b border-zinc-800">
+  <div>
+    <div>
+      <Skeleton class="h-5 w-64" />
+    </div>
+    <div class="flex items-center gap-1 mt-1">
+      <Skeleton class="h-4 w-24" />
+      <Skeleton class="h-4 w-5" />
+      <Skeleton class="h-4 w-24" />
+    </div>
+  </div>
+  <Skeleton class="h-5 w-24" />
+  <Skeleton class="h-5 w-32" />
+</div>

app2/src/lib/components/model/PacketListItemComponent.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 import type { TransferListItem } from "$lib/schema/transfer-list"
 import { Option } from "effect"
-import { getChain } from "$lib/schema/chain"
+import { getChain, UniversalChainId } from "$lib/schema/chain"
 import ChainComponent from "./ChainComponent.svelte"
 import TokenComponent from "$lib/components/model/TokenComponent.svelte"
 import Label from "../ui/Label.svelte"
@@ -25,15 +25,15 @@ const handleClick = () => {
 
 {#if Option.isSome(chains.data)}
   {@const chainss = chains.data.value}
-  {@const sourceChain = getChain(chainss, transfer.source_chain.chain_id)}
+  {@const sourceChain = getChain(chainss, transfer.source_chain.universal_chain_id)}
   {@const destinationChain = getChain(
     chainss,
-    transfer.destination_chain.chain_id,
+    transfer.destination_chain.universal_chain_id,
   )}
   <!-- svelte-ignore a11y_click_events_have_key_events -->
   <!-- svelte-ignore a11y_no_static_element_interactions -->
   <div
-    class="flex justify-between gap-8 px-4 py-3 h-16 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors duration-75 items-center"
+    class="flex justify-between gap-8 px-4 py-3 h-16 cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-900 transition-colors duration-75 items-center"
     onclick={handleClick}
   >
     <div>

app2/src/lib/components/model/PacketListItemComponentSkeleton.svelte

@@ -14,9 +14,9 @@ const { children, class: className = "", divided = false, ...rest }: Props = $pr
 const classes = cn(
   // Base styles
   "rounded border shadow-sm",
-  "dark:border-zinc-700 dark:bg-zinc-900",
+  "dark:border-zinc-800 bg-zinc-925",
   // Conditional padding and dividers
-  divided ? "p-0 divide-y divide-zinc-800" : "p-4",
+  divided ? "p-0 divide-y divide-zinc-900" : "p-4",
   // Additional classes passed as props
   className
 )

app2/src/lib/components/model/TransferListItemComponent.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+import { Option } from "effect"
+import type { PacketList } from "$lib/schema/packet"
+import Button from "./Button.svelte"
+import DateTimeComponent from "./DateTimeComponent.svelte"
+
+type Props = {
+  data: Option.Option<typeof PacketList.Type>
+  onLive: () => void
+  onPrevPage: () => void
+  onNextPage: () => void
+}
+
+const { data, onLive, onPrevPage, onNextPage }: Props = $props()
+</script>
+
+<div class="flex gap-6">
+  <Button onclick={onLive}>LIVE</Button>
+  <div class="rounded shadow flex">
+    <button
+      onclick={onPrevPage}
+      class="cursor-pointer border-l border-t border-b bg-zinc-700 border-zinc-600 h-10 w-10 rounded-tl rounded-bl"
+    >
+      ←
+    </button>
+    <div
+      class="bg-zinc-900 border-t border-b border-zinc-800 flex items-center justify-center px-4 min-w-[250px]"
+    >
+      {#if Option.isSome(data) && data.value.length > 0}
+        <DateTimeComponent value={data.value[0].packet_send_timestamp} />
+      {/if}
+    </div>
+    <button
+      onclick={onNextPage}
+      class="cursor-pointer border-r border-t border-b bg-zinc-700 border-zinc-600 h-10 w-10 rounded-tr rounded-br"
+    >
+      →
+    </button>
+  </div>
+</div>