Address
A component for displaying Ethereum addresses with optional abbreviation.
Address
The Address component displays Ethereum addresses with optional abbreviation and validation.
Usage
import { Address } from '@avalabs/builderkit';
// Basic usage
<Address address="0x1234567890123456789012345678901234567890" />
// With abbreviation
<Address
address="0x1234567890123456789012345678901234567890"
abbreviate={true}
/>
// Using context (inside Identity provider)
<Address abbreviate={true} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
address | string | - | The Ethereum address to display (optional if used within Identity context) |
abbreviate | boolean | false | Whether to show abbreviated address (e.g., 0x1234...5678) |
Features
- Validates input address using
ethers.isAddress - Supports address abbreviation (0x1234...5678)
- Can use address from Identity context if not provided directly
- Throws error for invalid addresses
Examples
Basic Display
<Address address="0x1234567890123456789012345678901234567890" />
// Output: 0x1234567890123456789012345678901234567890Abbreviated Display
<Address
address="0x1234567890123456789012345678901234567890"
abbreviate={true}
/>
// Output: 0x1234...5678With Identity Context
<Identity address="0x1234567890123456789012345678901234567890">
<Address abbreviate={true} />
</Identity>Error Handling
The component will throw an error if:
- No address is provided (either via props or context)
- The provided address is not a valid Ethereum address
Is this guide helpful?