chore: add pool detail

src/app/pool/[chain]/[id]/page.tsx

@@ -0,0 +1,37 @@
+import PoolDetailPage from "@/components/Pool/PoolDetail";
+import { TPoolDetail } from "@/components/Pool/types";
+
+export default async function PoolDetail({
+  params,
+}: {
+  params: { id: string };
+}) {
+  const pool: TPoolDetail = {
+    poolId: Number(params.id),
+    chainId: 58008,
+    strategy: "0x1a749965c9142c873298362333ed2545d4edd2da",
+    token: "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee",
+    amount: 1e17,
+    profile: {
+      name: "Apollo Pool",
+      owner: "0xe7eb5d2b5b188777df902e89c54570e7ef4f59ce",
+    },
+    metadata: {
+      protocol: 1,
+      pointer: "bafkreigwiljyskihuaeyjsedoei3taprwbbheldxig25lhoqvw2kpcf4bu",
+    },
+    creator: "0x3f15B8c6F9939879Cb030D6dd935348E57109637"
+  };
+
+  const response = await fetch(
+    `https://ipfs.io/ipfs/${pool.metadata.pointer}`,
+  );
+
+  let metadata = "";
+  // Check if the response status is OK (200)
+  if (response.ok) {
+    metadata = await response.text();
+  }
+
+  return <PoolDetailPage pool={pool} metadata={metadata} />;
+}

src/components/Pool/Pool.tsx

@@ -2,8 +2,9 @@
 // eslint-disable-file react/jsx-key
 import Table from "../Table";
 import { TTableData } from "@/types/types";
-import { Address, convertBytesToShortString } from "../Address";
+import { Address, convertBytesToShortString, truncatedString } from "../Address";
 import { convertChainIdToNetworkName, formatAmount, shortenPoolName } from "@/utils/utils";
+import Link from "next/link";
 // import Status from "../Status";
 
 const Pool = (data: any) => {
@@ -24,7 +25,9 @@ const Pool = (data: any) => {
     ],
     rows: Object.values(data.data).map((pool: any) => {
       return [
-        pool.poolId,
+        <Link href={`/pool/${pool.chainId}/${pool.poolId}`}>
+          {truncatedString(pool.poolId)}
+        </Link>,,
         <Address address={pool.strategy} chainId={pool.chainId} />,
         // pool.name, FIXME: THE API DOES NOT RETURN THE POOL NAME
         // shortenPoolName("Pool Name is really long"),

src/components/Pool/PoolDetail.tsx

@@ -0,0 +1,98 @@
+"use client";
+import { convertChainIdToNetworkName } from "@/utils/utils";
+import { AddressResponsive } from "../Address";
+import { TPoolDetail } from "./types";
+import { MetadataProtocol } from "@/types/types";
+import { TbExternalLink } from "react-icons/tb";
+import JsonView from "@uiw/react-json-view";
+import { ethers } from "ethers";
+
+const PoolDetailPage = ({
+  pool,
+  metadata,
+}: {
+  pool: TPoolDetail;
+  metadata: string;
+}) => {
+  const metadataObj = JSON.parse(metadata);
+
+  return (
+    <div>
+      <div className="px-4 sm:px-0 my-10">
+        <h3 className="text-base font-semibold leading-7 text-gray-900">
+          {/* {pool.name} */}
+          "Pool Name"
+        </h3>
+        <p className="mt-1 max-w-2xl text-sm leading-6 text-gray-500 font-mono">
+          {pool.poolId}
+        </p>
+      </div>
+      <div className="mt-6 border-t border-gray-100">
+        <dl className="divide-y divide-gray-100">
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className="text-sm font-medium leading-6 text-gray-900">
+              Network
+            </dt>
+            <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+              {convertChainIdToNetworkName(pool.chainId)}
+            </dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className="text-sm font-medium leading-6 text-gray-900">
+              Token
+            </dt>
+            <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+              {pool.token}
+            </dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className="text-sm font-medium leading-6 text-gray-900">
+              Amount
+            </dt>
+            <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+              {ethers.formatEther(pool.amount.toString())}
+            </dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className="text-sm font-medium leading-6 text-gray-900">
+              Creator
+            </dt>
+            <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+              <AddressResponsive
+                address={pool.creator}
+                chainId={pool.chainId}
+              />
+            </dd>
+          </div>
+          <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0">
+            <dt className="text-sm font-medium leading-6 text-gray-900">
+              Metadata ({MetadataProtocol[pool.metadata.protocol]}){" "}
+            </dt>
+            <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
+              <div className="flex flex-row items-center">
+                {pool.metadata.pointer}
+                <a
+                  className="ml-2"
+                  // data-tip="view on explorer"
+                  target="_blank"
+                  href={"https://ipfs.io/ipfs/" + pool.metadata.pointer}
+                >
+                  <TbExternalLink />
+                </a>
+              </div>
+            </dd>
+          </div>
+        </dl>
+        <div className="pb-6">
+          <JsonView
+            value={metadataObj}
+            shortenTextAfterLength={120}
+            collapsed={2}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PoolDetailPage;

src/components/Pool/types.ts

@@ -12,4 +12,5 @@ export type TPoolDetail = {
     protocol: number;
     pointer: string;
   };
+  creator: string;
 };

src/components/Registry/Profile.tsx

@@ -14,7 +14,7 @@ const Profile = (data: any) => {
     rows: Object.values(data.data).map((profile: any) => {
       return [
         // eslint-disable-next-line react/jsx-key
-        <Link href={`/profile/${profile.profileId}`}>
+        <Link href={`/profile/${profile.chainId}/${profile.profileId}`}>
           {truncatedString(profile.profileId)}
         </Link>,
         // eslint-disable-next-line react/jsx-key