scan: search bar on validator home page

CHANGELOG_UNRELEASED.md

@@ -32,6 +32,7 @@
 - (feat) [\#1938](https://github.com/bandprotocol/bandchain/pull/1938) Add validator's image from identity
 - (impv) [\#1928](https://github.com/bandprotocol/bandchain/pull/1928) Add chainID for guanyu-devnet
 - (impv) [\#1925](https://github.com/bandprotocol/bandchain/pull/1925) Removed input field for unused oracle script input
+- (impv) [\#1906](https://github.com/bandprotocol/bandchain/pull/1906/files) Add searchbar on validator home page
 
 ### Bridges
 

scan/src/pages/ValidatorHomePage.re

@@ -54,6 +54,16 @@ module Styles = {
       marginLeft(`pxFloat(1.6)),
       transform(`rotate(`deg(down ? 0. : 180.))),
     ]);
+  let searchContainer = style([display(`flex), justifyContent(`flexEnd), alignItems(`center)]);
+  let searchBar =
+    style([
+      display(`flex),
+      width(`percent(30.)),
+      height(`px(30)),
+      paddingLeft(`px(9)),
+      borderRadius(`px(4)),
+      border(`px(1), `solid, Colors.blueGray3),
+    ]);
 };
 
 module ToggleButton = {
@@ -133,7 +143,12 @@ let renderBody =
         <Col size=0.9>
           {switch (validatorSub) {
            | Data({operatorAddress, moniker, identity}) =>
-             <ValidatorMonikerLink validatorAddress=operatorAddress moniker identity width={`px(180)} />
+             <ValidatorMonikerLink
+               validatorAddress=operatorAddress
+               moniker
+               identity
+               width={`px(180)}
+             />
            | _ => <LoadingCensorBar width=150 height=15 />
            }}
         </Col>
@@ -354,7 +369,7 @@ module SortableTHead = {
 
 module ValidatorList = {
   [@react.component]
-  let make = (~allSub) => {
+  let make = (~allSub, ~searchTerm) => {
     let (sortedBy, setSortedBy) = React.useState(_ => VotingPowerDesc);
 
     let toggle = (sortedByAsc, sortedByDesc) =>
@@ -430,9 +445,15 @@ module ValidatorList = {
            votesBlock,
          )) =>
          let validators = addUptimeOnValidators(rawValidators, votesBlock);
+         let filteredValidator =
+           searchTerm |> Js.String.length == 0
+             ? validators
+             : validators->Belt_Array.keep(validator => {
+                 Js.String.includes(searchTerm, validator.moniker |> Js.String.toLowerCase)
+               });
          <>
-           {validators->Belt_Array.size > 0
-              ? validators
+           {filteredValidator->Belt_Array.size > 0
+              ? filteredValidator
                 ->sorting(sortedBy)
                 ->Belt_Array.map(e =>
                     renderBody(e.rank, Sub.resolve(e), bondedTokenCount.amount)
@@ -470,6 +491,7 @@ let getCurrentDay = _ => {
 let make = () => {
   let (prevDayTime, setPrevDayTime) = React.useState(getPrevDay);
   let (currentTime, setCurrentTime) = React.useState(getCurrentDay);
+  let (searchTerm, setSearchTerm) = React.useState(_ => "");
 
   React.useEffect0(() => {
     let timeOutID =
@@ -525,12 +547,6 @@ let make = () => {
          | _ => React.null
          }}
       </div>
-      <Col>
-        {switch (topPartAllSub) {
-         | Data(_) => <ToggleButton isActive setIsActive />
-         | _ => React.null
-         }}
-      </Col>
     </Row>
     <div className=Styles.highlight>
       <Row>
@@ -596,7 +612,21 @@ let make = () => {
         </Col>
       </Row>
     </div>
-    <ValidatorList allSub />
+    <div className=Styles.searchContainer>
+      <input
+        type_="text"
+        className=Styles.searchBar
+        placeholder="Search Validator"
+        onChange={event => {
+          let newVal = ReactEvent.Form.target(event)##value;
+          setSearchTerm(_ => newVal);
+        }}
+      />
+      <HSpacing size=Spacing.sm />
+      <Col> <ToggleButton isActive setIsActive /> </Col>
+    </div>
+    <VSpacing size=Spacing.md />
+    <ValidatorList allSub searchTerm />
     <VSpacing size=Spacing.lg />
   </>;
 };