fix(explorer): Block explorer links (#674)

Co-authored-by: Alain Nicolas <alain.nicolas@consensys.net>

explorer/src/constants/columns/attestation.tsx

@@ -2,7 +2,7 @@ import { ColumnDef } from "@tanstack/react-table";
 import { Attestation, VeraxSdk } from "@verax-attestation-registry/verax-sdk";
 import { t } from "i18next";
 import moment from "moment";
-import { Hex } from "viem";
+import { Chain, Hex } from "viem";
 import { hexToNumber } from "viem/utils";
 
 import { TdHandler } from "@/components/DataTable/components/TdHandler";
@@ -13,18 +13,19 @@ import { ColumnsOptions } from "@/interfaces/components";
 import { SWRKeys } from "@/interfaces/swr/enum";
 import { SWRCell } from "@/pages/Attestations/components/SWRCell";
 import { toAttestationById, toPortalById, toSchemaById } from "@/routes/constants";
+import { getBlockExplorerLink } from "@/utils";
 import { displayAmountWithComma } from "@/utils/amountUtils";
 import { cropString } from "@/utils/stringUtils";
 
-import { EMPTY_STRING, ITEMS_PER_PAGE_DEFAULT, links } from "../index";
+import { EMPTY_STRING, ITEMS_PER_PAGE_DEFAULT } from "../index";
 
 interface ColumnsProps {
   sortByDate: boolean;
   sdk: VeraxSdk;
-  chainId: number;
+  chain: Chain;
 }
 
-export const columns = ({ sortByDate = true, sdk, chainId }: Partial<ColumnsProps> = {}): ColumnDef<Attestation>[] => [
+export const columns = ({ sortByDate = true, sdk, chain }: Partial<ColumnsProps> = {}): ColumnDef<Attestation>[] => [
   {
     accessorKey: "id",
     header: () => (
@@ -85,11 +86,11 @@ export const columns = ({ sortByDate = true, sdk, chainId }: Partial<ColumnsProp
     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);
+      if (!chain) return cropString(subject);
 
       return (
         <a
-          href={`${links[chainId].address}/${subject}`}
+          href={`${getBlockExplorerLink(chain)}/${subject}`}
           onClick={(e) => e.stopPropagation()}
           target="_blank"
           className="hover:underline"

explorer/src/constants/columns/module.tsx

@@ -1,21 +1,23 @@
 import { ColumnDef } from "@tanstack/react-table";
 import { Module } from "@verax-attestation-registry/verax-sdk";
 import { t } from "i18next";
+import { Chain } from "viem";
 
 import { TdHandler } from "@/components/DataTable/components/TdHandler";
 import { HelperIndicator } from "@/components/HelperIndicator";
 import { Link } from "@/components/Link";
 import { ColumnsOptions } from "@/interfaces/components";
 import { toModuleById } from "@/routes/constants";
+import { getBlockExplorerLink } from "@/utils";
 import { cropString } from "@/utils/stringUtils";
 
-import { EMPTY_STRING, ITEMS_PER_PAGE_DEFAULT, links } from "../index";
+import { EMPTY_STRING, ITEMS_PER_PAGE_DEFAULT } from "../index";
 
 interface ColumnsProps {
-  chainId: number;
+  chain: Chain;
 }
 
-export const columns = ({ chainId }: Partial<ColumnsProps> = {}): ColumnDef<Module>[] => [
+export const columns = ({ chain }: Partial<ColumnsProps> = {}): ColumnDef<Module>[] => [
   {
     accessorKey: "name",
     header: () => (
@@ -47,7 +49,7 @@ export const columns = ({ chainId }: Partial<ColumnsProps> = {}): ColumnDef<Modu
 
       return (
         <TdHandler
-          valueUrl={chainId ? `${links[chainId].address}/${address}` : "#"}
+          valueUrl={chain ? `${getBlockExplorerLink(chain)}/${address}` : "#"}
           value={cropString(address)}
           to={toModuleById(id)}
         />

explorer/src/constants/columns/portal.tsx

@@ -1,16 +1,16 @@
 import { ColumnDef } from "@tanstack/react-table";
 import { Portal } from "@verax-attestation-registry/verax-sdk";
 import { t } from "i18next";
+import { Chain } from "viem";
 
 import { TdHandler } from "@/components/DataTable/components/TdHandler";
 import { HelperIndicator } from "@/components/HelperIndicator";
 import { Link } from "@/components/Link";
 import { toPortalById } from "@/routes/constants";
+import { getBlockExplorerLink } from "@/utils";
 import { cropString } from "@/utils/stringUtils";
 
-import { links } from "../index";
-
-export const columns = ({ chainId }: { chainId: number }): ColumnDef<Portal>[] => [
+export const columns = ({ chain }: { chain: Chain }): ColumnDef<Portal>[] => [
   {
     accessorKey: "name",
     header: () => (
@@ -47,7 +47,7 @@ export const columns = ({ chainId }: { chainId: number }): ColumnDef<Portal>[] =
 
       return (
         <TdHandler
-          valueUrl={chainId ? `${links[chainId].address}/${address}` : "#"}
+          valueUrl={chain ? `${getBlockExplorerLink(chain)}/${address}` : "#"}
           value={cropString(address)}
           to={toPortalById(id)}
         />

explorer/src/constants/index.ts

@@ -41,7 +41,7 @@ export const links: Record<number, { trx?: string; address: string }> = {
     address: "https://bscscan.com/address",
   },
   [bscTestnet.id]: {
-    address: "https://testnet.bscscan.com/",
+    address: "https://testnet.bscscan.com/address",
   },
 };
 

explorer/src/pages/Attestation/components/AttestationInfo/index.tsx

@@ -4,9 +4,9 @@ import { ArrowUpRight } from "lucide-react";
 import { Hex, hexToNumber } from "viem";
 
 import { Link } from "@/components/Link";
-import { links } from "@/constants";
 import { useNetworkContext } from "@/providers/network-provider/context";
 import { toPortalById } from "@/routes/constants";
+import { getBlockExplorerLink } from "@/utils";
 import { displayAmountWithComma } from "@/utils/amountUtils";
 import { cropString } from "@/utils/stringUtils";
 
@@ -18,6 +18,9 @@ export const AttestationInfo: React.FC<Attestation> = ({ ...attestation }) => {
   } = useNetworkContext();
 
   const { attestedDate, expirationDate, revocationDate, id, revoked, attester, portal, subject } = attestation;
+
+  const blockExplorerLink = getBlockExplorerLink(chain);
+
   const list: Array<{ title: string; value: string; to?: string; link?: string }> = [
     createDateListItem(t("attestation.info.attested"), attestedDate.toString()),
     createDateListItem(t("attestation.info.expirationDate"), expirationDate.toString()),
@@ -29,7 +32,7 @@ export const AttestationInfo: React.FC<Attestation> = ({ ...attestation }) => {
     {
       title: t("attestation.info.issuedBy"),
       value: cropString(attester),
-      link: `${links[chain.id].address}/${attester}`,
+      link: `${blockExplorerLink}/${attester}`,
     },
     {
       title: t("attestation.info.portal"),
@@ -39,7 +42,7 @@ export const AttestationInfo: React.FC<Attestation> = ({ ...attestation }) => {
     {
       title: t("attestation.info.subject"),
       value: cropString(subject),
-      link: `${links[chain.id].address}/${subject}`,
+      link: `${blockExplorerLink}/${subject}`,
     },
   ];
 

explorer/src/pages/Attestations/index.tsx

@@ -57,12 +57,12 @@ export const Attestations: React.FC = () => {
 
   const data = isLoading
     ? { columns: columnsSkeletonRef.current, list: skeletonAttestations(itemsPerPage) }
-    : { columns: columns({ sdk, chainId: chain.id }), list: attestationsList || [] };
+    : { columns: columns({ sdk, chain }), list: attestationsList || [] };
 
   return (
     <TitleAndSwitcher>
       <DataTable columns={data.columns} data={data.list} link={APP_ROUTES.ATTESTATION_BY_ID} />
-      {attestationsCount && <Pagination itemsCount={attestationsCount} handlePage={handlePage} />}
+      {attestationsCount ? <Pagination itemsCount={attestationsCount} handlePage={handlePage} /> : null}
     </TitleAndSwitcher>
   );
 };

explorer/src/pages/Module/index.tsx

@@ -4,10 +4,10 @@ import useSWR from "swr";
 
 import { Back } from "@/components/Back";
 import { NotFoundPage } from "@/components/NotFoundPage";
-import { links } from "@/constants";
 import { regexEthAddress } from "@/constants/regex";
 import { SWRKeys } from "@/interfaces/swr/enum";
 import { useNetworkContext } from "@/providers/network-provider/context";
+import { getBlockExplorerLink } from "@/utils";
 
 import { ModuleLoadingSkeleton } from "./components/ModuleLoadingSkeleton";
 
@@ -35,6 +35,7 @@ export const Module = () => {
 
   if (isLoading || isValidating) return <ModuleLoadingSkeleton />;
   if (!module) return <NotFoundPage page="module" id={id} />;
+  const blockExplorerLink = getBlockExplorerLink(chain);
 
   return (
     <section className="flex flex-col gap-6 w-full mb-10 md:mb-20 xl:max-w-[1200px] xl:m-auto">
@@ -51,7 +52,7 @@ export const Module = () => {
       <div className="flex flex-col gap-2 px-5 md:px-10">
         <p className="text-xs text-text-quaternary not-italic font-normal">CONTEXT</p>
         <a
-          href={`${links[chain.id].address}/${module.moduleAddress}`}
+          href={`${blockExplorerLink}/${module.moduleAddress}`}
           target="_blank"
           className="cursor-pointer hover:underline break-all sm:w-fit dark:text-text-secondaryDark flex items-center gap-2"
         >

explorer/src/pages/Modules/index.tsx

@@ -42,7 +42,7 @@ export const Modules: React.FC = () => {
   const columnsSkeletonRef = useRef(columnsSkeleton(columns(), moduleColumnsOption));
   const data = isLoading
     ? { columns: columnsSkeletonRef.current, list: skeletonModules(itemsPerPage) }
-    : { columns: columns({ chainId: chain.id }), list: modulesList || [] };
+    : { columns: columns({ chain }), list: modulesList || [] };
 
   return (
     <div className="container mt-5 md:mt-8">

explorer/src/pages/MyAttestations/index.tsx

@@ -91,11 +91,7 @@ export const MyAttestations: React.FC = () => {
       ) : !attestationsList || !attestationsList.length ? (
         <InfoBlock icon={<ArchiveIcon />} message={t("attestation.messages.emptyList")} />
       ) : (
-        <DataTable
-          columns={columns({ sdk, chainId: chain.id })}
-          data={attestationsList}
-          link={APP_ROUTES.ATTESTATION_BY_ID}
-        />
+        <DataTable columns={columns({ sdk, chain })} data={attestationsList} link={APP_ROUTES.ATTESTATION_BY_ID} />
       )}
     </TitleAndSwitcher>
   );

explorer/src/pages/Portal/components/PortalModules/index.tsx

@@ -29,7 +29,7 @@ export const PortalModules: React.FC<{ portalModules: Array<Address> }> = ({ por
   const columnsSkeletonRef = useRef(columnsSkeleton(columns(), moduleColumnsOption));
   const data = isLoading
     ? { columns: columnsSkeletonRef.current, list: skeletonModules(5) }
-    : { columns: columns({ chainId: chain.id }), list: modulesList?.slice(-5).reverse() || [] };
+    : { columns: columns({ chain }), list: modulesList?.slice(-5).reverse() || [] };
 
   return (
     <div className="flex flex-col gap-6 w-full px-5 md:px-10">

explorer/src/pages/Schema/components/RecentAttestations/index.tsx

@@ -27,7 +27,7 @@ export const RecentAttestations: React.FC<{ schemaId: string }> = ({ schemaId })
   const data = isLoading
     ? { columns: columnsSkeletonRef.current, list: skeletonAttestations(5) }
     : {
-        columns: columns({ sortByDate: false, sdk, chainId: chain.id }),
+        columns: columns({ sortByDate: false, sdk, chain }),
         list: attestations?.slice(-5).reverse() || [],
       };
 

explorer/src/pages/Schemas/index.tsx

@@ -45,8 +45,6 @@ export const Schemas: React.FC = () => {
     ? { columns: columnsSkeletonRef.current, list: skeletonSchemas(itemsPerPage) }
     : { columns: columns(), list: schemasList || [] };
 
-  console.log("skip: ", skip, page);
-
   return (
     <div className="container mt-5 md:mt-8">
       <div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-6 md:mb-8 gap-6 md:gap-0">

explorer/src/pages/Search/components/SearchAttestationsReceived/index.tsx

@@ -31,7 +31,7 @@ export const SearchAttestationsReceived: React.FC<SearchComponentProps> = ({ get
   if (!data || !data.length) return null;
   return (
     <SearchWrapper title={t("attestation.received")} items={data.length}>
-      <DataTable columns={columns({ sdk, chainId: chain.id })} data={data} link={APP_ROUTES.ATTESTATION_BY_ID} />
+      <DataTable columns={columns({ sdk, chain })} data={data} link={APP_ROUTES.ATTESTATION_BY_ID} />
     </SearchWrapper>
   );
 };

explorer/src/pages/Search/components/SearchModules/index.tsx

@@ -31,7 +31,7 @@ export const SearchModules: React.FC<SearchComponentProps> = ({ getSearchData, p
   if (!data || !data.length) return null;
   return (
     <SearchWrapper title={t("module.title")} items={data.length}>
-      <DataTable columns={columns({ chainId: chain.id })} data={data} link={APP_ROUTES.MODULES_BY_ID} />
+      <DataTable columns={columns({ chain })} data={data} link={APP_ROUTES.MODULES_BY_ID} />
     </SearchWrapper>
   );
 };

explorer/src/pages/Search/components/SearchPortals/index.tsx

@@ -31,7 +31,7 @@ export const SearchPortals: React.FC<SearchComponentProps> = ({ getSearchData, p
   if (!data || !data.length) return null;
   return (
     <SearchWrapper title={t("portal.title")} items={data.length}>
-      <DataTable columns={columns({ chainId: chain.id })} data={data} link={APP_ROUTES.PORTAL_BY_ID} />
+      <DataTable columns={columns({ chain })} data={data} link={APP_ROUTES.PORTAL_BY_ID} />
     </SearchWrapper>
   );
 };

explorer/src/providers/network-provider/index.tsx

@@ -1,8 +1,8 @@
 import { VeraxSdk } from "@verax-attestation-registry/verax-sdk";
-import { Chain, switchNetwork } from "@wagmi/core";
+import { Chain } from "@wagmi/core";
 import { FC, PropsWithChildren, useCallback, useState } from "react";
 import { useLoaderData, useLocation, useNavigate } from "react-router-dom";
-import { useAccount, useNetwork } from "wagmi";
+import { useAccount, useNetwork, useSwitchNetwork } from "wagmi";
 
 import { INetwork } from "@/interfaces/config";
 
@@ -14,6 +14,7 @@ export const NetworkContextProvider: FC<PropsWithChildren> = ({ children }): JSX
 
   const { isConnected } = useAccount();
   const { chain: currentChain } = useNetwork();
+  const { switchNetworkAsync } = useSwitchNetwork();
   const retrievedNetwork = useLoaderData() as INetwork;
 
   const [network, setNetwork] = useState<INetwork>(retrievedNetwork);
@@ -26,14 +27,14 @@ export const NetworkContextProvider: FC<PropsWithChildren> = ({ children }): JSX
       }
 
       try {
-        await switchNetwork({ chainId: pendingChain.id });
+        await switchNetworkAsync?.(pendingChain.id);
         return true;
       } catch (error) {
         console.error(`Error: while switching network: ${pendingChain.name} \n\n`, error);
         return false;
       }
     },
-    [isConnected],
+    [isConnected, switchNetworkAsync],
   );
 
   const setNetworkHandler = async (params: INetwork) => {

explorer/src/utils/index.ts

@@ -1,5 +1,8 @@
 import { type ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
+import { Chain } from "viem";
+
+import { links } from "@/constants";
 
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
@@ -10,3 +13,11 @@ export default cn;
 export function isNotNullOrUndefined<T extends object>(input: null | undefined | T): input is T {
   return input !== null && input !== undefined;
 }
+
+export function getBlockExplorerLink(chain: Chain) {
+  if (chain.blockExplorers) {
+    return `${chain.blockExplorers.default.url}/address`;
+  } else {
+    return `${links[chain.id].address}`;
+  }
+}