table improvement and include search params

package.json

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

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

@@ -19,6 +19,7 @@ export const FinalityProviderTable = () => {
     filterValue,
     hasError,
     handleRowSelect,
+    isRowSelectable,
   } = useFinalityProviderState();
 
   const tableData = useMemo(() => {
@@ -70,6 +71,7 @@ export const FinalityProviderTable = () => {
         hasMore={hasNextPage}
         onLoadMore={fetchNextPage}
         onRowSelect={handleRowSelect}
+        isRowSelectable={isRowSelectable}
       />
     </div>
   );

src/app/state/FinalityProviderState.tsx

@@ -1,4 +1,5 @@
 import { useDebounce } from "@uidotdev/usehooks";
+import { useSearchParams } from "next/navigation";
 import {
   useCallback,
   useEffect,
@@ -45,19 +46,21 @@ interface FinalityProviderState {
   handleSort: (sortField: string) => void;
   handleFilter: (value: string | number) => void;
   handleRowSelect: (row: FinalityProvider | null) => void;
+  isRowSelectable: (row: FinalityProvider) => boolean;
   getFinalityProviderMoniker: (btcPkHex: string) => string;
   fetchNextPage: () => void;
 }
 
 const { StateProvider, useState: useFpState } =
   createStateUtils<FinalityProviderState>({
     searchValue: "",
-    filterValue: "active",
+    filterValue: "",
     finalityProviders: [],
     selectedFinalityProvider: null,
     hasNextPage: false,
     isFetching: false,
     hasError: false,
+    isRowSelectable: () => false,
     handleSearch: () => {},
     handleSort: () => {},
     handleFilter: () => {},
@@ -67,8 +70,13 @@ const { StateProvider, useState: useFpState } =
   });
 
 export function FinalityProviderState({ children }: PropsWithChildren) {
+  const searchParams = useSearchParams();
+  const fpParam = searchParams.get("fp");
+
   const [searchValue, setSearchValue] = useState("");
-  const [filterValue, setFilterValue] = useState<string | number>("active");
+  const [filterValue, setFilterValue] = useState<string | number>(
+    fpParam ? "" : "active",
+  );
   const [sortState, setSortState] = useState<SortState>({});
   const [selectedFinalityProvider, setSelectedFinalityProvider] =
     useState<FinalityProvider | null>(null);
@@ -83,19 +91,6 @@ export function FinalityProviderState({ children }: PropsWithChildren) {
       name: debouncedSearch,
     });
 
-  useEffect(() => {
-    if (isError && error) {
-      showError({
-        error: {
-          message: error.message,
-          errorState: ErrorState.SERVER_ERROR,
-        },
-        retryAction: fetchNextPage,
-      });
-      captureError(error);
-    }
-  }, [isError, error, showError, captureError, fetchNextPage]);
-
   const handleSearch = useCallback((searchTerm: string) => {
     setSearchValue(searchTerm);
   }, []);
@@ -122,6 +117,10 @@ export function FinalityProviderState({ children }: PropsWithChildren) {
     setSelectedFinalityProvider(row);
   }, []);
 
+  const isRowSelectable = useCallback((row: FinalityProvider) => {
+    return row.state === FinalityProviderStateEnum.ACTIVE;
+  }, []);
+
   const filteredFinalityProviders = useMemo(() => {
     if (!data?.finalityProviders) return [];
 
@@ -167,6 +166,25 @@ export function FinalityProviderState({ children }: PropsWithChildren) {
     [filteredFinalityProviders],
   );
 
+  useEffect(() => {
+    if (fpParam && data?.finalityProviders) {
+      handleSearch(fpParam);
+    }
+  }, [fpParam, data?.finalityProviders, handleSearch]);
+
+  useEffect(() => {
+    if (isError && error) {
+      showError({
+        error: {
+          message: error.message,
+          errorState: ErrorState.SERVER_ERROR,
+        },
+        retryAction: fetchNextPage,
+      });
+      captureError(error);
+    }
+  }, [isError, error, showError, captureError, fetchNextPage]);
+
   const state = {
     searchValue,
     filterValue,
@@ -179,6 +197,7 @@ export function FinalityProviderState({ children }: PropsWithChildren) {
     handleSort,
     handleFilter,
     handleRowSelect,
+    isRowSelectable,
     getFinalityProviderMoniker,
     fetchNextPage,
   };