chore: finish up details/some cleanup

allo-protocol · Sep 21, 2023 · bb60023 · bb60023
1 parent 094eb05
commit bb60023
Show file tree

Hide file tree

Showing 11 changed files with 34 additions and 95 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,18 +9,15 @@ 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}) => {
 
   const tableData: TTableData = {
     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
@@ -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
@@ -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
@@ -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
@@ -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) => (
-Original file line number
+Diff line change
@@ Expand Up / @@ -18,5 +18,4 @@ export type TPoolDetail = { @@
         symbol: string;
         decimals: number;
       };
     };