bug: Address component crashes on invalid address input instead of showing error message

[snome-aly]

Is there an existing issue for this?

• I have looked through the existing issues

Which method was used to setup Scaffold-ETH 2 ?

npx create-eth@latest

Current Behavior

Current Behavior

The Address component throws an unhandled InvalidAddressError when receiving an invalid
Ethereum address, causing the entire application to crash with a white screen.

Error message:
Unhandled Runtime Error

InvalidAddressError: Address "0x34aA3F359A9D614239015126635CE7732c18fDF" is invalid.

• Address must be a hex value of 20 bytes (40 hex characters).
• Address must match its checksum counterpart.

Version: viem@2.34.0

Expected Behavior

The component should gracefully handle invalid addresses and display an error message (like
"Wrong address" or "Invalid address") instead of crashing.

Steps To Reproduce

1. Use the Address component with an invalid address:

import { Address } from "~~/components/scaffold-eth";

// Missing one character (41 chars instead of 42)
<Address address="0x34aA3F359A9D614239015126635CE7732c18fDF" />

2. The app immediately crashes with InvalidAddressError

Root Cause

In packages/nextjs/components/scaffold-eth/Address/Address.tsx, line 85:

const checkSumAddress = address ? getAddress(address) : undefined;

The getAddress() function from viem throws an exception when the address is invalid, but
this exception is not caught.

The existing error handling (lines 139-141) is unreachable:
if (!isAddress(checkSumAddress)) {
  return <span className="text-error">Wrong address</span>;
}

This code never executes because the exception occurs before reaching this check.



### Anything else?

#### Proposed Solution

Validate the address before calling getAddress():

let checkSumAddress: AddressType | undefined;
let isInvalidAddress = false;

try {
  if (address) {
    if (isAddress(address)) {
      checkSumAddress = getAddress(address);
    } else {
      isInvalidAddress = true;
    }
  }
} catch (error) {
  isInvalidAddress = true;
}

// Early return for invalid addresses
if (isInvalidAddress) {
  return <span className="text-error text-sm">Invalid address</span>;
}

Then remove the unreachable check at lines 139-141.

Environment

- Scaffold-ETH 2 version: [latest from template]
- viem version: 2.34.0
- Next.js version: 15.x
- Node version: 20.18.3

Additional Context

This issue affects user experience significantly - instead of showing a helpful error
message, the entire page crashes. This is especially problematic when:
- Users manually type addresses
- Addresses come from external sources
- During development/testing with mock data

The component seems to have been designed to handle this case (evident from the "Wrong
address" message), but the implementation has a logic error in the execution order.

---