feat: support strategy specific page

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

@@ -1,38 +1,122 @@
 import PoolDetailPage from "@/components/Pool/PoolDetail";
-import { IPoolDetailResponse, TPoolDetail } from "@/components/Pool/types";
+import {
+  IPoolDetailResponse,
+  Status,
+  StrategyId,
+  TPoolDetail,
+  TRfpStrategy,
+} from "@/components/Pool/types";
 import { getPoolDetailDataQuery, graphqlEndpoint } from "@/utils/query";
+import { fetchIpfsMetadata } from "@/utils/utils";
 import { request } from "graphql-request";
 
 export default async function PoolDetail({
   params,
 }: {
   params: { chain: string; id: string };
 }) {
+  // ============ todo: replace dummy data with real data ============
+  const rfpStrategyDetails: TRfpStrategy = {
+    useRegistryAnchor: true,
+    metadataRequired: true,
+    acceptedRecipient: "0x1234567890123456789012345678901234567890",
+    maxBid: 2000000000000000,
+    upcomingMilsetoneId: 1,
+    recipients: [
+      {
+        recipient: "0x1234567890123456789012345678901234567890",
+        useRegistryAnchor: true,
+        recipientAddress: "0x1234567890123456789012345678901234567890",
+        proposalBid: 1000000000000000,
+        recipientStatus: Status.Accepted,
+      },
+      {
+        recipient: "0x1234567890123456789012345678901234567890",
+        useRegistryAnchor: true,
+        recipientAddress: "0x1234567890123456789012345678901234567890",
+        proposalBid: 1000000000000000,
+        recipientStatus: Status.Pending,
+      },
+    ],
+    milestones: [
+      {
+        amountPercentage: 10,
+        metadata: {
+          protocol: 1,
+          pointer:
+            "bafkreigwiljyskihuaeyjsedoei3taprwbbheldxig25lhoqvw2kpcf4bu",
+        },
+        metadataObj: await fetchIpfsMetadata({
+          protocol: 1,
+          pointer:
+            "bafkreigwiljyskihuaeyjsedoei3taprwbbheldxig25lhoqvw2kpcf4bu",
+        }),
+        milestoneStatus: Status.Pending,
+      },
+      {
+        amountPercentage: 10,
+        metadata: {
+          protocol: 1,
+          pointer:
+            "bafkreigwiljyskihuaeyjsedoei3taprwbbheldxig25lhoqvw2kpcf4bu",
+        },
+        metadataObj: await fetchIpfsMetadata({
+          protocol: 1,
+          pointer:
+            "bafkreigwiljyskihuaeyjsedoei3taprwbbheldxig25lhoqvw2kpcf4bu",
+        }),
+        milestoneStatus: Status.Pending,
+      },
+    ],
+    distributions: [
+      {
+        acceptedRecipient: "0x1234567890123456789012345678901234567890",
+        recipientAddress: "0x1234567890123456789012345678901234567890",
+        amount: 1000000000000000,
+        sender: "0x1234567890123456789012345678901234567890",
+      },
+      {
+        acceptedRecipient: "0x1234567890123456789012345678901234567890",
+        recipientAddress: "0x1234567890123456789012345678901234567890",
+        amount: 1000000000000000,
+        sender: "0x1234567890123456789012345678901234567890",
+      },
+    ],
+    votes: [
+      {
+        voter: "0x1234567890123456789012345678901234567890",
+        recipientId: "0x1234567890123456789012345678901234567890",
+        timestamp: 1234567890,
+      },
+      {
+        voter: "0x1234567890123456789012345678901234567890",
+        recipientId: "0x1234567890123456789012345678901234567890",
+        timestamp: 1234567890,
+      },
+    ],
+  };
+
   const response: IPoolDetailResponse = await request(
     graphqlEndpoint,
     getPoolDetailDataQuery,
     {
       chainId: params.chain,
       poolId: params.id,
-    }
+    },
   );
 
   const { pool }: { pool: TPoolDetail } = response;
 
