feat(app): show recommended channels in explorer (#3739)

Author: cor

app/app.nix

@@ -19,7 +19,7 @@ _: {
     {
       packages = {
         app = jsPkgs.buildNpmPackage {
-          npmDepsHash = "sha256-tNMs7TF64XK3agDQY9mcZ1mAz1y0gKPokYB6XnGjHAA=";
+          npmDepsHash = "sha256-udhyqmAnsVAlVlyoML6Gc5RTgLb6H9ahNaAKHEFUkNA=";
           src = ./.;
           sourceRoot = "app";
           npmFlags = [

app/package-lock.json

@@ -28,7 +28,7 @@
     "@tanstack/svelte-query": "5.61.5",
     "@tanstack/svelte-table": "^8.20.5",
     "@tanstack/svelte-virtual": "3.10.9",
-    "@unionlabs/client": "^0.0.59",
+    "@unionlabs/client": "^0.0.60",
     "@wagmi/connectors": "5.7.5",
     "@wagmi/core": "2.16.3",
     "bits-ui": "^0.21.13",

app/package.json

@@ -40,7 +40,7 @@ const explorer = chain?.explorers?.at(0)?.address_url ?? null
       {#if !explorer}
         {#if truncate}<Truncate value={parsedAddress} type="address"/>{:else}{parsedAddress}{/if}
       {:else}
-        <a class="underline" on:click={(e) => e.stopPropagation()} href={`${explorer}${parsedAddress}`}>{#if truncate}<Truncate class="underline" value={parsedAddress} type="address"/>{:else}{parsedAddress}{/if}</a>
+        <a class="underline" target="_blank" on:click={(e) => e.stopPropagation()} href={`${explorer}${parsedAddress}`}>{#if truncate}<Truncate class="underline text-muted-foreground" value={parsedAddress} type="address"/>{:else}{parsedAddress}{/if}</a>
       {/if}{#if showChain}<span class="text-muted-foreground flex gap-1"><ArrowLeftIcon />{toDisplayName(
             chainId,
             chains,

app/src/lib/components/address.svelte

@@ -1,6 +1,13 @@
 <script lang="ts">
+import ChainDetails from "$lib/chain-details.svelte"
+import type { Chain } from "$lib/types"
 import { cn } from "$lib/utilities/shadcn.ts"
+import { fromHex, isHex } from "viem"
+import Address from "../address.svelte"
 import CellCopy from "./cell-copy.svelte"
+import { bech32AddressToHex } from "@unionlabs/client"
+
+export let chains: Array<Chain>
 
 export let value: {
   chain_display_name: string | undefined
@@ -9,12 +16,23 @@ export let value: {
   channel_id: string | undefined
   port_id: string | undefined
 }
+
+export const chain = chains.find(c => c.chain_id === value.chain_id)
+export const port =
+  chain?.rpc_type === "cosmos" && isHex(value.port_id)
+    ? bech32AddressToHex({ address: fromHex(value.port_id, "string") })
+    : value.port_id
 </script>
 
-<div {...$$restProps} class={cn("flex flex-col ")}>
-  {#if value.chain_display_name}<CellCopy value={value.chain_display_name}/>{/if}
-  {#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 {...$$restProps} class={cn("flex flex-col items-start")}>
+
+  {#if chain}
+  <div class="font-bold">
+    <ChainDetails {chain}/>
+  </div>
+  {#if value.chain_id && value.channel_id && value.connection_id}<div class="text-muted-foreground">{value.chain_id} | {value.connection_id} | {value.channel_id}</div>{/if}
+  {#if port && value.chain_id}<Address {chains} chainId={value.chain_id} address={port}/>{/if}
+  {:else}
+    <div>chain {value.chain_id} not found</div>
+  {/if}
 </div>

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

@@ -16,8 +16,9 @@ import {
 import { timestamp } from "$lib/stores/page.ts"
 import CellCopy from "../table-cells/cell-copy.svelte"
 import { page } from "$app/stores"
-import type { ChainFeature } from "$lib/types.ts"
+import type { Chain, ChainFeature } from "$lib/types.ts"
 
+export let chains: Array<Chain>
 // export let chains: Array<Chain>
 export let chain_id: string | undefined = undefined
 export let connection_id: number | undefined = undefined
@@ -56,12 +57,12 @@ const columns: Array<ColumnDef<PacketRow>> = [
   {
     accessorKey: "source",
     size: 200,
-    cell: info => flexRender(CellOriginChannel, { value: info.getValue() })
+    cell: info => flexRender(CellOriginChannel, { chains, value: info.getValue() })
   },
   {
     accessorKey: "destination",
     size: 200,
-    cell: info => flexRender(CellOriginChannel, { value: info.getValue() })
+    cell: info => flexRender(CellOriginChannel, { chains, value: info.getValue() })
   },
   {
     accessorKey: "send",

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

@@ -126,12 +126,12 @@ $: pTraces = ((): Array<Trace> => {
     </div>
     <div class="font-bold py-4 flex flex-col min-h-[80px] max-w-[calc(100%-80px)] break-words justify-center">
       {#if trace.timestamp}
-        <p class="text-xs -mb-1 text-muted-foreground">{toIsoString(new Date(trace.timestamp)).split('T')[1]} on {toDisplayName(trace.chain.chain_id, chains)} at {#if trace.block_url}<a class="underline" href={trace.block_url}>{trace.height}</a>{:else}{trace.height}{/if}</p>
+        <p class="text-xs -mb-1 text-muted-foreground">{toIsoString(new Date(trace.timestamp)).split('T')[1]} on {toDisplayName(trace.chain.chain_id, chains)} at {#if trace.block_url}<a class="underline" target="_blank" href={trace.block_url}>{trace.height}</a>{:else}{trace.height}{/if}</p>
       {/if}
       <div>{trace.type}</div>
       {#if trace.transaction_hash}
         {#if trace.transaction_url}
-          <a href={trace.transaction_url} class="-mt-1 block underline text-xs text-muted-foreground"><Truncate class="underline" value={trace.transaction_hash} type="hash"/></a>
+          <a href={trace.transaction_url} target="_blank"  class="-mt-1 block underline text-xs text-muted-foreground"><Truncate class="underline" value={trace.transaction_hash} type="hash"/></a>
         {:else}
           <p class="text-xs text-muted-foreground"><Truncate value={trace.transaction_hash} type="hash"/></p>
         {/if}

app/src/lib/components/trace.svelte

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

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

@@ -9,31 +9,31 @@ import { derived } from "svelte/store"
 import CellOriginChannel from "$lib/components/table-cells/cell-origin-channel.svelte"
 import LoadingLogo from "$lib/components/loading-logo.svelte"
 import type { UnwrapReadable } from "$lib/utilities/types"
-import type { ChainFeature } from "$lib/types.ts"
+import type { Chain, ChainFeature } from "$lib/types.ts"
 import { page } from "$app/stores"
 
+export let chains: Array<Chain>
 let channels = createQuery({
   queryKey: ["channels"],
   refetchInterval: 5_000,
   retryDelay: attempt => Math.min(attempt > 1 ? 2 ** attempt * 1000 : 1000, 30 * 1000),
   queryFn: async () => request(URLS().GRAPHQL, channelsQuery, {}),
   select: data =>
-    data.v1_ibc_union_channels.map(channel => ({
+    data.v1_ibc_union_channel_recommendations.map(channel => ({
       source_chain: {
-        chain_display_name: channel.destination_chain?.display_name ?? "unknown",
         chain_id: channel.source_chain_id ?? "unknown",
         connection_id: channel.destination_connection_id ?? "unknown",
         channel_id: channel.source_channel_id ?? "unknown",
         port_id: channel.source_port_id ?? "unknown"
       },
       destination_chain: {
-        chain_display_name: channel.source_chain?.display_name ?? "unknown",
         chain_id: channel.destination_chain_id ?? "unknown",
         connection_id: channel.destination_connection_id ?? "unknown",
         channel_id: channel.destination_channel_id ?? "unknown",
         port_id: channel.destination_port_id ?? "unknown"
       },
-      status: channel.status
+      status: channel.status,
+      version: channel.version
     }))
 })
 
@@ -54,15 +54,21 @@ type DataRow = UnwrapReadable<typeof channelsDataStore>[number]
 const columns: Array<ColumnDef<DataRow>> = [
   {
     accessorKey: "source_chain",
-    header: () => "Source chain",
+    header: () => "Source",
     size: 200,
-    cell: info => flexRender(CellOriginChannel, { value: info.getValue() })
+    cell: info => flexRender(CellOriginChannel, { chains, value: info.getValue() })
   },
   {
     accessorKey: "destination_chain",
-    header: () => "Destination chain",
+    header: () => "Destination",
     size: 200,
-    cell: info => flexRender(CellOriginChannel, { value: info.getValue() })
+    cell: info => flexRender(CellOriginChannel, { chains, value: info.getValue() })
+  },
+  {
+    accessorKey: "status"
+  },
+  {
+    accessorKey: "version"
   }
 ]
 </script>

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

@@ -94,7 +94,7 @@ onDestroy(unsubscribe)
         {#each $virtualizer.getVirtualItems() as row, index (row.index)}
           {@const url = $rows[row.index].original.url ?? undefined}
           <Table.Row
-            class={cn("cursor-pointer",
+            class={cn(url ? "cursor-pointer" : "",
             index % 2 === 0 ? 'bg-secondary/10' : 'bg-transparent',
           )}
             on:click={(e) => {if (url) { goto(url)}}}

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

@@ -34,7 +34,7 @@ export const load = (loadEvent => ({
     {
       route: "channels",
       icon: ChannelsIcon,
-      description: "Open IBC Channels"
+      description: "Recommended open IBC channels"
     },
     {
       route: "index-status",

app/src/routes/explorer/+layout.ts

@@ -1,5 +1,8 @@
 <script lang="ts">
+import ChainsGate from "$lib/components/chains-gate.svelte"
 import TableChannels from "../(components)/table-channels.svelte"
 </script>
 
-<TableChannels />
+<ChainsGate let:chains>
+  <TableChannels {chains} />
+</ChainsGate>

app/src/routes/explorer/channels/+page.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+import ChainsGate from "$lib/components/chains-gate.svelte"
 import TablePackets from "$lib/components/tables/packets.svelte"
 </script>
 
-<TablePackets />
+<ChainsGate let:chains>
+  <TablePackets {chains} />
+</ChainsGate>

app/src/routes/explorer/packets/+page.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
 import { page } from "$app/stores"
+import ChainsGate from "$lib/components/chains-gate.svelte"
 import TablePackets from "$lib/components/tables/packets.svelte"
-
 const chain_id = $page.params.chain_id
 </script>
-<TablePackets {chain_id}/>
+
+<ChainsGate let:chains>
+  <TablePackets {chains}  {chain_id}/>
+</ChainsGate>

app/src/routes/explorer/packets/[chain_id]/+page.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
 import { page } from "$app/stores"
 import TablePackets from "$lib/components/tables/packets.svelte"
+import ChainsGate from "$lib/components/chains-gate.svelte"
 
 const chain_id = $page.params.chain_id
 const connection_id = $page.params.connection_id
 </script>
 
-
-<TablePackets {chain_id} {connection_id}/>
+<ChainsGate let:chains>
+  <TablePackets {chains} {chain_id} {connection_id}/>
+</ChainsGate>

app/src/routes/explorer/packets/[chain_id]/[connection_id]/+page.svelte

@@ -1,10 +1,13 @@
 <script lang="ts">
 import { page } from "$app/stores"
 import TablePackets from "$lib/components/tables/packets.svelte"
+import ChainsGate from "$lib/components/chains-gate.svelte"
 
 const chain_id = $page.params.chain_id
 const connection_id = $page.params.connection_id
 const channel_id = $page.params.channel_id
 </script>
 
-<TablePackets {chain_id} {connection_id} {channel_id}/>
+<ChainsGate let:chains>
+  <TablePackets {chains} {chain_id} {connection_id} {channel_id}/>
+</ChainsGate>

app/src/routes/explorer/packets/[chain_id]/[connection_id]/[channel_id]/+page.svelte

@@ -1,6 +1,6 @@
 {
   "name": "@unionlabs/client",
-  "version": "0.0.59",
+  "version": "0.0.60",
   "homepage": "https://union.build",
   "description": "Union Labs cross-chain transfers client",
   "type": "module",

typescript-sdk/package.json

@@ -1,7 +1,7 @@
 import { raise } from "./utilities/index.ts"
 import { bech32, hex, bytes } from "@scure/base"
 import type { Bech32Address, HexAddress } from "./types.ts"
-import { isValidBech32Address } from "./utilities/address.ts"
+import { isValidBech32Address, isValidBech32ContractAddress } from "./utilities/address.ts"
 
 /**
  * convert a bech32 address (cosmos, osmosis, union addresses) to hex address (evm)
@@ -11,7 +11,7 @@ import { isValidBech32Address } from "./utilities/address.ts"
  * ```
  */
 export function bech32AddressToHex({ address }: { address: string }): HexAddress {
-  if (!isValidBech32Address(address)) raise(`Invalid bech32 address: ${address}`)
+  if (!isValidBech32ContractAddress(address)) raise(`Invalid bech32 address: ${address}`)
   const { bytes } = bech32.decodeToBytes(address)
   return `0x${bytesToHex(bytes)}`
 }