feat: integrate the Web3 Name SDK from Space.ID

package.json

@@ -33,6 +33,7 @@
     "@types/node": "^12.0.0",
     "@types/react": "^18.2.21",
     "@types/react-dom": "18",
+    "@web3-name-sdk/core": "^0.1.5",
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/network-connector": "^6.1.9",

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,
+  };
+}

yarn.lock

@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.2.0.tgz#e1a84fca468f4b337816fcb7f0964beb620ba855"
   integrity sha512-E09FiIft46CmH5Qnjb0wsW54/YQd69LsxeKUOWawmws1XWvyFGURnAChH0mlr7YPFR1ofwvUQfcL0J3lMxXqPA==
 
+"@adraffy/[email protected]", "@adraffy/ens-normalize@^1.10.0":
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/@adraffy/ens-normalize/-/ens-normalize-1.10.0.tgz#d2a39395c587e092d77cbbc80acf956a54f38bf7"
+  integrity sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q==
+
 "@adraffy/[email protected]":
   version "1.9.4"
   resolved "https://registry.npmjs.org/@adraffy/ens-normalize/-/ens-normalize-1.9.4.tgz#aae21cb858bbb0411949d5b7b3051f4209043f62"
@@ -2361,6 +2366,11 @@
     ts-node "^9"
     tslib "^2"
 
+"@ensdomains/ens-validation@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@ensdomains/ens-validation/-/ens-validation-0.1.0.tgz#9ebfe66016fbf069a6ebca70c043714f6f02fbe6"
+  integrity sha512-rbDh2K6GfqXvBcJUISaTTYEt3f079WA4ohTE5Lh4/8EaaPAk/9vk3EisMUQV2UVxeFIZQEEyRCIOmRTpqN0W7A==
+
 "@esbuild/[email protected]":
   version "0.18.17"
   resolved "https://registry.yarnpkg.com/@esbuild/android-arm64/-/android-arm64-0.18.17.tgz#9e00eb6865ed5f2dbe71a1e96f2c52254cd92903"
@@ -5811,6 +5821,15 @@
     "@walletconnect/window-getters" "^1.0.1"
     tslib "1.14.1"
 
+"@web3-name-sdk/core@^0.1.5":
+  version "0.1.5"
+  resolved "https://registry.yarnpkg.com/@web3-name-sdk/core/-/core-0.1.5.tgz#658d2bc6bd43167f553e4f8dcc8427e43f9fc8b6"
+  integrity sha512-mHcpvmXNa7V51YDcQ9uz4Ryz0if7O+LweOyAw5kcofM8kTSF6MbqmotgBiwqwQ1JRdJPNyTj7GqAHQD7+09SaQ==
+  dependencies:
+    "@adraffy/ens-normalize" "^1.10.0"
+    "@ensdomains/ens-validation" "^0.1.0"
+    viem "^1.10.9"
+
 "@web3-react/abstract-connector@^6.0.7":
   version "6.0.7"
   resolved "https://registry.yarnpkg.com/@web3-react/abstract-connector/-/abstract-connector-6.0.7.tgz#401b3c045f1e0fab04256311be49d5144e9badc6"
@@ -15580,6 +15599,20 @@ viem@^1.0.0, viem@^1.19.0:
     isows "1.0.3"
     ws "8.13.0"
 
+viem@^1.10.9:
+  version "1.19.9"
+  resolved "https://registry.yarnpkg.com/viem/-/viem-1.19.9.tgz#a11f3ad4a3323994ebd2010dbc659d1a2b12e583"
+  integrity sha512-Sf9U2x4jU0S/FALqYypcspWOGene0NZyD470oUripNhE0Ta6uOE/OgE4toTDVfRxov8qw0JFinr/wPGxYE3+HQ==
+  dependencies:
+    "@adraffy/ens-normalize" "1.10.0"
+    "@noble/curves" "1.2.0"
+    "@noble/hashes" "1.3.2"
+    "@scure/bip32" "1.3.2"
+    "@scure/bip39" "1.2.1"
+    abitype "0.9.8"
+    isows "1.0.3"
+    ws "8.13.0"
+
 vite-tsconfig-paths@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/vite-tsconfig-paths/-/vite-tsconfig-paths-4.0.5.tgz#c7c54e2cf7ccc5e600db565cecd7b368a1fa8889"