fix: change attestations sort by date logic and small fixes (#476)

Co-authored-by: Taras Oliynyk <taras.oliynyk@hapi.one>

explorer/src/components/DataTable/components/TdHandler/index.tsx

@@ -0,0 +1,34 @@
+import { ChevronRight } from "lucide-react";
+
+import { Link } from "@/components/Link";
+
+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">
+      {valueUrl ? (
+        <a
+          href={valueUrl}
+          target="_blank"
+          className={`hover:underline hover:text-text-quaternary ${isTextLeft ? "translate-x-0" : "translate-x-5"} ${
+            isTextLeft ? "group-hover:translate-x-5" : "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"
+          } transition max-w-[300px] overflow-hidden text-ellipsis`}
+        >
+          {value}
+        </p>
+      )}
+      <Link to={to}>
+        <ChevronRight className="w-5 opacity-0 group-hover:opacity-100 transition" />
+      </Link>
+    </div>
+  );
+};

explorer/src/components/DataTable/components/TdHandler/interface.ts

@@ -0,0 +1,6 @@
+export interface ITdHandler {
+  to: string;
+  value: string;
+  valueUrl?: string;
+  isTextLeft?: boolean;
+}

explorer/src/components/Pagination/index.tsx

@@ -75,11 +75,10 @@ export const Pagination = ({ itemsCount, handlePage }: IPaginationProps) => {
         <input
           type="number"
           ref={inputRef}
-          key={currentPage}
           defaultValue={currentPage}
           onBlur={blurHandler}
           onChange={(event) => changePage(event.target.value)}
-          className="w-12 h-8 px-2 border text-xs font-semibold text-zinc-950 text-center outline-none border-slate-200 focus:border-slate-400 rounded-lg"
+          className="w-16 h-8 px-2 border text-xs font-semibold text-zinc-950 text-center outline-none border-slate-200 focus:border-slate-400 rounded-lg"
         />
         <span className="text-slate-500 text-xs font-normal">{`of ${displayAmountWithComma(totalPages)}`}</span>
       </div>

explorer/src/components/SortByDate/index.tsx

@@ -1,3 +1,4 @@
+import { t } from "i18next";
 import { ArrowDownUp } from "lucide-react";
 import { useSearchParams } from "react-router-dom";
 
@@ -11,24 +12,17 @@ export const SortByDate: React.FC = () => {
   const handleSort = () => {
     const currentSearchParams = new URLSearchParams(searchParams);
 
-    if (sort === null) {
-      currentSearchParams.set(EQueryParams.SORT_BY_DATE, ETableSorting.ASC);
-    } else if (sort === ETableSorting.ASC) {
-      currentSearchParams.set(EQueryParams.SORT_BY_DATE, ETableSorting.DESC);
-    } else {
-      currentSearchParams.delete(EQueryParams.SORT_BY_DATE);
-    }
+    sort === null
+      ? currentSearchParams.set(EQueryParams.SORT_BY_DATE, ETableSorting.ASC)
+      : currentSearchParams.delete(EQueryParams.SORT_BY_DATE);
+
     setSearchParams(currentSearchParams);
   };
 
   return (
     <div className="flex items-center justify-end gap-2 cursor-pointer" onClick={handleSort}>
-      Issued
-      <ArrowDownUp
-        className={`w-4 h-4 slate-300 sort-arrows
-          ${sort === ETableSorting.ASC && "asc"} ${sort === ETableSorting.DESC && "desc"}
-        `}
-      />
+      {t("attestation.list.columns.issued")}
+      <ArrowDownUp className={`w-4 h-4 slate-300 sort-arrows ${sort === ETableSorting.ASC ? "asc" : "desc"}`} />
     </div>
   );
 };

explorer/src/components/ui/table.tsx

@@ -4,7 +4,7 @@ import { cn } from "@/utils";
 
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto no-scrollbar">
+    <div className="relative w-full overflow-auto no-scrollbar rounded-3xl">
       <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
     </div>
   ),
@@ -34,7 +34,11 @@ TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
   ({ className, ...props }, ref) => (
-    <tr ref={ref} className={cn("border-b data-[state=selected]:bg-muted whitespace-nowrap", className)} {...props} />
+    <tr
+      ref={ref}
+      className={cn("border-b data-[state=selected]:bg-muted whitespace-nowrap group", className)}
+      {...props}
+    />
   ),
 );
 TableRow.displayName = "TableRow";

explorer/src/constants/columns/attestation.tsx

@@ -5,6 +5,7 @@ import moment from "moment";
 import { Address } from "viem";
 import { hexToNumber } from "viem/utils";
 
+import { TdHandler } from "@/components/DataTable/components/TdHandler";
 import { HelperIndicator } from "@/components/HelperIndicator";
 import { Link } from "@/components/Link";
 import { SortByDate } from "@/components/SortByDate";
@@ -77,7 +78,9 @@ export const columns = ({ sortByDate = true }: Partial<ColumnsProps> = {}): Colu
     header: () => (sortByDate ? <SortByDate /> : <p className="text-right">{t("attestation.list.columns.issued")}</p>),
     cell: ({ row }) => {
       const timestamp: number = row.getValue("attestedDate");
-      return <p className="text-right">{moment.unix(timestamp).fromNow()}</p>;
+      const id = row.original.id;
+
+      return <TdHandler value={moment.unix(timestamp).fromNow()} to={toAttestationById(id)} />;
     },
   },
 ];

