feat(explorer): As a User, I want to see a disclaimer on the expirati…

…on date (#853)
Consensys · Dec 16, 2024 · 7827f8d · 7827f8d
1 parent 6a6a9aa
commit 7827f8d
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 28 deletions.
diff --git a/explorer/src/components/DataTable/components/TdHandler/index.tsx b/explorer/src/components/DataTable/components/TdHandler/index.tsx
@@ -6,29 +6,29 @@ import { ITdHandler } from "./interface";
 
 export const TdHandler: React.FC<ITdHandler> = ({ value, valueUrl, to, isTextLeft = false }) => {
   return (
-    <div className="flex items-center justify-end gap-2">
+    <div className="flex items-center justify-end gap-1 min-w-[120px]">
       {valueUrl ? (
         <a
           href={valueUrl}
           target="_blank"
           onClick={(e) => e.stopPropagation()}
-          className={`hover:underline ${isTextLeft ? "translate-x-0" : "translate-x-5"} ${
-            isTextLeft ? "group-hover:translate-x-5" : "group-hover:translate-x-0"
+          className={`hover:underline ${isTextLeft ? "translate-x-0" : "translate-x-2"} ${
+            isTextLeft ? "group-hover:translate-x-2" : "group-hover:translate-x-0"
           } transition max-w-[300px] overflow-hidden text-ellipsis`}
         >
           {value}
         </a>
       ) : (
         <p
-          className={`w-full text-${isTextLeft ? "left" : "right"} ${isTextLeft ? "translate-x-0" : "translate-x-5"} ${
-            isTextLeft ? "group-hover:-translate-x-5" : "group-hover:translate-x-0"
+          className={`w-full text-${isTextLeft ? "left" : "right"} ${isTextLeft ? "translate-x-0" : "translate-x-2"} ${
+            isTextLeft ? "group-hover:-translate-x-2" : "group-hover:translate-x-0"
           } transition max-w-[300px] overflow-hidden text-ellipsis`}
         >
           {value}
         </p>
       )}
       <Link to={to} onClick={(e) => e.stopPropagation()}>
-        <ChevronRight className="w-5 opacity-0 group-hover:opacity-100 transition" />
+        <ChevronRight className="w-4 opacity-0 group-hover:opacity-100 transition" />
       </Link>
     </div>
   );

diff --git a/explorer/src/components/DataTable/index.tsx b/explorer/src/components/DataTable/index.tsx
@@ -61,7 +61,7 @@ export function DataTable<TData, TValue>({ columns, data, link }: DataTableProps
                 className="table-row-transition hover:bg-jumbotronLight dark:hover:bg-jumbotronDark cursor-pointer"
               >
                 {row.getVisibleCells().map((cell) => (
-                  <TableCell key={cell.id} className="whitespace-nowrap text-text-secondary">
+                  <TableCell key={cell.id} className="whitespace-nowrap text-text-secondary first:w-[45%]">
                     {flexRender(cell.column.columnDef.cell, cell.getContext())}
                   </TableCell>
                 ))}

diff --git a/explorer/src/components/Tooltip/index.tsx b/explorer/src/components/Tooltip/index.tsx
@@ -56,7 +56,7 @@ export const Tooltip: React.FC<TooltipProps> = ({ content, children, placement =
           ref={refs.setFloating}
           style={{ ...floatingStyles, zIndex: 1000 }}
           {...getFloatingProps()}
-          className={`p-2 rounded-md ${
+          className={`p-2 rounded-md min-w-[250px] ${
             isDarkMode ? "bg-whiteDefault text-blackDefault" : "bg-blackDefault text-whiteDefault"
           }`}
         >

diff --git a/explorer/src/pages/Attestation/components/AttestationInfo/index.tsx b/explorer/src/pages/Attestation/components/AttestationInfo/index.tsx
@@ -1,12 +1,13 @@
 import { Attestation } from "@verax-attestation-registry/verax-sdk";
 import { t } from "i18next";
-import { ArrowUpRight } from "lucide-react";
+import { Info } from "lucide-react";
 import { useCallback } from "react";
 import { Address, Hex, hexToNumber, isAddress } from "viem";
 import { mainnet } from "viem/chains";
 import { useEnsName } from "wagmi";
 
 import { Link } from "@/components/Link";
+import { Tooltip } from "@/components/Tooltip";
 import { useNetworkContext } from "@/providers/network-provider/context";
 import { CHAIN_ID_ROUTE, toAttestationsBySubject, toPortalById } from "@/routes/constants";
 import { getBlockExplorerLink } from "@/utils";
@@ -82,31 +83,25 @@ export const AttestationInfo: React.FC<Attestation> = ({ ...attestation }) => {
         #{displayAmountWithComma(hexToNumber(`0x${(id as Hex).substring(6)}`))}
       </div>
       <div className="gap-6 flex flex-col items-start w-full md:flex-wrap md:h-[170px] md:content-between xl:flex-nowrap xl:h-auto">
-        {list.map((item) => (
+        {list.map((item, index) => (
           <div key={item.title} className="inline-flex gap-2 w-full justify-between text-xs items-center md:w-auto">
-            <div className="min-w-[120px] font-normal text-text-quaternary">{item.title.toUpperCase()}</div>
-            {item.to && (
+            <div className="w-[140px] font-normal text-text-quaternary flex items-center gap-2">
+              {item.title.toUpperCase()}
+              {index === 1 && (
+                <Tooltip content="The validity of this Attestation is determined by the Issuer, and consumers may choose to adhere to or ignore this expiration date.">
+                  <Info className="w-4 h-4 text-text-quaternary cursor-help flex-shrink-0" />
+                </Tooltip>
+              )}
+            </div>
+            {item.to ? (
               <Link
                 to={item.to}
-                className="text-text-secondary dark:text-text-secondaryDark whitespace-nowrap self-stretch overflow-hidden text-ellipsis md:text-base hover:underline"
+                className="text-text-secondary dark:text-text-secondaryDark whitespace-nowrap overflow-hidden text-ellipsis md:text-base hover:underline"
               >
                 {item.value}
               </Link>
-            )}
-
-            {item.link && (
-              <a
-                href={item.link}
-                target="_blank"
-                className="text-text-secondary dark:text-text-secondaryDark whitespace-nowrap self-stretch overflow-hidden text-ellipsis md:text-base hover:underline flex items-center gap-2"
-              >
-                {item.value}
-                <ArrowUpRight width="1rem" height="auto" />
-              </a>
-            )}
-
-            {!item.to && !item.link && (
-              <div className="text-text-secondary dark:text-text-secondaryDark whitespace-nowrap self-stretch overflow-hidden text-ellipsis md:text-base">
+            ) : (
+              <div className="text-text-secondary dark:text-text-secondaryDark whitespace-nowrap text-right md:text-base">
                 {item.value}
               </div>
             )}