update finality provider components

package.json

@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@babylonlabs-io/babylon-proto-ts": "0.0.3-canary.4",
-    "@babylonlabs-io/bbn-core-ui": "^0.3.2",
+    "@babylonlabs-io/bbn-core-ui": "^0.4.0",
     "@babylonlabs-io/bbn-wallet-connect": "^0.1.7",
     "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.3",
     "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",

src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx

@@ -0,0 +1,22 @@
+import { Select } from "@babylonlabs-io/bbn-core-ui";
+
+import { useFinalityProviderService } from "@/app/hooks/services/useFinalityProviderService";
+
+const options = [
+  { value: "active", label: "Active" },
+  { value: "inactive", label: "Inactive" },
+];
+
+export const FinalityProviderFilter = () => {
+  const { filterValue, handleFilter } = useFinalityProviderService();
+
+  return (
+    <Select
+      options={options}
+      onSelect={handleFilter}
+      placeholder="Select Status"
+      defaultValue={filterValue}
+      renderSelectedOption={(option) => `Showing ${option.label}`}
+    />
+  );
+};

src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx

@@ -1,33 +1,31 @@
-import React from "react";
-import { FiSearch } from "react-icons/fi";
+import { Input } from "@babylonlabs-io/bbn-core-ui";
+import { useCallback } from "react";
+import { RiSearchLine } from "react-icons/ri";
 
-interface FinalityProviderSearchProps {
-  searchValue: string;
-  onSearch: (searchTerm: string) => void;
-}
+import { useFinalityProviderService } from "@/app/hooks/services/useFinalityProviderService";
 
-export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
-  searchValue,
-  onSearch,
-}) => {
-  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    onSearch(e.target.value);
-  };
+export const FinalityProviderSearch = () => {
+  const { handleSearch, searchValue } = useFinalityProviderService();
+
+  const onSearchChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      handleSearch(e.target.value);
+    },
+    [handleSearch],
+  );
+
+  const searchSuffix = (
+    <span className="cursor-pointer">
+      <RiSearchLine size={20} />
+    </span>
+  );
 
   return (
-    <div className="w-full">
-      <div className="relative">
-        <div className="absolute inset-y-0 left-0 flex items-center justify-center w-10">
-          <FiSearch className="text-sm md:text-lg" />
-        </div>
-        <input
-          type="text"
-          placeholder="Search by Name or Public Key"
-          value={searchValue}
-          onChange={handleSearch}
-          className="w-full pl-10 pr-4 py-2 text-sm bg-transparent border-b border-gray-300 focus:outline-none focus:border-primary"
-        />
-      </div>
-    </div>
+    <Input
+      placeholder="Search by Name or Public Key"
+      suffix={searchSuffix}
+      value={searchValue}
+      onChange={onSearchChange}
+    />
   );
 };

src/app/components/Staking/FinalityProviders/FinalityProviderSubtitle.tsx

@@ -0,0 +1,9 @@
+import { Text } from "@babylonlabs-io/bbn-core-ui";
+
+export const FinalityProviderSubtitle = () => {
+  return (
+    <Text variant="body1" className="text-primary-dark">
+      Select a Finality Provider
+    </Text>
+  );
+};