Address Input

A comprehensive address input component with SS58/Ethereum validation and identity lookup.

Introduction

AddressInput is a comprehensive input component for Polkadot and Ethereum addresses with real-time validation and identity lookup.

Features

✅ Address Validation: Real-time validation for SS58 (Polkadot) and Ethereum addresses
✅ Identity Lookup: Automatic Polkadot identity resolution using PAPI
✅ Visual Feedback: Color-coded validation states and loading indicators
✅ Flexible Formats: Support for SS58, Ethereum, or both address types
✅ TypeScript: Full type safety with comprehensive interfaces
✅ Customizable: Optional identicon, truncation, and styling options

Installation

npx polka-ui@latest add address-input

Props

Prop	Type	Default	Description
`value`	`string`	`""`	Current input value
`onChange`	`(value: string) => void`	-	Called when valid address is entered
`label`	`string`	-	Label text above input
`placeholder`	`string`	-	Placeholder text
`disabled`	`boolean`	`false`	Disable the input
`format`	`"ss58" \| "eth" \| "both"`	`"ss58"`	Address format(s) to accept
`withIdentityLookup`	`boolean`	`true`	Enable Polkadot identity lookup
`identityChain`	`ChainIdWithIdentity`	`"paseo_people"`	Chain to use for identity lookups
`onIdentityFound`	`(identity: IdentityResult) => void`	-	Called when identity is found
`truncate`	`boolean \| number`	`false`	Truncate display (true=8 chars)
`showIdenticon`	`boolean`	`true`	Show address identicon
`identiconTheme`	`"polkadot" \| "substrate" \| "beachball" \| "jdenticon"`	`"polkadot"`	Identicon visual theme
`className`	`string`	-	Additional CSS classes

Validation States

The component shows different visual states:

Valid: Green border with checkmark
Invalid: Red border with error message
Loading: Spinner while checking identity
Disconnected: Warning when chain not connected

Identity Lookup

When withIdentityLookup is enabled:

Valid SS58 addresses trigger identity lookup
Displays identity name if found
Shows verification status
Includes "PAPI" badge to indicate API source

The identityChain prop allows you to specify which chain to use for identity lookups. This is particularly useful in multi-chain environments where different chains may have different identity registries:

paseo_people (default): Paseo People chain for testnet identities
kusama_people: Kusama People chain for Kusama identities
polkadot_people: Polkadot People chain for mainnet identities

The type ChainIdWithIdentity ensures only chains with Identity pallet support can be used.

Identicon Support

The component automatically displays the appropriate identicon based on address type:

Polkadot/Substrate Addresses (SS58)

Different visual themes available via the identiconTheme prop:

polkadot (default): Official Polkadot-style identicon with geometric patterns
substrate: Alternative Substrate-themed identicon style
beachball: Colorful circular pattern resembling a beach ball
jdenticon: JDenticon style with geometric shapes and patterns

Ethereum Addresses

Ethereum Identicons: Automatically uses the jdenticon theme for ETH addresses
Ethereum addresses are converted to SS58 format for consistent identicon generation
Uses the same @polkadot/react-identicon library with specialized handling for Ethereum

The component intelligently switches between identicon themes based on address type, providing a consistent visual experience.

Examples

For live examples and interactive demos, visit the AddressInput Examples page.

Address Input

Introduction

Features

Installation

Usage

Basic Example

Multiple Formats

Custom Identity Chain

With Identity Callback

Truncated Display

Custom Identicon Themes

Beachball Theme

Substrate Theme

JDenticon Theme