-  let poolMetadata = "{}";
-
-  try {
-    const response = await fetch(
-      `https://gitcoin.mypinata.cloud/ipfs/${pool.metadataPointer}`,
-    );
+  if (pool.poolId === "42")
+    pool.strategyDetails = {
+      strategyId: StrategyId.RFPCommittee,
+      details: rfpStrategyDetails,
+    };
 
-    // Check if the response status is OK (200)
-    if (response.ok) {
-      poolMetadata = await response.text();
-    }
-  } catch (error) {
-    console.error(error);
-  }
+  const metadataObj: Object = await fetchIpfsMetadata({
+    pointer: pool.metadataPointer,
+    protocol: pool.metadataProtocol,
+  });
 
-  return <PoolDetailPage pool={pool} poolMetadata={poolMetadata} />;
+  return <PoolDetailPage pool={pool} metadataObj={metadataObj} />;
 }

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

@@ -4,6 +4,7 @@ import {
   TProfileDetail,
 } from "@/components/Registry/types";
 import { getProfileDetailDataQuery, graphqlEndpoint } from "@/utils/query";
+import { fetchIpfsMetadata } from "@/utils/utils";
 import request from "graphql-request";
 
 export default async function ProfileDetailPage({
@@ -21,18 +22,14 @@ export default async function ProfileDetailPage({
   );
 
   const profile: TProfileDetail = profileDetails.profile;
-
-  const response = await fetch(
-    `https://gitcoin.mypinata.cloud/ipfs/${profile.metadataPointer}`,
-  );
-
-  let metadata = "";
-
-  if (response.ok) metadata = await response.text();
+  const metadataObj: Object = await fetchIpfsMetadata({
+    pointer: profile.metadataPointer,
+    protocol: profile.metadataProtocol,
+  });
 
   return (
     <div>
-      <ProfileDetail profile={profile} metadata={metadata} />
+      <ProfileDetail profile={profile} metadataObj={metadataObj}/>
     </div>
   );
 }

src/components/List.tsx

@@ -0,0 +1,35 @@
+import { useMediaQuery } from "@/hooks/useMediaQuery";
+import { TListProps } from "@/types/types";
+
+const List = (props: {data: TListProps[]}) => {
+  const isMobile = useMediaQuery(768);
+  const py = isMobile ? "py-2" : "py-6";
+
+  return (
+    <div className="mt-6 border-t border-gray-100 w-full">
+      <dl className="divide-y divide-gray-100">
+        {props.data.map((d, index) => (
+          <div
+            key={`list-div-` + index}
+            className={`px-4 ${py} sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0`}
+          >
+            <dt
+              key={`list-dt-` + index}
+              className="text-sm font-medium leading-6 text-gray-900"
+            >
+              {d.label}
+            </dt>
+            <dd
+              key={`list-dd-` + index}
+              className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"
+            >
+              {d.value}
+            </dd>
+          </div>
+        ))}
+      </dl>
+    </div>
+  );
+};
+
+export default List;

src/components/Metadata.tsx

@@ -0,0 +1,43 @@
+import { Metadata } from "@/types/types";
+import JsonView from "@uiw/react-json-view";
+import { TbExternalLink } from "react-icons/tb";
+import { truncatedString } from "./Address";
+
+const Metadata = ({
+  isMobile,
+  metadata,
+  metadataObj,
+  shortenTexteAfterLength = 120,
+  collapsed = 2,
+}: {
+  isMobile: boolean;
+  metadata: Metadata;
+  metadataObj: Object;
+  shortenTexteAfterLength?: number;
+  collapsed?: number;
+}) => {
+  return (
+    <div>
+      <div className="flex flex-row items-center">
+        {isMobile ? truncatedString(metadata.pointer) : metadata.pointer}
+        <a
+          className="ml-2"
+          // data-tip="view on explorer"
+          target="_blank"
+          href={"https://ipfs.io/ipfs/" + metadata.pointer}
+        >
+          <TbExternalLink />
+        </a>
+      </div>
+      <div className="pb-6">
+        <JsonView
+          value={metadataObj}
+          shortenTextAfterLength={shortenTexteAfterLength}
+          collapsed={collapsed}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Metadata;