feat: add all validators search box

anoma · Jul 5, 2023 · cff0c5b · cff0c5b
1 parent 3735d21
commit cff0c5b
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 3 deletions.
diff --git 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
@@ -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<Sort>({
     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 (
     <Table
       title="All Validators"
-      data={sortedValidators}
+      subheadingSlot={
+        <AllValidatorsSearchBar>
+          <input
+            type="search"
+            placeholder="Validator"
+            value={search}
+            onChange={e => setSearch(e.target.value)}
+          >
+          </input>
+        </AllValidatorsSearchBar>
+      }
+      data={sortedFilteredValidators}
       tableConfigurations={allValidatorsConfiguration}
     />
   );

diff --git a/packages/components/src/Table/Table.tsx b/packages/components/src/Table/Table.tsx
@@ -6,6 +6,7 @@ export type Props<RowType extends RowBase, Callbacks> = {
   data: RowType[];
   tableConfigurations: TableConfigurations<RowType, Callbacks>;
   className?: string;
+  subheadingSlot?: JSX.Element;
 };
 
 const getRenderedHeaderRow = (
@@ -55,7 +56,7 @@ const getRenderedDataRows = <RowType extends RowBase, Callbacks>(
 export const Table = <RowType extends RowBase, Callbacks>(
   props: Props<RowType, Callbacks>
 ): 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 = <RowType extends RowBase, Callbacks>(
   return (
     <TableContainer className={className}>
       <h3>{title}</h3>
+      {subheadingSlot}
       <TableElement style={{ borderCollapse: "collapse" }}>
         <tbody>{renderedRows}</tbody>
       </TableElement>