Connections and Channels explorer pages (#2010)

- fix(site): remove blocksStore JSON
- feat(app): connections in explorer
- feat(app): channels in explorer

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

@@ -0,0 +1,25 @@
+import { graphql } from "gql.tada"
+
+export const channelsQuery = graphql(/* GraphQL */ `query ChannelsQuery($limit: Int = 500) {
+  v0_channel_map(order_by: [
+    {status: asc}, 
+    {from_chain_id: asc}, 
+    {from_connection_id: asc},
+    {from_channel_id: asc},
+    {from_port_id: asc},
+    {to_chain_id: asc}, 
+    {to_connection_id: asc}, 
+    {to_channel_id: asc},
+    {to_port_id: asc}
+  ], limit: $limit) {
+    from_chain_id
+    from_connection_id
+    from_channel_id
+    from_port_id
+    to_chain_id
+    to_connection_id
+		to_channel_id    
+    to_port_id
+    status
+  }
+}`)

app/src/lib/graphql/documents/connections.ts

@@ -0,0 +1,23 @@
+import { graphql } from "gql.tada"
+
+export const connectionsQuery = graphql(/* GraphQL */ `
+query ConnectionsQuery($limit: Int = 100) {
+  v0_connection_map(order_by: [
+    {status: asc}, 
+    {from_chain_id: asc}, 
+    {from_client_id: asc}, 
+    {from_connection_id: asc},
+    {to_chain_id: asc}, 
+    {to_client_id: asc}, 
+    {to_connection_id: asc}
+    ], limit: $limit) {
+    from_chain_id
+    to_chain_id
+    from_client_id
+    from_connection_id
+    to_client_id
+    to_connection_id
+    status
+  }
+}
+`)

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

@@ -2,6 +2,8 @@
 import { cn } from "$lib/utilities/shadcn.ts"
 
 export let value: string
+
+const goodValue = (v: string) => v === "HEALTHY" || v === "CONFIRM"
 </script>
 
-<div class={cn(value === 'HEALTHY' ? 'bg-green-500 dark:bg-green-800' : 'bg-red-500 dark:bg-red-800', 'font-bold text-white inline px-2 py-1 rounded')}  {...$$restProps}>{value}</div>
+<div class={cn(goodValue(value) ? 'bg-green-500 dark:bg-green-800' : 'bg-red-500 dark:bg-red-800', 'font-bold text-white inline px-2 py-1 rounded')}  {...$$restProps}>{value}</div>

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

@@ -64,7 +64,7 @@ $: dataStore.subscribe(() => {
             {#each headerGroup.headers as header (header.id)}
               <Table.Head
                 colspan={header.colSpan}
-                class={cn(`w-[${header.getSize()}px]`)}
+                class={cn(`w-[${header.getSize()}px] whitespace-nowrap`)}
               >
                   <svelte:component
                     this={flexRender(header.column.columnDef.header, header.getContext())}
@@ -74,7 +74,7 @@ $: dataStore.subscribe(() => {
           </Table.Row>
         {/each}
       </Table.Header>
-      <Table.Body class={cn(`h-[${$virtualizer.getTotalSize()}px]`)}>
+      <Table.Body class={cn(`h-[${$virtualizer.getTotalSize()}px]] whitespace-nowrap`)}>
         {#each $virtualizer.getVirtualItems() as row, index (row.index)}
           <Table.Row
             class={cn(

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

@@ -28,7 +28,12 @@ export const load = (loadEvent => {
         icon: BlocksIcon,
         description: "Blocks from all chains indexed by Hubble"
       },
-      { route: "connections", icon: ConnectionIcon, description: "Open IBC Connections" },
+      {
+        route: "connections",
+        icon: ConnectionIcon,
+        description:
+          "IBC Connections based on on-chain handshake events. Status is only 'CONFIRM' if we have indexed the entire four-way handshake."
+      },
       { route: "channels", icon: TvIcon, description: "Open IBC Channels" },
       { route: "packets", icon: SendHorizontalIcon, description: "Packets sent through Union" },
       {

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

@@ -37,71 +37,49 @@ $: if (blockData) {
 }
 const columns = [
   {
-    accessorKey: "time",
-    size: 100,
-    meta: {
-      class: "ml-1.5 justify-start"
-    },
-    header: () => "Time",
-    cell: info =>
-      flexRender(CellDurationText, {
-        totalUnits: 3,
-        variant: "short",
-        class: "pl-2 text-clip",
-        minUnits: DurationUnits.Second,
-        start: new Date(info.getValue() as string)
-      })
+    accessorKey: "chain_id",
+    header: () => "Chain ID",
+    meta: {},
+    size: 200,
+    cell: info => CHAIN_MAP[info.getValue() as unknown as number].chainId
   },
   {
     accessorKey: "height",
     header: () => "Height",
-    size: 100,
+    size: 200,
     meta: {
-      class: "w-full justify-start"
+      class: "p-0"
     },
     accessorFn: row => row.height,
-    cell: info =>
-      flexRender(Button, {
-        variant: "link",
-        target: "_blank",
-        value: info.getValue(),
-        rel: "noopener noreferrer",
-        class: "hover:cursor-pointer tabular-nums lining-nums px-0 text-justify common-ligatures",
-        href: `https://api.testnet.bonlulu.uno/cosmos/base/tendermint/v1beta1/blocks/${info.getValue()}`
-      })
+    cell: info => info.getValue()
   },
   {
-    accessorKey: "chain_id",
-    header: () => "Chain ID",
-    meta: {
-      class: "w-full justify-start"
-    },
-    size: 200,
+    accessorKey: "time",
+    size: 100,
+    meta: {},
+    header: () => "Time",
     cell: info =>
-      flexRender(CellText, {
-        value: CHAIN_MAP[info.getValue() as unknown as number].chainId
+      flexRender(CellDurationText, {
+        totalUnits: 3,
+        variant: "short",
+        class: "pl-2 text-clip",
+        minUnits: DurationUnits.Second,
+        start: new Date(info.getValue() as string)
       })
   },
   {
     accessorKey: "hash",
-    meta: {
-      class: "w-full justify-start"
-    },
+    meta: {},
     header: () => flexRender(CellText, { value: "Hash" }),
-    size: 1000,
+    size: 200,
     cell: info =>
-      flexRender(Button, {
-        class: "p-0 font-mono",
-        variant: "link",
-        target: "_blank",
-        value: info.getValue(),
-        rel: "noopener noreferrer",
-        href: `https://rpc.testnet.bonlulu.uno/block_by_hash?hash=${info.getValue()}`
+      flexRender(CellText, {
+        class: "p-0 m-0 font-mono",
+        value: info.getValue()
       })
   }
 ] as Array<ColumnDef<CosmosBlock>>
 </script>
 
 <Table columns={columns} bind:dataStore={blocksStore}/>
-{JSON.stringify($blocksStore, null, 2)}
 

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

@@ -1,4 +1,77 @@
 <script lang="ts">
-import { cn } from "$lib/utilities/shadcn.ts"
+import request from "graphql-request"
+import { channelsQuery } from "$lib/graphql/documents/channels.ts"
+import { createQuery } from "@tanstack/svelte-query"
+import { URLS } from "$lib/constants"
+import Table from "../(components)/table.svelte"
+import { flexRender, type ColumnDef } from "@tanstack/svelte-table"
+import { writable } from "svelte/store"
+import CellDurationText from "../(components)/cell-duration-text.svelte"
+import CellStatus from "../(components)/cell-status.svelte"
+import { DurationUnits } from "svelte-ux"
+
+$: channels = createQuery({
+  queryKey: ["channels"],
+  refetchInterval: 5_000,
+  queryFn: async () => request(URLS.GRAPHQL, channelsQuery, {})
+})
+
+$: channelsData = $channels?.data?.v0_channel_map ?? []
+
+type Channel = (typeof channelsData)[number]
+
+$: channelsStore = writable<Array<Channel>>(channelsData as Array<Channel>)
+$: if (channels) {
+  channelsStore.update(channels => channels)
+}
+
+const columns: Array<ColumnDef<{ chain_id: string }>> = [
+  {
+    accessorKey: "from_chain_id",
+    header: () => "From Chain ID",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "from_connection_id",
+    header: () => "From Connection ID",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "from_channel_id",
+    header: () => "From Channel ID",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "to_chain_id",
+    header: () => "To Chain ID",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "to_connection_id",
+    header: () => "To Connection ID",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "to_channel_id",
+    header: () => "To Channel ID",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "status",
+    header: () => "Status",
+    size: 200,
+    cell: info =>
+      flexRender(CellStatus, {
+        value: info.getValue()
+      })
+  }
+]
 </script>
 
+<Table bind:dataStore={channelsStore} {columns} />

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

@@ -1 +1,77 @@
+<script lang="ts">
+import request from "graphql-request"
+import { connectionsQuery } from "$lib/graphql/documents/connections.ts"
+import { createQuery } from "@tanstack/svelte-query"
+import { URLS } from "$lib/constants"
+import Table from "../(components)/table.svelte"
+import { flexRender, type ColumnDef } from "@tanstack/svelte-table"
+import { writable } from "svelte/store"
+import CellDurationText from "../(components)/cell-duration-text.svelte"
+import CellStatus from "../(components)/cell-status.svelte"
+import { DurationUnits } from "svelte-ux"
 
+$: connections = createQuery({
+  queryKey: ["connections"],
+  refetchInterval: 5_000,
+  queryFn: async () => request(URLS.GRAPHQL, connectionsQuery, {})
+})
+
+$: connectionsData = $connections?.data?.v0_connection_map ?? []
+
+type Connection = (typeof connectionsData)[number]
+
+$: connectionsStore = writable<Array<Connection>>(connectionsData as Array<Connection>)
+$: if (connections) {
+  connectionsStore.update(connections => connections)
+}
+
+const columns: Array<ColumnDef<{ chain_id: string }>> = [
+  {
+    accessorKey: "from_chain_id",
+    header: () => "From Chain ID",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "from_client_id",
+    header: () => "From Client ID",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "from_connection_id",
+    header: () => "From Connection ID",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "to_chain_id",
+    header: () => "To Chain ID",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "to_client_id",
+    header: () => "To Client ID",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "to_connection_id",
+    header: () => "To Connection ID",
+    size: 200,
+    cell: info => info.getValue()
+  },
+  {
+    accessorKey: "status",
+    header: () => "Status",
+    size: 200,
+    cell: info =>
+      flexRender(CellStatus, {
+        value: info.getValue()
+      })
+  }
+]
+</script>
+
+<Table bind:dataStore={connectionsStore} {columns} />