import { ValidatorSelector } from "@/components/params/selectors/validator-selector";

// Single-select mode (default)
<ValidatorSelector
  name="target"
  label="Validator"
  client={client}
  palletContext={stakingContext}
  isContextLoading={false}
  onChange={(value) => console.log("Selected:", value)}
/>

// Multi-select mode
<ValidatorSelector
  name="targets"
  label="Validators"
  multi
  client={client}
  palletContext={stakingContext}
  isContextLoading={false}
  onChange={(value) => console.log("Selected:", value)}
/>

Validator Selector

The Validator Selector is a contextual selector for choosing validators from live on-chain data. It supports two modes controlled by the multi prop:

• Single-select (default): A searchable combobox that selects one validator address.
• Multi-select (multi): A checkbox-based selector with removable chips, capped at 16 nominations.

When It Appears

The Validator Selector activates for these pallet/method/parameter combinations defined in PALLET_OVERRIDES:

The single-select variant can be used directly wherever a single validator address is needed.

Props

The component accepts the standard ParamInputProps interface with an additional multi prop:

Multi-Select Mode

When multi is enabled:

• Each validator row has a checkbox indicator. Clicking toggles selection.
• A 16-nomination cap enforces the Polkadot maximum. Items beyond the limit are visually dimmed and disabled.
• A selection counter badge shows the current count (e.g. "3/16 selected").
• Selected validators appear as removable chips below the combobox.
• The popover stays open after selection to allow picking multiple validators.

A convenience wrapper ValidatorMultiSelector is also exported for use in pallet overrides:

import { ValidatorMultiSelector } from "@/components/params/selectors/validator-selector";
// Equivalent to: <ValidatorSelector {...props} multi />

Features

• Searchable: Filters validators by address or on-chain identity name.
• Identity display: Shows the validator's on-chain identity name when available, otherwise displays a truncated address.
• Verified badge: Green shield icon for validators with verified identity judgements.
• Commission rate: Shows each validator's commission percentage.
• Active/Waiting status: Color-coded badges indicate validator status.
• Sort order: Active validators first, then by ascending commission rate.
• Virtualized list: Renders up to 100 items at a time for performance.
• Graceful fallback: Falls back to a plain text input when context data is unavailable.

Data Source

Validator data comes from the StakingContext fetched by lib/pallet-context/staking.ts. The primary source is the Subscan API (lib/api/subscan.ts -- fetchValidators), which provides addresses, identity names, commission rates, stake totals, and nominator counts. Falls back to on-chain RPC (staking.validators.entries()) when the API is unavailable.

Value Format

• Single-select: onChange receives a string -- the SS58-encoded validator address.
• Multi-select: onChange receives a string array of SS58-encoded validator addresses.