diff --git a/src/app/pool/[chain]/[id]/page.tsx b/src/app/pool/[chain]/[id]/page.tsx new file mode 100644 index 0000000..1433dfc --- /dev/null +++ b/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 ; +} diff --git a/src/app/pool/[id]/page.tsx b/src/app/pool/[id]/page.tsx deleted file mode 100644 index c335dd7..0000000 --- a/src/app/pool/[id]/page.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { TPoolDetail } from "@/components/Pool/types"; - -export default function PoolDetailPage({ - 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: "0x123", - }, - }; - - return

My Page

; -} diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx index 8b7ad1a..cfb3696 100644 --- a/src/components/Pool/Pool.tsx +++ b/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, + + {truncatedString(pool.poolId)} + ,,
, // pool.name, FIXME: THE API DOES NOT RETURN THE POOL NAME // shortenPoolName("Pool Name is really long"), diff --git a/src/components/Pool/PoolDetail.tsx b/src/components/Pool/PoolDetail.tsx new file mode 100644 index 0000000..e7c12af --- /dev/null +++ b/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 ( +
+
+

+ {/* {pool.name} */} + "Pool Name" +

+

+ {pool.poolId} +

+
+
+
+
+
+ Network +
+
+ {convertChainIdToNetworkName(pool.chainId)} +
+
+
+
+ Token +
+
+ {pool.token} +
+
+
+
+ Amount +
+
+ {ethers.formatEther(pool.amount.toString())} +
+
+
+
+ Creator +
+
+ +
+
+
+
+ Metadata ({MetadataProtocol[pool.metadata.protocol]}){" "} +
+
+
+ {pool.metadata.pointer} + + + +
+
+
+
+
+ +
+
+
+ ); +}; + +export default PoolDetailPage; diff --git a/src/components/Pool/types.ts b/src/components/Pool/types.ts index 411ddc6..c50d585 100644 --- a/src/components/Pool/types.ts +++ b/src/components/Pool/types.ts @@ -12,4 +12,5 @@ export type TPoolDetail = { protocol: number; pointer: string; }; + creator: string; }; diff --git a/src/components/Registry/Profile.tsx b/src/components/Registry/Profile.tsx index e1356f6..9e8bbbe 100644 --- a/src/components/Registry/Profile.tsx +++ b/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 - + {truncatedString(profile.profileId)} , // eslint-disable-next-line react/jsx-key