basic skeleton for enumerating existing ibc connections + api endpoint

src/app/api/ibc/connections/route.ts

@@ -0,0 +1,44 @@
+import db from "@/lib/db";
+import { type NextRequest } from "next/server";
+
+export async function GET(_req: NextRequest) {
+  console.log("SUCCESS: GET /api/ibc/connections");
+  try {
+    console.log("Querying indexer for IBC connections");
+
+    const connectionsQuery = await db.events.findMany({
+      select: {
+        attributes: {
+          select: {
+            key: true,
+            value: true,
+          },
+          where: {
+            key: {
+              equals: "connection_id",
+            },
+          },
+        },
+      },
+      where: {
+        type: {
+          equals: "connection_open_init",
+        },
+      },
+      orderBy: {
+        rowid: "desc",
+      },
+    });
+
+    console.log("Successfully queried for IBC connections.", connectionsQuery);
+    console.log(connectionsQuery[0].attributes);
+
+    const connections = connectionsQuery.map(({ attributes }) => attributes).flat();
+
+    return new Response(JSON.stringify(connections));
+
+  } catch (error) {
+    console.error("GET request failed.", error);
+    return new Response("Could not query IBC Connections.", { status: 500 });
+  }
+}

src/app/ibc/connections/page.tsx

@@ -1,7 +1,50 @@
+"use client";
+
+import ConnectionsTable from "@/components/ibc/connections/ConnectionsTable";
+import { useQuery } from "@tanstack/react-query";
+import axios from "axios";
+
 const Page = () => {
+  const { data , isFetched, isError } = useQuery({
+    queryFn: async () => {
+      console.log("Fetching: GET /api/ibc/connections");
+      const { data } = await axios.get("/api/ibc/connections");
+      console.log("Fetched result:", data);
+      // TODO: enforce validation
+      return data;
+    },
+    queryKey: ["IbcConnections"],
+    retry: false,
+    meta: {
+      errorMessage: "Failed to query for IBC Connections. Please try again.",
+    },
+  });
+
+  if (isError) {
+    return (
+      <div className="py-5 flex justify-center">
+        <h1 className="text-4xl font-semibold">No results found.</h1>
+      </div>
+    );
+  }
+
   return (
     <div>
-      <p className="font-bold">IBC Connections are not yet implemented...</p>
+      {isFetched ? (
+        <div>
+          <h1 className="text-3xl mx-auto py-5 font-semibold">IBC Connections</h1>
+        {// eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+        data  ? (
+          <div className="flex flex-col justify-center w-full">
+            <ConnectionsTable data={data} />
+          </div>
+        ) : (
+          <p>No results</p>
+        )}
+       </div>
+      ) : (
+        <p>loading...</p>
+      )}
     </div>
   );
 };

src/components/ibc/connections/ConnectionsTable.tsx

@@ -0,0 +1,20 @@
+import { columns } from "./columns";
+import { DataTable } from "../../ui/data-table";
+import { type FC } from "react";
+
+interface Props {
+  data: Array<{
+    key: string,
+    value: string | null,
+  }>,
+}
+
+const ConnectionsTable : FC<Props> = ({ data }) => {
+  return (
+    <div>
+      <DataTable columns={columns} data={data}/>
+    </div>
+  );
+};
+
+export default ConnectionsTable;

src/components/ibc/connections/columns.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { type ColumnDef } from "@tanstack/react-table";
+import Link from "next/link";
+
+export type ConnectionsColumns = Record<number, {
+    key: string,
+    value: string,
+  }>;
+
+// TODO formating, styling, etc
+export const columns : Array<ColumnDef<ConnectionsColumns>> = [
+  {
+    id: "connectionId",
+    // accessorFn: (row) => row[0].value,
+    accessorKey: "value",
+    header: () => <div className="font-semibold text-gray-800">Channel ID</div>,
+    cell: ({ getValue }) => {
+      // Precondition: value should never be null for `connection_id`
+      const connectionId = getValue() as string;
+      return <Link href={`/ibc/connection/${connectionId}`} className="underline">{connectionId}</Link>;
+    },
+  },
+];