From 63dc39e12d569438823066f057ab7cac68d33675 Mon Sep 17 00:00:00 2001
From: Greg Nazario <greg@gnazar.io>
Date: Tue, 4 Feb 2025 22:55:07 -0500
Subject: [PATCH] [accounts] Add ANS and labels together

Resolves https://github.com/aptos-labs/explorer/issues/849
---
 src/api/hooks/useGetANS.ts         | 33 ++++++++++++++++++------------
 src/components/TitleHashButton.tsx | 24 +++++++++++++++++++---
 src/pages/Account/Title.tsx        | 16 +++++++++++++--
 3 files changed, 55 insertions(+), 18 deletions(-)

diff --git a/src/api/hooks/useGetANS.ts b/src/api/hooks/useGetANS.ts
index 3c23583d..982448c1 100644
--- a/src/api/hooks/useGetANS.ts
+++ b/src/api/hooks/useGetANS.ts
@@ -8,6 +8,7 @@ import {
   standardizeAddress,
 } from "../../utils";
 import {ResponseError} from "../client";
+import {NameType} from "../../components/TitleHashButton";
 
 const TTL = 60000; // 1 minute
 
@@ -31,26 +32,32 @@ export function useGetNameFromAddress(
   address: string,
   shouldCache = false,
   isValidator = false,
+  nameType = NameType.ANY,
 ) {
   const [state] = useGlobalState();
   const queryResult = useQuery<string | null, ResponseError>({
-    queryKey: ["ANSName", address, shouldCache, state.network_name],
+    queryKey: ["ANSName", address, shouldCache, state.network_name, nameType],
     queryFn: () => {
       const standardizedAddress = standardizeAddress(address);
       const lowercaseStandardizedAddress = standardizedAddress.toLowerCase();
-      const knownName = knownAddresses[lowercaseStandardizedAddress];
-      if (knownName) {
-        return knownName;
-      }
-      const scamName = scamAddresses[lowercaseStandardizedAddress];
-      if (scamName) {
-        return scamName;
-      }
+      if (nameType !== NameType.ANS) {
+        const knownName = knownAddresses[lowercaseStandardizedAddress];
+        if (knownName) {
+          return knownName;
+        }
+        const scamName = scamAddresses[lowercaseStandardizedAddress];
+        if (scamName) {
+          return scamName;
+        }
 
-      // Change cache key specifically to invalidate all previous cached keys
-      const cachedName = getLocalStorageWithExpiry(`${address}:name`);
-      if (cachedName) {
-        return cachedName;
+        // Change cache key specifically to invalidate all previous cached keys
+        const cachedName = getLocalStorageWithExpiry(`${address}:name`);
+        if (cachedName) {
+          return cachedName;
+        }
+        if (nameType === NameType.LABEL) {
+          return null;
+        }
       }
       // Ensure there's always .apt at the end
       return genANSName(
diff --git a/src/components/TitleHashButton.tsx b/src/components/TitleHashButton.tsx
index 3d6aa2e0..401d007b 100644
--- a/src/components/TitleHashButton.tsx
+++ b/src/components/TitleHashButton.tsx
@@ -37,17 +37,27 @@ interface TitleHashButtonProps {
   hash: string;
   type: HashType;
   isValidator?: boolean;
+  nameType?: NameType;
+}
+
+export enum NameType {
+  ANY = "any",
+  ANS = "ans",
+  LABEL = "label",
 }
 
 export default function TitleHashButton({
   hash,
   type,
   isValidator = false,
+  nameType = NameType.ANY,
 }: TitleHashButtonProps) {
   if (type !== HashType.NAME) {
     return <HashButton hash={hash} />;
   } else {
-    return <Name address={hash} isValidator={isValidator} />;
+    return (
+      <Name address={hash} isValidator={isValidator} nameType={nameType} />
+    );
   }
 }
 
@@ -122,9 +132,17 @@ function HashButton({hash}: {hash: string}) {
   );
 }
 
-function Name({address, isValidator}: {address: string; isValidator: boolean}) {
+function Name({
+  address,
+  isValidator,
+  nameType,
+}: {
+  address: string;
+  isValidator: boolean;
+  nameType?: NameType;
+}) {
   const theme = useTheme();
-  const name = useGetNameFromAddress(address, true, isValidator);
+  const name = useGetNameFromAddress(address, true, isValidator, nameType);
 
   if (!name) {
     return null;
diff --git a/src/pages/Account/Title.tsx b/src/pages/Account/Title.tsx
index 5cbb9ee6..d5d14307 100644
--- a/src/pages/Account/Title.tsx
+++ b/src/pages/Account/Title.tsx
@@ -1,6 +1,9 @@
 import {Stack, Typography} from "@mui/material";
 import React from "react";
-import TitleHashButton, {HashType} from "../../components/TitleHashButton";
+import TitleHashButton, {
+  HashType,
+  NameType,
+} from "../../components/TitleHashButton";
 import {usePageMetadata} from "../../components/hooks/usePageMetadata";
 
 type AccountTitleProps = {
@@ -38,7 +41,16 @@ export default function AccountTitle({
       <Typography variant="h3">{title}</Typography>
       <Stack direction="row" spacing={1}>
         <TitleHashButton hash={address} type={HashType.ACCOUNT} />
-        <TitleHashButton hash={address} type={HashType.NAME} />
+        <TitleHashButton
+          hash={address}
+          type={HashType.NAME}
+          nameType={NameType.LABEL}
+        />
+        <TitleHashButton
+          hash={address}
+          type={HashType.NAME}
+          nameType={NameType.ANS}
+        />
       </Stack>
     </Stack>
   );