Merge pull request #39 from allo-protocol/pool-detail

Pool detail page
allo-protocol · Sep 21, 2023 · 55b5bd3 · 55b5bd3
2 parents 103df8a + bb60023
commit 55b5bd3
Show file tree

Hide file tree

Showing 32 changed files with 1,038 additions and 285 deletions.
diff --git a/.gitignore b/.gitignore
@@ -33,4 +33,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-.spec/connect.toml
+.spec/connect.toml
+src/.env
diff --git a/package.json b/package.json
@@ -21,16 +21,24 @@
     "daisyui": "^3.7.3",
     "eslint": "8.48.0",
     "eslint-config-next": "13.4.16",
+    "ethers": "^6.7.1",
+    "graphql": "^16.8.0",
+    "graphql-request": "^6.1.0",
     "heroicons": "^2.0.18",
     "next": "13.4.16",
+    "node-fetch": "^3.3.2",
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.11.0",
+    "swr": "^2.2.2",
     "tailwindcss": "3.3.3",
     "typescript": "5.2.2"
   },
   "devDependencies": {
-    "ts-jest": "^29.1.1"
+    "@uiw/react-json-view": "^2.0.0-alpha.4",
+    "bufferutil": "^4.0.7",
+    "ts-jest": "^29.1.1",
+    "utf-8-validate": "^6.0.3"
   }
 }
diff --git a/src/Context/PoolContext.tsx b/src/Context/PoolContext.tsx
diff --git a/src/Context/ProfileContext.tsx b/src/Context/ProfileContext.tsx
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+export default function GlobalError({
+  error,
+  reset,
+}: {
+  error: Error & { digest?: string };
+  reset: () => void;
+}) {
+  return (
+    <html>
+      <body>
+        <h2>Something went wrong!</h2>
+        <button onClick={() => reset()}>Try again</button>
+      </body>
+    </html>
+  );
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -22,7 +22,9 @@ export default function RootLayout({
         <body>
           <div className="mx-auto max-w-7xl sm:px-6 lg:px-8">
             <Navbar />
-            <div className={inter.className}>{children}</div>
+            <div className="lg:px-8 px-1 sm:px-2 md:px-6">
+              <div className={inter.className}>{children}</div>
+            </div>
           </div>
         </body>
       </NetworkContextProvider>

diff --git a/src/app/pool/[chain]/[id]/page.tsx b/src/app/pool/[chain]/[id]/page.tsx
@@ -0,0 +1,40 @@
+import PoolDetailPage from "@/components/Pool/PoolDetail";
+import { TPoolDetail } from "@/components/Pool/types";
+import { getPoolDetailDataQuery } from "@/utils/query";
+import { graphqlEndpoint } from "@/utils/utils";
+import { request } from "graphql-request";
+
+export default async function PoolDetail({
+  params,
+}: {
+  params: { chain: string; id: string };
+}) {
+
+  const poolDetails: any = await request(
+    graphqlEndpoint,
+    getPoolDetailDataQuery,
+    {
+      chainId: params.chain,
+      poolId: params.id,
+    },
+  );
+
+  const { pool }: { pool: TPoolDetail } = poolDetails;
+
+  let poolMetadata = "{}";
+
+  try {
+    const response = await fetch(
+      `https://ipfs.io/ipfs/${pool.metadataPointer}`
+    );
+
+    // Check if the response status is OK (200)
+    if (response.ok) {
+      poolMetadata = await response.text();
+    }
+  } catch (error) {
+    console.log(error);
+  }
+
+  return <PoolDetailPage pool={pool} poolMetadata={poolMetadata} />;
+}
diff --git a/src/app/pool/error.tsx b/src/app/pool/error.tsx
@@ -0,0 +1,30 @@
+"use client"; // Error components must be Client Components
+
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  );
+}
diff --git a/src/app/pool/page.tsx b/src/app/pool/page.tsx
@@ -1,6 +1,24 @@
-"use client";
+import { Loading } from "@/components/Loading";
 import Pool from "@/components/Pool/Pool";
+import { getPoolDataQuery } from "@/utils/query";
+import { graphqlEndpoint } from "@/utils/utils";
+import { request } from "graphql-request";
+import { Suspense } from "react";
 
-export default function PoolHome() {
-  return <Pool />;
+export default async function PoolHome() {
+  // FIXME: THE API DOES NOT RETURN THE STATUS
+
+  const data: any = await request(graphqlEndpoint, getPoolDataQuery);
+  const { pools } = data;
+
+  return (
+    <Suspense fallback={<Loading />}>
+      <Pool
+        data={pools}
+        header={"Pools"}
+        description={"A list of all the pools in the registry on all supported networks"}
+      />
+    </Suspense>
+  );
 }
+1;
diff --git a/src/app/profile/[chain]/[id]/page.tsx b/src/app/profile/[chain]/[id]/page.tsx
@@ -0,0 +1,38 @@
+import ProfileDetail from "@/components/Registry/ProfileDetail";
+import { TProfileDetails } from "@/components/Registry/types";
+import { getProfileDetailDataQuery } from "@/utils/query";
+import { graphqlEndpoint } from "@/utils/utils";
+import request from "graphql-request";
+
+export default async function ProfileDetailPage({
+  params,
+}: {
+  params: { id: string, chain: number };
+}) {
+   const profileDetails: any = await request(
+     graphqlEndpoint,
+     getProfileDetailDataQuery,
+     {
+       chainId: params.chain,
+       profileId: params.id,
+     },
+   );
+
+   const profile: TProfileDetails = profileDetails.profile;
+
+  const response = await fetch(
+    `https://ipfs.io/ipfs/${profile.metadataPointer}`,
+  );
+
+  let metadata = "";
+
+  if (response.ok) {
+    metadata = await response.text();
+  }
+
+  return (
+    <div>
+      <ProfileDetail profile={profile} metadata={metadata} />
+    </div>
+  );
+}
diff --git a/src/app/profile/error.tsx b/src/app/profile/error.tsx
@@ -0,0 +1,30 @@
+"use client"; // Error components must be Client Components
+
+import { useEffect } from "react";
+
+export default function Error({
+  error,
+  reset,
+}: {
+  error: Error;
+  reset: () => void;
+}) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div>
+      <h2>Something went wrong!</h2>
+      <button
+        onClick={
+          // Attempt to recover by trying to re-render the segment
+          () => reset()
+        }
+      >
+        Try again
+      </button>
+    </div>
+  );
+}
diff --git a/src/app/profile/page.tsx b/src/app/profile/page.tsx
@@ -1,6 +1,18 @@
-"use client";
+import { Loading } from "@/components/Loading";
 import Profile from "@/components/Registry/Profile";
