ConnectButton detailsModal causes hydration error: nested <button> in copy address

[HayatoKanee]

When using ConnectButton with detailsModal, opening the wallet details modal triggers a React hydration error:

In HTML, <button> cannot be a descendant of <button>.
This will cause a hydration error.

Environment:

thirdweb: v5 (latest)
Next.js 16 / React 19
Browser: Chrome

Reproduction:

<ConnectButton
  client={thirdwebClient}
  wallets={wallets}
  chain={defaultChain}
  detailsButton={{
    displayBalanceToken: { [defaultChain.id]: USDC_ADDRESS },
  }}
  detailsModal={{ showTestnetFaucet: false }}
/>

1. Connect wallet
2. Click the connected wallet button to open details modal
3. Console shows hydration error

Root Cause:

The copy address CopyIcon component uses a <button> element, but it appears to be rendered inside another button context in the modal. Suggested Fix: Replace the nested <button> with <div role="button" tabIndex={0}> or <span> with click handler to maintain accessibility without violating HTML spec.

[linear]

BLD-537

[coderabbitai]

📝 CodeRabbit Plan Mode

Generate an implementation plan and prompts that you can use with your favorite coding agent.

• Create Plan

Examples

• Example 1
• Example 2

---

🧪 Issue enrichment is currently in open beta.

You can configure auto-planning by selecting labels in the issue_enrichment configuration.

To disable automatic issue enrichment, add the following to your .coderabbit.yaml:

issue_enrichment:
  auto_enrich:
    enabled: false

💬 Have feedback or questions? Drop into our discord!