display phase 1 fp name

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 },
   );

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 };
+};

src/app/components/Delegations/Delegation.tsx

@@ -13,6 +13,7 @@ import {
   type Delegation as DelegationInterface,
   DelegationState,
 } from "@/app/types/delegations";
+import { Hint } from "@/components/common/Hint";
 import { getNetworkConfigBTC } from "@/config/network/btc";
 import { satoshiToBtc } from "@/utils/btc";
 import { getState, getStateTooltip } from "@/utils/getState";
@@ -23,7 +24,6 @@ import { trim } from "@/utils/trim";
 import { VerificationModal } from "../Modals/VerificationModal";
 
 import { DelegationCell } from "./components/DelegationCell";
-import { DelegationStatus } from "./components/DelegationStatus";
 import { OverflowBadge } from "./components/OverflowBadge";
 
 interface DelegationProps {
@@ -148,11 +148,7 @@ export const Delegation: React.FC<DelegationProps> = ({
             order="order-5"
             className="relative flex justify-end lg:justify-start"
           >
-            <DelegationStatus
-              state={renderState()}
-              tooltip={renderStateTooltip()}
-              stakingTxHashHex={stakingTxHashHex}
-            />
+            <Hint tooltip={renderStateTooltip()}>{renderState()}</Hint>
           </DelegationCell>
 
           <DelegationCell order="order-6">

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;

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

@@ -1,14 +1,14 @@
 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" },
   { value: "inactive", label: "Inactive" },
 ];
 
 export const FinalityProviderFilter = () => {
-  const { filterValue, handleFilter } = useFinalityProviderState();
+  const { filterValue, handleFilter } = useFinalityProviderV2State();
 
   return (
     <Select

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>) => {

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 [];

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

@@ -9,18 +9,11 @@ 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 +34,21 @@ 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>
+
+      <FinalityProviderContent />
     </div>
   );
 };

src/app/globals.css

@@ -104,8 +104,10 @@ body.modal-open {
 
 .tooltip-wrap {
   max-width: 25rem;
-  white-space: normal;
+  white-space: pre-wrap;
   word-wrap: break-word;
+  height: fit-content !important;
+  z-index: 9999;
 }
 
 .tooltip-wrap[data-popper-placement*="top"] .tooltip-arrow {

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;