explorer/src/constants/columns/module.tsx

@@ -2,6 +2,7 @@ import { ColumnDef } from "@tanstack/react-table";
 import { Module } from "@verax-attestation-registry/verax-sdk";
 import { t } from "i18next";
 
+import { TdHandler } from "@/components/DataTable/components/TdHandler";
 import { HelperIndicator } from "@/components/HelperIndicator";
 import { Link } from "@/components/Link";
 import { ColumnsOptions } from "@/interfaces/components";
@@ -38,14 +39,14 @@ export const columns = (): ColumnDef<Module>[] => [
     header: () => <p className="text-right">{t("module.list.columns.contractAddress")}</p>,
     cell: ({ row }) => {
       const address = row.original.moduleAddress;
+      const id = row.original.id;
+
       return (
-        <a
-          href={`${links.lineascan.address}/${address}`}
-          target="_blank"
-          className="hover:underline hover:text-text-quaternary"
-        >
-          {cropString(address)}
-        </a>
+        <TdHandler
+          valueUrl={`${links.lineascan.address}/${address}`}
+          value={cropString(address)}
+          to={toModuleById(id)}
+        />
       );
     },
   },

explorer/src/constants/columns/schema.tsx

@@ -2,6 +2,7 @@ import { ColumnDef } from "@tanstack/react-table";
 import { Schema } from "@verax-attestation-registry/verax-sdk";
 import { t } from "i18next";
 
+import { TdHandler } from "@/components/DataTable/components/TdHandler";
 import { HelperIndicator } from "@/components/HelperIndicator";
 import { Link } from "@/components/Link";
 import { ColumnsOptions } from "@/interfaces/components";
@@ -49,7 +50,9 @@ export const columns = (): ColumnDef<Schema>[] => [
     header: () => <p className="text-left md:pl-2">{t("schema.list.columns.schema")}</p>,
     cell: ({ row }) => {
       const schema = row.getValue("schema") as string;
-      return <p className="max-w-[300px] overflow-hidden text-ellipsis text-left w-full">{schema}</p>;
+      const id = row.original.id;
+
+      return <TdHandler value={schema} to={toSchemaById(id)} isTextLeft />;
     },
   },
 ];

explorer/src/index.css

@@ -148,36 +148,4 @@
   .sort-arrows.asc path:nth-child(4) {
     stroke: var(--grey-400);
   }
-
-  .table-row-transition {
-    transition: all cubic-bezier(0, 0.52, 1, 1) 1s;
-
-    td:last-child {
-      display: flex;
-      justify-content: flex-end;
-      position: relative;
-      transition: transform .5s;
-
-      &:after {
-        content: '\203A';
-        position: absolute;
-        opacity: 0;
-        top: 15px;
-        right: 15px;
-        transition: 0.5s;
-        scale: 2;
-      }
-    }
-  }
-
-  .table-row-transition:hover {
-    td:last-child {
-      transform: translateX(-20px);
-
-      &:after {
-        right: 5px;
-        opacity: 1;
-      }
-    }
-  }
 }

explorer/src/pages/Attestations/index.tsx

@@ -1,5 +1,6 @@
 import { OrderDirection } from "@verax-attestation-registry/verax-sdk/lib/types/.graphclient";
 import { useRef, useState } from "react";
+import { useSearchParams } from "react-router-dom";
 import useSWR from "swr";
 
 import { DataTable } from "@/components/DataTable";
@@ -8,6 +9,7 @@ import { ITEMS_PER_PAGE_DEFAULT, ZERO } from "@/constants";
 import { attestationColumnsOption, columns, skeletonAttestations } from "@/constants/columns/attestation";
 import { columnsSkeleton } from "@/constants/columns/skeleton";
 import { EQueryParams } from "@/enums/queryParams";
+import { ETableSorting } from "@/enums/tableSorting";
 import { SWRKeys } from "@/interfaces/swr/enum";
 import { useNetworkContext } from "@/providers/network-provider/context";
 import { getItemsByPage, pageBySearchParams } from "@/utils/paginationUtils";
@@ -25,8 +27,9 @@ export const Attestations: React.FC = () => {
     () => sdk.attestation.getAttestationIdCounter() as Promise<number>,
   );
 
+  const [searchParams] = useSearchParams();
+
   const totalItems = attestationsCount ?? ZERO;
-  const searchParams = new URLSearchParams(window.location.search);
   const page = pageBySearchParams(searchParams, totalItems);
   const sortByDateDirection = searchParams.get(EQueryParams.SORT_BY_DATE);
 
@@ -40,7 +43,7 @@ export const Attestations: React.FC = () => {
         skip,
         undefined,
         "attestedDate",
-        sortByDateDirection as OrderDirection,
+        (sortByDateDirection as OrderDirection) || ETableSorting.DESC,
       ),
   );
 
@@ -49,6 +52,7 @@ export const Attestations: React.FC = () => {
   };
 
   const columnsSkeletonRef = useRef(columnsSkeleton(columns(), attestationColumnsOption));
+
   const data = isLoading
     ? { columns: columnsSkeletonRef.current, list: skeletonAttestations() }
     : { columns: columns(), list: attestationsList || [] };