# Address Component

The `Address` component displays Ethereum addresses with automatic ENS resolution, avatar display, and block explorer linking.

## Import

```tsx
import { Address } from "@scaffold-ui/components";
```

## Props

| Prop                 | Type                                                       | Default                                                                                        | Description                                       |
| -------------------- | ---------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------------------------------------------------- |
| `address`            | `Address`                                                  | -                                                                                              | The Ethereum address to display                   |
| `disableAddressLink` | `boolean`                                                  | `false`                                                                                        | Disable linking to block explorer                 |
| `format`             | `"short" \| "long"`                                        | `"short"`                                                                                      | Display format for the address                    |
| `size`               | `"xs" \| "sm" \| "base" \| "lg" \| "xl" \| "2xl" \| "3xl"` | `"base"`                                                                                       | Size of the component                             |
| `onlyEnsOrAddress`   | `boolean`                                                  | `false`                                                                                        | Show only ENS name or address (not both)          |
| `chain`              | `Chain`                                                    | First chain from [WagmiProvider](https://wagmi.sh/react/api/WagmiProvider) config or `mainnet` | Blockchain network for resolution                 |
| `style`              | `CSSProperties`                                            | -                                                                                              | Custom CSS styles (memoize to prevent re-renders) |

## Live Examples

### Basic Usage

<DocsProvider>
  <Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" />
</DocsProvider>

```tsx twoslash
import React from "react";
import { Address } from "@scaffold-ui/components";

<Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" />;
```

### Different Sizes

<DocsProvider>
  <Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" size="sm" />

  <Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" size="xl" />
</DocsProvider>

```tsx twoslash
import React from "react";
import { Address } from "@scaffold-ui/components";

<Address
  address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
  size="sm"
/>;

<Address
  address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
  size="xl"
/>;
```

### Long Format

<DocsProvider>
  <Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" format="long" />
</DocsProvider>

```tsx twoslash
import React from "react";
import { Address } from "@scaffold-ui/components";

<Address
  address="0x1234567890123456789012345678901234567890"
  format="long"
/>;
```

### Disable Block Explorer Link

<DocsProvider>
  <Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" disableAddressLink={true} />
</DocsProvider>

```tsx twoslash
import React from "react";
import { Address } from "@scaffold-ui/components";

<Address
  address="0x1234567890123456789012345678901234567890"
  disableAddressLink={true}
/>;
```

### ENS or Address Only

<DocsProvider>
  <Address address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045" onlyEnsOrAddress={true} />
</DocsProvider>

```tsx twoslash
import React from "react";
import { Address } from "@scaffold-ui/components";

<Address
  address="0xd8da6bf26964af9d7eed9e03e53415d37aa96045"
  onlyEnsOrAddress={true}
/>;
```

### Custom Chain

<DocsProvider>
  <Address address="0x1234567890123456789012345678901234567890" chain={polygon} />
</DocsProvider>

```tsx twoslash
import React from "react";
import { polygon } from "viem/chains";
import { Address } from "@scaffold-ui/components";

<Address
  address="0x1234567890123456789012345678901234567890"
  chain={polygon}
/>;
```

### Invalid Address Handling

When an invalid Ethereum address is provided, the component displays an error message with "Invalid address" text.

<DocsProvider>
  <Address address="0xInvalidAddress123" />
</DocsProvider>

```tsx twoslash
import React from "react";
import { Address } from "@scaffold-ui/components";

// Invalid address - shows error message
<Address address="0xInvalidAddress123" />;
```