chore: Update missing address error handling

.changeset/flat-forks-whisper.md

@@ -0,0 +1,5 @@
+---
+'@coinbase/onchainkit': patch
+---
+
+-**chore**: Update missing address error handling in the `Identity` components. By @cpcramer #1430

src/identity/components/Address.test.tsx

@@ -9,13 +9,6 @@ function mock<T>(func: T) {
   return func as Mock;
 }
 
-const silenceError = () => {
-  const consoleErrorMock = vi
-    .spyOn(console, 'error')
-    .mockImplementation(() => {});
-  return () => consoleErrorMock.mockRestore();
-};
-
 vi.mock('../utils/getSlicedAddress', () => ({
   getSlicedAddress: vi.fn(),
 }));
@@ -38,15 +31,16 @@ describe('Address component', () => {
     vi.clearAllMocks();
   });
 
-  it('should throw an error when no address is provided', () => {
-    const restore = silenceError();
-    useIdentityContextMock.mockReturnValue({});
-    expect(() => {
-      render(<Address />);
-    }).toThrow(
+  it('should console.error and return null when no address is provided', () => {
+    vi.mocked(useIdentityContext).mockReturnValue({});
+    const consoleErrorSpy = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    const { container } = render(<Address />);
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
       'Address: an Ethereum address must be provided to the Identity or Address component.',
     );
-    restore();
+    expect(container.firstChild).toBeNull();
   });
 
   it('renders the sliced address when address supplied to Identity', () => {

src/identity/components/Address.tsx

@@ -10,9 +10,10 @@ export function Address({
 }: AddressReact) {
   const { address: contextAddress } = useIdentityContext();
   if (!contextAddress && !address) {
-    throw new Error(
+    console.error(
       'Address: an Ethereum address must be provided to the Identity or Address component.',
     );
+    return null;
   }
 
   const accountAddress = address ?? contextAddress;

src/identity/components/Avatar.test.tsx

@@ -14,12 +14,6 @@ function mock<T>(func: T) {
   return func as Mock;
 }
 
-const silenceError = () => {
-  const consoleErrorMock = vi
-    .spyOn(console, 'error')
-    .mockImplementation(() => {});
-  return () => consoleErrorMock.mockRestore();
-};
 vi.mock('../../useOnchainKit', () => ({
   useOnchainKit: vi.fn(),
 }));
@@ -54,15 +48,19 @@ describe('Avatar Component', () => {
     vi.clearAllMocks();
   });
 
-  it('should throw an error when no address is provided', () => {
-    useIdentityContextMock.mockReturnValue({ address: null });
-    const restore = silenceError();
-    expect(() => {
-      render(<Avatar />);
-    }).toThrow(
+  it('should console.error and return null when no address is provided', () => {
+    vi.mocked(useIdentityContext).mockReturnValue({
+      address: undefined,
+      chain: undefined,
+    });
+    const consoleErrorSpy = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    const { container } = render(<Avatar />);
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
       'Avatar: an Ethereum address must be provided to the Identity or Avatar component.',
     );
-    restore();
+    expect(container.firstChild).toBeNull();
   });
 
   it('should display loading indicator when loading', async () => {

src/identity/components/Avatar.tsx

@@ -30,9 +30,10 @@ export function Avatar({
   const accountChain = chain ?? contextChain;
 
   if (!accountAddress) {
-    throw new Error(
+    console.error(
       'Avatar: an Ethereum address must be provided to the Identity or Avatar component.',
     );
+    return null;
   }
 
   // The component first attempts to retrieve the ENS name and avatar for the given Ethereum address.

src/identity/components/EthBalance.test.tsx

@@ -10,13 +10,6 @@ function mock<T>(func: T) {
   return func as Mock;
 }
 
-const silenceError = () => {
-  const consoleErrorMock = vi
-    .spyOn(console, 'error')
-    .mockImplementation(() => {});
-  return () => consoleErrorMock.mockRestore();
-};
-
 vi.mock('./IdentityProvider', () => ({
   useIdentityContext: vi.fn(),
 }));
@@ -35,16 +28,18 @@ const useGetEthBalanceMock = mock(useGetETHBalance);
 describe('EthBalance', () => {
   const testIdentityProviderAddress = '0xIdentityAddress';
   const testEthBalanceComponentAddress = '0xEthBalanceComponentAddress';
-  it('should throw an error if no address is provided', () => {
-    useIdentityContextMock.mockReturnValue({ address: null });
-
-    const restore = silenceError();
-    expect(() =>
-      render(<EthBalance address={undefined} className="" />),
-    ).toThrow(
+  it('should console.error and return null when no address is provided', () => {
+    vi.mocked(useIdentityContext).mockReturnValue({
+      address: undefined,
+    });
+    const consoleErrorSpy = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    const { container } = render(<EthBalance />);
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
       'Address: an Ethereum address must be provided to the Identity or EthBalance component.',
     );
-    restore();
+    expect(container.firstChild).toBeNull();
   });
 
   it('should display the balance if provided', () => {

src/identity/components/EthBalance.tsx

@@ -7,9 +7,10 @@ import { useIdentityContext } from './IdentityProvider';
 export function EthBalance({ address, className }: EthBalanceReact) {
   const { address: contextAddress } = useIdentityContext();
   if (!contextAddress && !address) {
-    throw new Error(
+    console.error(
       'Address: an Ethereum address must be provided to the Identity or EthBalance component.',
     );
+    return null;
   }
 
   const { convertedBalance: balance, error } = useGetETHBalance(

src/identity/components/Name.test.tsx

@@ -9,13 +9,6 @@ import { Badge } from './Badge';
 import { useIdentityContext } from './IdentityProvider';
 import { Name } from './Name';
 
-const silenceError = () => {
-  const consoleErrorMock = vi
-    .spyOn(console, 'error')
-    .mockImplementation(() => {});
-  return () => consoleErrorMock.mockRestore();
-};
-
 vi.mock('../hooks/useAttestations', () => ({
   useAttestations: vi.fn(),
 }));
@@ -44,17 +37,19 @@ describe('Name', () => {
     vi.spyOn(console, 'error').mockImplementation(vi.fn());
   });
 
-  it('should throw an error when no address is provided', () => {
-    (useIdentityContext as Mock).mockReturnValue({
-      schemaId: '0x123',
+  it('should console.error and return null when no address is provided', () => {
+    vi.mocked(useIdentityContext).mockReturnValue({
+      address: undefined,
+      chain: undefined,
     });
-    const restore = silenceError();
-    expect(() => {
-      render(<Name />);
-    }).toThrow(
+    const consoleErrorSpy = vi
+      .spyOn(console, 'error')
+      .mockImplementation(() => {});
+    const { container } = render(<Name />);
+    expect(consoleErrorSpy).toHaveBeenCalledWith(
       'Name: an Ethereum address must be provided to the Identity or Name component.',
     );
-    restore();
+    expect(container.firstChild).toBeNull();
   });
 
   it('displays ENS name when available', () => {

src/identity/components/Name.tsx

@@ -20,9 +20,10 @@ export function Name({
 }: NameReact) {
   const { address: contextAddress, chain: contextChain } = useIdentityContext();
   if (!contextAddress && !address) {
-    throw new Error(
+    console.error(
       'Name: an Ethereum address must be provided to the Identity or Name component.',
     );
+    return null;
   }
 
   const accountAddress = address ?? contextAddress;