From c8603007bae205a87864c6eab37d7935629fe274 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Mon, 13 Jan 2025 11:30:39 +0700
Subject: [PATCH] support phase 1 fp name

---
 src/app/api/getFinalityProviders.ts           |   9 +-
 src/app/api/getFinalityProvidersV2.ts         |  99 +++++++++
 .../FinalityProviderColumns.tsx               |  16 +-
 .../FinalityProviderFilter.tsx                |   4 +-
 .../FinalityProviderSearch.tsx                |   4 +-
 .../FinalityProviderTable.tsx                 |   4 +-
 .../FinalityProviders/FinalityProviders.tsx   |  31 ++-
 .../hooks/client/api/useFinalityProviders.ts  |   2 +-
 .../client/api/useFinalityProvidersV2.ts      |  67 ++++++
 src/app/state/FinalityProviderState.tsx       | 160 +-------------
 src/app/state/FinalityProviderV2State.tsx     | 195 ++++++++++++++++++
 src/app/state/index.tsx                       |   2 +
 src/app/types/finalityProviders.ts            |  19 +-
 src/app/types/finalityProvidersV2.ts          |  35 ++++
 .../components/FinalityProviderMoniker.tsx    |   6 +-
 src/components/staking/StakingModal/index.tsx |   4 +-
 16 files changed, 452 insertions(+), 205 deletions(-)
 create mode 100644 src/app/api/getFinalityProvidersV2.ts
 create mode 100644 src/app/hooks/client/api/useFinalityProvidersV2.ts
 create mode 100644 src/app/state/FinalityProviderV2State.tsx
 create mode 100644 src/app/types/finalityProvidersV2.ts

diff --git a/src/app/api/getFinalityProviders.ts b/src/app/api/getFinalityProviders.ts
index 2b67b778..ac8b1bde 100644
--- a/src/app/api/getFinalityProviders.ts
+++ b/src/app/api/getFinalityProviders.ts
@@ -1,10 +1,7 @@
 import { isValidUrl } from "@/utils/url";
 
 import { Pagination } from "../types/api";
-import {
-  FinalityProvider,
-  FinalityProviderState,
-} from "../types/finalityProviders";
+import { FinalityProvider } from "../types/finalityProviders";
 
 import { apiWrapper } from "./apiWrapper";
 
