feat(explorer): As a user, I want EVM addresses to be resolved to the…

…ir ENS names, if available (#707)

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

@@ -144,7 +144,7 @@
   "portal": {
     "title": "Portal",
     "id": "id",
-    "ownerAddress": "Owner Address",
+    "ownerAddress": "Owner",
     "revokable": {
       "title": "Revokable",
       "yes": "Yes",
@@ -155,7 +155,7 @@
       "columns": {
         "name": "Portal Name",
         "description": "Portal Description",
-        "owner": "Owner Address"
+        "owner": "Owner"
       }
     }
   }

explorer/src/components/EnsNameDisplay/index.tsx

@@ -0,0 +1,12 @@
+import { Address } from "viem";
+import { mainnet, useEnsName } from "wagmi";
+
+import { cropString } from "@/utils/stringUtils";
+
+export const EnsNameDisplay: React.FC<{ address: Address; showFullAddress?: boolean }> = ({
+  address,
+  showFullAddress = false,
+}) => {
+  const { data: ensName } = useEnsName({ address, chainId: mainnet.id });
+  return <span>{ensName || (showFullAddress ? address : cropString(address))}</span>;
+};

explorer/src/config/index.tsx

@@ -1,6 +1,6 @@
 import { VeraxSdk } from "@verax-attestation-registry/verax-sdk";
 import { getDefaultConfig } from "connectkit";
-import { Chain, createConfig } from "wagmi";
+import { Chain, createConfig, mainnet } from "wagmi";
 import { arbitrum, arbitrumNova, arbitrumSepolia, base, baseSepolia, bsc, bscTestnet, linea } from "wagmi/chains";
 
 import veraxColoredIcon from "@/assets/logo/verax-colored-icon.svg";
@@ -135,7 +135,7 @@ const config = createConfig(
     autoConnect: true,
     infuraId: import.meta.env.VITE_INFURA_API_KEY,
     walletConnectProjectId: import.meta.env.VITE_WALLETCONNECT_PROJECT_ID || "",
-    chains: chains.map((el) => el.chain),
+    chains: [...chains.map((el) => el.chain), mainnet],
     appName: "Verax | Explorer",
     appIcon: veraxColoredIcon,
   }),

explorer/src/constants/columns/attestation.tsx

@@ -2,10 +2,11 @@ import { ColumnDef } from "@tanstack/react-table";
 import { Attestation, Portal, Schema } from "@verax-attestation-registry/verax-sdk";
 import { t } from "i18next";
 import moment from "moment";
-import { Chain, Hex } from "viem";
-import { hexToNumber } from "viem/utils";
+import { Address, Chain, Hex } from "viem";
+import { hexToNumber, isAddress } from "viem/utils";
 
 import { TdHandler } from "@/components/DataTable/components/TdHandler";
+import { EnsNameDisplay } from "@/components/EnsNameDisplay";
 import { HelperIndicator } from "@/components/HelperIndicator";
 import { Link } from "@/components/Link";
 import { SortByDate } from "@/components/SortByDate";
@@ -76,14 +77,17 @@ export const columns = ({ sortByDate = true, chain }: Partial<ColumnsProps> = {}
       const subject = row.getValue("subject") as string;
       if (!chain) return cropString(subject);
 
+      const isValidAddress = isAddress(subject);
+      const subjectDisplay = isValidAddress ? <EnsNameDisplay address={subject as Address} /> : cropString(subject);
+
       return (
         <a
           href={`${getBlockExplorerLink(chain)}/${subject}`}
           onClick={(e) => e.stopPropagation()}
           target="_blank"
           className="hover:underline"
         >
-          {cropString(subject)}
+          {subjectDisplay}
         </a>
       );
     },

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

@@ -1,7 +1,10 @@
 import { Attestation } from "@verax-attestation-registry/verax-sdk";
 import { t } from "i18next";
 import { ArrowUpRight } from "lucide-react";
-import { Hex, hexToNumber } from "viem";
+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 { useNetworkContext } from "@/providers/network-provider/context";
@@ -17,6 +20,34 @@ export const AttestationInfo: React.FC<Attestation> = ({ ...attestation }) => {
     network: { chain },
   } = useNetworkContext();
 
+  const { data: attesterEnsAddress } = useEnsName({
+    address: attestation.attester as Address,
+    chainId: mainnet.id,
+    enabled: true,
+  });
+
+  const { data: subjectEnsAddress } = useEnsName({
+    address: attestation.subject as Address,
+    chainId: mainnet.id,
+    enabled: isAddress(attestation.subject),
+  });
+
+  const displayAttesterEnsNameOrAddress = useCallback(() => {
+    if (attesterEnsAddress) {
+      return attesterEnsAddress;
+    }
+
+    return cropString(attestation.attester);
+  }, [attesterEnsAddress, attestation.attester]);
+
+  const displaySubjectEnsNameOrAddress = useCallback(() => {
+    if (subjectEnsAddress) {
+      return subjectEnsAddress;
+    }
+
+    return cropString(attestation.subject);
+  }, [subjectEnsAddress, attestation.subject]);
+
   const { attestedDate, expirationDate, revocationDate, id, revoked, attester, portal, subject } = attestation;
 
   const blockExplorerLink = getBlockExplorerLink(chain);
@@ -31,7 +62,7 @@ export const AttestationInfo: React.FC<Attestation> = ({ ...attestation }) => {
     createDateListItem(t("attestation.info.revocationDate"), revocationDate?.toString()),
     {
       title: t("attestation.info.issuedBy"),
-      value: cropString(attester),
+      value: displayAttesterEnsNameOrAddress(),
       link: `${blockExplorerLink}/${attester}`,
     },
     {
@@ -41,7 +72,7 @@ export const AttestationInfo: React.FC<Attestation> = ({ ...attestation }) => {
     },
     {
       title: t("attestation.info.subject"),
-      value: cropString(subject),
+      value: displaySubjectEnsNameOrAddress(),
       link: `${blockExplorerLink}/${subject}`,
     },
   ];

explorer/src/pages/Portal/index.tsx

@@ -1,6 +1,10 @@
 import { t } from "i18next";
+import { useCallback } from "react";
 import { useParams } from "react-router-dom";
 import useSWR from "swr";
+import { Address } from "viem";
+import { mainnet } from "viem/chains";
+import { useEnsName } from "wagmi";
 
 import { Back } from "@/components/Back";
 import { NotFoundPage } from "@/components/NotFoundPage";
@@ -34,6 +38,20 @@ export const Portal = () => {
     },
   );
 
+  const { data: portalOwnerEnsAddress } = useEnsName({
+    address: portal?.ownerAddress as Address,
+    chainId: mainnet.id,
+    enabled: !isLoading,
+  });
+
+  const displayPortalOwnerEnsAddress = useCallback(() => {
+    if (portalOwnerEnsAddress) {
+      return portalOwnerEnsAddress;
+    }
+
+    return portal?.ownerAddress;
+  }, [portalOwnerEnsAddress, portal?.ownerAddress]);
+
   if (isLoading || isValidating) return <PortalLoadingSkeleton />;
   if (!portal) return <NotFoundPage page="portal" id={id} />;
 
@@ -44,7 +62,7 @@ export const Portal = () => {
     },
     {
       title: t("portal.ownerAddress"),
-      subtitle: portal.ownerAddress,
+      subtitle: displayPortalOwnerEnsAddress(),
     },
     {
       title: t("portal.revokable.title"),