chore: Base Names testnet compatibility

.changeset/beige-bikes-greet.md

@@ -0,0 +1,5 @@
+---
+"@coinbase/onchainkit": patch
+---
+
+-**chore**: Base Names testnet compatibility. By @cpcramer #966

src/wallet/components/WalletDropdownBaseName.test.tsx

@@ -1,10 +1,12 @@
 import type { UseQueryResult } from '@tanstack/react-query';
 import { render, screen } from '@testing-library/react';
 import type { GetAccountReturnType } from '@wagmi/core';
+import { base } from 'viem/chains';
 import { describe, expect, it, vi } from 'vitest';
 import { useAccount } from 'wagmi';
 import { useName } from '../../identity/hooks/useName';
 import { WalletDropdownBaseName } from './WalletDropdownBaseName';
+import { useWalletContext } from './WalletProvider';
 
 vi.mock('wagmi', () => ({
   useAccount: vi.fn(),
@@ -14,12 +16,19 @@ vi.mock('../../identity/hooks/useName', () => ({
   useName: vi.fn(),
 }));
 
+vi.mock('./WalletProvider', () => ({
+  useWalletContext: vi.fn(),
+}));
+
 describe('WalletDropdownBaseName', () => {
   it('should render "Claim a Basename" when no basename', () => {
     (useAccount as vi.Mock<[], Partial<GetAccountReturnType>>).mockReturnValue({
       address: '0x1234' as `0x${string}`,
       isConnected: true,
     });
+    (useWalletContext as vi.Mock).mockReturnValue({
+      chain: base,
+    });
     (
       useName as vi.Mock<[], Partial<UseQueryResult<string | null, Error>>>
     ).mockReturnValue({
@@ -39,6 +48,9 @@ describe('WalletDropdownBaseName', () => {
       address: '0x1234' as `0x${string}`,
       isConnected: true,
     });
+    (useWalletContext as vi.Mock).mockReturnValue({
+      chain: base,
+    });
     (
       useName as vi.Mock<[], Partial<UseQueryResult<string | null, Error>>>
     ).mockReturnValue({
@@ -58,6 +70,9 @@ describe('WalletDropdownBaseName', () => {
       address: '0x1234' as `0x${string}`,
       isConnected: true,
     });
+    (useWalletContext as vi.Mock).mockReturnValue({
+      chain: base,
+    });
     (
       useName as vi.Mock<[], Partial<UseQueryResult<string | null, Error>>>
     ).mockReturnValue({
@@ -79,6 +94,9 @@ describe('WalletDropdownBaseName', () => {
       address: undefined,
       isConnected: false,
     });
+    (useWalletContext as vi.Mock).mockReturnValue({
+      chain: base,
+    });
 
     const { container } = render(<WalletDropdownBaseName />);
     expect(container.firstChild).toBeNull();

src/wallet/components/WalletDropdownBaseName.tsx

@@ -1,23 +1,24 @@
-import { base } from 'viem/chains';
 import { useAccount } from 'wagmi';
 import { useName } from '../../identity/hooks/useName';
 import { Spinner } from '../../internal/components/Spinner';
 import { baseNameSvg } from '../../internal/svg/baseNameSvg';
 import { cn, pressable, text } from '../../styles/theme';
 import type { WalletDropdownBaseNameReact } from '../types';
+import { useWalletContext } from './WalletProvider';
 
 export function WalletDropdownBaseName({
   className,
 }: WalletDropdownBaseNameReact) {
   const { address } = useAccount();
+  const { chain } = useWalletContext();
 
-  if (!address) {
+  if (!address || !chain) {
     return null;
   }
 
   const { data: baseName, isLoading } = useName({
     address,
-    chain: base,
+    chain,
   });
 
   const hasBaseUserName = !!baseName;

src/wallet/components/WalletProvider.tsx

@@ -1,6 +1,7 @@
 import { createContext, useContext, useState } from 'react';
 import type { ReactNode } from 'react';
 import { useValue } from '../../internal/hooks/useValue';
+import { useOnchainKit } from '../../useOnchainKit';
 import type { WalletContextType } from '../types';
 
 const emptyContext = {} as WalletContextType;
@@ -12,9 +13,11 @@ type WalletProviderReact = {
 };
 
 export function WalletProvider({ children }: WalletProviderReact) {
+  const { chain } = useOnchainKit();
   const [isOpen, setIsOpen] = useState(false);
   const value = useValue({
     isOpen,
+    chain,
     setIsOpen,
   });
   return (

src/wallet/types.ts

@@ -1,6 +1,6 @@
 import type { UserOperation } from 'permissionless';
 import type { Dispatch, ReactNode, SetStateAction } from 'react';
-import type { Address, PublicClient } from 'viem';
+import type { Address, Chain, PublicClient } from 'viem';
 import type { UseBalanceReturnType, UseReadContractReturnType } from 'wagmi';
 import type { SwapError } from '../swap';
 
@@ -61,6 +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
   isOpen: boolean;
   setIsOpen: Dispatch<SetStateAction<boolean>>;
 };