From e596400253a09bb0acfae4a6d48f22581bd50e06 Mon Sep 17 00:00:00 2001
From: ejmg <elias.jm.garcia@gmail.com>
Date: Wed, 14 Aug 2024 22:50:14 -0500
Subject: [PATCH] removed ibc/page. updated ibc pages and components to use new
 stylings.

---
 .../src/app/(main)/ibc/channel/[id]/page.tsx  |  9 ++++--
 apps/web/src/app/(main)/ibc/channels/page.tsx |  6 ++--
 .../src/app/(main)/ibc/client/[id]/page.tsx   |  8 ++++--
 apps/web/src/app/(main)/ibc/clients/page.tsx  |  6 ++--
 .../app/(main)/ibc/connection/[id]/page.tsx   |  8 ++++--
 apps/web/src/app/(main)/ibc/page.tsx          | 28 -------------------
 apps/web/src/components/ibc/Channel/index.tsx |  2 +-
 apps/web/src/components/ibc/Client/index.tsx  |  2 +-
 .../src/components/ibc/Connection/index.tsx   |  2 +-
 9 files changed, 27 insertions(+), 44 deletions(-)
 delete mode 100644 apps/web/src/app/(main)/ibc/page.tsx

diff --git a/apps/web/src/app/(main)/ibc/channel/[id]/page.tsx b/apps/web/src/app/(main)/ibc/channel/[id]/page.tsx
index a8286ee..2c9389a 100644
--- a/apps/web/src/app/(main)/ibc/channel/[id]/page.tsx
+++ b/apps/web/src/app/(main)/ibc/channel/[id]/page.tsx
@@ -26,10 +26,13 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center ">
-      <h1 className="font-medium">IBC Channel</h1>
+    <div className="flex flex-col gap-8 items-center ">
+      <div className="sm:w-11/12 w-full">
+        <h1 className="text-lg font-medium">IBC Channel</h1>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
-        <div className="sm:w-11/12 w-full">
+        {/* TODO: don't forget to remove this extra pb-8 once Channel is cleaned up. */}
+        <div className="sm:w-11/12 w-full pb-8">
           <Channel {...{endpoint, queryName, channelId}}/>
         </div>
       </HydrationBoundary>
diff --git a/apps/web/src/app/(main)/ibc/channels/page.tsx b/apps/web/src/app/(main)/ibc/channels/page.tsx
index ee03266..17655a6 100644
--- a/apps/web/src/app/(main)/ibc/channels/page.tsx
+++ b/apps/web/src/app/(main)/ibc/channels/page.tsx
@@ -25,8 +25,10 @@ const Page = () => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center">
-      <h1 className="sm:text-2xl font-bold">IBC Channels</h1>
+    <div className="flex flex-col gap-8 items-center">
+      <div className="sm:w-11/12 w-full">
+        <h1 className="text-lg font-medium">IBC Channels</h1>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ChannelsTable
           className="sm:w-11/12 w-full"
diff --git a/apps/web/src/app/(main)/ibc/client/[id]/page.tsx b/apps/web/src/app/(main)/ibc/client/[id]/page.tsx
index 33e5ba4..c5bc7a9 100644
--- a/apps/web/src/app/(main)/ibc/client/[id]/page.tsx
+++ b/apps/web/src/app/(main)/ibc/client/[id]/page.tsx
@@ -26,10 +26,12 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center ">
-      <h1 className="font-medium">IBC Client</h1>
+    <div className="flex flex-col gap-8 items-center ">
+      <div className="sm:w-11/12 w-full">
+        <h1 className="text-lg font-medium">IBC Client</h1>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
-        <div className="sm:w-11/12 w-full">
+        <div className="sm:w-11/12 w-full pb-8">
           <Client {...{endpoint, queryName, clientId}}/>
         </div>
       </HydrationBoundary>
diff --git a/apps/web/src/app/(main)/ibc/clients/page.tsx b/apps/web/src/app/(main)/ibc/clients/page.tsx
index cec13b5..a4d3900 100644
--- a/apps/web/src/app/(main)/ibc/clients/page.tsx
+++ b/apps/web/src/app/(main)/ibc/clients/page.tsx
@@ -25,8 +25,10 @@ const Page = () => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center">
-      <h1 className="sm:text-2xl font-bold">IBC Clients</h1>
+    <div className="flex flex-col gap-8 items-center">
+      <div className="sm:w-11/12 w-full">
+        <h1 className="text-lg font-medium">IBC Clients</h1>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
         <ClientsTable
           className="sm:w-11/12 w-full"
