diff --git a/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.components.ts b/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.components.ts index 6f8a460dc6..5c75351603 100644 --- a/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.components.ts +++ b/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.components.ts @@ -20,3 +20,7 @@ export const StakingBalances = styled.div` export const StakingBalancesLabel = styled.div``; export const StakingBalancesValue = styled.div``; + +export const AllValidatorsSearchBar = styled.div` + margin-bottom: 8px; +`; diff --git a/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx b/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx index a7d7a011df..4ce9a72a61 100644 --- a/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx +++ b/apps/namada-interface/src/App/Staking/StakingOverview/StakingOverview.tsx @@ -8,6 +8,7 @@ import { StakingBalancesLabel, StakingBalancesValue, StakingOverviewContainer, + AllValidatorsSearchBar, } from "./StakingOverview.components"; import { formatPercentage, assertNever } from "@anoma/utils"; @@ -282,12 +283,20 @@ const AllValidatorsTable: React.FC<{ validators, navigateToValidatorDetails, }) => { + const [search, setSearch] = useState(""); + const [sort, setSort] = useState({ column: AllValidatorsColumn.Validator, ascending: true }); - const sortedValidators = sortValidators(sort, validators); + const filteredValidators = validators.filter(v => + search === "" + ? true + : v.name.toLowerCase().startsWith(search.toLowerCase()) + ); + + const sortedFilteredValidators = sortValidators(sort, filteredValidators); const handleColumnClick = (column: AllValidatorsColumn): void => setSort({ @@ -304,7 +313,18 @@ const AllValidatorsTable: React.FC<{ return ( + setSearch(e.target.value)} + > + + + } + data={sortedFilteredValidators} tableConfigurations={allValidatorsConfiguration} /> ); diff --git a/packages/components/src/Table/Table.tsx b/packages/components/src/Table/Table.tsx index 46da50be29..63b8888df7 100644 --- a/packages/components/src/Table/Table.tsx +++ b/packages/components/src/Table/Table.tsx @@ -6,6 +6,7 @@ export type Props = { data: RowType[]; tableConfigurations: TableConfigurations; className?: string; + subheadingSlot?: JSX.Element; }; const getRenderedHeaderRow = ( @@ -55,7 +56,7 @@ const getRenderedDataRows = ( export const Table = ( props: Props ): JSX.Element => { - const { data, tableConfigurations, title, className } = props; + const { data, tableConfigurations, title, className, subheadingSlot } = props; const { columns, rowRenderer, callbacks } = tableConfigurations && tableConfigurations; @@ -70,6 +71,7 @@ export const Table = ( return (

{title}

+ {subheadingSlot}
{renderedRows}