refactor: use API to fetch domain names

apps/evm/src/clients/api/queries/getAddressDomainName/index.ts

@@ -1,32 +1,52 @@
-import { createWeb3Name } from '@web3-name-sdk/core';
-import config from 'config';
-import { ChainId } from 'types';
+import { create, windowScheduler } from '@yornaath/batshit';
+import type { ChainId } from 'types';
+import { restService } from 'utilities';
+import type { Address } from 'viem';
 
-export interface GetAddressDomainNameInput {
-  accountAddress: string;
-  chainId: ChainId;
-}
+const getDomainNameFromApi = async ({
+  addresses,
+  chainIds,
+}: { addresses: Address[]; chainIds?: ChainId[] }) => {
+  const response = await restService<GetApiDomainNameResponse>({
+    endpoint: '/web3-domain-name',
+    method: 'GET',
+    params: {
+      addresses: JSON.stringify(addresses),
+      chainIds: JSON.stringify(chainIds),
+    },
+  });
+
+  if (response.data && 'error' in response.data) {
+    throw new Error(response.data.error);
+  }
 
-export type GetAddressDomainNameOutput = Awaited<ReturnType<typeof web3Name.getDomainName>> | null;
+  return response.data;
+};
 
-// the client will query the VerifiedTldHub contract on Ethereum
-// to fetch TLD medatada
-const web3Name = createWeb3Name({
-  rpcUrl: config.rpcUrls[ChainId.ETHEREUM],
+const domainNamesBatcher = create({
+  fetcher: async (queries: { accountAddress: Address; chainId: ChainId }[]) =>
+    getDomainNameFromApi({
+      addresses: queries.map(q => q.accountAddress),
+      chainIds: queries.map(q => q.chainId),
+    }),
+  resolver: (data, query) => data?.[query.accountAddress],
+  scheduler: windowScheduler(10),
 });
 
-const getAddressDomainName = async ({
-  accountAddress,
-  chainId,
-}: GetAddressDomainNameInput): Promise<GetAddressDomainNameOutput> => {
-  const rpcUrl = config.rpcUrls[chainId];
+type ChainIdDomainNameMap = { [Key in ChainId]?: string | null };
+type GetApiDomainNameResponse = Record<Address, ChainIdDomainNameMap>;
 
-  const addressDomainName = await web3Name.getDomainName({
-    address: accountAddress,
-    rpcUrl,
-  });
+export interface GetAddressDomainNameInput {
+  accountAddress: Address;
+  chainId: ChainId;
+}
+
+export type GetAddressDomainNameOutput = ChainIdDomainNameMap;
+
+const getAddressDomainName = async ({ accountAddress, chainId }: GetAddressDomainNameInput) => {
+  const response = await domainNamesBatcher.fetch({ accountAddress, chainId });
 
-  return addressDomainName;
+  return response || {};
 };
 
 export default getAddressDomainName;

apps/evm/src/clients/api/queries/getAddressDomainName/useGetAddressDomainName.ts

@@ -5,13 +5,8 @@ import getAddressDomainName, {
   type GetAddressDomainNameOutput,
 } from 'clients/api/queries/getAddressDomainName';
 import FunctionKey from 'constants/functionKey';
-import { useChainId } from 'libs/wallet';
-import type { ChainId } from 'types';
-import { callOrThrow } from 'utilities';
 
-type UseGetAddressDomainNameInput = Omit<GetAddressDomainNameInput, 'chainId'> & {
-  chainId?: ChainId;
-};
+type UseGetAddressDomainNameInput = GetAddressDomainNameInput;
 
 export type UseGetAddressDomainNameQueryKey = [
   FunctionKey.GET_ADDRESS_DOMAIN_NAME,
@@ -27,26 +22,20 @@ type Options = QueryObserverOptions<
 >;
 
 const useGetAddressDomainName = (
-  { accountAddress, chainId: passedChainId }: UseGetAddressDomainNameInput,
+  { accountAddress, chainId }: UseGetAddressDomainNameInput,
   options?: Partial<Options>,
 ) => {
-  const { chainId: currentChainId } = useChainId();
-  const chainId = passedChainId ?? currentChainId;
-
   const queryKey: UseGetAddressDomainNameQueryKey = [
     FunctionKey.GET_ADDRESS_DOMAIN_NAME,
     {
-      chainId,
       accountAddress,
+      chainId,
     },
   ];
 
   return useQuery({
     queryKey: queryKey,
-
-    queryFn: () =>
-      callOrThrow({ accountAddress, chainId }, params => getAddressDomainName({ ...params })),
-
+    queryFn: () => getAddressDomainName({ accountAddress, chainId }),
     ...options,
   });
 };

apps/evm/src/components/Username/index.tsx

@@ -0,0 +1,85 @@
+import { useGetAddressDomainName } from 'clients/api';
+import { Icon, Tooltip } from 'components';
+import EllipseAddress, { type EllipseAddressProps } from 'components/EllipseAddress';
+import { useTranslation } from 'libs/translations';
+import { useChainId } from 'libs/wallet';
+import { ChainId } from 'types';
+import { cn, truncateAddress } from 'utilities';
+import type { Address } from 'viem';
+
+type UsernameProps = {
+  showProvider?: boolean;
+  showTooltip?: boolean;
+  shouldEllipseAddress?: boolean;
+} & EllipseAddressProps;
+
+export const Username: React.FC<UsernameProps> = ({
+  address,
+  className,
+  showProvider = true,
+  showTooltip = true,
+  shouldEllipseAddress = true,
+  ...ellipseAddressProps
+}) => {
+  const { t } = useTranslation();
+  const { chainId } = useChainId();
+  const { data: domainNames, isLoading: isGetAddressDomainNameLoading } = useGetAddressDomainName(
+    {
+      accountAddress: address as Address,
+      chainId,
+    },
+    {
+      enabled: !!address,
+    },
+  );
+
+  const chainDomainName = domainNames?.[chainId];
+  // Ethereum and Sepolia use ENS, other chains use SpaceID
+  const providerIcon =
+    chainId === ChainId.ETHEREUM || chainId === ChainId.SEPOLIA ? 'ensLogo' : 'spaceIdLogo';
+  const providerText =
+    chainId === ChainId.ETHEREUM || chainId === ChainId.SEPOLIA
+      ? t('web3DomainNames.providers.ens')
+      : t('web3DomainNames.providers.spaceId');
+
+  let dom = shouldEllipseAddress ? (
+    <EllipseAddress className={className} address={address} {...ellipseAddressProps} />
+  ) : (
+    <span className={className}>{address}</span>
+  );
+
+  if (!isGetAddressDomainNameLoading && chainDomainName) {
+    dom = (
+      <div className={cn('flex flex-row items-center space-x-1', className)}>
+        {showProvider && (
+          <Tooltip title={providerText}>
+            <Icon className="cursor-pointer" name={providerIcon} />
+          </Tooltip>
+        )}
+        <span>{chainDomainName}</span>
+        {showTooltip && (
+          <Tooltip
+            title={
+              <div className="flex flex-col text-center">
+                <span className="text-center">{chainDomainName}</span>
+                <span className="md:hidden">
+                  {t('web3DomainNames.tooltip.address', { address: truncateAddress(address) })}
+                </span>
+                <span className="hidden md:block">
+                  {t('web3DomainNames.tooltip.address', { address })}
+                </span>
+              </div>
+            }
+            className="inline-flex"
+          >
+            <Icon className="cursor-pointer" name="info" />
+          </Tooltip>
+        )}
+      </div>
+    );
+  }
+
+  return dom;
+};
+
+export default Username;

apps/evm/src/components/index.ts

@@ -7,7 +7,7 @@ export * from './Checkbox';
 export * from './Chip';
 export * from './Countdown';
 export * from './Delimiter';
-export * from './DomainNameOrEllipseAddress';
+export * from './Username';
 export * from './EllipseAddress';
 export * from './ApproveTokenSteps';
 export * from './ApprovalSteps';

apps/evm/src/containers/Layout/ConnectButton/PrimeButton/index.tsx

@@ -1,7 +1,7 @@
 import primeLogoSrc from 'assets/img/primeLogo.svg';
-import { type ButtonProps, SecondaryButton } from 'components';
+import { type ButtonProps, SecondaryButton, Username } from 'components';
 import { useTranslation } from 'libs/translations';
-import { cn, truncateAddress } from 'utilities';
+import { cn } from 'utilities';
 
 export interface PrimeButtonProps extends ButtonProps {
   accountAddress: string;
@@ -27,7 +27,7 @@ export const PrimeButton: React.FC<PrimeButtonProps> = ({
       <>
         <img className="mr-2 w-5" src={primeLogoSrc} alt={t('PrimeButton.primeLogoAlt')} />
 
-        {addressDomainName ?? truncateAddress(accountAddress)}
+        <Username address={accountAddress} showTooltip={false} shouldEllipseAddress={false} />
       </>
     </SecondaryButton>
   );