From e912fba62520801109d6bf5fb9953c86ec8c3e58 Mon Sep 17 00:00:00 2001
From: jeremy-babylonchain <jeremy.tsang@babylonchain.io>
Date: Thu, 12 Dec 2024 17:43:09 +0800
Subject: [PATCH] resolve comments

---
 src/app/components/Delegations/Delegation.tsx |   4 +-
 .../FinalityProviderFilter.tsx                |   4 +-
 .../FinalityProviderSearch.tsx                |   4 +-
 .../FinalityProviderSubtitle.tsx              |   9 --
 .../FinalityProviderTable.tsx                 | 126 +++++++++++-------
 .../FinalityProviderTableStatusView.tsx       |  14 +-
 .../FinalityProviderTitle.tsx                 |   9 --
 .../FinalityProviders/FinalityProviders.tsx   |  12 +-
 .../state/FinalityProviderServiceState.tsx    |  45 -------
 .../FinalityProviderState.tsx}                | 120 +++++++++++++----
 src/app/state/index.tsx                       |   8 +-
 .../components/FinalityProviderMoniker.tsx    |   4 +-
 12 files changed, 189 insertions(+), 170 deletions(-)
 delete mode 100644 src/app/components/Staking/FinalityProviders/FinalityProviderSubtitle.tsx
 delete mode 100644 src/app/components/Staking/FinalityProviders/FinalityProviderTitle.tsx
 delete mode 100644 src/app/state/FinalityProviderServiceState.tsx
 rename src/app/{hooks/services/useFinalityProviderService.ts => state/FinalityProviderState.tsx} (51%)

diff --git a/src/app/components/Delegations/Delegation.tsx b/src/app/components/Delegations/Delegation.tsx
index 14f7e771..a59283cf 100644
--- a/src/app/components/Delegations/Delegation.tsx
+++ b/src/app/components/Delegations/Delegation.tsx
@@ -4,12 +4,12 @@ import { FaBitcoin } from "react-icons/fa";
 import { IoIosWarning } from "react-icons/io";
 import { Tooltip } from "react-tooltip";
 
-import { useFinalityProviderService } from "@/app/hooks/services/useFinalityProviderService";
 import {
   type SigningStep,
   useTransactionService,
 } from "@/app/hooks/services/useTransactionService";
 import { useHealthCheck } from "@/app/hooks/useHealthCheck";