+import { getProfileDataQuery } from "@/utils/query";
+import { graphqlEndpoint } from "@/utils/utils";
+import { request } from "graphql-request";
+import { Suspense } from "react";
 
-export default function ProfileHome() {
-  return <Profile />;
+export default async function ProfileHome() {
+
+  const data: any = await request(graphqlEndpoint, getProfileDataQuery);
+  const { profiles } = data;
+
+  return (
+    <Suspense fallback={<Loading />}>
+      <Profile data={profiles} />
+    </Suspense>
+  );
 }
diff --git a/src/components/Address.tsx b/src/components/Address.tsx
@@ -1,5 +1,4 @@
-import { getNetworks } from "@/api/networks";
-import { Slug } from "@/types/types";
+import { getNetworks } from "@/utils/networks";
 import { TbCopy, TbExternalLink } from "react-icons/tb";
 
 export const convertAddressToShortString = (address: string) => {
@@ -30,12 +29,7 @@ export const Address = (props: { address: string; chainId: number }) => {
         <TbCopy />
       </div>
       <div>
-        <a
-          // className="tooltip"
-          // data-tip="view on explorer"
-          target="_blank"
-          href={explorerLink}
-        >
+        <a target="_blank" href={explorerLink}>
           <TbExternalLink />
         </a>
       </div>
@@ -53,7 +47,7 @@ export const AddressFull = (props: { address: string; chainId: number }) => {
 
   return (
     <div className="flex items-center">
-      <div className="ml-3 text-sm font-medium text-gray-900 font-mono">
+      <div className="text-sm font-medium text-gray-900 font-mono">
         {props.address}
       </div>
       <div
@@ -63,12 +57,7 @@ export const AddressFull = (props: { address: string; chainId: number }) => {
         <TbCopy />
       </div>
       <div>
-        <a
-          // className="tooltip"
-          // data-tip="view on explorer"
-          target="_blank"
-          href={explorerLink}
-        >
+        <a target="_blank" href={explorerLink}>
           <TbExternalLink />
         </a>
       </div>
@@ -82,12 +71,20 @@ export const AddressResponsive = (props: {
 }) => {
   return (
     <div>
-      <div className="hidden sm:block md:hidden"> {/* Show on sm screens, hide on md screens */}
+      <div className="hidden sm:block md:hidden">
+        {" "}
+        {/* Show on sm screens, hide on md screens */}
         <Address address={props.address} chainId={props.chainId} />
       </div>
-      <div className="sm:hidden md:block"> {/* Show on md screens, hide on sm screens */}
+      <div className="sm:hidden md:block">
+        {" "}
+        {/* Show on md screens, hide on sm screens */}
         <AddressFull address={props.address} chainId={props.chainId} />
       </div>
     </div>
   );
 };
+
+export const truncatedString = (str: string) => {
+  return <div className="truncate font-mono w-32">{str}</div>;
+};