Use chainId instead of chain

src/identity/hooks/useName.ts

@@ -14,15 +14,15 @@ import { getName } from '../utils/getName';
  *  - `{UseQueryResult}`: The rest of useQuery return values. including isLoading, isError, error, isFetching, refetch, etc.
  */
 export const useName = (
-  { address, chain = mainnet }: UseNameOptions,
+  { address, chainId = mainnet.id }: UseNameOptions,
   queryOptions?: UseNameQueryOptions,
 ) => {
   const { enabled = true, cacheTime } = queryOptions ?? {};
-  const ensActionKey = `ens-name-${address}-${chain.id}`;
+  const ensActionKey = `ens-name-${address}-${chainId}`;
   return useQuery<GetNameReturnType>({
     queryKey: ['useName', ensActionKey],
     queryFn: async () => {
-      return await getName({ address, chain });
+      return await getName({ address, chainId });
     },
     gcTime: cacheTime,
     enabled,

src/identity/types.ts

@@ -119,7 +119,7 @@ export type GetAvatarReturnType = string | null;
  */
 export type GetName = {
   address: Address;
-  chain?: Chain;
+  chainId?: number; // Optional chainId for domain resolution
 };
 
 /**
@@ -184,7 +184,7 @@ export type UseAttestations = {
  */
 export type UseNameOptions = {
   address: Address; // The Ethereum address for which the ENS name is to be fetched.
-  chain?: Chain; // Optional chain for domain resolution
+  chainId: number; //  chainId for domain resolution
 };
 
 /**

src/identity/utils/getName.test.tsx

@@ -58,15 +58,15 @@ describe('getName', () => {
   it('should return mainnet username', async () => {
     const expectedEnsName = 'leo.eth';
     mockGetEnsName.mockResolvedValue(expectedEnsName);
-    const name = await getName({ address: walletAddress, chain: mainnet });
+    const name = await getName({ address: walletAddress, chainId: mainnet.id });
     expect(name).toBe(expectedEnsName);
     expect(getChainPublicClient).toHaveBeenCalledWith(mainnet);
   });
 
   it('should return sepolia username', async () => {
     const expectedEnsName = 'leo.test.eth';
     mockGetEnsName.mockResolvedValue(expectedEnsName);
-    const name = await getName({ address: walletAddress, chain: sepolia });
+    const name = await getName({ address: walletAddress, chainId: sepolia.id });
     expect(name).toBe(expectedEnsName);
     expect(getChainPublicClient).toHaveBeenCalledWith(sepolia);
   });
@@ -76,7 +76,7 @@ describe('getName', () => {
     mockReadContract.mockResolvedValue(expectedEnsName);
     const name = await getName({
       address: walletAddress,
-      chain: baseSepolia,
+      chainId: baseSepolia.id,
     });
     expect(name).toBe(expectedEnsName);
     expect(getChainPublicClient).toHaveBeenCalledWith(baseSepolia);
@@ -85,7 +85,7 @@ describe('getName', () => {
   it('should return custom mainnet username', async () => {
     const expectedEnsName = 'leo.custommainnet.eth';
     mockReadContract.mockResolvedValue(expectedEnsName);
-    const name = await getName({ address: walletAddress, chain: base });
+    const name = await getName({ address: walletAddress, chainId: base.id });
     expect(name).toBe(expectedEnsName);
     expect(getChainPublicClient).toHaveBeenCalledWith(base);
   });
@@ -94,7 +94,7 @@ describe('getName', () => {
     const expectedEnsName = null;
     mockReadContract.mockResolvedValue(expectedEnsName);
     mockGetEnsName.mockResolvedValue(expectedEnsName);
-    const name = await getName({ address: walletAddress, chain: base });
+    const name = await getName({ address: walletAddress, chainId: base.id });
     expect(name).toBe(expectedEnsName);
     expect(getChainPublicClient).toHaveBeenCalledWith(base);
   });
@@ -104,14 +104,14 @@ describe('getName', () => {
     const expectedEnsName = 'registered.eth';
     mockReadContract.mockResolvedValue(expectedBaseName);
     mockGetEnsName.mockResolvedValue(expectedEnsName);
-    const name = await getName({ address: walletAddress, chain: base });
+    const name = await getName({ address: walletAddress, chainId: base.id });
     expect(name).toBe(expectedEnsName);
     expect(getChainPublicClient).toHaveBeenCalledWith(base);
   });
 
   it('should throw an error on unsupported chain', async () => {
     await expect(
-      getName({ address: walletAddress, chain: optimism }),
+      getName({ address: walletAddress, chainId: optimism.id }),
     ).rejects.toBe(
       'ChainId not supported, name resolution is only supported on Ethereum and Base.',
     );
@@ -121,7 +121,7 @@ describe('getName', () => {
     const expectedEnsName = 'zizzamia.eth';
     mockReadContract.mockRejectedValue(new Error('This is an error'));
     mockGetEnsName.mockResolvedValue(expectedEnsName);
-    const name = await getName({ address: walletAddress, chain: base });
+    const name = await getName({ address: walletAddress, chainId: base.id });
     expect(name).toBe(expectedEnsName);
     expect(getChainPublicClient).toHaveBeenCalledWith(base);
   });

src/identity/utils/getName.ts

@@ -15,10 +15,10 @@ import { convertReverseNodeToBytes } from './convertReverseNodeToBytes';
 
 export const getName = async ({
   address,
-  chain = mainnet,
+  chainId = mainnet.id,
 }: GetName): Promise<GetNameReturnType> => {
-  const chainIsBase = isBase({ chainId: chain.id });
-  const chainIsEthereum = isEthereum({ chainId: chain.id });
+  const chainIsBase = isBase({ chainId });
+  const chainIsEthereum = isEthereum({ chainId });
   const chainSupportsUniversalResolver = chainIsEthereum || chainIsBase;
 
   if (!chainSupportsUniversalResolver) {
@@ -27,14 +27,14 @@ export const getName = async ({
     );
   }
 
-  let client = getChainPublicClient(chain);
+  let client = getChainPublicClient(chainId);
 
   if (chainIsBase) {
     const addressReverseNode = convertReverseNodeToBytes(address, base.id);
     try {
       const baseName = await client.readContract({
         abi: L2ResolverAbi,
-        address: RESOLVER_ADDRESSES_BY_CHAIN_ID[chain.id],
+        address: RESOLVER_ADDRESSES_BY_CHAIN_ID[chainId],
         functionName: 'name',
         args: [addressReverseNode],
       });
@@ -47,7 +47,7 @@ export const getName = async ({
   }
 
   // Default to mainnet
-  client = getChainPublicClient(mainnet);
+  client = getChainPublicClient(mainnet.id);
   // ENS username
   const ensName = await client.getEnsName({
     address,

src/network/getChainPublicClient.ts

@@ -1,7 +1,19 @@
 import { http, createPublicClient } from 'viem';
-import type { Chain } from 'viem/chains';
+import { type Chain, base, baseSepolia, goerli, mainnet } from 'viem/chains';
+
+const supportedChains = [mainnet, goerli, base, baseSepolia];
+
+function getChainFromId(chainId: number): Chain | undefined {
+  return supportedChains.find((chain) => chain.id === chainId);
+}
+
+export function getChainPublicClient(chainId: number) {
+  const chain = getChainFromId(chainId);
+
+  if (!chain) {
+    throw new Error(`Unsupported chain ID: ${chainId}`);
+  }
 
-export function getChainPublicClient(chain: Chain) {
   return createPublicClient({
     chain: chain,
     transport: http(),

src/wallet/components/WalletDropdownBaseName.tsx

@@ -10,15 +10,15 @@ export function WalletDropdownBaseName({
   className,
 }: WalletDropdownBaseNameReact) {
   const { address } = useAccount();
-  const { chain } = useWalletContext();
+  const { chainId } = useWalletContext();
 
-  if (!address || !chain) {
+  if (!address || !chainId) {
     return null;
   }
 
   const { data: baseName, isLoading } = useName({
     address,
-    chain,
+    chainId,
   });
 
   const hasBaseUserName = !!baseName;

src/wallet/types.ts

@@ -1,6 +1,6 @@
 import type { UserOperation } from 'permissionless';
 import type { Dispatch, ReactNode, SetStateAction } from 'react';
-import type { Address, Chain, PublicClient } from 'viem';
+import type { Address, PublicClient } from 'viem';
 import type { UseBalanceReturnType, UseReadContractReturnType } from 'wagmi';
 import type { SwapError } from '../swap';
 
@@ -61,7 +61,7 @@ export type UseGetTokenBalanceResponse = {
  */
 export type WalletContextType = {
   address?: Address | null; // The Ethereum address to fetch the avatar and name for.
-  chain?: Chain; // Optional chain for domain resolution
+  chainId?: number; // Optional chainId for domain resolution
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 };