+import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
 import {
   type Delegation as DelegationInterface,
   DelegationState,
@@ -48,7 +48,7 @@ export const Delegation: React.FC<DelegationProps> = ({
   const [currentTime, setCurrentTime] = useState(Date.now());
   const { isApiNormal, isGeoBlocked } = useHealthCheck();
   const { transitionPhase1Delegation } = useTransactionService();
-  const { getFinalityProviderMoniker } = useFinalityProviderService(); // get the moniker of the finality provider
+  const { getFinalityProviderMoniker } = useFinalityProviderState(); // get the moniker of the finality provider
   useEffect(() => {
     const timerId = setInterval(() => {
       setCurrentTime(Date.now());
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderFilter.tsx
index ad460e8c..ed4abb4c 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 { useFinalityProviderService } from "@/app/hooks/services/useFinalityProviderService";
+import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
 
 const options = [
   { value: "active", label: "Active" },
@@ -8,7 +8,7 @@ const options = [
 ];
 
 export const FinalityProviderFilter = () => {
-  const { filterValue, handleFilter } = useFinalityProviderService();
+  const { filterValue, handleFilter } = useFinalityProviderState();
 
   return (
     <Select
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderSearch.tsx
index 5ab9bba5..a5388572 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 { useFinalityProviderService } from "@/app/hooks/services/useFinalityProviderService";
+import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
 
 export const FinalityProviderSearch = () => {
-  const { handleSearch, searchValue } = useFinalityProviderService();
+  const { handleSearch, searchValue } = useFinalityProviderState();
 
   const onSearchChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderSubtitle.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderSubtitle.tsx
deleted file mode 100644
index e8e56c5d..00000000
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderSubtitle.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Text } from "@babylonlabs-io/bbn-core-ui";
-
-export const FinalityProviderSubtitle = () => {
-  return (
-    <Text variant="body1" className="text-primary-dark">
-      Select a Finality Provider
-    </Text>
-  );
-};
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx
index 36594a3e..9b48c0ab 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderTable.tsx
@@ -1,10 +1,11 @@
 import { Avatar, Loader, Table } from "@babylonlabs-io/bbn-core-ui";
+import Image from "next/image";
 import { useMemo } from "react";
 
 import warningOctagon from "@/app/assets/warning-octagon.svg";
 import warningTriangle from "@/app/assets/warning-triangle.svg";
 import { Hash } from "@/app/components/Hash/Hash";
-import { useFinalityProviderService } from "@/app/hooks/services/useFinalityProviderService";
+import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
 import {
   FinalityProvider,
   FinalityProviderState,
@@ -16,6 +17,12 @@ import { maxDecimals } from "@/utils/maxDecimals";
 
 import { StatusView } from "./FinalityProviderTableStatusView";
 
+const { coinName } = getNetworkConfig();
+
+const mapStatus = (value: FinalityProviderState): string => {
+  return FinalityProviderStatus[value] || "Unknown";
+};
+
 export const FinalityProviderTable = () => {
   const {
     isFetching,
@@ -26,80 +33,99 @@ export const FinalityProviderTable = () => {
     filterValue,
     hasError,
     handleRowSelect,
-  } = useFinalityProviderService();
-
-  const { coinName } = getNetworkConfig();
-
-  const mapStatus = (value: FinalityProviderState): string => {
-    return FinalityProviderStatus[value] || "Unknown";
-  };
+  } = useFinalityProviderState();
 
   const columns = useMemo(
     () => [
       {
         key: "moniker",
         header: "Finality Provider",
-        render: (_: unknown, row: FinalityProvider) => (
-          <div className="flex items-center gap-2">
-            {row.description?.identity && (
-              <Avatar
-                size="small"
-                url={row.description.identity}
-                alt={row.description.moniker || ""}
-              />
-            )}
-            <span className="text-primary-dark">
-              {row.description?.moniker || "No name provided"}
-            </span>
-          </div>
-        ),
-        sorter: (a: FinalityProvider, b: FinalityProvider) =>
-          (a.description?.moniker || "").localeCompare(
-            b.description?.moniker || "",
-          ),
+        render: (_: unknown, row?: FinalityProvider) => {
+          if (!row) return null;
+          return (
+            <div className="flex items-center gap-2">
+              {row.description?.identity && (
+                <Avatar
+                  size="small"
+                  url={row.description.identity}
+                  alt={row.description.moniker || ""}
+                />
+              )}
+              <span className="text-primary-dark">
+                {row.description?.moniker || "No name provided"}
+              </span>
+            </div>
+          );
+        },
+        sorter: (a?: FinalityProvider, b?: FinalityProvider) => {
+          const monikerA = a?.description?.moniker || "";
+          const monikerB = b?.description?.moniker || "";
+          return monikerA.localeCompare(monikerB);
+        },
       },
       {
         key: "btcPk",
         header: "BTC PK",
-        render: (_: unknown, row: FinalityProvider) => (
-          <Hash value={row.btcPk} address small noFade />
-        ),
+        render: (_: unknown, row?: FinalityProvider) => {
+          if (!row?.btcPk) return null;
+          return <Hash value={row.btcPk} address small noFade />;
+        },
       },
       {
         key: "activeTVLSat",
         header: "Total Delegation",
-        render: (value: unknown) =>
-          `${maxDecimals(satoshiToBtc(value as number), 8)} ${coinName}`,
-        sorter: (a: FinalityProvider, b: FinalityProvider) =>
-          a.activeTVLSat - b.activeTVLSat,
+        render: (value: unknown) => {
+          const amount = Number(value);
+          if (isNaN(amount)) return "-";
+          return `${maxDecimals(satoshiToBtc(amount), 8)} ${coinName}`;
+        },
+        sorter: (a?: FinalityProvider, b?: FinalityProvider) => {
+          const valueA = a?.activeTVLSat ?? 0;
+          const valueB = b?.activeTVLSat ?? 0;
+          return valueA - valueB;
+        },
       },
       {
         key: "commission",
         header: "Commission",
-        render: (value: unknown) => `${maxDecimals(Number(value) * 100, 2)}%`,
-        sorter: (a: FinalityProvider, b: FinalityProvider) =>
-          Number(a.commission) - Number(b.commission),
+        render: (value: unknown) => {
+          const commission = Number(value);
+          if (isNaN(commission)) return "-";
+          return `${maxDecimals(commission * 100, 2)}%`;
+        },
+        sorter: (a?: FinalityProvider, b?: FinalityProvider) => {
+          const commissionA = Number(a?.commission) || 0;
+          const commissionB = Number(b?.commission) || 0;
+          return commissionA - commissionB;
+        },
       },
       {
         key: "state",
         header: "Status",
-        render: (value: unknown) => mapStatus(value as FinalityProviderState),
+        render: (value: unknown) => {
+          if (value == null) return "Unknown";
+          return mapStatus(value as FinalityProviderState);
+        },
       },
     ],
     [coinName],
   );
 
-  const tableData = useMemo(
-    () => finalityProviders?.map((fp) => ({ ...fp, id: fp.btcPk })) || [],
-    [finalityProviders],
-  );
+  const tableData = useMemo(() => {
+    if (!finalityProviders) return [];
+    return finalityProviders.map((fp) => ({
+      ...fp,
+      id: fp.btcPk,
+    }));
+  }, [finalityProviders]);
 
   const renderContent = () => {
     if (hasError) {
       return (
         <StatusView
-          icon={warningTriangle}
-          iconSize={88}
+          icon={
+            <Image src={warningTriangle} alt="Warning" width={88} height={88} />
+          }
           title="Failed to Load"
           description={
             <>
@@ -111,7 +137,7 @@ export const FinalityProviderTable = () => {
       );
     }
 
-    if (isFetching && tableData.length === 0) {
+    if (isFetching && (!finalityProviders || finalityProviders.length === 0)) {
       return (
         <StatusView
           icon={<Loader className="text-primary-dark" />}
@@ -120,11 +146,17 @@ export const FinalityProviderTable = () => {
       );
     }
 
-    if (!isFetching && tableData.length === 0) {
+    if (!isFetching && (!tableData || tableData.length === 0)) {
       return (
         <StatusView
-          icon={warningOctagon}
-          iconSize={160}
+          icon={
+            <Image
+              src={warningOctagon}
+              alt="Warning"
+              width={160}
+              height={160}
+            />
+          }
           title="No Matches Found"
         />
       );
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderTableStatusView.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderTableStatusView.tsx
index ef15486e..bc5d38d4 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderTableStatusView.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviderTableStatusView.tsx
@@ -1,14 +1,11 @@
 import { Heading, Text } from "@babylonlabs-io/bbn-core-ui";
-import Image from "next/image";
 
 export const StatusView = ({
   icon,
-  iconSize,
   title,
   description,
 }: {
   icon: React.ReactNode | string;
-  iconSize?: number;
   title: string;
   description?: React.ReactNode;
 }) => (
@@ -16,16 +13,7 @@ export const StatusView = ({
     <div className="flex flex-col items-center gap-4">
       <div className="bg-primary-contrast relative w-[5.5rem] h-[5.5rem]">
         <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
-          {typeof icon === "string" ? (
-            <Image
-              src={icon}
-              alt="Warning"
-              width={iconSize}
-              height={iconSize}
-            />
-          ) : (
-            icon
-          )}
+          {icon}
         </div>
       </div>
       <Heading variant="h6" className="text-primary-dark">
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviderTitle.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviderTitle.tsx
deleted file mode 100644
index 34776958..00000000
--- a/src/app/components/Staking/FinalityProviders/FinalityProviderTitle.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import { Heading } from "@babylonlabs-io/bbn-core-ui";
-
-export const FinalityProviderTitle = () => {
-  return (
-    <Heading variant="h5" className="text-primary-dark">
-      Step 1
-    </Heading>
-  );
-};
diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
index e4594ea2..adc87a75 100644
--- a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
+++ b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
@@ -1,14 +1,18 @@
+import { Heading, Text } from "@babylonlabs-io/bbn-core-ui";
+
 import { FinalityProviderFilter } from "./FinalityProviderFilter";
 import { FinalityProviderSearch } from "./FinalityProviderSearch";
-import { FinalityProviderSubtitle } from "./FinalityProviderSubtitle";
 import { FinalityProviderTable } from "./FinalityProviderTable";
-import { FinalityProviderTitle } from "./FinalityProviderTitle";
 
 export const FinalityProviders = () => {
   return (
     <div className="flex flex-col gap-4">
-      <FinalityProviderTitle />
-      <FinalityProviderSubtitle />
+      <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 />
diff --git a/src/app/state/FinalityProviderServiceState.tsx b/src/app/state/FinalityProviderServiceState.tsx
deleted file mode 100644
index 5868abd0..00000000
--- a/src/app/state/FinalityProviderServiceState.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { type PropsWithChildren } from "react";
-
-import { useFinalityProviderServiceState } from "@/app/hooks/services/useFinalityProviderService";
-import type { FinalityProvider } from "@/app/types/finalityProviders";
-import { createStateUtils } from "@/utils/createStateUtils";
-
-interface FinalityProviderServiceState {
-  searchValue: string;
-  filterValue: string | number;
-  finalityProviders: FinalityProvider[];
-  selectedFinalityProvider: FinalityProvider | null;
-  hasNextPage: boolean;
-  isFetching: boolean;
-  handleSearch: (searchTerm: string) => void;
-  handleSort: (sortField: string) => void;
-  handleFilter: (value: string | number) => void;
-  handleRowSelect: (row: FinalityProvider) => void;
-  getFinalityProviderMoniker: (btcPkHex: string) => string;
-  fetchNextPage: () => void;
-  hasError: boolean;
-}
-
-const { StateProvider, useState: useFinalityProviderService } =
-  createStateUtils<FinalityProviderServiceState>({
-    searchValue: "",
-    filterValue: "active",
-    finalityProviders: [],
-    selectedFinalityProvider: null,
-    hasNextPage: false,
-    isFetching: false,
-    handleSearch: () => {},
-    handleSort: () => {},
-    handleFilter: () => {},
-    handleRowSelect: () => {},
-    getFinalityProviderMoniker: () => "-",
-    fetchNextPage: () => {},
-    hasError: false,
-  });
-
-export function FinalityProviderServiceState({ children }: PropsWithChildren) {
-  const state = useFinalityProviderServiceState();
-  return <StateProvider value={state}>{children}</StateProvider>;
-}
-
-export { useFinalityProviderService };
diff --git a/src/app/hooks/services/useFinalityProviderService.ts b/src/app/state/FinalityProviderState.tsx
similarity index 51%
rename from src/app/hooks/services/useFinalityProviderService.ts
rename to src/app/state/FinalityProviderState.tsx
index d30f8321..0ef4f9da 100644
--- a/src/app/hooks/services/useFinalityProviderService.ts
+++ b/src/app/state/FinalityProviderState.tsx
@@ -1,10 +1,17 @@
 import { useDebounce } from "@uidotdev/usehooks";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import {
+  type PropsWithChildren,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from "react";
 
 import { useError } from "@/app/context/Error/ErrorContext";
 import { useFinalityProviders } from "@/app/hooks/client/api/useFinalityProviders";
 import { ErrorState } from "@/app/types/errors";
-import { FinalityProvider } from "@/app/types/finalityProviders";
+import type { FinalityProvider } from "@/app/types/finalityProviders";
+import { createStateUtils } from "@/utils/createStateUtils";
 
 interface SortState {
   field?: string;
@@ -17,7 +24,40 @@ const SORT_DIRECTIONS = {
   asc: undefined,
 } as const;
 
-export function useFinalityProviderServiceState() {
+interface FinalityProviderState {
+  searchValue: string;
+  filterValue: string | number;
+  finalityProviders: FinalityProvider[];
+  selectedFinalityProvider: FinalityProvider | null;
+  hasNextPage: boolean;
+  isFetching: boolean;
+  hasError: boolean;
+  handleSearch: (searchTerm: string) => void;
+  handleSort: (sortField: string) => void;
+  handleFilter: (value: string | number) => void;
+  handleRowSelect: (row: FinalityProvider) => void;
+  getFinalityProviderMoniker: (btcPkHex: string) => string;
+  fetchNextPage: () => void;
+}
+
+const { StateProvider, useState: useFpState } =
+  createStateUtils<FinalityProviderState>({
+    searchValue: "",
+    filterValue: "active",
+    finalityProviders: [],
+    selectedFinalityProvider: null,
+    hasNextPage: false,
+    isFetching: false,
+    hasError: false,
+    handleSearch: () => {},
+    handleSort: () => {},
+    handleFilter: () => {},
+    handleRowSelect: () => {},
+    getFinalityProviderMoniker: () => "-",
+    fetchNextPage: () => {},
+  });
+
+export function FinalityProviderState({ children }: PropsWithChildren) {
   const [searchValue, setSearchValue] = useState("");
   const [filterValue, setFilterValue] = useState<string | number>("active");
   const [sortState, setSortState] = useState<SortState>({});
@@ -74,29 +114,49 @@ export function useFinalityProviderServiceState() {
   }, []);
 
   const filteredFinalityProviders = useMemo(() => {
-    if (!data?.finalityProviders) return [];
-
-    return data.finalityProviders.filter((fp: FinalityProvider) => {
-      const statusMatch =
-        filterValue === "active"
-          ? fp.state === "FINALITY_PROVIDER_STATUS_ACTIVE"
-          : filterValue === "inactive"
-            ? fp.state !== "FINALITY_PROVIDER_STATUS_ACTIVE"
-            : 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]);
+    try {
+      if (!data?.finalityProviders) return [];
+
+      return data.finalityProviders.filter((fp: FinalityProvider) => {
+        if (!fp) return false;
+
+        const statusMatch =
+          filterValue === "active"
+            ? fp.state === "FINALITY_PROVIDER_STATUS_ACTIVE"
+            : filterValue === "inactive"
+              ? fp.state !== "FINALITY_PROVIDER_STATUS_ACTIVE"
+              : 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;
+      });
+    } catch (error: any) {
+      showError({
+        error: {
+          message: error.message,
+          errorState: ErrorState.SERVER_ERROR,
+        },
+      });
+      captureError(error);
+      return [];
+    }
+  }, [
+    data?.finalityProviders,
+    filterValue,
+    searchValue,
+    showError,
+    captureError,
+  ]);
 
   const getFinalityProviderMoniker = useCallback(
     (btcPkHex: string) => {
@@ -104,7 +164,7 @@ export function useFinalityProviderServiceState() {
         (fp) => fp.btcPk === btcPkHex,
       )?.description?.moniker;
 
-      if (moniker === undefined || moniker === null || moniker === "") {
+      if (!moniker) {
         return "-";
       }
       return moniker;
@@ -112,7 +172,7 @@ export function useFinalityProviderServiceState() {
     [filteredFinalityProviders],
   );
 
-  return {
+  const state = {
     searchValue,
     filterValue,
     finalityProviders: filteredFinalityProviders,
@@ -127,6 +187,8 @@ export function useFinalityProviderServiceState() {
     getFinalityProviderMoniker,
     fetchNextPage,
   };
+
+  return <StateProvider value={state}>{children}</StateProvider>;
 }
 
-export { useFinalityProviderService } from "@/app/state/FinalityProviderServiceState";
+export { useFpState as useFinalityProviderState };
diff --git a/src/app/state/index.tsx b/src/app/state/index.tsx
index f4525ac0..ec3c5d0a 100644
--- a/src/app/state/index.tsx
+++ b/src/app/state/index.tsx
@@ -15,13 +15,9 @@ import { NetworkInfo } from "../types/networkInfo";
 
 import { DelegationState } from "./DelegationState";
 import { DelegationV2State } from "./DelegationV2State";
-import { FinalityProviderServiceState } from "./FinalityProviderServiceState";
+import { FinalityProviderState } from "./FinalityProviderState";
 
-const STATE_LIST = [
-  DelegationState,
-  DelegationV2State,
-  FinalityProviderServiceState,
-];
+const STATE_LIST = [DelegationState, DelegationV2State, FinalityProviderState];
 
 export interface AppState {
   availableUTXOs?: UTXO[];
diff --git a/src/components/delegations/DelegationList/components/FinalityProviderMoniker.tsx b/src/components/delegations/DelegationList/components/FinalityProviderMoniker.tsx
index 97afc769..ef8c5fd7 100644
--- a/src/components/delegations/DelegationList/components/FinalityProviderMoniker.tsx
+++ b/src/components/delegations/DelegationList/components/FinalityProviderMoniker.tsx
@@ -1,11 +1,11 @@
-import { useFinalityProviderService } from "@/app/hooks/services/useFinalityProviderService";
+import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
 
 interface FinalityProviderMoniker {
   value: string;
 }
 
 export function FinalityProviderMoniker({ value }: FinalityProviderMoniker) {
-  const { getFinalityProviderMoniker } = useFinalityProviderService();
+  const { getFinalityProviderMoniker } = useFinalityProviderState();
 
   const moniker = getFinalityProviderMoniker(value);