From 85d08d45f0a62595891987f29c24f9902f1af123 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 9 Jan 2025 13:01:37 +0700
Subject: [PATCH 1/5] improve fp search to allow search to not scope to showing
 tab

---
 .../FinalityProviderFilter.tsx                |  5 +-
 .../FinalityProviderSearch.tsx                | 23 +++++++-
 src/app/state/FinalityProviderState.tsx       | 58 +++++++++++--------
 3 files changed, 58 insertions(+), 28 deletions(-)

diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx
index ed4abb4c..c3d8e2ff 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx
@@ -8,14 +8,15 @@ const options = [
 ];
 
 export const FinalityProviderFilter = () => {
-  const { filterValue, handleFilter } = useFinalityProviderState();
+  const { filterValue, handleFilter, searchValue } = useFinalityProviderState();
 
   return (
     <Select
       options={options}
       onSelect={handleFilter}
       placeholder="Select Status"
-      defaultValue={filterValue}
+      value={searchValue ? "" : filterValue}
+      disabled={Boolean(searchValue)}
       renderSelectedOption={(option) => `Showing ${option.label}`}
     />
   );
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
index a5388572..c5e678eb 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
@@ -1,7 +1,9 @@
 import { Input } from "@babylonlabs-io/bbn-core-ui";
+import Image from "next/image";
 import { useCallback } from "react";
 import { RiSearchLine } from "react-icons/ri";
 
+import cancelCircle from "@/app/assets/cancel-circle.svg";
 import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
 
 export const FinalityProviderSearch = () => {
@@ -14,8 +16,25 @@ export const FinalityProviderSearch = () => {
     [handleSearch],
   );
 
-  const searchSuffix = (
-    <span className="cursor-pointer">
+  const onClearSearch = useCallback(() => {
+    handleSearch("");
+  }, [handleSearch]);
+
+  const searchSuffix = searchValue ? (
+    <button
+      onClick={onClearSearch}
+      className="flex items-center hover:opacity-80 transition-opacity"
+    >
+      <Image
+        src={cancelCircle}
+        alt="Clear search"
+        width={18}
+        height={18}
+        className="opacity-50 hover:opacity-100 transition-opacity"
+      />
+    </button>
+  ) : (
+    <span className="text-primary-dark/50">
       <RiSearchLine size={20} />
     </span>
   );
diff --git a/src/app/state/FinalityProviderState.tsx b/src/app/state/FinalityProviderState.tsx
index d3afccd0..1272d4e9 100644
--- a/src/app/state/FinalityProviderState.tsx
+++ b/src/app/state/FinalityProviderState.tsx
@@ -3,7 +3,6 @@ import { useSearchParams } from "next/navigation";
 import {
   Suspense,
   useCallback,
-  useEffect,
   useMemo,
   useState,
   type PropsWithChildren,
@@ -70,11 +69,15 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
   const searchParams = useSearchParams();
   const fpParam = searchParams.get("fp");
 
-  const [searchValue, setSearchValue] = useState("");
+  const [searchValue, setSearchValue] = useState(fpParam || "");
   const [filterValue, setFilterValue] = useState<string | number>(
     fpParam ? "" : "active",
   );
   const [sortState, setSortState] = useState<SortState>({});
+  const [previousFilterValue, setPreviousFilterValue] = useState<
+    string | number
+  >("active");
+  const [isInitialLoad, setIsInitialLoad] = useState(true);
 
   const debouncedSearch = useDebounce(searchValue, 300);
 
@@ -85,9 +88,26 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
       name: debouncedSearch,
     });
 
-  const handleSearch = useCallback((searchTerm: string) => {
-    setSearchValue(searchTerm);
-  }, []);
+  const handleSearch = useCallback(
+    (searchTerm: string) => {
+      if (!searchValue && searchTerm) {
+        setPreviousFilterValue(filterValue);
+      }
+
+      setSearchValue(searchTerm);
+
+      if (!(isInitialLoad && fpParam && searchTerm === fpParam)) {
+        if (searchTerm) {
+          setFilterValue("");
+        } else {
+          setFilterValue(previousFilterValue);
+        }
+      } else {
+        setIsInitialLoad(false);
+      }
+    },
+    [searchValue, filterValue, previousFilterValue, isInitialLoad, fpParam],
+  );
 
   const handleSort = useCallback((sortField: string) => {
     setSortState(({ field, direction }) =>
@@ -105,6 +125,7 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
 
   const handleFilter = useCallback((value: string | number) => {
     setFilterValue(value);
+    setPreviousFilterValue(value);
   }, []);
 
   const isRowSelectable = useCallback((row: FinalityProvider) => {
@@ -120,18 +141,6 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
     return data.finalityProviders.filter((fp: FinalityProvider) => {
       if (!fp) return false;
 
-      const isActive = fp.state === FinalityProviderStateEnum.ACTIVE;
-      const isInactive = inactiveStatuses.has(fp.state);
-
-      const statusMatch =
-        filterValue === "active"
-          ? isActive
-          : filterValue === "inactive"
-            ? isInactive
-            : true;
-
-      if (!statusMatch) return false;
-
       if (searchValue) {
         const searchLower = searchValue.toLowerCase();
         return (
@@ -141,7 +150,14 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
         );
       }
 
-      return true;
+      const isActive = fp.state === FinalityProviderStateEnum.ACTIVE;
+      const isInactive = inactiveStatuses.has(fp.state);
+
+      return filterValue === "active"
+        ? isActive
+        : filterValue === "inactive"
+          ? isInactive
+          : true;
     });
   }, [data?.finalityProviders, filterValue, searchValue]);
 
@@ -151,12 +167,6 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
     [data?.finalityProviders],
   );
 
-  useEffect(() => {
-    if (fpParam && data?.finalityProviders) {
-      handleSearch(fpParam);
-    }
-  }, [fpParam, data?.finalityProviders, handleSearch]);
-
   const state = useMemo(
     () => ({
       searchValue,

From 65d71867d86c057eaea47b72c2068ae7d8647135 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Tue, 14 Jan 2025 12:25:02 +0700
Subject: [PATCH 2/5] resolve comments

---
 src/app/state/FinalityProviderState.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/app/state/FinalityProviderState.tsx b/src/app/state/FinalityProviderState.tsx
index 1272d4e9..8a618ed3 100644
--- a/src/app/state/FinalityProviderState.tsx
+++ b/src/app/state/FinalityProviderState.tsx
@@ -153,11 +153,10 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
       const isActive = fp.state === FinalityProviderStateEnum.ACTIVE;
       const isInactive = inactiveStatuses.has(fp.state);
 
-      return filterValue === "active"
-        ? isActive
-        : filterValue === "inactive"
-          ? isInactive
-          : true;
+      if (filterValue === "active") return isActive;
+      if (filterValue === "inactive") return isInactive;
+      // default to active
+      return true;
     });
   }, [data?.finalityProviders, filterValue, searchValue]);
 

From 5f4078d6339710d586267d51d3878aa70a028c8e Mon Sep 17 00:00:00 2001
From: David Totraev <totraev@gmail.com>
Date: Wed, 15 Jan 2025 00:11:30 +0500
Subject: [PATCH 3/5] fix: add filter strategy

---
 .../FinalityProviderFilter.tsx                |   8 +-
 .../FinalityProviderSearch.tsx                |  14 +-
 .../FinalityProviderTable.tsx                 |   7 +-
 src/app/state/FinalityProviderState.tsx       | 146 ++++++------------
 4 files changed, 62 insertions(+), 113 deletions(-)

diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx
index c3d8e2ff..1d0fedd1 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx
@@ -8,15 +8,15 @@ const options = [
 ];
 
 export const FinalityProviderFilter = () => {
-  const { filterValue, handleFilter, searchValue } = useFinalityProviderState();
+  const { filter, handleFilter } = useFinalityProviderState();
 
   return (
     <Select
       options={options}
-      onSelect={handleFilter}
+      onSelect={(value) => handleFilter("status", value.toString())}
       placeholder="Select Status"
-      value={searchValue ? "" : filterValue}
-      disabled={Boolean(searchValue)}
+      value={filter.search ? "" : filter.status}
+      disabled={Boolean(filter.search)}
       renderSelectedOption={(option) => `Showing ${option.label}`}
     />
   );
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
index c5e678eb..162f3967 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
@@ -7,20 +7,20 @@ import cancelCircle from "@/app/assets/cancel-circle.svg";
 import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
 
 export const FinalityProviderSearch = () => {
-  const { handleSearch, searchValue } = useFinalityProviderState();
+  const { filter, handleFilter } = useFinalityProviderState();
 
   const onSearchChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
-      handleSearch(e.target.value);
+      handleFilter("search", e.target.value);
     },
-    [handleSearch],
+    [handleFilter],
   );
 
   const onClearSearch = useCallback(() => {
-    handleSearch("");
-  }, [handleSearch]);
+    handleFilter("search", "");
+  }, [handleFilter]);
 
-  const searchSuffix = searchValue ? (
+  const searchSuffix = filter.search ? (
     <button
       onClick={onClearSearch}
       className="flex items-center hover:opacity-80 transition-opacity"
@@ -43,7 +43,7 @@ export const FinalityProviderSearch = () => {
     <Input
       placeholder="Search by Name or Public Key"
       suffix={searchSuffix}
-      value={searchValue}
+      value={filter.search}
       onChange={onSearchChange}
     />
   );
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx
index 4f39eda6..83da674e 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx
@@ -20,10 +20,9 @@ export const FinalityProviderTable = ({
     isFetching,
     finalityProviders,
     hasNextPage,
-    fetchNextPage,
-    searchValue,
-    filterValue,
     hasError,
+    filter,
+    fetchNextPage,
     isRowSelectable,
   } = useFinalityProviderState();
 
@@ -83,7 +82,7 @@ export const FinalityProviderTable = ({
   return (
     <div className="h-[21rem] overflow-y-auto ">
       <Table
-        key={`${searchValue}-${filterValue}`}
+        key={`${filter.search}-${filter.status}`}
         data={tableData}
         columns={finalityProviderColumns}
         loading={isFetching}
diff --git a/src/app/state/FinalityProviderState.tsx b/src/app/state/FinalityProviderState.tsx
index 8a618ed3..a8f42509 100644
--- a/src/app/state/FinalityProviderState.tsx
+++ b/src/app/state/FinalityProviderState.tsx
@@ -1,12 +1,6 @@
 import { useDebounce } from "@uidotdev/usehooks";
 import { useSearchParams } from "next/navigation";
-import {
-  Suspense,
-  useCallback,
-  useMemo,
-  useState,
-  type PropsWithChildren,
-} from "react";
+import { useCallback, useMemo, useState, type PropsWithChildren } from "react";
 
 import { useFinalityProviders } from "@/app/hooks/client/api/useFinalityProviders";
 import {
@@ -20,42 +14,56 @@ interface SortState {
   direction?: "asc" | "desc";
 }
 
-const SORT_DIRECTIONS = {
-  undefined: "desc",
-  desc: "asc",
-  asc: undefined,
-} as const;
-
-const inactiveStatuses = new Set([
-  FinalityProviderStateEnum.INACTIVE,
-  FinalityProviderStateEnum.JAILED,
-  FinalityProviderStateEnum.SLASHED,
-]);
+interface FilterState {
+  search: string;
+  status: "active" | "inactive" | "";
+}
 
 interface FinalityProviderState {
-  searchValue: string;
-  filterValue: string | number;
+  filter: FilterState;
   finalityProviders: FinalityProvider[];
   hasNextPage: boolean;
   isFetching: boolean;
   hasError: boolean;
-  handleSearch: (searchTerm: string) => void;
   handleSort: (sortField: string) => void;
-  handleFilter: (value: string | number) => void;
+  handleFilter: (key: keyof FilterState, value: string) => void;
   isRowSelectable: (row: FinalityProvider) => boolean;
   getFinalityProvider: (btcPkHex: string) => FinalityProvider | null;
   fetchNextPage: () => void;
 }
 
+const SORT_DIRECTIONS = {
+  undefined: "desc",
+  desc: "asc",
+  asc: undefined,
+} as const;
+
+const STATUS_FILTERS = {
+  active: (fp: FinalityProvider) =>
+    fp.state === FinalityProviderStateEnum.ACTIVE,
+  inactive: (fp: FinalityProvider) =>
+    fp.state !== FinalityProviderStateEnum.ACTIVE,
+};
+
+const FILTERS = {
+  search: (fp: FinalityProvider, filter: FilterState) => {
+    const pattern = new RegExp(filter.search, "i");
+
+    return (
+      pattern.test(fp.description?.moniker ?? "") || pattern.test(fp.btcPk)
+    );
+  },
+  status: (fp: FinalityProvider, filter: FilterState) =>
+    filter.status && !filter.search ? STATUS_FILTERS[filter.status](fp) : true,
+};
+
 const defaultState: FinalityProviderState = {
-  searchValue: "",
-  filterValue: "",
+  filter: { search: "", status: "active" },
   finalityProviders: [],
   hasNextPage: false,
   isFetching: false,
   hasError: false,
   isRowSelectable: () => false,
-  handleSearch: () => {},
   handleSort: () => {},
   handleFilter: () => {},
   getFinalityProvider: () => null,
@@ -65,21 +73,16 @@ const defaultState: FinalityProviderState = {
 const { StateProvider, useState: useFpState } =
   createStateUtils<FinalityProviderState>(defaultState);
 
-function FinalityProviderStateInner({ children }: PropsWithChildren) {
+export function FinalityProviderState({ children }: PropsWithChildren) {
   const searchParams = useSearchParams();
   const fpParam = searchParams.get("fp");
 
-  const [searchValue, setSearchValue] = useState(fpParam || "");
-  const [filterValue, setFilterValue] = useState<string | number>(
-    fpParam ? "" : "active",
-  );
+  const [filter, setFilter] = useState<FilterState>({
+    search: fpParam || "",
+    status: "active",
+  });
   const [sortState, setSortState] = useState<SortState>({});
-  const [previousFilterValue, setPreviousFilterValue] = useState<
-    string | number
-  >("active");
-  const [isInitialLoad, setIsInitialLoad] = useState(true);
-
-  const debouncedSearch = useDebounce(searchValue, 300);
+  const debouncedSearch = useDebounce(filter.search, 300);
 
   const { data, hasNextPage, fetchNextPage, isFetching, isError } =
     useFinalityProviders({
@@ -88,26 +91,9 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
       name: debouncedSearch,
     });
 
-  const handleSearch = useCallback(
-    (searchTerm: string) => {
-      if (!searchValue && searchTerm) {
-        setPreviousFilterValue(filterValue);
-      }
-
-      setSearchValue(searchTerm);
-
-      if (!(isInitialLoad && fpParam && searchTerm === fpParam)) {
-        if (searchTerm) {
-          setFilterValue("");
-        } else {
-          setFilterValue(previousFilterValue);
-        }
-      } else {
-        setIsInitialLoad(false);
-      }
-    },
-    [searchValue, filterValue, previousFilterValue, isInitialLoad, fpParam],
-  );
+  const handleFilter = useCallback((key: keyof FilterState, value: string) => {
+    setFilter((state) => ({ ...state, [key]: value }));
+  }, []);
 
   const handleSort = useCallback((sortField: string) => {
     setSortState(({ field, direction }) =>
@@ -123,11 +109,6 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
     );
   }, []);
 
-  const handleFilter = useCallback((value: string | number) => {
-    setFilterValue(value);
-    setPreviousFilterValue(value);
-  }, []);
-
   const isRowSelectable = useCallback((row: FinalityProvider) => {
     return (
       row.state === FinalityProviderStateEnum.ACTIVE ||
@@ -138,27 +119,10 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
   const filteredFinalityProviders = useMemo(() => {
     if (!data?.finalityProviders) return [];
 
-    return data.finalityProviders.filter((fp: FinalityProvider) => {
-      if (!fp) return false;
-
-      if (searchValue) {
-        const searchLower = searchValue.toLowerCase();
-        return (
-          (fp.description?.moniker?.toLowerCase() || "").includes(
-            searchLower,
-          ) || (fp.btcPk?.toLowerCase() || "").includes(searchLower)
-        );
-      }
-
-      const isActive = fp.state === FinalityProviderStateEnum.ACTIVE;
-      const isInactive = inactiveStatuses.has(fp.state);
-
-      if (filterValue === "active") return isActive;
-      if (filterValue === "inactive") return isInactive;
-      // default to active
-      return true;
-    });
-  }, [data?.finalityProviders, filterValue, searchValue]);
+    return data.finalityProviders.filter((fp: FinalityProvider) =>
+      Object.values(FILTERS).every((filterFn) => filterFn(fp, filter)),
+    );
+  }, [data?.finalityProviders, filter]);
 
   const getFinalityProvider = useCallback(
     (btcPkHex: string) =>
@@ -168,13 +132,11 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
 
   const state = useMemo(
     () => ({
-      searchValue,
-      filterValue,
+      filter,
       finalityProviders: filteredFinalityProviders,
       isFetching,
       hasNextPage,
       hasError: isError,
-      handleSearch,
       handleSort,
       handleFilter,
       isRowSelectable,
@@ -182,13 +144,11 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
       fetchNextPage,
     }),
     [
-      searchValue,
-      filterValue,
+      filter,
       filteredFinalityProviders,
       isFetching,
       hasNextPage,
       isError,
-      handleSearch,
       handleSort,
       handleFilter,
       isRowSelectable,
@@ -200,14 +160,4 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
   return <StateProvider value={state}>{children}</StateProvider>;
 }
 
-export function FinalityProviderState({ children }: PropsWithChildren) {
-  return (
-    <Suspense
-      fallback={<StateProvider value={defaultState}>{children}</StateProvider>}
-    >
-      <FinalityProviderStateInner>{children}</FinalityProviderStateInner>
-    </Suspense>
-  );
-}
-
 export { useFpState as useFinalityProviderState };

From 614bc7cf44f4840d7af27f500f48c5fa82fbe24d Mon Sep 17 00:00:00 2001
From: David Totraev <totraev@gmail.com>
Date: Wed, 15 Jan 2025 00:35:45 +0500
Subject: [PATCH 4/5] fix: issue with useSearchParams hook

---
 src/app/providers.tsx | 68 ++++++++++++++++++++++---------------------
 1 file changed, 35 insertions(+), 33 deletions(-)

diff --git a/src/app/providers.tsx b/src/app/providers.tsx
index a3fe3ce0..851c1a5a 100644
--- a/src/app/providers.tsx
+++ b/src/app/providers.tsx
@@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental";
 import { ThemeProvider } from "next-themes";
-import React from "react";
+import React, { Suspense } from "react";
 
 import { NotificationContainer } from "./components/Notification/NotificationContainer";
 import { ErrorProvider } from "./context/Error/ErrorContext";
@@ -20,38 +20,40 @@ function Providers({ children }: React.PropsWithChildren) {
   const [client] = React.useState(new QueryClient());
 
   return (
-    <ScrollLocker>
-      <ThemeProvider
-        defaultTheme="light"
-        enableSystem={false}
-        attribute="data-theme"
-      >
-        <QueryClientProvider client={client}>
-          <ErrorProvider>
-            <BbnRpcProvider>
-              <WalletConnectionProvider>
-                <BTCWalletProvider>
-                  <CosmosWalletProvider>
-                    <AppState>
-                      <StakingStatsProvider>
-                        <ReactQueryStreamedHydration>
-                          {children}
-                        </ReactQueryStreamedHydration>
-                      </StakingStatsProvider>
-                    </AppState>
-                  </CosmosWalletProvider>
-                </BTCWalletProvider>
-              </WalletConnectionProvider>
-            </BbnRpcProvider>
-          </ErrorProvider>
-          <ReactQueryDevtools
-            buttonPosition="bottom-left"
-            initialIsOpen={false}
-          />
-        </QueryClientProvider>
-        <NotificationContainer />
-      </ThemeProvider>
-    </ScrollLocker>
+    <Suspense>
+      <ScrollLocker>
+        <ThemeProvider
+          defaultTheme="light"
+          enableSystem={false}
+          attribute="data-theme"
+        >
+          <QueryClientProvider client={client}>
+            <ErrorProvider>
+              <BbnRpcProvider>
+                <WalletConnectionProvider>
+                  <BTCWalletProvider>
+                    <CosmosWalletProvider>
+                      <AppState>
+                        <StakingStatsProvider>
+                          <ReactQueryStreamedHydration>
+                            {children}
+                          </ReactQueryStreamedHydration>
+                        </StakingStatsProvider>
+                      </AppState>
+                    </CosmosWalletProvider>
+                  </BTCWalletProvider>
+                </WalletConnectionProvider>
+              </BbnRpcProvider>
+            </ErrorProvider>
+            <ReactQueryDevtools
+              buttonPosition="bottom-left"
+              initialIsOpen={false}
+            />
+          </QueryClientProvider>
+          <NotificationContainer />
+        </ThemeProvider>
+      </ScrollLocker>
+    </Suspense>
   );
 }
 

From 6db4b947547ef20f5663c52a9803f2e710005793 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Wed, 15 Jan 2025 13:43:06 +0700
Subject: [PATCH 5/5] resolve comments

---
 .../Staking/FinalityProviders/FinalityProviderTable.tsx          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx
index 83da674e..b658533c 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx
@@ -82,7 +82,6 @@ export const FinalityProviderTable = ({
   return (
     <div className="h-[21rem] overflow-y-auto ">
       <Table
-        key={`${filter.search}-${filter.status}`}
         data={tableData}
         columns={finalityProviderColumns}
         loading={isFetching}