diff --git a/.changeset/beige-bikes-greet.md b/.changeset/beige-bikes-greet.md new file mode 100644 index 0000000000..0631d79900 --- /dev/null +++ b/.changeset/beige-bikes-greet.md @@ -0,0 +1,5 @@ +--- +"@coinbase/onchainkit": patch +--- + +-**chore**: Base Names testnet compatibility. By @cpcramer #966 diff --git a/src/wallet/components/WalletDropdownBaseName.test.tsx b/src/wallet/components/WalletDropdownBaseName.test.tsx index 1567cb40f1..de1fcd2b22 100644 --- a/src/wallet/components/WalletDropdownBaseName.test.tsx +++ b/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>).mockReturnValue({ address: '0x1234' as `0x${string}`, isConnected: true, }); + (useWalletContext as vi.Mock).mockReturnValue({ + chain: base, + }); ( useName as vi.Mock<[], Partial>> ).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>> ).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>> ).mockReturnValue({ @@ -79,6 +94,9 @@ describe('WalletDropdownBaseName', () => { address: undefined, isConnected: false, }); + (useWalletContext as vi.Mock).mockReturnValue({ + chain: base, + }); const { container } = render(); expect(container.firstChild).toBeNull(); diff --git a/src/wallet/components/WalletDropdownBaseName.tsx b/src/wallet/components/WalletDropdownBaseName.tsx index 811a9b4b0b..cbf512803d 100644 --- a/src/wallet/components/WalletDropdownBaseName.tsx +++ b/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; diff --git a/src/wallet/components/WalletProvider.tsx b/src/wallet/components/WalletProvider.tsx index 98d70559a2..45a1c96beb 100644 --- a/src/wallet/components/WalletProvider.tsx +++ b/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 ( diff --git a/src/wallet/types.ts b/src/wallet/types.ts index 297a9779e7..631a2566f9 100644 --- a/src/wallet/types.ts +++ b/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>; };