fixed review comments

Consensys · Oct 29, 2024 · cf06607 · cf06607
1 parent 7eb69d9
commit cf06607
Show file tree

Hide file tree

Showing 14 changed files with 324 additions and 276 deletions.
diff --git a/explorer/package.json b/explorer/package.json
@@ -24,10 +24,10 @@
     "redirect": "touch dist/_redirects && echo '/*  /index.html  200' >> dist/_redirects"
   },
   "dependencies": {
+    "@floating-ui/react": "^0.26.25",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@tanstack/react-table": "^8.10.7",
     "@verax-attestation-registry/verax-sdk": "2.1.1",
-    "@tippyjs/react": "^4.2.6",
     "@wagmi/core": "^1.4.7",
     "abitype": "^0.10.3",
     "class-variance-authority": "^0.7.0",
@@ -46,7 +46,6 @@
     "swr": "^2.2.4",
     "tailwind-merge": "^2.0.0",
     "tailwindcss-animate": "^1.0.7",
-    "tippy.js": "6",
     "usehooks-ts": "^2.9.1",
     "viem": "1.18.9",
     "vite-tsconfig-paths": "^4.2.1",

diff --git a/explorer/src/assets/icons/circle-info.svg b/explorer/src/assets/icons/circle-info.svg
diff --git a/explorer/src/components/Tooltip/index.tsx b/explorer/src/components/Tooltip/index.tsx
@@ -0,0 +1,68 @@
+import {
+  autoUpdate,
+  flip,
+  offset,
+  shift,
+  useDismiss,
+  useFloating,
+  useFocus,
+  useHover,
+  useInteractions,
+  useRole,
+} from "@floating-ui/react";
+import { useState } from "react";
+
+interface TooltipProps {
+  content: React.ReactNode;
+  children: React.ReactNode;
+  placement?: "top" | "bottom" | "left" | "right";
+  isDarkMode?: boolean;
+}
+
+export const Tooltip: React.FC<TooltipProps> = ({ content, children, placement = "bottom", isDarkMode = false }) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const { refs, floatingStyles, context } = useFloating({
+    open: isVisible,
+    onOpenChange: setIsVisible,
+    placement: placement,
+    whileElementsMounted: autoUpdate,
+    middleware: [
+      offset(5),
+      flip({
+        fallbackAxisSideDirection: "start",
+      }),
+      shift(),
+    ],
+  });
+
+  const hover = useHover(context, { move: false });
+  const focus = useFocus(context);
+  const dismiss = useDismiss(context);
+  const role = useRole(context, { role: "tooltip" });
+
+  const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss, role]);
+
+  return (
+    <div
+      className="relative inline-block"
+      onMouseEnter={() => setIsVisible(true)}
+      onMouseLeave={() => setIsVisible(false)}
+      ref={refs.setReference}
+      {...getReferenceProps()}
+    >
+      {children}
+      {isVisible && (
+        <div
+          ref={refs.setFloating}
+          style={{ ...floatingStyles, zIndex: 1000 }}
+          {...getFloatingProps()}
+          className={`p-2 rounded-md ${
+            isDarkMode ? "bg-whiteDefault text-blackDefault" : "bg-blackDefault text-whiteDefault"
+          }`}
+        >
+          {content}
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/explorer/src/constants/columns/attestation.tsx b/explorer/src/constants/columns/attestation.tsx
@@ -91,14 +91,13 @@ export const columns = ({
       const subjectDisplay = isValidAddress ? <EnsNameDisplay address={subject as Address} /> : cropString(subject);
 
       return (
-        <a
-          href={toAttestationsBySubject(subject).replace(CHAIN_ID_ROUTE, network ?? "")}
-          onClick={(e) => e.stopPropagation()}
-          target="_blank"
+        <Link
+          to={toAttestationsBySubject(subject).replace(CHAIN_ID_ROUTE, network ?? "")}
           className="hover:underline"
+          onClick={(e) => e.stopPropagation()}
         >
           {subjectDisplay}
-        </a>
+        </Link>
       );
     },
   },

diff --git a/explorer/src/custom.css b/explorer/src/custom.css
diff --git a/explorer/src/main.tsx b/explorer/src/main.tsx
@@ -5,7 +5,6 @@ import { RouterProvider } from "react-router-dom";
 
 import { router } from "./routes";
 import "./index.css";
-import "./custom.css";
 
 createRoot(document.getElementById("root")!).render(
   <StrictMode>

diff --git a/explorer/src/pages/Attestation/components/AttestationCard/index.tsx b/explorer/src/pages/Attestation/components/AttestationCard/index.tsx
@@ -1,16 +1,16 @@
-import Tippy from "@tippyjs/react";
-import "tippy.js/dist/tippy.css";
 import { ChevronRight } from "lucide-react";
+import moment from "moment";
 import { generatePath, useLocation, useNavigate } from "react-router-dom";
 import { useTernaryDarkMode } from "usehooks-ts";
 
+import circleInfo from "@/assets/icons/circle-info.svg";
 import { Button } from "@/components/Buttons";
 import { EButtonType } from "@/components/Buttons/enum";
+import { Tooltip } from "@/components/Tooltip";
 import { issuersData } from "@/pages/Home/data";
 import { IIssuer } from "@/pages/Home/interface";
 import { useNetworkContext } from "@/providers/network-provider/context";
 import { APP_ROUTES } from "@/routes/constants";
-import { timeElapsed } from "@/utils/dateUtils";
 
 import { IAttestationCardProps } from "./interface";
 
@@ -41,7 +41,6 @@ export const AttestationCard: React.FC<IAttestationCardProps> = ({
   );
 
   if (!issuerData) {
-    console.log("Issuer not found for attestation", id, schemaId, portalId);
     return null;
   }
 
@@ -51,7 +50,7 @@ export const AttestationCard: React.FC<IAttestationCardProps> = ({
   const description = attestationDefinitions?.description ?? "";
   const issuerName = issuerData.name;
 
-  const maxDescriptionLength = 200;
+  const maxDescriptionLength = 140;
   const isDescriptionLong = description.length > maxDescriptionLength;
   const truncatedDescription = isDescriptionLong ? `${description.slice(0, maxDescriptionLength)}...` : description;
 
@@ -84,9 +83,9 @@ export const AttestationCard: React.FC<IAttestationCardProps> = ({
         {description && description.trim() ? (
           <div className="text-sm font-normal text-text-darkGrey dark:text-tertiary mt-4">
             {isDescriptionLong ? (
-              <Tippy content={description} placement="bottom" theme={isDarkMode ? "dark" : "light"}>
-                <span>{truncatedDescription}</span>
-              </Tippy>
+              <Tooltip content={description} isDarkMode={isDarkMode}>
+                {truncatedDescription}
+              </Tooltip>
             ) : (
               <span>{description}</span>
             )}
@@ -95,20 +94,26 @@ export const AttestationCard: React.FC<IAttestationCardProps> = ({
       </div>
       <div className="flex flex-col gap-2 mt-auto">
         <div className="flex justify-between text-sm font-normal text-text-darkGrey dark:text-tertiary">
-          <span>Issued</span> <span>{timeElapsed(issuanceDate)}</span>
+          <span>Issued</span> <span>{moment.unix(issuanceDate).fromNow()}</span>
         </div>
         {!!expiryDate && isExpired && (
           <div className="flex justify-between text-sm font-semibold text-text-darkGrey dark:text-tertiary">
             <div className="flex items-center">
               <span>Expired</span>
-              <svg className="w-4 h-4 ml-1 text-gray-400" fill="currentColor" viewBox="0 0 24 24">
-                <circle cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="2" fill="currentColor" />
-                <text x="12" y="17" textAnchor="middle" fontSize="14" fill="white" fontWeight="bold">
-                  i
-                </text>
-              </svg>
+              <Tooltip
+                content={
+                  <div style={{ width: "350px", fontWeight: "normal" }}>
+                    The validity of this Attestation is determined by the Issuer, and consumers may choose to adhere to
+                    or ignore this expiration date.
+                  </div>
+                }
+                placement="right"
+                isDarkMode={isDarkMode}
+              >
+                <img src={circleInfo} className="!h-[16px] !w-[16px] ml-1" />
+              </Tooltip>
             </div>
-            <span>{timeElapsed(expiryDate)}</span>
+            <span>{moment.unix(expiryDate).fromNow()}</span>
           </div>
         )}
         <div className="flex mt-4 lg:flex-row lg:items-end justify-end lg:justify-start">

diff --git a/explorer/src/pages/Attestation/components/AttestationInfo/index.tsx b/explorer/src/pages/Attestation/components/AttestationInfo/index.tsx
@@ -73,7 +73,7 @@ export const AttestationInfo: React.FC<Attestation> = ({ ...attestation }) => {
     {
       title: t("attestation.info.subject"),
       value: displaySubjectEnsNameOrAddress(),
-      link: toAttestationsBySubject(subject).replace(CHAIN_ID_ROUTE, network),
+      to: toAttestationsBySubject(subject).replace(CHAIN_ID_ROUTE, network),
     },
   ];
 

diff --git a/explorer/src/pages/Attestations/components/CardView/index.tsx b/explorer/src/pages/Attestations/components/CardView/index.tsx
@@ -0,0 +1,24 @@
+import { AttestationCard } from "@/pages/Attestation/components/AttestationCard";
+
+import { ICardViewProps } from "./interface";
+
+export const CardView: React.FC<ICardViewProps> = ({ attestationsList }) => {
+  return (
+    <div className="flex flex-col gap-14 md:gap-[4.5rem] container mt-14 md:mt-12">
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
+        {attestationsList?.map((attestation) => {
+          return (
+            <AttestationCard
+              key={attestation.id}
+              id={attestation.id}
+              schemaId={attestation.schema.id}
+              portalId={attestation.portal.id}
+              issuanceDate={attestation.attestedDate}
+              expiryDate={attestation.expirationDate}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/explorer/src/pages/Attestations/components/CardView/interface.ts b/explorer/src/pages/Attestations/components/CardView/interface.ts
@@ -0,0 +1,13 @@
+export interface ICardViewProps {
+  attestationsList: Array<{
+    id: string;
+    schema: {
+      id: string;
+    };
+    portal: {
+      id: string;
+    };
+    attestedDate: number;
+    expirationDate?: number;
+  }>;
+}
diff --git a/explorer/src/pages/MyAttestations/index.tsx b/explorer/src/pages/MyAttestations/index.tsx
@@ -17,7 +17,7 @@ import { SWRKeys } from "@/interfaces/swr/enum";
 import { useNetworkContext } from "@/providers/network-provider/context";
 import { cropString } from "@/utils/stringUtils";
 
-import { AttestationCard } from "../Attestation/components/AttestationCard";
+import { CardView } from "../Attestations/components/CardView";
 import { TitleAndSwitcher } from "../Attestations/components/TitleAndSwitcher";
 
 export const MyAttestations: React.FC = () => {
@@ -89,22 +89,7 @@ export const MyAttestations: React.FC = () => {
       ) : !attestationsList || !attestationsList.length ? (
         <InfoBlock icon={<ArchiveIcon />} message={t("attestation.messages.emptyList")} />
       ) : (
-        <div className="flex flex-col gap-14 md:gap-[4.5rem] container mt-14 md:mt-12">
-          <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-            {attestationsList.map((attestation) => {
-              return (
-                <AttestationCard
-                  key={attestation.id}
-                  id={attestation.id}
-                  schemaId={attestation.schema.id}
-                  portalId={attestation.portal.id}
-                  issuanceDate={attestation.attestedDate}
-                  expiryDate={attestation.expirationDate}
-                />
-              );
-            })}
-          </div>
-        </div>
+        <CardView attestationsList={attestationsList}></CardView>
       )}
     </TitleAndSwitcher>
   );

diff --git a/explorer/src/pages/Subject/index.tsx b/explorer/src/pages/Subject/index.tsx
@@ -6,7 +6,7 @@ import { EQueryParams } from "@/enums/queryParams";
 import { SWRKeys } from "@/interfaces/swr/enum";
 import { useNetworkContext } from "@/providers/network-provider/context";
 
-import { AttestationCard } from "../Attestation/components/AttestationCard";
+import { CardView } from "../Attestations/components/CardView";
 
 export const Subject: React.FC = () => {
   const { subject } = useParams();
@@ -29,22 +29,5 @@ export const Subject: React.FC = () => {
       ),
   );
 
-  return (
-    <div className="flex flex-col gap-14 md:gap-[4.5rem] container mt-14 md:mt-12">
-      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6">
-        {attestationsList?.map((attestation) => {
-            return (
-              <AttestationCard
-                key={attestation.id}
-                id={attestation.id}
-                schemaId={attestation.schema.id}
-                portalId={attestation.portal.id}
-                issuanceDate={attestation.attestedDate}
-                expiryDate={attestation.expirationDate}
-              />
-            );
-          })}
-      </div>
-    </div>
-  );
+  return attestationsList && <CardView attestationsList={attestationsList}></CardView>;
 };
diff --git a/explorer/src/utils/dateUtils.ts b/explorer/src/utils/dateUtils.ts
@@ -23,28 +23,3 @@ export const parseDateTime = (inputDate: string, isSeconds = false): ParseDateTi
     },
   } as const;
 };
-
-export const timeElapsed = (seconds: number): string => {
-  const now = new Date();
-  const secondsElapsed = Math.floor(now.getTime() / 1000) - seconds;
-
-  const minutes = Math.floor(secondsElapsed / 60);
-  const hours = Math.floor(minutes / 60);
-  const days = Math.floor(hours / 24);
-  const months = Math.floor(days / 30.44);
-  const years = Math.floor(days / 365.25);
-
-  if (years > 0) {
-    return years === 1 ? "1 year ago" : `${years} years ago`;
-  } else if (months > 0) {
-    return months === 1 ? "1 month ago" : `${months} months ago`;
-  } else if (days > 0) {
-    return days === 1 ? "1 day ago" : `${days} days ago`;
-  } else if (hours > 0) {
-    return hours === 1 ? "1 hour ago" : `${hours} hours ago`;
-  } else if (minutes > 0) {
-    return minutes === 1 ? "1 minute ago" : `${minutes} minutes ago`;
-  } else {
-    return secondsElapsed === 1 ? "1 second ago" : `${secondsElapsed} seconds ago`;
-  }
-};