@@ -20,7 +17,7 @@ interface FinalityProvidersAPIResponse {
 
 interface FinalityProviderAPI {
   description: DescriptionAPI;
-  state: FinalityProviderState;
+  state: "active" | "standby";
   commission: string;
   btc_pk: string;
   active_tvl: number;
@@ -60,7 +57,7 @@ export const getFinalityProviders = async ({
 
   const response = await apiWrapper(
     "GET",
-    "/v2/finality-providers",
+    "/v1/finality-providers",
     "Error getting finality providers",
     { query: params },
   );
diff --git a/src/app/api/getFinalityProvidersV2.ts b/src/app/api/getFinalityProvidersV2.ts
new file mode 100644
index 00000000..f229b77f
--- /dev/null
+++ b/src/app/api/getFinalityProvidersV2.ts
@@ -0,0 +1,99 @@
+import { isValidUrl } from "@/utils/url";
+
+import { Pagination } from "../types/api";
+import {
+  FinalityProviderState,
+  FinalityProviderV2,
+} from "../types/finalityProvidersV2";
+
+import { apiWrapper } from "./apiWrapper";
+
+export interface PaginatedFinalityProviders {
+  finalityProviders: FinalityProviderV2[];
+  pagination: Pagination;
+}
+
+interface FinalityProvidersAPIResponse {
+  data: FinalityProviderAPI[];
+  pagination: Pagination;
+}
+
+interface FinalityProviderAPI {
+  description: DescriptionAPI;
+  state: FinalityProviderState;
+  commission: string;
+  btc_pk: string;
+  active_tvl: number;
+  total_tvl: number;
+  active_delegations: number;
+  total_delegations: number;
+}
+
+interface DescriptionAPI {
+  moniker: string;
+  identity: string;
+  website: string;
+  security_contact: string;
+  details: string;
+}
+
+export const getFinalityProvidersV2 = async ({
+  key,
+  pk,
+  sortBy,
+  order,
+  name,
+}: {
+  key: string;
+  name?: string;
+  sortBy?: string;
+  order?: "asc" | "desc";
+  pk?: string;
+}): Promise<PaginatedFinalityProviders> => {
+  const params = {
+    pagination_key: key,
+    finality_provider_pk: pk,
+    sort_by: sortBy,
+    order,
+    name,
+  };
+
+  const response = await apiWrapper(
+    "GET",
+    "/v2/finality-providers",
+    "Error getting finality providers",
+    { query: params },
+  );
+
+  const finalityProvidersAPIResponse: FinalityProvidersAPIResponse =
+    response.data;
+  const finalityProvidersAPI: FinalityProviderAPI[] =
+    finalityProvidersAPIResponse.data;
+
+  const finalityProviders = finalityProvidersAPI.map(
+    (fp: FinalityProviderAPI): FinalityProviderV2 => ({
+      description: {
+        moniker: fp.description.moniker,
+        identity: fp.description.identity,
+        website: isValidUrl(fp.description.website)
+          ? fp.description.website
+          : "",
+        securityContact: fp.description.security_contact,
+        details: fp.description.details,
+      },
+      state: fp.state,
+      commission: fp.commission,
+      btcPk: fp.btc_pk,
+      activeTVLSat: fp.active_tvl,
+      totalTVLSat: fp.total_tvl,
+      activeDelegations: fp.active_delegations,
+      totalDelegations: fp.total_delegations,
+    }),
+  );
+
+  const pagination: Pagination = {
+    next_key: finalityProvidersAPIResponse.pagination.next_key,
+  };
+
+  return { finalityProviders, pagination };
+};
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderColumns.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderColumns.tsx
index e40408e7..e1bf5461 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderColumns.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderColumns.tsx
@@ -2,10 +2,10 @@
 
 import { Hash } from "@/app/components/Hash/Hash";
 import {
-  FinalityProvider,
   FinalityProviderState,
   FinalityProviderStateLabels,
-} from "@/app/types/finalityProviders";
+  FinalityProviderV2,
+} from "@/app/types/finalityProvidersV2";
 import { getNetworkConfigBTC } from "@/config/network/btc";
 import { satoshiToBtc } from "@/utils/btc";
 import { maxDecimals } from "@/utils/maxDecimals";
@@ -20,7 +20,7 @@ export const finalityProviderColumns = [
   {
     key: "moniker",
     header: "Finality Provider",
-    render: (_: unknown, row?: FinalityProvider) => {
+    render: (_: unknown, row?: FinalityProviderV2) => {
       if (!row) return null;
       return (
         <div className="flex items-center gap-2">
@@ -37,7 +37,7 @@ export const finalityProviderColumns = [
         </div>
       );
     },
-    sorter: (a?: FinalityProvider, b?: FinalityProvider) => {
+    sorter: (a?: FinalityProviderV2, b?: FinalityProviderV2) => {
       const monikerA = a?.description?.moniker || "";
       const monikerB = b?.description?.moniker || "";
       return monikerA.localeCompare(monikerB);
@@ -50,7 +50,7 @@ export const finalityProviderColumns = [
       if (value == null) return "Unknown";
       return mapStatus(value as FinalityProviderState);
     },
-    sorter: (a?: FinalityProvider, b?: FinalityProvider) => {
+    sorter: (a?: FinalityProviderV2, b?: FinalityProviderV2) => {
       const stateA = a?.state || "unknown";
       const stateB = b?.state || "unknown";
       return stateA.localeCompare(stateB);
@@ -59,7 +59,7 @@ export const finalityProviderColumns = [
   {
     key: "btcPk",
     header: `${coinSymbol} PK`,
-    render: (_: unknown, row?: FinalityProvider) => {
+    render: (_: unknown, row?: FinalityProviderV2) => {
       if (!row?.btcPk) return null;
       return <Hash value={row.btcPk} address small noFade />;
     },
@@ -72,7 +72,7 @@ export const finalityProviderColumns = [
       if (isNaN(amount)) return "-";
       return `${maxDecimals(satoshiToBtc(amount), 8)} ${coinSymbol}`;
     },
-    sorter: (a?: FinalityProvider, b?: FinalityProvider) => {
+    sorter: (a?: FinalityProviderV2, b?: FinalityProviderV2) => {
       const valueA = a?.activeTVLSat ?? 0;
       const valueB = b?.activeTVLSat ?? 0;
       return valueA - valueB;
@@ -86,7 +86,7 @@ export const finalityProviderColumns = [
       if (isNaN(commission)) return "-";
       return `${maxDecimals(commission * 100, 2)}%`;
     },
-    sorter: (a?: FinalityProvider, b?: FinalityProvider) => {
+    sorter: (a?: FinalityProviderV2, b?: FinalityProviderV2) => {
       const commissionA = Number(a?.commission) || 0;
       const commissionB = Number(b?.commission) || 0;
       return commissionA - commissionB;
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx
index ed4abb4c..0b48fd8f 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx
@@ -1,6 +1,6 @@
 import { Select } from "@babylonlabs-io/bbn-core-ui";
 
-import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
+import { useFinalityProviderV2State } from "@/app/state/FinalityProviderV2State";
 
 const options = [
   { value: "active", label: "Active" },
@@ -8,7 +8,7 @@ const options = [
 ];
 
 export const FinalityProviderFilter = () => {
-  const { filterValue, handleFilter } = useFinalityProviderState();
+  const { filterValue, handleFilter } = useFinalityProviderV2State();
 
   return (
     <Select
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
index a5388572..f4b42a74 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
@@ -2,10 +2,10 @@ import { Input } from "@babylonlabs-io/bbn-core-ui";
 import { useCallback } from "react";
 import { RiSearchLine } from "react-icons/ri";
 
-import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
+import { useFinalityProviderV2State } from "@/app/state/FinalityProviderV2State";
 
 export const FinalityProviderSearch = () => {
-  const { handleSearch, searchValue } = useFinalityProviderState();
+  const { handleSearch, searchValue } = useFinalityProviderV2State();
 
   const onSearchChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx
index 4f39eda6..00fa3e88 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx
@@ -4,7 +4,7 @@ import { useMemo } from "react";
 
 import warningOctagon from "@/app/assets/warning-octagon.svg";
 import warningTriangle from "@/app/assets/warning-triangle.svg";
-import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
+import { useFinalityProviderV2State } from "@/app/state/FinalityProviderV2State";
 
 import { finalityProviderColumns } from "./FinalityProviderColumns";
 import { StatusView } from "./FinalityProviderTableStatusView";
@@ -25,7 +25,7 @@ export const FinalityProviderTable = ({
     filterValue,
     hasError,
     isRowSelectable,
-  } = useFinalityProviderState();
+  } = useFinalityProviderV2State();
 
   const tableData = useMemo(() => {
     if (!finalityProviders) return [];
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
index 070d9711..0dd887f3 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
@@ -4,23 +4,19 @@ import {
   Text,
   useFormContext,
 } from "@babylonlabs-io/bbn-core-ui";
+import { Suspense } from "react";
+
+import { LoadingTableList } from "@/app/components/Loading/Loading";
 
 import { FinalityProviderFilter } from "./FinalityProviderFilter";
 import { FinalityProviderSearch } from "./FinalityProviderSearch";
 import { FinalityProviderTable } from "./FinalityProviderTable";
 
-export const FinalityProviders = () => {
+const FinalityProviderContent = () => {
   const { setValue } = useFormContext();
 
   return (
-    <div className="flex flex-col gap-4">
-      <Heading variant="h5" className="text-primary-dark">
-        Step 1
-      </Heading>
-      <Text variant="body1" className="text-primary-dark">
-        Select a Finality Provider
-      </Text>
-
+    <>
       <div className="flex flex-col md:flex-row gap-4">
         <div className="flex-1">
           <FinalityProviderSearch />
@@ -41,6 +37,23 @@ export const FinalityProviders = () => {
       />
 
       <HiddenField name="finalityProvider" defaultValue="" />
+    </>
+  );
+};
+
+export const FinalityProviders = () => {
+  return (
+    <div className="flex flex-col gap-4">
+      <Heading variant="h5" className="text-primary-dark">
+        Step 1
+      </Heading>
+      <Text variant="body1" className="text-primary-dark">
+        Select a Finality Provider
+      </Text>
+
+      <Suspense fallback={<LoadingTableList />}>
+        <FinalityProviderContent />
+      </Suspense>
     </div>
   );
 };
diff --git a/src/app/hooks/client/api/useFinalityProviders.ts b/src/app/hooks/client/api/useFinalityProviders.ts
index 3bab3656..13275276 100644
--- a/src/app/hooks/client/api/useFinalityProviders.ts
+++ b/src/app/hooks/client/api/useFinalityProviders.ts
@@ -9,7 +9,7 @@ import { ONE_MINUTE } from "@/app/constants";
 import { useError } from "@/app/context/Error/ErrorContext";
 import { ErrorState } from "@/app/types/errors";
 
-const FINALITY_PROVIDERS_KEY = "GET_FINALITY_PROVIDERS_V2_KEY";
+const FINALITY_PROVIDERS_KEY = "GET_FINALITY_PROVIDERS_V1_KEY";
 
 interface Params {
   pk?: string;
diff --git a/src/app/hooks/client/api/useFinalityProvidersV2.ts b/src/app/hooks/client/api/useFinalityProvidersV2.ts
new file mode 100644
index 00000000..1917a7fe
--- /dev/null
+++ b/src/app/hooks/client/api/useFinalityProvidersV2.ts
@@ -0,0 +1,67 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
+
+import {
+  type PaginatedFinalityProviders,
+  getFinalityProvidersV2,
+} from "@/app/api/getFinalityProvidersV2";
+import { ONE_MINUTE } from "@/app/constants";
+import { useError } from "@/app/context/Error/ErrorContext";
+import { ErrorState } from "@/app/types/errors";
+
+const FINALITY_PROVIDERS_KEY = "GET_FINALITY_PROVIDERS_V2_KEY";
+
+interface Params {
+  pk?: string;
+  name?: string;
+  sortBy?: string;
+  order?: "asc" | "desc";
+}
+
+export function useFinalityProvidersV2({
+  pk,
+  sortBy,
+  order,
+  name,
+}: Params = {}) {
+  const { isErrorOpen, handleError, captureError } = useError();
+
+  const query = useInfiniteQuery({
+    queryKey: [FINALITY_PROVIDERS_KEY],
+    queryFn: ({ pageParam = "" }) =>
+      getFinalityProvidersV2({ key: pageParam, pk, sortBy, order, name }),
+    getNextPageParam: (lastPage) =>
+      lastPage?.pagination?.next_key !== ""
+        ? lastPage?.pagination?.next_key
+        : null,
+    initialPageParam: "",
+    refetchInterval: ONE_MINUTE,
+    placeholderData: (prev) => prev,
+    select: (data) => {
+      const flattenedData = data.pages.reduce<PaginatedFinalityProviders>(
+        (acc, page) => {
+          acc.finalityProviders.push(...page.finalityProviders);
+          acc.pagination = page.pagination;
+          return acc;
+        },
+        { finalityProviders: [], pagination: { next_key: "" } },
+      );
+      return flattenedData;
+    },
+    retry: (failureCount) => {
+      return !isErrorOpen && failureCount <= 3;
+    },
+  });
+
+  useEffect(() => {
+    handleError({
+      error: query.error,
+      hasError: query.isError,
+      errorState: ErrorState.SERVER_ERROR,
+      refetchFunction: query.refetch,
+    });
+    captureError(query.error);
+  }, [query.isError, query.error, query.refetch, handleError, captureError]);
+
+  return query;
+}
diff --git a/src/app/state/FinalityProviderState.tsx b/src/app/state/FinalityProviderState.tsx
index d3afccd0..e77a56d5 100644
--- a/src/app/state/FinalityProviderState.tsx
+++ b/src/app/state/FinalityProviderState.tsx
@@ -1,64 +1,23 @@
-import { useDebounce } from "@uidotdev/usehooks";
-import { useSearchParams } from "next/navigation";
-import {
-  Suspense,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  type PropsWithChildren,
-} from "react";
+import { useCallback, useMemo, type PropsWithChildren } from "react";
 
 import { useFinalityProviders } from "@/app/hooks/client/api/useFinalityProviders";
-import {
-  FinalityProviderState as FinalityProviderStateEnum,
-  type FinalityProvider,
-} from "@/app/types/finalityProviders";
+import { type FinalityProvider } from "@/app/types/finalityProviders";
 import { createStateUtils } from "@/utils/createStateUtils";
 
-interface SortState {
-  field?: string;
-  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 FinalityProviderState {
-  searchValue: string;
-  filterValue: string | number;
   finalityProviders: FinalityProvider[];
   hasNextPage: boolean;
   isFetching: boolean;
   hasError: boolean;
-  handleSearch: (searchTerm: string) => void;
-  handleSort: (sortField: string) => void;
-  handleFilter: (value: string | number) => void;
-  isRowSelectable: (row: FinalityProvider) => boolean;
   getFinalityProvider: (btcPkHex: string) => FinalityProvider | null;
   fetchNextPage: () => void;
 }
 
 const defaultState: FinalityProviderState = {
-  searchValue: "",
-  filterValue: "",
   finalityProviders: [],
   hasNextPage: false,
   isFetching: false,
   hasError: false,
-  isRowSelectable: () => false,
-  handleSearch: () => {},
-  handleSort: () => {},
-  handleFilter: () => {},
   getFinalityProvider: () => null,
   fetchNextPage: () => {},
 };
@@ -66,84 +25,9 @@ const defaultState: FinalityProviderState = {
 const { StateProvider, useState: useFpState } =
   createStateUtils<FinalityProviderState>(defaultState);
 
-function FinalityProviderStateInner({ children }: PropsWithChildren) {
-  const searchParams = useSearchParams();
-  const fpParam = searchParams.get("fp");
-
-  const [searchValue, setSearchValue] = useState("");
-  const [filterValue, setFilterValue] = useState<string | number>(
-    fpParam ? "" : "active",
-  );
-  const [sortState, setSortState] = useState<SortState>({});
-
-  const debouncedSearch = useDebounce(searchValue, 300);
-
+export function FinalityProviderState({ children }: PropsWithChildren) {
   const { data, hasNextPage, fetchNextPage, isFetching, isError } =
-    useFinalityProviders({
-      sortBy: sortState.field,
-      order: sortState.direction,
-      name: debouncedSearch,
-    });
-
-  const handleSearch = useCallback((searchTerm: string) => {
-    setSearchValue(searchTerm);
-  }, []);
-
-  const handleSort = useCallback((sortField: string) => {
-    setSortState(({ field, direction }) =>
-      field === sortField
-        ? {
-            field: SORT_DIRECTIONS[`${direction}`] ? field : undefined,
-            direction: SORT_DIRECTIONS[`${direction}`],
-          }
-        : {
-            field: sortField,
-            direction: "desc",
-          },
-    );
-  }, []);
-
-  const handleFilter = useCallback((value: string | number) => {
-    setFilterValue(value);
-  }, []);
-
-  const isRowSelectable = useCallback((row: FinalityProvider) => {
-    return (
-      row.state === FinalityProviderStateEnum.ACTIVE ||
-      row.state === FinalityProviderStateEnum.INACTIVE
-    );
-  }, []);
-
-  const filteredFinalityProviders = useMemo(() => {
-    if (!data?.finalityProviders) return [];
-
-    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 (
-          (fp.description?.moniker?.toLowerCase() || "").includes(
-            searchLower,
-          ) || (fp.btcPk?.toLowerCase() || "").includes(searchLower)
-        );
-      }
-
-      return true;
-    });
-  }, [data?.finalityProviders, filterValue, searchValue]);
+    useFinalityProviders({});
 
   const getFinalityProvider = useCallback(
     (btcPkHex: string) =>
@@ -151,38 +35,20 @@ function FinalityProviderStateInner({ children }: PropsWithChildren) {
     [data?.finalityProviders],
   );
 
-  useEffect(() => {
-    if (fpParam && data?.finalityProviders) {
-      handleSearch(fpParam);
-    }
-  }, [fpParam, data?.finalityProviders, handleSearch]);
-
   const state = useMemo(
     () => ({
-      searchValue,
-      filterValue,
-      finalityProviders: filteredFinalityProviders,
-      isFetching,
+      finalityProviders: data?.finalityProviders || [],
       hasNextPage,
+      isFetching,
       hasError: isError,
-      handleSearch,
-      handleSort,
-      handleFilter,
-      isRowSelectable,
       getFinalityProvider,
       fetchNextPage,
     }),
     [
-      searchValue,
-      filterValue,
-      filteredFinalityProviders,
-      isFetching,
+      data?.finalityProviders,
       hasNextPage,
+      isFetching,
       isError,
-      handleSearch,
-      handleSort,
-      handleFilter,
-      isRowSelectable,
       getFinalityProvider,
       fetchNextPage,
     ],
@@ -191,14 +57,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 };
diff --git a/src/app/state/FinalityProviderV2State.tsx b/src/app/state/FinalityProviderV2State.tsx
new file mode 100644
index 00000000..af899427
--- /dev/null
+++ b/src/app/state/FinalityProviderV2State.tsx
@@ -0,0 +1,195 @@
+import { useDebounce } from "@uidotdev/usehooks";
+import { useSearchParams } from "next/navigation";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type PropsWithChildren,
+} from "react";
+
+import { useFinalityProvidersV2 } from "@/app/hooks/client/api/useFinalityProvidersV2";
+import {
+  FinalityProviderState as FinalityProviderStateEnum,
+  type FinalityProviderV2,
+} from "@/app/types/finalityProvidersV2";
+import { createStateUtils } from "@/utils/createStateUtils";
+
+interface SortState {
+  field?: string;
+  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 FinalityProviderV2State {
+  searchValue: string;
+  filterValue: string | number;
+  finalityProviders: FinalityProviderV2[];
+  hasNextPage: boolean;
+  isFetching: boolean;
+  hasError: boolean;
+  handleSearch: (searchTerm: string) => void;
+  handleSort: (sortField: string) => void;
+  handleFilter: (value: string | number) => void;
+  isRowSelectable: (row: FinalityProviderV2) => boolean;
+  getFinalityProvider: (btcPkHex: string) => FinalityProviderV2 | null;
+  fetchNextPage: () => void;
+}
+
+const defaultState: FinalityProviderV2State = {
+  searchValue: "",
+  filterValue: "",
+  finalityProviders: [],
+  hasNextPage: false,
+  isFetching: false,
+  hasError: false,
+  isRowSelectable: () => false,
+  handleSearch: () => {},
+  handleSort: () => {},
+  handleFilter: () => {},
+  getFinalityProvider: () => null,
+  fetchNextPage: () => {},
+};
+
+const { StateProvider, useState: useFpV2State } =
+  createStateUtils<FinalityProviderV2State>(defaultState);
+
+export function FinalityProviderV2State({ children }: PropsWithChildren) {
+  const searchParams = useSearchParams();
+  const fpParam = searchParams.get("fp");
+
+  const [searchValue, setSearchValue] = useState("");
+  const [filterValue, setFilterValue] = useState<string | number>(
+    fpParam ? "" : "active",
+  );
+  const [sortState, setSortState] = useState<SortState>({});
+
+  const debouncedSearch = useDebounce(searchValue, 300);
+
+  const { data, hasNextPage, fetchNextPage, isFetching, isError } =
+    useFinalityProvidersV2({
+      sortBy: sortState.field,
+      order: sortState.direction,
+      name: debouncedSearch,
+    });
+
+  const handleSearch = useCallback((searchTerm: string) => {
+    setSearchValue(searchTerm);
+  }, []);
+
+  const handleSort = useCallback((sortField: string) => {
+    setSortState(({ field, direction }) =>
+      field === sortField
+        ? {
+            field: SORT_DIRECTIONS[`${direction}`] ? field : undefined,
+            direction: SORT_DIRECTIONS[`${direction}`],
+          }
+        : {
+            field: sortField,
+            direction: "desc",
+          },
+    );
+  }, []);
+
+  const handleFilter = useCallback((value: string | number) => {
+    setFilterValue(value);
+  }, []);
+
+  const isRowSelectable = useCallback((row: FinalityProviderV2) => {
+    return (
+      row.state === FinalityProviderStateEnum.ACTIVE ||
+      row.state === FinalityProviderStateEnum.INACTIVE
+    );
+  }, []);
+
+  const filteredFinalityProviders = useMemo(() => {
+    if (!data?.finalityProviders) return [];
+
+    return data.finalityProviders.filter((fp: FinalityProviderV2) => {
+      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 (
+          (fp.description?.moniker?.toLowerCase() || "").includes(
+            searchLower,
+          ) || (fp.btcPk?.toLowerCase() || "").includes(searchLower)
+        );
+      }
+
+      return true;
+    });
+  }, [data?.finalityProviders, filterValue, searchValue]);
+
+  const getFinalityProvider = useCallback(
+    (btcPkHex: string) =>
+      data?.finalityProviders.find(
+        (fp: FinalityProviderV2) => fp.btcPk === btcPkHex,
+      ) || null,
+    [data?.finalityProviders],
+  );
+
+  useEffect(() => {
+    if (fpParam && data?.finalityProviders) {
+      handleSearch(fpParam);
+    }
+  }, [fpParam, data?.finalityProviders, handleSearch]);
+
+  const state = useMemo(
+    () => ({
+      searchValue,
+      filterValue,
+      finalityProviders: filteredFinalityProviders,
+      isFetching,
+      hasNextPage,
+      hasError: isError,
+      handleSearch,
+      handleSort,
+      handleFilter,
+      isRowSelectable,
+      getFinalityProvider,
+      fetchNextPage,
+    }),
+    [
+      searchValue,
+      filterValue,
+      filteredFinalityProviders,
+      isFetching,
+      hasNextPage,
+      isError,
+      handleSearch,
+      handleSort,
+      handleFilter,
+      isRowSelectable,
+      getFinalityProvider,
+      fetchNextPage,
+    ],
+  );
+
+  return <StateProvider value={state}>{children}</StateProvider>;
+}
+
+export { useFpV2State as useFinalityProviderV2State };
diff --git a/src/app/state/index.tsx b/src/app/state/index.tsx
index 2c039c0f..e9317e63 100644
--- a/src/app/state/index.tsx
+++ b/src/app/state/index.tsx
@@ -16,6 +16,7 @@ import { NetworkInfo } from "../types/networkInfo";
 import { DelegationState } from "./DelegationState";
 import { DelegationV2State } from "./DelegationV2State";
 import { FinalityProviderState } from "./FinalityProviderState";
+import { FinalityProviderV2State } from "./FinalityProviderV2State";
 import { RewardsState } from "./RewardState";
 import { StakingState } from "./StakingState";
 
@@ -23,6 +24,7 @@ const STATE_LIST = [
   DelegationState,
   DelegationV2State,
   FinalityProviderState,
+  FinalityProviderV2State,
   StakingState,
   RewardsState,
 ];
diff --git a/src/app/types/finalityProviders.ts b/src/app/types/finalityProviders.ts
index bdbe91e2..244e3d0c 100644
--- a/src/app/types/finalityProviders.ts
+++ b/src/app/types/finalityProviders.ts
@@ -1,6 +1,6 @@
 export interface FinalityProvider {
   description: Description;
-  state: FinalityProviderState;
+  state: "active" | "standby";
   commission: string;
   btcPk: string;
   activeTVLSat: number;
@@ -16,20 +16,3 @@ export interface Description {
   securityContact: string;
   details: string;
 }
-
-export enum FinalityProviderState {
-  ACTIVE = "FINALITY_PROVIDER_STATUS_ACTIVE",
-  INACTIVE = "FINALITY_PROVIDER_STATUS_INACTIVE",
-  JAILED = "FINALITY_PROVIDER_STATUS_JAILED",
-  SLASHED = "FINALITY_PROVIDER_STATUS_SLASHED",
-}
-
-export const FinalityProviderStateLabels: Record<
-  FinalityProviderState,
-  string
-> = {
-  [FinalityProviderState.ACTIVE]: "Active",
-  [FinalityProviderState.INACTIVE]: "Inactive",
-  [FinalityProviderState.JAILED]: "Jailed",
-  [FinalityProviderState.SLASHED]: "Slashed",
-};
diff --git a/src/app/types/finalityProvidersV2.ts b/src/app/types/finalityProvidersV2.ts
new file mode 100644
index 00000000..446d49d0
--- /dev/null
+++ b/src/app/types/finalityProvidersV2.ts
@@ -0,0 +1,35 @@
+export interface FinalityProviderV2 {
+  description: Description;
+  state: FinalityProviderState;
+  commission: string;
+  btcPk: string;
+  activeTVLSat: number;
+  totalTVLSat: number;
+  activeDelegations: number;
+  totalDelegations: number;
+}
+
+export interface Description {
+  moniker: string;
+  identity: string;
+  website: string;
+  securityContact: string;
+  details: string;
+}
+
+export enum FinalityProviderState {
+  ACTIVE = "FINALITY_PROVIDER_STATUS_ACTIVE",
+  INACTIVE = "FINALITY_PROVIDER_STATUS_INACTIVE",
+  JAILED = "FINALITY_PROVIDER_STATUS_JAILED",
+  SLASHED = "FINALITY_PROVIDER_STATUS_SLASHED",
+}
+
+export const FinalityProviderStateLabels: Record<
+  FinalityProviderState,
+  string
+> = {
+  [FinalityProviderState.ACTIVE]: "Active",
+  [FinalityProviderState.INACTIVE]: "Inactive",
+  [FinalityProviderState.JAILED]: "Jailed",
+  [FinalityProviderState.SLASHED]: "Slashed",
+};
diff --git a/src/components/delegations/DelegationList/components/FinalityProviderMoniker.tsx b/src/components/delegations/DelegationList/components/FinalityProviderMoniker.tsx
index f46501b0..a962a679 100644
--- a/src/components/delegations/DelegationList/components/FinalityProviderMoniker.tsx
+++ b/src/components/delegations/DelegationList/components/FinalityProviderMoniker.tsx
@@ -1,8 +1,8 @@
 import Link from "next/link";
 
 import { DOCUMENTATION_LINKS } from "@/app/constants";
-import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
-import { FinalityProviderState } from "@/app/types/finalityProviders";
+import { useFinalityProviderV2State } from "@/app/state/FinalityProviderV2State";
+import { FinalityProviderState } from "@/app/types/finalityProvidersV2";
 import { Hint } from "@/components/common/Hint";
 
 interface FinalityProviderMonikerProps {
@@ -53,7 +53,7 @@ const STATUSES: Record<
 export function FinalityProviderMoniker({
   value,
 }: FinalityProviderMonikerProps) {
-  const { getFinalityProvider } = useFinalityProviderState();
+  const { getFinalityProvider } = useFinalityProviderV2State();
 
   const finalProvider = getFinalityProvider(value);
   const moniker = finalProvider?.description?.moniker ?? "-";
diff --git a/src/components/staking/StakingModal/index.tsx b/src/components/staking/StakingModal/index.tsx
index d727111b..511970d1 100644
--- a/src/components/staking/StakingModal/index.tsx
+++ b/src/components/staking/StakingModal/index.tsx
@@ -8,7 +8,7 @@ import { StakeModal } from "@/app/components/Modals/StakeModal";
 import { SuccessFeedbackModal } from "@/app/components/Modals/SuccessFeedbackModal";
 import { VerificationModal } from "@/app/components/Modals/VerificationModal";
 import { useStakingService } from "@/app/hooks/services/useStakingService";
-import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
+import { useFinalityProviderV2State } from "@/app/state/FinalityProviderV2State";
 import { useStakingState } from "@/app/state/StakingState";
 
 const EOI_INDEXES: Record<string, number> = {
@@ -32,7 +32,7 @@ export function StakingModal() {
     verifiedDelegation,
     reset: resetState,
   } = useStakingState();
-  const { getFinalityProvider } = useFinalityProviderState();
+  const { getFinalityProvider } = useFinalityProviderV2State();
   const { createEOI, stakeDelegation } = useStakingService();
   const {
     reset: resetForm,