Merging locally to allow rebase

app/(routes)/channels/page.tsx

@@ -12,29 +12,33 @@ import {
   VisibilityState
 } from '@tanstack/react-table';
 import { IbcTable } from 'components/table/ibc-table';
-import { BooleanCell } from "components/table/boolean-cell";
 import { IdentifiedChannel, State } from 'cosmjs-types/ibc/core/channel/v1/channel';
 import { Modal } from 'components/modal';
+import { SimIcon } from 'components/icons';
 
 const columnHelper = createColumnHelper<IdentifiedChannel>();
 const columns = [
   columnHelper.accessor('channelId', {
     header: 'Channel ID',
-    cell: props => <span className="whitespace-nowrap">{props.getValue()}</span>,
+    cell: props =>
+    <div className="flex flex-row">
+      <span className="whitespace-nowrap">
+        {props.getValue()}
+      </span>
+      {(props.row.original.counterparty?.portId?.toLowerCase().includes('sim') ||
+        props.row.original.portId?.toLowerCase().includes('sim')) ?
+        <div className="ml-2"><SimIcon /></div>
+        : null}
+    </div>,
     enableHiding: true,
     enableSorting: true,
     sortingFn: 'alphanumeric'
   }),
-  columnHelper.accessor('state', {
+  columnHelper.accessor(row => stateToString(row.state), {
     header: 'State',
-    cell: props => <span>{ stateToString(props.getValue()) }</span>,
-    enableHiding: true
-  }),
-  columnHelper.accessor(row => (row.portId.includes('sim') || row.counterparty.portId.includes('sim')), {
-    id: 'simClient',
-    header: 'Sim Client',
-    cell: props => <BooleanCell value={props.getValue()} />,
-    enableHiding: true
+    cell: props => <span>{props.getValue()}</span>,
+    enableHiding: true,
+    enableColumnFilter: true
   }),
   columnHelper.accessor('portId', {
     header: 'Port ID',
@@ -50,7 +54,8 @@ const columns = [
   }),
   columnHelper.accessor('connectionHops', {
     header: 'Connection Hops',
-    enableHiding: true
+    enableHiding: true,
+    enableColumnFilter: false
   })
 ];
 

app/(routes)/clients/page.tsx

@@ -10,15 +10,25 @@ import {
   useReactTable }
 from "@tanstack/react-table";
 import { IbcTable } from "components/table/ibc-table";
-import { BooleanCell } from "components/table/boolean-cell";
 import { Modal } from "components/modal";
+import { SimIcon } from "components/icons";
 import { Client } from "utils/types/client";
 
 const columnHelper = createColumnHelper<Client>();
 const columns = [
   columnHelper.accessor('clientId', {
     header: 'Client ID',
-    enableHiding: true
+    enableHiding: true,
+    cell: props =>
+    <div className="flex flex-row">
+      <span className="whitespace-nowrap">
+        {props.getValue()}
+      </span>
+      {(props.row.original.clientId?.toLowerCase().includes('sim'))
+        ? <div className="ml-2"><SimIcon /></div>
+        : null
+      }
+    </div>,
   }),
   columnHelper.accessor('clientState.chainId', {
     header: 'Chain ID',
@@ -28,11 +38,6 @@ const columns = [
     header: 'Dispatcher',
     enableHiding: true
   }),
-  columnHelper.accessor(row => (row.clientId.includes('sim')), {
-    header: 'Sim Client',
-    cell: props => <BooleanCell value={props.getValue()} />,
-    enableHiding: true
-  }),
   columnHelper.accessor('clientState.revisionHeight', {
     header: 'Revision Height',
     enableHiding: true

app/(routes)/connections/page.tsx

@@ -12,15 +12,24 @@ import {
   useReactTable }
 from "@tanstack/react-table";
 import { IbcTable } from "components/table/ibc-table";
-import { BooleanCell } from "components/table/boolean-cell";
+import { SimIcon } from "components/icons";
 import { IdentifiedConnection, State } from "cosmjs-types/ibc/core/connection/v1/connection";
 import { Modal } from "components/modal";
 
 const columnHelper = createColumnHelper<IdentifiedConnection>();
 const columns = [
   columnHelper.accessor('id', {
     header: 'Connection ID',
-    cell: props => <span className="whitespace-nowrap">{props.getValue()}</span>,
+    cell: props =>
+    <div className="flex flex-row">
+      <span className="whitespace-nowrap">
+        {props.getValue()}
+      </span>
+      {(props.row.original.counterparty?.clientId.toLowerCase().includes('sim') ||
+        props.row.original.clientId?.toLowerCase().includes('sim')) ?
+        <div className="ml-2"><SimIcon /></div>
+        : null}
+    </div>,
     enableHiding: true,
     enableSorting: true,
     sortingFn: 'alphanumeric'
@@ -34,13 +43,9 @@ const columns = [
     cell: props => <span>{ stateToString(props.getValue()) }</span>,
     enableHiding: true
   }),
-  columnHelper.accessor(row => (row.clientId.includes('sim') || row.counterparty.clientId.includes('sim')), {
-    header: 'Sim Client',
-    cell: props => <BooleanCell value={props.getValue()} />,
-    enableHiding: true
-  }),
   columnHelper.accessor('counterparty.connectionId', {
     header: 'Counterparty Connection',
+    cell: props => <span className="whitespace-nowrap">{props.getValue()}</span>,
     enableHiding: true
   }),
   columnHelper.accessor('counterparty.clientId', {

app/(routes)/packets/chain-cell.tsx

@@ -0,0 +1,42 @@
+import {
+  OptimismIcon,
+  BaseIcon
+} from "utils/chains/icons";
+import { SimIcon } from "components/icons"
+
+export function ChainCell({chain, iconSize}: {chain: string, iconSize?: number}) {
+  const size = iconSize || 32;
+  const sim: boolean = chain.toLowerCase().includes('sim');
+
+  let icon;
+  if (chain.toLowerCase().includes('optimism')) {
+    icon = OptimismIcon(size);
+  } else if (chain.toLowerCase().includes('base')) {
+    icon = BaseIcon(size);
+  } else {
+    return <span>{chain}</span>
+  }
+
+  return (
+    <div className="relative">
+      <div className="opacity-75" title={chain}>
+        {icon}
+      </div>
+      {sim && 
+        <div className="absolute translate-x-[26px] -translate-y-[22px]">
+          <SimIcon />
+        </div>
+      }
+    </div>
+  );
+}
+
+export function Arrow() {
+  return (
+    <div className="w-full min-w-6 ml-7 relative grid justify-items-end content-center opacity-70">
+      <div className="h-[1px] rounded-full w-full bg-fg-light dark:bg-fg-dark"></div>
+      <div className="h-[1px] rounded-full absolute w-[10px] mt-[15.6px] origin-right rotate-[40deg] bg-fg-light dark:bg-fg-dark"></div>
+      <div className="h-[1px] rounded-full absolute w-[10px] mt-[15.6px] origin-right -rotate-[40deg] bg-fg-light dark:bg-fg-dark"></div>
+    </div>
+  );
+}

app/(routes)/packets/page.tsx

@@ -12,12 +12,12 @@ import {
   useReactTable }
 from "@tanstack/react-table";
 import { IbcTable } from "components/table/ibc-table";
-import { BooleanCell } from "components/table/boolean-cell";
 import { Modal } from "components/modal";
+import { Packet } from "utils/types/packet";
 import { RowDetails } from "./row-details";
-import { Packet, PacketStates } from "utils/types/packet";
+import { StateCell, stateToString } from "./state-cell";
+import { ChainCell, Arrow } from "./chain-cell";
 import { hideMiddleChars } from "utils/functions";
-import { HiMiniArrowLongRight } from "react-icons/hi2";
 
 const columnHelper = createColumnHelper<Packet>();
 const columns = [
@@ -27,11 +27,7 @@ const columns = [
   }),
   columnHelper.accessor(row => stateToString(row.state), {
     header: 'State',
-    enableHiding: true
-  }),
-  columnHelper.accessor(row => (row.sourceChain.includes('sim') || row.destChain.includes('sim')), {
-    header: 'Sim Client',
-    cell: props => <BooleanCell value={props.getValue()} />,
+    cell: props => StateCell(props.getValue()),
     enableHiding: true
   }),
   columnHelper.accessor('sendTx', {
@@ -40,20 +36,24 @@ const columns = [
     enableHiding: true
   }),
   columnHelper.accessor('sourceChain', {
-    header: 'Source Chain',
+    header: 'Source',
     enableHiding: true,
     cell: props => (
       <div className="flex flex-row justify-between">
-        <span className="whitespace-nowrap mr-1">{props.getValue()}</span>
-        <HiMiniArrowLongRight className="mt-1 text-fg-light dark:text-fg-dark" />
+        <div className="ml-4"><ChainCell chain={props.getValue()} /></div>
+        <Arrow />
       </div>
-    ),
-    minSize: 170
+    )
   }),
   columnHelper.accessor('destChain', {
-    header: 'Dest Chain',
+    header: 'Dest',
+    cell: props => (
+      <div className="flex flex-row justify-between">
+        <div className="ml-5"><ChainCell chain={props.getValue()} /></div>
+      </div>
+    ),
     enableHiding: true,
-    minSize: 170
+    maxSize: 100
   }),
   columnHelper.accessor('sourcePortAddress', {
     header: 'Src Port Address',
@@ -103,19 +103,22 @@ const columns = [
   columnHelper.accessor('rcvTx', {
     header: 'Rcv Tx',
     cell: props => hideMiddleChars(props.getValue() ?? ''),
-    enableHiding: true
+    enableHiding: true,
+    enableColumnFilter: false
   }),
   columnHelper.accessor('ackTx', {
     header: 'Ack Tx',
     cell: props => hideMiddleChars(props.getValue() ?? ''),
-    enableHiding: true
+    enableHiding: true,
+    enableColumnFilter: false
   }),
   columnHelper.accessor('createTime', {
     header: 'Create Time',
     enableHiding: true,
     cell: props => new Date(props.getValue()*1000).toLocaleString(),
     enableSorting: true,
-    sortingFn: 'alphanumeric'
+    sortingFn: 'alphanumeric',
+    enableColumnFilter: false
   })
 ];
 
@@ -206,17 +209,3 @@ export default function Packets() {
     </div>
   );
 }
-
-function stateToString(state: PacketStates) {
-  switch (state) {
-    case PacketStates.SENT:
-    case PacketStates.POLY_RECV:
-      return 'Relaying'
-    case PacketStates.RECV:
-    case PacketStates.WRITE_ACK:
-    case PacketStates.POLY_WRITE_ACK:
-      return 'Confirming'
-    case PacketStates.ACK:
-      return 'Delivered'
-  }
-}

app/(routes)/packets/row-details.tsx

@@ -18,7 +18,7 @@ export function RowDetails(selectedRow: Packet) {
 
   return (selectedRow &&
     <>
-      <h1>Packet Details</h1>
+      <h2>Packet Details</h2>
       <div className="flex flex-col gap-2 mt-4">
 
         <div className="flex flex-row justify-between">

app/(routes)/packets/state-cell.tsx

@@ -0,0 +1,31 @@
+import { PacketStates } from "utils/types/packet";
+import { classNames } from "utils/functions";
+
+export function StateCell(state: string) {
+  return (
+    <div className={classNames(
+      state === 'Delivered'
+      ? "bg-emerald-500/60"
+      : "bg-sky-500/50"
+      , "flex flex-row w-32 justify-center rounded-xl py-[2.2px]"
+    )}>
+      <span className="text-fg-light dark:text-fg-dark mr-[1.5px] mb-[1.5px] font-primary">{state}</span>
+    </div>
+  );
+}
+
+export function stateToString (state: PacketStates): string {
+  switch (state) {
+    case PacketStates.SENT:
+    case PacketStates.POLY_RECV:
+      return 'Relaying';
+    case PacketStates.RECV:
+    case PacketStates.WRITE_ACK:
+    case PacketStates.POLY_WRITE_ACK:
+      return 'Confirming';
+    case PacketStates.ACK:
+      return 'Delivered';
+    default:
+      return 'Relaying';
+  }
+}

app/components/icons.tsx

@@ -0,0 +1,7 @@
+export const SimIcon = () => (
+  <div 
+    title="Uses sim client"
+    className="grid justify-items-center content-center w-6 h-6 border-2 border-sky-600 border-dotted rounded-full bg-bg-light dark:bg-bg-dark-accent cursor-default">
+    <span className="text-sky-600 font-primary text-xs font-semibold italic mr-[2.5px] mb-[0.3px]">S</span>
+  </div>
+);

app/components/navbar.tsx

@@ -29,7 +29,7 @@ export default function Navbar() {
   }
 
   return (
-    <nav className="w-full z-20 sticky top-0 bg-bg-light-accent dark:bg-bg-dark border-b-[0.8px] border-gray-300 dark:border-gray-700 ease-in-out">
+    <nav className="w-full z-20 sticky top-0 bg-bg-light-accent dark:bg-bg-dark border-b-[0px] border-gray-300 dark:border-gray-700 ease-in-out">
       <div className="h-16 min-w-0 xl:min-w-[80rem] max-w-screen-xl xl:w-4/5 mx-auto px-6 sm:px-8 flex justify-between sm:justify-start">
 
         <div className="flex items-center shrink-0 mr-10 pt-1">