diff --git a/apps/web/src/app/(main)/ibc/connection/[id]/page.tsx b/apps/web/src/app/(main)/ibc/connection/[id]/page.tsx
index b446749..0ea9b85 100644
--- a/apps/web/src/app/(main)/ibc/connection/[id]/page.tsx
+++ b/apps/web/src/app/(main)/ibc/connection/[id]/page.tsx
@@ -27,10 +27,12 @@ const Page : FC<PageProps> = ({ params }) => {
   });
 
   return (
-    <div className="bg-primary/60 flex flex-col gap-5 pt-5 items-center ">
-      <h1 className="font-medium">IBC Connection</h1>
+    <div className="flex flex-col gap-8 items-center">
+      <div className="sm:w-11/12 w-full">
+        <h1 className="text-lg font-medium">IBC Connection</h1>
+      </div>
       <HydrationBoundary state={dehydrate(queryClient)}>
-        <div className="sm:w-11/12 w-full">
+        <div className="sm:w-11/12 w-full pb-8">
           <Connection {...{endpoint, queryName, connectionId}}/>
         </div>
       </HydrationBoundary>
diff --git a/apps/web/src/app/(main)/ibc/page.tsx b/apps/web/src/app/(main)/ibc/page.tsx
deleted file mode 100644
index a3be9ee..0000000
--- a/apps/web/src/app/(main)/ibc/page.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import Link from "next/link";
-
-const Page = () => {
-  return (
-    <div className="flex flex-col gap-5 items-center pt-5 bg-primary/60">
-      <h1 className="text-lg font-bold">Available IBC data to explore</h1>
-      <div className="flex w-full justify-around">
-        <p className="font-bold underline">
-          <Link href="/ibc/clients">
-            IBC Clients
-          </Link>
-        </p>
-        <p className="font-bold underline">
-          <Link href="/ibc/channels">
-            IBC Channels
-          </Link>
-        </p>
-        <p className="font-bold underline">
-          <Link href="/ibc/connections">
-            IBC Connections
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
-};
-
-export default Page;
diff --git a/apps/web/src/components/ibc/Channel/index.tsx b/apps/web/src/components/ibc/Channel/index.tsx
index fd0056e..e823555 100644
--- a/apps/web/src/components/ibc/Channel/index.tsx
+++ b/apps/web/src/components/ibc/Channel/index.tsx
@@ -22,7 +22,7 @@ export const Channel : FC<ChannelProps> = ({ endpoint, queryName, channelId }) =
   });
 
   return (
-    <div className="flex flex-col justify-start p-5 gap-y-5 w-full">
+    <div className="flex flex-col justify-start gap-y-5 w-full">
       <div className="flex flex-wrap justify-start w-full">
         <p className="sm:w-1/6 w-full font-semibold">Channel ID</p>
         <pre className="sm:w-0 w-full">{channelId}</pre>
diff --git a/apps/web/src/components/ibc/Client/index.tsx b/apps/web/src/components/ibc/Client/index.tsx
index 383d617..41dd1f2 100644
--- a/apps/web/src/components/ibc/Client/index.tsx
+++ b/apps/web/src/components/ibc/Client/index.tsx
@@ -34,7 +34,7 @@ export const Client : FC<ClientProps> = ({ endpoint, queryName, clientId }) => {
   // const header = events.find(({ key }) => key === "header")?.value ?? "NONE";
 
   return (
-    <div className="flex flex-col justify-start p-5 gap-y-5 w-full">
+    <div className="flex flex-col justify-start gap-y-5 w-full">
       <div className="flex flex-wrap justify-start w-full">
         <p className="sm:w-1/6 w-full font-semibold">Client ID</p>
         <pre className="sm:w-0 w-full">{client_id}</pre>
diff --git a/apps/web/src/components/ibc/Connection/index.tsx b/apps/web/src/components/ibc/Connection/index.tsx
index 2b53aff..7089c20 100644
--- a/apps/web/src/components/ibc/Connection/index.tsx
+++ b/apps/web/src/components/ibc/Connection/index.tsx
@@ -27,7 +27,7 @@ export const Connection : FC<ConnectionProps> = ({ endpoint, queryName, connecti
   const { connection_id, client_id, channel_ids } = data.at(0) ?? { connection_id: "", client_id: "", channel_ids: [] };
 
   return (
-    <div className="flex flex-col justify-start p-5 gap-y-5 w-full">
+    <div className="flex flex-col justify-start gap-y-5 w-full">
       <div className="flex flex-wrap justify-start w-full">
         <p className="sm:w-1/6 w-full font-semibold">Connection ID</p>
         <pre className="sm:w-0 w-full">{connection_id}</pre>