modified: src/components/IndexerDetails/IndexerName.tsx

	deleted:    src/hooks/useEns.tsx
	new file:   src/hooks/useSpaceId.tsx

src/components/IndexerDetails/IndexerName.tsx

@@ -7,7 +7,7 @@ import { limitQueue } from '@utils/limitation';
 import { toSvg } from 'jdenticon';
 
 import { useIndexerMetadata } from '../../hooks';
-import { useENS } from '../../hooks/useEns';
+import { useWeb3Name } from '../../hooks/useSpaceId';
 import { truncateAddress } from '../../utils';
 import Copy from '../Copy';
 import IPFSImage from '../IPFSImage';
@@ -38,38 +38,38 @@ export const IndexerName: React.FC<Props> = ({
   onClick,
   onAddressClick,
 }) => {
-  const { fetchEnsNameOnce, fetchEnsFromCache } = useENS(address);
-  const [ensName, setEnsName] = useState<string>();
+  const { fetchWeb3NameOnce, fetchWeb3NameFromCache } = useWeb3Name(address);
+  const [web3Name, setWeb3Name] = useState<string>();
 
   const sortedName = useMemo(() => {
-    return ensName || name || `${address.slice(0, 6)}...${address.slice(address.length - 4, address.length)}`;
-  }, [name, ensName]);
+    return web3Name || name || `${address.slice(0, 6)}...${address.slice(address.length - 4, address.length)}`;
+  }, [name, web3Name]);
 
-  const fetchEns = async () => {
-    const fetchedEns = await limitQueue.add(() => fetchEnsNameOnce());
-    if (fetchedEns) {
-      setEnsName(fetchedEns);
+  const fetchWeb3 = async () => {
+    const fetchedWeb3 = await limitQueue.add(() => fetchWeb3NameOnce());
+    if (fetchedWeb3) {
+      setWeb3Name(fetchedWeb3);
     }
   };
 
-  const initEns = async () => {
-    const cachedName = await fetchEnsFromCache();
+  const initWeb3 = async () => {
+    const cachedName = await fetchWeb3NameFromCache();
     if (cachedName) {
-      setEnsName(cachedName);
+      setWeb3Name(cachedName);
       return;
     }
 
-    fetchEns();
+    fetchWeb3();
   };
 
   useEffect(() => {
-    initEns();
+    initWeb3();
   }, []);
 
   return (
     <div
       className={styles.indexer}
-      onMouseEnter={fetchEns}
+      onMouseEnter={fetchWeb3}
       onClick={() => {
         onClick?.(address);
       }}

src/hooks/useSpaceId.tsx

@@ -0,0 +1,84 @@
+// Copyright 2020-2022 SubQuery Pte Ltd authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { createWeb3Name } from '@web3-name-sdk/core';
+import localforage from 'localforage';
+import { once } from 'lodash-es';
+
+type Web3ReturnFuncType = () => Promise<string | null | undefined>;
+export function useWeb3Name(address: string): {
+  fetchWeb3Name: Web3ReturnFuncType;
+  fetchWeb3NameOnce: Web3ReturnFuncType;
+  fetchWeb3NameFromCache: Web3ReturnFuncType;
+} {
+  const web3Name = createWeb3Name();
+  const rpcMainnet = [
+    'https://eth.llamarpc.com',
+    'https://ethereum.blockpi.network/v1/rpc/public',
+    'https://rpc.payload.de',
+    'https://ethereum.publicnode.com',
+    'https://eth.merkle.io',
+    'https://eth.drpc.org',
+  ];
+  const rpcMainnetRandom = rpcMainnet[Math.floor(Math.random() * rpcMainnet.length)];
+  const rpcBNB = [
+    'https://binance.llamarpc.com',
+    'https://bsc.blockpi.network/v1/rpc/public',
+    'https://bsc.publicnode.com',
+    'https://bsc.drpc.org',
+    'https://1rpc.io/bnb',
+  ];
+  const rpcBNBRandom = rpcBNB[Math.floor(Math.random() * rpcBNB.length)];
+  const rpcARB = [
+    'https://arbitrum.llamarpc.com',
+    'https://arbitrum.blockpi.network/v1/rpc/public',
+    'https://arbitrum-one.publicnode.com',
+    'https://arbitrum.drpc.org',
+    'https://1rpc.io/arb',
+  ];
+  const rpcARBRandom = rpcARB[Math.floor(Math.random() * rpcARB.length)];
+
+  const fetchWeb3Name = async () => {
+    if (!address || !web3Name) return undefined;
+    let web3name = await web3Name.getDomainName({
+      address,
+      queryTldList: ['eth'],
+      rpcUrl: rpcMainnetRandom,
+    });
+    // If there is no eth domain name for that address check for bnb
+    if (web3name === null) {
+      web3name = await web3Name.getDomainName({
+        address,
+        queryTldList: ['bnb'],
+        rpcUrl: rpcBNBRandom,
+      });
+    }
+    // if there is no bnb domain name for that address check for arb
+    if (web3name === null) {
+      web3name = await web3Name.getDomainName({
+        address,
+        queryTldList: ['arb'],
+        rpcUrl: rpcARBRandom,
+      });
+    }
+    // if there is no arb domain name for that address then check for any other tld for that address
+    if (web3name === null) {
+      web3name = await web3Name.getDomainName({
+        address,
+      });
+    }
+    localforage.setItem(`web3name-${address}`, web3name);
+    return web3name;
+  };
+
+  const fetchWeb3NameFromCache = async () => {
+    if (!address) return;
+    return await localforage.getItem<string | null | undefined>(`web3name-${address}`);
+  };
+
+  return {
+    fetchWeb3Name,
+    fetchWeb3NameOnce: once(fetchWeb3Name),
+    fetchWeb3NameFromCache,
+  };
+}