From bb60023874eeb196ca78edadfb551413fcfc0377 Mon Sep 17 00:00:00 2001
From: Jaxcoder <codenamejason@outlook.com>
Date: Thu, 21 Sep 2023 13:02:18 -0400
Subject: [PATCH] chore: finish up details/some cleanup

---
 src/app/pool/[chain]/[id]/page.tsx        |  2 --
 src/app/pool/page.tsx                     |  2 +-
 src/app/profile/[chain]/[id]/page.tsx     | 15 ------------
 src/components/Address.tsx                | 26 ++++++++-------------
 src/components/Loading.tsx                | 20 ++--------------
 src/components/Navbar.tsx                 | 16 ++-----------
 src/components/Pool/Pool.tsx              |  7 +-----
 src/components/Pool/PoolDetail.tsx        | 28 +++++++++++------------
 src/components/Pool/types.ts              |  1 -
 src/components/Registry/ProfileDetail.tsx |  2 +-
 src/components/Table.tsx                  | 10 ++++----
 11 files changed, 34 insertions(+), 95 deletions(-)

diff --git a/src/app/pool/[chain]/[id]/page.tsx b/src/app/pool/[chain]/[id]/page.tsx
index 857c14b..952130c 100644
--- a/src/app/pool/[chain]/[id]/page.tsx
+++ b/src/app/pool/[chain]/[id]/page.tsx
@@ -21,7 +21,6 @@ export default async function PoolDetail({
 
   const { pool }: { pool: TPoolDetail } = poolDetails;
 
-  console.log("Details", poolDetails);
   let poolMetadata = "{}";
 
   try {
@@ -32,7 +31,6 @@ export default async function PoolDetail({
     // Check if the response status is OK (200)
     if (response.ok) {
       poolMetadata = await response.text();
-      console.log("Pool metadata ", poolMetadata);
     }
   } catch (error) {
     console.log(error);
diff --git a/src/app/pool/page.tsx b/src/app/pool/page.tsx
index db273df..19015e9 100644
--- a/src/app/pool/page.tsx
+++ b/src/app/pool/page.tsx
@@ -6,7 +6,7 @@ import { request } from "graphql-request";
 import { Suspense } from "react";
 
 export default async function PoolHome() {
-  // FIXME: THE API DOES NOT RETURN THE POOL NAME AND STATUS
+  // FIXME: THE API DOES NOT RETURN THE STATUS
 
   const data: any = await request(graphqlEndpoint, getPoolDataQuery);
   const { pools } = data;
diff --git a/src/app/profile/[chain]/[id]/page.tsx b/src/app/profile/[chain]/[id]/page.tsx
index 1b9fb2f..9a9c604 100644
--- a/src/app/profile/[chain]/[id]/page.tsx
+++ b/src/app/profile/[chain]/[id]/page.tsx
@@ -9,20 +9,6 @@ export default async function ProfileDetailPage({
 }: {
   params: { id: string, chain: number };
 }) {
-//   const profile: TProfileDetails = {
-//     profileId:
-//       "0x2b4a116a803067abc982458913a2eac20b9348777dbe9795bf3b1aa522160415",
-//     anchor: "0x3f15B8c6F9939879Cb030D6dd935348E57109637",
-//     name: "1000x Super Shiba Doge Moon Elon",
-//     chainId: params.chain,
-//     creator: "0xa671616e3580D3611139834Cd34D7838e82A04cD",
-//     metadataProtocol: 1,
-//     metadataPointer: "bafkreigwiljyskihuaeyjsedoei3taprwbbheldxig25lhoqvw2kpcf4bu",
-    
-//     nonce: 1337,
-//     owner: "0xa671616e3580D3611139834Cd34D7838e82A04cD",
-//  };
-
    const profileDetails: any = await request(
      graphqlEndpoint,
      getProfileDetailDataQuery,
@@ -40,7 +26,6 @@ export default async function ProfileDetailPage({
 
   let metadata = "";
 
-  // Check if the response status is OK (200)
   if (response.ok) {
     metadata = await response.text();
   }
diff --git a/src/components/Address.tsx b/src/components/Address.tsx
index 3838f4b..7bdf25c 100644
--- a/src/components/Address.tsx
+++ b/src/components/Address.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import { getNetworks } from "@/utils/networks";
 import { TbCopy, TbExternalLink } from "react-icons/tb";
 
@@ -31,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>
@@ -64,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>
@@ -83,10 +71,14 @@ 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>
@@ -95,4 +87,4 @@ export const AddressResponsive = (props: {
 
 export const truncatedString = (str: string) => {
   return <div className="truncate font-mono w-32">{str}</div>;
-}
+};
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index 9eafba7..31835c7 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -1,23 +1,7 @@
 export const Loading = () => {
   return (
-    <div role="status">
-      <svg
-        aria-hidden="true"
-        className="inline w-8 h-8 mr-2 text-gray-200 animate-spin dark:text-gray-600 fill-blue-600"
-        viewBox="0 0 100 101"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-          fill="currentColor"
-        />
-        <path
-          d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-          fill="currentFill"
-        />
-      </svg>
-      <span className="sr-only">Loading...</span>
+    <div className="fixed inset-0 flex items-center justify-center">
+      <div className="animate-spin rounded-full h-32 w-32 border-t-4 border-b-4 border-green-900"></div>
     </div>
   );
 };
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index 148a82b..d2568a9 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -1,16 +1,9 @@
 "use client";
 import logo from "@/assets/logo.svg";
-import { Disclosure, Menu, Transition } from "@headlessui/react";
-import { Bars3Icon, BellIcon, XMarkIcon } from "@heroicons/react/24/outline";
+import { Disclosure } from "@headlessui/react";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/outline";
 import Image from "next/image";
 import Link from "next/link";
-import { Fragment } from "react";
-// import SelectNetwork from "./SelectNetwork";
-// import Sort from "./Sort";
-
-// function classNames(...classes: any) {
-//   return classes.filter(Boolean).join(" ");
-// }
 
 const Navbar = () => {
   return (
@@ -49,11 +42,6 @@ const Navbar = () => {
                   </Link>
                 </div>
               </div>
-              {/* <div className="flex flex-1 items-center justify-center px-2 lg:ml-6 lg:justify-end">
-                <div className="w-full max-w-lg lg:max-w-xs">
-                  <Sort />
-                </div>
-              </div> */}
               <div className="flex items-center lg:hidden">
                 {/* Mobile menu button */}
                 <Disclosure.Button className="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-green-500">
diff --git a/src/components/Pool/Pool.tsx b/src/components/Pool/Pool.tsx
index ac76438..28fb20e 100644
--- a/src/components/Pool/Pool.tsx
+++ b/src/components/Pool/Pool.tsx
@@ -1,5 +1,5 @@
 "use client";
-// eslint-disable-file react/jsx-key
+
 import Table from "../Table";
 import { TTableData } from "@/types/types";
 import { Address } from "../Address";
@@ -9,7 +9,6 @@ import {
   shortenPoolName,
 } from "@/utils/utils";
 import Link from "next/link";
-// import Status from "../Status";
 
 const Pool = ({data, header, description}: {data: any, header?: string, description?: string}) => {
   
@@ -17,10 +16,8 @@ const Pool = ({data, header, description}: {data: any, header?: string, descript
     headers: [
       "ID",
       "Address",
-      // "Name",
       "Token",
       "Amount",
-      // "Status",
       "Profile Name",
       "Profile Owner",
       "Network",
@@ -37,8 +34,6 @@ const Pool = ({data, header, description}: {data: any, header?: string, descript
         ,
         // eslint-disable-next-line react/jsx-key
         <Address address={pool.strategy} chainId={pool.chainId} />,
-        // pool.name, FIXME: THE API DOES NOT RETURN THE POOL NAME
-        // shortenPoolName("Pool Name is really long"),
         // eslint-disable-next-line react/jsx-key
         <Address address={pool.token} chainId={pool.chainId} />,
         formatAmount(pool.amount),
diff --git a/src/components/Pool/PoolDetail.tsx b/src/components/Pool/PoolDetail.tsx
index 4bb308d..95bd1ef 100644
--- a/src/components/Pool/PoolDetail.tsx
+++ b/src/components/Pool/PoolDetail.tsx
@@ -1,14 +1,13 @@
 "use client";
 
 import { convertChainIdToNetworkName } from "@/utils/utils";
-import { AddressResponsive, truncatedString } from "../Address";
+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";
 import Link from "next/link";
-import { Loading } from "../Loading";
 import { getNetworks } from "@/utils/networks";
 
 const PoolDetailPage = ({
@@ -18,15 +17,14 @@ const PoolDetailPage = ({
   pool: TPoolDetail;
   poolMetadata: string;
 }) => {
-
-    let metadataObj;
-    try {
-      metadataObj = JSON.parse(poolMetadata);
-    } catch (error) {
-      metadataObj = {
-        error: "Error parsing metadata",
-      };
-    }
+  let metadataObj;
+  try {
+    metadataObj = JSON.parse(poolMetadata);
+  } catch (error) {
+    metadataObj = {
+      error: "Error parsing metadata",
+    };
+  }
 
   return (
     <div>
@@ -86,7 +84,7 @@ const PoolDetailPage = ({
             <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
               {ethers.formatUnits(
                 pool.amount ?? 0,
-                pool.tokenMetadata.decimals ?? 18,
+                pool.tokenMetadata.decimals ?? 18
               )}{" "}
               {pool.tokenMetadata.symbol ??
                 getNetworks()[Number(pool.chainId)].symbol}
@@ -110,9 +108,11 @@ const PoolDetailPage = ({
             <dd className="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0">
               {pool.profile.name}
 
-              <Link href={`/profile/${pool.chainId}/${pool.profile.anchor}`}>
+              <Link href={`/profile/${pool.chainId}/${pool.profile.profileId}`}>
                 <br />
-                <span className="font-mono text-green-900">{pool.profile.profileId}</span>
+                <span className="font-mono text-green-900">
+                  {pool.profile.profileId}
+                </span>
               </Link>
             </dd>
           </div>
diff --git a/src/components/Pool/types.ts b/src/components/Pool/types.ts
index 3dd170a..4c3b8b3 100644
--- a/src/components/Pool/types.ts
+++ b/src/components/Pool/types.ts
@@ -18,5 +18,4 @@ export type TPoolDetail = {
     symbol: string;
     decimals: number;
   };
-
 };
diff --git a/src/components/Registry/ProfileDetail.tsx b/src/components/Registry/ProfileDetail.tsx
index 83a5c16..8ce37a8 100644
--- a/src/components/Registry/ProfileDetail.tsx
+++ b/src/components/Registry/ProfileDetail.tsx
@@ -18,7 +18,7 @@ const ProfileDetail = ({
 }) => {
   let metadataObj;
   try {
-    metadataObj = JSON.parse(metadata);
+    metadataObj = JSON.parse(metadata ?? "");
   } catch (error) {
     metadataObj = {
       error: "Error parsing metadata",
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
index edcfd5f..1f1c478 100644
--- a/src/components/Table.tsx
+++ b/src/components/Table.tsx
@@ -1,5 +1,8 @@
 import { TTableData } from "@/types/types";
 
+/** TODO: the mobile view needs to be completed 
+ * we could create a new component for mobile view entirely
+*/
 const Table = ({
   data,
   header,
@@ -37,7 +40,7 @@ const Table = ({
             <div className="inline-block min-w-full py-2 align-middle sm:px-6 lg:px-8">
               <table className="min-w-full divide-y divide-gray-300">
                 <thead>
-                  <tr className="hidden md:table-row lg:table-row">
+                  <tr className="md:table-row lg:table-row">
                     {data.headers.map((header, index) => (
                       <th
                         key={"headers-" + index}
@@ -48,11 +51,6 @@ const Table = ({
                       </th>
                     ))}
                   </tr>
-                  <tr className="md:hidden lg:hidden">
-                    <th>ID</th>
-                    {/* TODO: we need to dynamically display Anchor or Address depnding on profile or pool table */}
-                    <th>Anchress</th>
-                  </tr>
                 </thead>
                 <tbody className="divide-y divide-gray-200 bg-white">
                   {data.rows.map((row, index) => (