table improvement and include search params (#520)

babylonlabs-io · Dec 18, 2024 · 7c29fd9 · 7c29fd9
1 parent d71d57f
commit 7c29fd9
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 37 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/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",

diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx b/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>
   );

diff --git a/src/app/state/FinalityProviderState.tsx b/src/app/state/FinalityProviderState.tsx
@@ -1,5 +1,7 @@
 import { useDebounce } from "@uidotdev/usehooks";
+import { useSearchParams } from "next/navigation";
 import {
+  Suspense,
   useCallback,
   useEffect,
   useMemo,
@@ -45,30 +47,39 @@ 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 defaultState: FinalityProviderState = {
+  searchValue: "",
+  filterValue: "",
+  finalityProviders: [],
+  selectedFinalityProvider: null,
+  hasNextPage: false,
+  isFetching: false,
+  hasError: false,
+  isRowSelectable: () => false,
+  handleSearch: () => {},
+  handleSort: () => {},
+  handleFilter: () => {},
+  handleRowSelect: () => {},
+  getFinalityProviderMoniker: () => "-",
+  fetchNextPage: () => {},
+};
+
 const { StateProvider, useState: useFpState } =
-  createStateUtils<FinalityProviderState>({
-    searchValue: "",
-    filterValue: "active",
-    finalityProviders: [],
-    selectedFinalityProvider: null,
-    hasNextPage: false,
-    isFetching: false,
-    hasError: false,
-    handleSearch: () => {},
-    handleSort: () => {},
-    handleFilter: () => {},
-    handleRowSelect: () => {},
-    getFinalityProviderMoniker: () => "-",
-    fetchNextPage: () => {},
-  });
+  createStateUtils<FinalityProviderState>(defaultState);
+
+function FinalityProviderStateInner({ children }: PropsWithChildren) {
+  const searchParams = useSearchParams();
+  const fpParam = searchParams.get("fp");
 
-export function FinalityProviderState({ children }: PropsWithChildren) {
   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 +94,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 +120,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 +169,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,11 +200,22 @@ export function FinalityProviderState({ children }: PropsWithChildren) {
     handleSort,
     handleFilter,
     handleRowSelect,
+    isRowSelectable,
     getFinalityProviderMoniker,
     fetchNextPage,
   };
 
   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 };