fix: updated UI according to design fixes (#492)

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

explorer/src/assets/locales/en/en.json

@@ -43,10 +43,17 @@
       "search": "Search by ID, name, description"
     }
   },
+  "theme": {
+    "switch": "Switch to {{mode}} Mode",
+    "dark": "Dark",
+    "light": "Light",
+    "system": "System"
+  },
   "home": {
     "title": "Verax is an open source, public registry for storing attestations",
     "issuers": {
-      "title": "Explore the Verax Ecosystem"
+      "title": "Explore the ways of getting the attestation",
+      "description": "Find out how you can get attestations from the following providers that you can use across the ecosystem"
     },
     "info": {
       "issueYourAttestation": "Want to issue your own attestation?",

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

@@ -11,6 +11,7 @@ export const TdHandler: React.FC<ITdHandler> = ({ value, valueUrl, to, isTextLef
         <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"
           } transition max-w-[300px] overflow-hidden text-ellipsis`}
@@ -26,7 +27,7 @@ export const TdHandler: React.FC<ITdHandler> = ({ value, valueUrl, to, isTextLef
           {value}
         </p>
       )}
-      <Link to={to}>
+      <Link to={to} onClick={(e) => e.stopPropagation()}>
         <ChevronRight className="w-5 opacity-0 group-hover:opacity-100 transition" />
       </Link>
     </div>

explorer/src/components/DataTable/index.tsx

@@ -1,17 +1,37 @@
 import { flexRender, getCoreRowModel, useReactTable } from "@tanstack/react-table";
+import { Attestation, Module, Schema } from "@verax-attestation-registry/verax-sdk";
 import { t } from "i18next";
+import { generatePath, useNavigate } from "react-router-dom";
 
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { useNetworkContext } from "@/providers/network-provider/context";
 
 import { DataTableProps } from "./interfaces";
 
-export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData, TValue>) {
+type TRowOriginal = Schema | Attestation | Module;
+
+export function DataTable<TData, TValue>({ columns, data, link }: DataTableProps<TData, TValue>) {
+  const navigate = useNavigate();
+
+  const {
+    network: { network },
+  } = useNetworkContext();
+
   const table = useReactTable({
     data,
     columns,
     getCoreRowModel: getCoreRowModel(),
   });
 
+  const trClickHandler = (original: TRowOriginal) => {
+    const id = original.id;
+    if (!link || !id) return;
+
+    navigate(generatePath(link, { chainId: network, id }), {
+      state: { from: location.pathname },
+    });
+  };
+
   return (
     <div className="rounded-3xl border border-border-table dark:border-blueDark">
       <Table>
@@ -36,8 +56,9 @@ export function DataTable<TData, TValue>({ columns, data }: DataTableProps<TData
             table.getRowModel().rows.map((row) => (
               <TableRow
                 key={row.id}
+                onClick={() => trClickHandler(row.original as TRowOriginal)}
                 data-state={row.getIsSelected() && "selected"}
-                className="table-row-transition hover:bg-jumbotronLight dark:hover:bg-jumbotronDark"
+                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">

explorer/src/components/DataTable/interfaces.ts

@@ -3,4 +3,5 @@ import { ColumnDef } from "@tanstack/react-table";
 export interface DataTableProps<TData, TValue> {
   columns: ColumnDef<TData, TValue>[];
   data: TData[];
+  link?: string;
 }

explorer/src/components/LightDarkModeSwitcher/index.tsx

@@ -1,3 +1,4 @@
+import { t } from "i18next";
 import { Moon, Sun, SunMoon } from "lucide-react";
 import { useEffect } from "react";
 import { useTernaryDarkMode } from "usehooks-ts";
@@ -29,11 +30,11 @@ export const LightDarkModeSwitcher: React.FC<ILightDarkModeSwitcher> = ({ isMobi
   const getPredictedThemeDetails = (mode: typeof ternaryDarkMode) => {
     switch (mode) {
       case "light":
-        return { label: "System", icon: <SunMoon width="1rem" height="auto" /> };
+        return { label: t("theme.system"), icon: <SunMoon width="1rem" height="auto" /> };
       case "system":
-        return { label: "Dark", icon: <Moon width="1rem" height="auto" /> };
+        return { label: t("theme.dark"), icon: <Moon width="1rem" height="auto" /> };
       case "dark":
-        return { label: "Light", icon: <Sun width="1rem" height="auto" /> };
+        return { label: t("theme.light"), icon: <Sun width="1rem" height="auto" /> };
     }
   };
 
@@ -49,7 +50,7 @@ export const LightDarkModeSwitcher: React.FC<ILightDarkModeSwitcher> = ({ isMobi
         onClick={toggleTernaryDarkMode}
         className="flex items-center gap-2 text-base font-semibold text-text-darkGrey cursor-pointer"
       >
-        Switch to {label} Mode
+        {t("theme.switch", { mode: label })}
         {icon}
       </div>
     );

explorer/src/config/index.tsx

@@ -1,8 +1,11 @@
 import { VeraxSdk } from "@verax-attestation-registry/verax-sdk";
 import { createWeb3Modal, defaultWagmiConfig } from "@web3modal/wagmi/react";
-import { linea, lineaTestnet } from "wagmi/chains";
+import { arbitrum, arbitrumGoerli, linea, lineaTestnet } from "wagmi/chains";
 
 import veraxColoredIcon from "@/assets/logo/verax-colored-icon.svg";
+import ArbitrumIconDark from "@/assets/networks/arbitrum-dark.svg?react";
+import ArbitrumGoerliIcon from "@/assets/networks/arbitrum-goerli.svg?react";
+import ArbitrumIcon from "@/assets/networks/arbitrum.svg?react";
 import LineaMainnetIconDark from "@/assets/networks/linea-mainnet-dark.svg?react";
 import LineaMainnetIcon from "@/assets/networks/linea-mainnet.svg?react";
 import LineaTestnetIcon from "@/assets/networks/linea-testnet.svg?react";
@@ -24,6 +27,21 @@ const chains: INetwork[] = [
     img: <LineaTestnetIcon />,
     network: "linea-testnet",
   },
+  {
+    name: "Arbitrum",
+    chain: arbitrum,
+    veraxEnv: VeraxSdk.DEFAULT_ARBITRUM_FRONTEND,
+    img: <ArbitrumIcon />,
+    imgDark: <ArbitrumIconDark />,
+    network: "arbitrum",
+  },
+  {
+    name: "Arbitrum Goerli",
+    chain: arbitrumGoerli,
+    veraxEnv: VeraxSdk.DEFAULT_ARBITRUM_TESTNET_FRONTEND,
+    img: <ArbitrumGoerliIcon />,
+    network: "arbitrum-goerli",
+  },
 ];
 
 const projectId = import.meta.env.VITE_WALLETCONNECT_PROJECT_ID;

explorer/src/constants/columns/attestation.tsx

@@ -21,9 +21,10 @@ import { EMPTY_STRING, ITEMS_PER_PAGE_DEFAULT, links } from "../index";
 interface ColumnsProps {
   sortByDate: boolean;
   sdk: VeraxSdk;
+  chainId: number;
 }
 
-export const columns = ({ sortByDate = true, sdk }: Partial<ColumnsProps> = {}): ColumnDef<Attestation>[] => [
+export const columns = ({ sortByDate = true, sdk, chainId }: Partial<ColumnsProps> = {}): ColumnDef<Attestation>[] => [
   {
     accessorKey: "id",
     header: () => (
@@ -35,7 +36,7 @@ export const columns = ({ sortByDate = true, sdk }: Partial<ColumnsProps> = {}):
     cell: ({ row }) => {
       const id = row.getValue("id");
       return (
-        <Link to={toAttestationById(id as string)} className="hover:underline">
+        <Link to={toAttestationById(id as string)} className="hover:underline" onClick={(e) => e.stopPropagation()}>
           {displayAmountWithComma(hexToNumber(id as Address))}
         </Link>
       );
@@ -84,8 +85,15 @@ export const columns = ({ sortByDate = true, sdk }: Partial<ColumnsProps> = {}):
     header: () => <p className="text-left">{t("attestation.list.columns.subject")}</p>,
     cell: ({ row }) => {
       const subject = row.getValue("subject") as string;
+      if (!chainId) return cropString(subject);
+
       return (
-        <a href={`${links.lineascan.address}/${subject}`} target="_blank" className="hover:underline">
+        <a
+          href={`${links[chainId].address}/${subject}`}
+          onClick={(e) => e.stopPropagation()}
+          target="_blank"
+          className="hover:underline"
+        >
           {cropString(subject)}
         </a>
       );

explorer/src/constants/columns/module.tsx

@@ -11,7 +11,11 @@ import { cropString } from "@/utils/stringUtils";
 
 import { EMPTY_STRING, ITEMS_PER_PAGE_DEFAULT, links } from "../index";
 
-export const columns = (): ColumnDef<Module>[] => [
+interface ColumnsProps {
+  chainId: number;
+}
+
+export const columns = ({ chainId }: Partial<ColumnsProps> = {}): ColumnDef<Module>[] => [
   {
     accessorKey: "name",
     header: () => (
@@ -23,7 +27,7 @@ export const columns = (): ColumnDef<Module>[] => [
     cell: ({ row }) => {
       const { name, id } = row.original;
       return (
-        <Link to={toModuleById(id)} className="hover:underline">
+        <Link to={toModuleById(id)} className="hover:underline" onClick={(e) => e.stopPropagation()}>
           {name}
         </Link>
       );
@@ -43,7 +47,7 @@ export const columns = (): ColumnDef<Module>[] => [
 
       return (
         <TdHandler
-          valueUrl={`${links.lineascan.address}/${address}`}
+          valueUrl={chainId ? `${links[chainId].address}/${address}` : "#"}
           value={cropString(address)}
           to={toModuleById(id)}
         />

explorer/src/constants/columns/schema.tsx

@@ -24,7 +24,7 @@ export const columns = (): ColumnDef<Schema>[] => [
       const id = row.original.id;
 
       return (
-        <Link to={toSchemaById(id)} className="hover:underline">
+        <Link to={toSchemaById(id)} className="hover:underline" onClick={(e) => e.stopPropagation()}>
           {name}
         </Link>
       );

explorer/src/constants/index.ts

@@ -1,3 +1,5 @@
+import { arbitrum, arbitrumGoerli, linea, lineaTestnet } from "wagmi/chains";
+
 export const EMPTY_STRING = "";
 export const SPACE_STRING = " ";
 export const COMMA_STRING = ",";
@@ -10,9 +12,18 @@ export const CURRENT_PAGE_DEFAULT = 1;
 export const THOUSAND = 1e3;
 export const BILLION = 1e9;
 
-export const links = {
-  lineascan: {
+export const links: { [key: number]: { trx?: string; address: string } } = {
+  [linea.id]: {
     trx: "https://lineascan.build/trx",
     address: "https://lineascan.build/address",
   },
+  [lineaTestnet.id]: {
+    address: "https://goerli.lineascan.build/address",
+  },
+  [arbitrum.id]: {
+    address: "https://arbiscan.io/address",
+  },
+  [arbitrumGoerli.id]: {
+    address: "https://testnet.arbiscan.io/address",
+  },
 };