resolve the conflicts in the finality provider component

.github/workflows/sync_pr_dev_to_main.yml

@@ -0,0 +1,17 @@
+name: Create Sync PR from Main to Dev
+
+on:
+  schedule:
+    - cron: "0 0 * * *"
+
+permissions:
+  pull-requests: write
+
+jobs:
+  call_sync_branch:
+    uses: babylonlabs-io/.github/.github/workflows/[email protected]
+    with:
+      base_branch: "main"
+      target_branch: "dev"
+      reviewers: "jrwbabylonlab,gbarkhatov,jeremy-babylonlabs"
+    secrets: inherit

package.json

@@ -29,9 +29,11 @@
     "@tanstack/react-query": "^5.28.14",
     "@tanstack/react-query-next-experimental": "^5.28.14",
     "axios": "^1.7.4",
+    "@uidotdev/usehooks": "^2.4.1",
     "bitcoinjs-lib": "^6.1.5",
-    "btc-staking-ts": "^0.2.8",
+    "btc-staking-ts": "^0.2.10",
     "date-fns": "^3.6.0",
+    "decimal.js-light": "^2.5.1",
     "framer-motion": "^11.1.9",
     "next": "14.1.3",
     "next-themes": "^0.3.0",

src/app/components/Delegations/Delegation.tsx

@@ -14,7 +14,6 @@ import { maxDecimals } from "@/utils/maxDecimals";
 import { trim } from "@/utils/trim";
 
 interface DelegationProps {
-  finalityProviderMoniker: string;
   stakingTx: StakingTx;
   stakingValueSat: number;
   stakingTxHash: string;

src/app/components/Delegations/Delegations.tsx

@@ -29,7 +29,6 @@ import {
 import { Delegation } from "./Delegation";
 
 interface DelegationsProps {
-  finalityProvidersKV: Record<string, string>;
   delegationsAPI: DelegationInterface[];
   delegationsLocalStorage: DelegationInterface[];
   globalParamsVersion: GlobalParamsVersion;
@@ -43,7 +42,6 @@ interface DelegationsProps {
 }
 
 export const Delegations: React.FC<DelegationsProps> = ({
-  finalityProvidersKV,
   delegationsAPI,
   delegationsLocalStorage,
   globalParamsVersion,
@@ -264,9 +262,6 @@ export const Delegations: React.FC<DelegationsProps> = ({
                   state,
                   isOverflow,
                 } = delegation;
-                // Get the moniker of the finality provider
-                const finalityProviderMoniker =
-                  finalityProvidersKV[finalityProviderPkHex];
                 const intermediateDelegation =
                   intermediateDelegationsLocalStorage.find(
                     (item) => item.stakingTxHashHex === stakingTxHashHex,
@@ -275,7 +270,6 @@ export const Delegations: React.FC<DelegationsProps> = ({
                 return (
                   <Delegation
                     key={stakingTxHashHex + stakingTx.startHeight}
-                    finalityProviderMoniker={finalityProviderMoniker}
                     stakingTx={stakingTx}
                     stakingValueSat={stakingValueSat}
                     stakingTxHash={stakingTxHashHex}

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

@@ -0,0 +1,39 @@
+import { useDebounce } from "@uidotdev/usehooks";
+import React, { useEffect, useState } from "react";
+import { FiSearch } from "react-icons/fi";
+
+interface FinalityProviderSearchProps {
+  onSearch: (searchTerm: string) => void;
+}
+
+export const FinalityProviderSearch: React.FC<FinalityProviderSearchProps> = ({
+  onSearch,
+}) => {
+  const [searchTerm, setSearchTerm] = useState("");
+  const debouncedSearchTerm = useDebounce(searchTerm, 300);
+
+  useEffect(() => {
+    onSearch(debouncedSearchTerm);
+  }, [debouncedSearchTerm, onSearch]);
+
+  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(e.target.value);
+  };
+
+  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={searchTerm}
+          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>
+  );
+};