Refactor async server state management using tanstack

packages/nextjs/app/hooks/_components/HooksCards.tsx → packages/nextjs/app/hooks/HookDetails.tsx

@@ -2,10 +2,11 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { type HookDetails } from "../page";
+import { type HookInfo } from "./page";
+import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 import Modal from "~~/components/common/Modal";
 
-export const HooksCards = ({ hooks }: { hooks: HookDetails[] }) => {
+export const HooksDetails = ({ hooks }: { hooks: HookInfo[] }) => {
   const [activeModal, setActiveModal] = useState<number | null>(null);
 
   const modalContent = (id: number) => {
@@ -14,12 +15,16 @@ export const HooksCards = ({ hooks }: { hooks: HookDetails[] }) => {
     if (!hook) return null;
     const categories = hook.category.join(", ");
     return (
-      <div className="text-lg">
-        <h1 className="text-3xl font-bold mb-1">{hook.title}</h1>
-        <div className="">Created By {hook.created_by}</div>
-        <p className="text-xl">{hook.description}</p>
-        <div>Audited: {hook.audited}</div>
+      <div className="text-lg  flex flex-col gap-10">
+        <div>
+          <h1 className="text-3xl font-bold mb-1">{hook.title}</h1>
+          <div>Created By {hook.created_by}</div>
+        </div>
+
+        <div className="text-xl">{hook.description}</div>
+
         <div className="flex justify-between">
+          <div>Audited: {hook.audited}</div>
           <div>Categories: {categories}</div>
           <Link
             href={hook.github}
@@ -39,24 +44,24 @@ export const HooksCards = ({ hooks }: { hooks: HookDetails[] }) => {
       {hooks.map(hook => (
         <div
           key={hook.id}
-          className="bg-base-200 hover:bg-base-100 p-5 rounded-lg w-full hover:cursor-pointer grid grid-cols-8"
+          className="text-lg bg-base-200 hover:bg-base-100 p-5 rounded-lg w-full hover:cursor-pointer  grid grid-cols-5 shadow-md"
           onClick={() => setActiveModal(hook.id)}
         >
-          <div className="col-start-1 col-end-3 text-xl font-bold ">{hook.title}</div>
+          <div className="col-span-full lg:col-start-1 lg:col-end-3 text-xl font-bold ">{hook.title}</div>
 
-          <div className="hidden md:flex col-start-4 col-end-6 text-center">
+          <div className="hidden lg:flex text-center">
             <Link
-              className="flex gap-2 items-center text-nowrap overflow-hidden whitespace-nowrap"
+              className="hover:underline flex gap-2 items-center text-nowrap overflow-hidden whitespace-nowrap"
               target="_blank"
               rel="noopener noreferrer"
               href={hook.github}
             >
-              {hook.github.slice(0, 40)}...
+              github <ArrowTopRightOnSquareIcon className="w-4 h-4" />
             </Link>
           </div>
 
-          <div className="col-start-7 col-end-7">{hook.category}</div>
-          <div className="col-start-8 col-end-8">{hook.created_by}</div>
+          <div className="hidden lg:flex">{hook.category}</div>
+          <div className="hidden lg:flex">{hook.created_by}</div>
         </div>
       ))}
 

packages/nextjs/app/hooks/page.tsx

@@ -1,8 +1,8 @@
 import Link from "next/link";
-import { HooksCards } from "./_components/HooksCards";
+import { HooksDetails } from "./HookDetails";
 import type { NextPage } from "next";
 
-export type HookDetails = {
+export type HookInfo = {
   id: number;
   title: string;
   source: string;
@@ -15,7 +15,7 @@ export type HookDetails = {
 };
 
 const Hooks: NextPage = async () => {
-  let hooks: HookDetails[] | null = null;
+  let hooks: HookInfo[] | null = null;
   const response = await fetch("https://raw.githubusercontent.com/burns2854/balancer-hooks/main/hook-data.json");
   if (response.ok) {
     hooks = await response.json();
@@ -40,13 +40,13 @@ const Hooks: NextPage = async () => {
         </div>
       </div>
       <div className="w-full flex flex-col gap-3">
-        <div className="w-full grid grid-cols-8 font-bold text-lg">
-          <div className="col-start-1 col-end-4">Name</div>
-          <div className="col-start-4 col-end-6 text-start hidden md:flex">Repo URL</div>
-          <div className="col-start-7 col-end-7">Category</div>
-          <div className="col-start-8 col-end-8">Created By</div>
+        <div className="w-full grid grid-cols-5 font-bold text-lg">
+          <div className="col-auto lg:col-start-1 lg:col-end-3">Name</div>
+          <div className="hidden lg:flex">Repo URL</div>
+          <div className="hidden lg:flex">Category</div>
+          <div className="hidden lg:flex">Created By</div>
         </div>
-        {hooks ? <HooksCards hooks={hooks} /> : <div className="text-xl text-error">Error fetching hooks data!</div>}
+        {hooks ? <HooksDetails hooks={hooks} /> : <div className="text-xl text-error">Error fetching hooks data!</div>}
       </div>
     </div>
   );

packages/nextjs/app/hooks/types.ts

@@ -0,0 +1,11 @@
+export type HookDetails = {
+  id: number;
+  title: string;
+  source: string;
+  description: string;
+  github: string;
+  additional_link: string;
+  created_by: string;
+  audited: "Yes" | "No";
+  category: string[];
+};

packages/nextjs/app/page.tsx

@@ -14,18 +14,6 @@ const TOOLS = [
     href: "/hooks",
     description: "Extend liquidity pool functionality with hooks",
   },
-  // {
-  //   emoji: "🧭",
-  //   title: "Smart Order Router",
-  //   href: "/router",
-  //   description: "Integrate pools with the smart order router",
-  // },
-  // {
-  //   emoji: "📡",
-  //   title: "Subgraph",
-  //   href: "/subgraph",
-  //   description: "Integrate pools with the Balancer subgraph",
-  // },
 ];
 
 const Home: NextPage = () => {

packages/nextjs/app/pools/_components/PoolPageSkeleton.tsx

@@ -0,0 +1,29 @@
+import { SkeletonLoader } from "~~/components/common";
+
+export const PoolPageSkeleton = () => {
+  return (
+    <div className="w-full">
+      <div className="grid grid-cols-1 xl:grid-cols-2 w-full gap-7 mb-5 mt-20">
+        <div className="flex flex-col gap-7">
+          <div className="w-full h-72">
+            <SkeletonLoader />
+          </div>
+          <div className="w-full h-48">
+            <SkeletonLoader />
+          </div>
+          <div className="w-full h-96">
+            <SkeletonLoader />
+          </div>
+        </div>
+        <div className="flex flex-col gap-7">
+          <div className="w-full h-96">
+            <SkeletonLoader />
+          </div>
+          <div className="w-full h-72">
+            <SkeletonLoader />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};