From bc80afe2925ef33220285699a6d6c748bbc0340f Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 12 Dec 2024 20:14:48 +0800
Subject: [PATCH 1/7] add use client

---
 package-lock.json                                 |  4 ++--
 package.json                                      |  2 +-
 .../FinalityProviders/FinalityProviderSearch.tsx  | 15 ++++-----------
 3 files changed, 7 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 21ac8bdd..47ee79ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "simple-staking",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "simple-staking",
-      "version": "0.3.21",
+      "version": "0.3.22",
       "dependencies": {
         "@babylonlabs-io/btc-staking-ts": "0.3.0",
         "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
diff --git a/package.json b/package.json
index 30e50b8a..cc8613a6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "simple-staking",
-  "version": "0.3.21",
+  "version": "0.3.22",
   "private": true,
   "scripts": {
     "dev": "next dev",
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
index 6889d7e2..4beaea60 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import { useDebounce } from "@uidotdev/usehooks";
 import { useSearchParams } from "next/navigation";
 import React, { useEffect, useState } from "react";
@@ -10,21 +12,12 @@ interface FinalityProviderSearchProps {
 export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
   onSearch,
 }) => {
-  // Get the finality provider from the search params
   const searchParams = useSearchParams();
-  const initialSearchFp = searchParams.get("fp");
+  const initialSearchTerm = searchParams.get("fp") || "";
 
-  const [searchTerm, setSearchTerm] = useState(initialSearchFp || "");
+  const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
   const debouncedSearchTerm = useDebounce(searchTerm, 300);
 
-  // Effect for handling initial search
-  useEffect(() => {
-    if (initialSearchFp) {
-      onSearch(initialSearchFp);
-    }
-  }, [initialSearchFp, onSearch]);
-
-  // Effect for handling subsequent searches
   useEffect(() => {
     onSearch(debouncedSearchTerm);
   }, [debouncedSearchTerm, onSearch]);

From f7f4fdbfc4dea204cba06c685f9ce57c23e59846 Mon Sep 17 00:00:00 2001
From: Filippos Malandrakis <philmln@protonmail.com>
Date: Thu, 12 Dec 2024 16:02:48 +0200
Subject: [PATCH 2/7] push image

---
 .github/workflows/publish.yaml | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml
index 0e6d228a..d423d103 100644
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@@ -3,9 +3,6 @@ name: docker_publish
 on:
   push:
     branches:
-      - "main"
-      - "v0.3.x"
-    tags:
       - "*"
 
 jobs:

From 0b19e5a79a5ff220ff82791c624800f5e6713d81 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 12 Dec 2024 22:27:15 +0800
Subject: [PATCH 3/7] use client

---
 src/app/hooks/finalityProviders/useFinalityProvidersData.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/app/hooks/finalityProviders/useFinalityProvidersData.ts b/src/app/hooks/finalityProviders/useFinalityProvidersData.ts
index 97d08c20..1430f429 100644
--- a/src/app/hooks/finalityProviders/useFinalityProvidersData.ts
+++ b/src/app/hooks/finalityProviders/useFinalityProvidersData.ts
@@ -1,3 +1,5 @@
+"use client";
+
 import { useCallback, useEffect, useState } from "react";
 
 import { FinalityProvider as FinalityProviderInterface } from "@/app/types/finalityProviders";

From c478d1de1d73c8bc8a179a3f69567093427a49a2 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 12 Dec 2024 23:14:01 +0800
Subject: [PATCH 4/7] test handleSearch

---
 .../useFinalityProvidersData.ts               | 47 +++++++++++++++----
 1 file changed, 39 insertions(+), 8 deletions(-)

diff --git a/src/app/hooks/finalityProviders/useFinalityProvidersData.ts b/src/app/hooks/finalityProviders/useFinalityProvidersData.ts
index 1430f429..c105f99f 100644
--- a/src/app/hooks/finalityProviders/useFinalityProvidersData.ts
+++ b/src/app/hooks/finalityProviders/useFinalityProvidersData.ts
@@ -1,5 +1,6 @@
 "use client";
 
+import { useSearchParams } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 
 import { FinalityProvider as FinalityProviderInterface } from "@/app/types/finalityProviders";
@@ -8,19 +9,49 @@ export const useFinalityProvidersData = (
   initialProviders: FinalityProviderInterface[] | undefined,
 ) => {
   const [filteredProviders, setFilteredProviders] = useState(initialProviders);
+  const searchParams = useSearchParams();
 
+  // Initialize with search param if it exists
   useEffect(() => {
-    setFilteredProviders(initialProviders);
-  }, [initialProviders]);
+    const fpParam = searchParams.get("fp");
+    console.log("[useFinalityProvidersData] Initial fp param:", fpParam);
+
+    if (fpParam) {
+      handleSearch(fpParam);
+    } else {
+      setFilteredProviders(initialProviders);
+    }
+  }, [initialProviders]); // Only run on initial load and when providers change
 
   const handleSearch = useCallback(
     (searchTerm: string) => {
-      const filtered = initialProviders?.filter(
-        (fp) =>
-          fp.description?.moniker
-            ?.toLowerCase()
-            .includes(searchTerm.toLowerCase()) ||
-          fp.btcPk.toLowerCase().includes(searchTerm.toLowerCase()),
+      console.log("[useFinalityProvidersData] Searching for:", searchTerm);
+      console.log(
+        "[useFinalityProvidersData] Initial providers:",
+        initialProviders?.length,
+      );
+
+      const filtered = initialProviders?.filter((fp) => {
+        const matchesMoniker = fp.description?.moniker
+          ?.toLowerCase()
+          .includes(searchTerm.toLowerCase());
+        const matchesPk = fp.btcPk
+          .toLowerCase()
+          .includes(searchTerm.toLowerCase());
+
+        console.log("[useFinalityProvidersData] Provider:", {
+          moniker: fp.description?.moniker,
+          pk: fp.btcPk,
+          matchesMoniker,
+          matchesPk,
+        });
+
+        return matchesMoniker || matchesPk;
+      });
+
+      console.log(
+        "[useFinalityProvidersData] Filtered results:",
+        filtered?.length,
       );
       setFilteredProviders(filtered);
     },

From 072fb210263d01ff311c08f1619e9a0550304ae9 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Fri, 13 Dec 2024 02:02:10 +0800
Subject: [PATCH 5/7] remove comments

---
 .../useFinalityProvidersData.ts                | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/src/app/hooks/finalityProviders/useFinalityProvidersData.ts b/src/app/hooks/finalityProviders/useFinalityProvidersData.ts
index c105f99f..858aca17 100644
--- a/src/app/hooks/finalityProviders/useFinalityProvidersData.ts
+++ b/src/app/hooks/finalityProviders/useFinalityProvidersData.ts
@@ -14,7 +14,6 @@ export const useFinalityProvidersData = (
   // Initialize with search param if it exists
   useEffect(() => {
     const fpParam = searchParams.get("fp");
-    console.log("[useFinalityProvidersData] Initial fp param:", fpParam);
 
     if (fpParam) {
       handleSearch(fpParam);
@@ -25,12 +24,6 @@ export const useFinalityProvidersData = (
 
   const handleSearch = useCallback(
     (searchTerm: string) => {
-      console.log("[useFinalityProvidersData] Searching for:", searchTerm);
-      console.log(
-        "[useFinalityProvidersData] Initial providers:",
-        initialProviders?.length,
-      );
-
       const filtered = initialProviders?.filter((fp) => {
         const matchesMoniker = fp.description?.moniker
           ?.toLowerCase()
@@ -39,20 +32,9 @@ export const useFinalityProvidersData = (
           .toLowerCase()
           .includes(searchTerm.toLowerCase());
 
-        console.log("[useFinalityProvidersData] Provider:", {
-          moniker: fp.description?.moniker,
-          pk: fp.btcPk,
-          matchesMoniker,
-          matchesPk,
-        });
-
         return matchesMoniker || matchesPk;
       });
 
-      console.log(
-        "[useFinalityProvidersData] Filtered results:",
-        filtered?.length,
-      );
       setFilteredProviders(filtered);
     },
     [initialProviders],

From 8dbb22806163008ac769f79f7374cdda05f34ebf Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Fri, 13 Dec 2024 02:21:38 +0800
Subject: [PATCH 6/7] revert push image

---
 .github/workflows/publish.yaml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/publish.yaml b/.github/workflows/publish.yaml
index d423d103..0e6d228a 100644
--- a/.github/workflows/publish.yaml
+++ b/.github/workflows/publish.yaml
@@ -3,6 +3,9 @@ name: docker_publish
 on:
   push:
     branches:
+      - "main"
+      - "v0.3.x"
+    tags:
       - "*"
 
 jobs:

From 2f3a587659f82c4abd455cdada7309b40763aec5 Mon Sep 17 00:00:00 2001
From: David Totraev <totraev@gmail.com>
Date: Fri, 13 Dec 2024 08:05:50 +0500
Subject: [PATCH 7/7] fix: replace useEffect with useMemo

---
 .../FinalityProviderSearch.tsx                | 21 +++-------
 .../FinalityProviders/FinalityProviders.tsx   | 10 +++--
 .../useFinalityProvidersData.ts               | 40 ++++++++-----------
 3 files changed, 28 insertions(+), 43 deletions(-)

diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
index 4beaea60..f2f6a9d2 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
@@ -1,29 +1,19 @@
 "use client";
 
-import { useDebounce } from "@uidotdev/usehooks";
-import { useSearchParams } from "next/navigation";
-import React, { useEffect, useState } from "react";
+import React from "react";
 import { FiSearch } from "react-icons/fi";
 
 interface FinalityProviderSearchProps {
+  searchValue: string;
   onSearch: (searchTerm: string) => void;
 }
 
 export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
+  searchValue,
   onSearch,
 }) => {
-  const searchParams = useSearchParams();
-  const initialSearchTerm = searchParams.get("fp") || "";
-
-  const [searchTerm, setSearchTerm] = useState(initialSearchTerm);
-  const debouncedSearchTerm = useDebounce(searchTerm, 300);
-
-  useEffect(() => {
-    onSearch(debouncedSearchTerm);
-  }, [debouncedSearchTerm, onSearch]);
-
   const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSearchTerm(e.target.value);
+    onSearch(e.target.value);
   };
 
   return (
@@ -32,10 +22,11 @@ export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
         <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={searchTerm}
+          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"
         />
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
index 7794ef13..a40efed7 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
@@ -92,9 +92,8 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
     handleError,
   ]);
 
-  const { handleSearch, filteredProviders } = useFinalityProvidersData(
-    fps?.finalityProviders,
-  );
+  const { searchValue, handleSearch, filteredProviders } =
+    useFinalityProvidersData(fps?.finalityProviders);
 
   if (!fps?.finalityProviders?.length) {
     return <LoadingView />;
@@ -106,7 +105,10 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
         <strong>Step-1:</strong> Select a finality provider
       </p>
       <div className="flex gap-3">
-        <FinalityProviderSearch onSearch={handleSearch} />
+        <FinalityProviderSearch
+          searchValue={searchValue}
+          onSearch={handleSearch}
+        />
       </div>
       <div className="hidden gap-2 px-4 lg:grid lg:grid-cols-stakingFinalityProvidersDesktop">
         <p>Finality Provider</p>
diff --git a/src/app/hooks/finalityProviders/useFinalityProvidersData.ts b/src/app/hooks/finalityProviders/useFinalityProvidersData.ts
index 858aca17..60c50647 100644
--- a/src/app/hooks/finalityProviders/useFinalityProvidersData.ts
+++ b/src/app/hooks/finalityProviders/useFinalityProvidersData.ts
@@ -1,48 +1,40 @@
 "use client";
 
+import { useDebounce } from "@uidotdev/usehooks";
 import { useSearchParams } from "next/navigation";
-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 
 import { FinalityProvider as FinalityProviderInterface } from "@/app/types/finalityProviders";
 
 export const useFinalityProvidersData = (
   initialProviders: FinalityProviderInterface[] | undefined,
 ) => {
-  const [filteredProviders, setFilteredProviders] = useState(initialProviders);
   const searchParams = useSearchParams();
+  const [searchTerm, setSearchTerm] = useState(searchParams.get("fp") || "");
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
 
-  // Initialize with search param if it exists
-  useEffect(() => {
-    const fpParam = searchParams.get("fp");
-
-    if (fpParam) {
-      handleSearch(fpParam);
-    } else {
-      setFilteredProviders(initialProviders);
-    }
-  }, [initialProviders]); // Only run on initial load and when providers change
-
-  const handleSearch = useCallback(
-    (searchTerm: string) => {
-      const filtered = initialProviders?.filter((fp) => {
+  const filteredProviders = useMemo(
+    () =>
+      initialProviders?.filter((fp) => {
         const matchesMoniker = fp.description?.moniker
           ?.toLowerCase()
-          .includes(searchTerm.toLowerCase());
+          .includes(debouncedSearchTerm.toLowerCase());
         const matchesPk = fp.btcPk
           .toLowerCase()
-          .includes(searchTerm.toLowerCase());
+          .includes(debouncedSearchTerm.toLowerCase());
 
         return matchesMoniker || matchesPk;
-      });
-
-      setFilteredProviders(filtered);
-    },
-    [initialProviders],
+      }),
+    [initialProviders, debouncedSearchTerm],
   );
 
+  const handleSearch = useCallback((searchValue: string) => {
+    setSearchTerm(searchValue);
+  }, []);
+
   return {
     filteredProviders,
-    setFilteredProviders,
     handleSearch,
+    searchValue: searchTerm,
   };
 };