update delegation list

babylonlabs-io · Nov 28, 2024 · 02c7f33 · 02c7f33
1 parent a97bddb
commit 02c7f33
Show file tree

Hide file tree

Showing 17 changed files with 357 additions and 150 deletions.
diff --git a/src/app/api/getDelegationsV2.ts b/src/app/api/getDelegationsV2.ts
@@ -26,12 +26,15 @@ interface DelegationV2API {
   params_version: number;
   staker_btc_pk_hex: string;
   delegation_staking: {
+    staking_tx_hex: string;
     staking_tx_hash_hex: string;
     staking_time: number;
     staking_amount: number;
     start_height: number;
     end_height: number;
-    staking_tx_hex: string;
+    bbn_inception_height: number;
+    bbn_inception_time: number;
+    slashing_tx_hex: string;
   };
   delegation_unbonding: {
     unbonding_time: number;
@@ -40,6 +43,7 @@ interface DelegationV2API {
       covenant_btc_pk_hex: string;
       signature_hex: string;
     }[];
+    slashing_tx_hex: string;
   };
   state: string;
 }
@@ -77,6 +81,12 @@ export const getDelegationV2 = async (
       delegationAPIResponse.data.delegation_staking.staking_tx_hash_hex,
     startHeight: delegationAPIResponse.data.delegation_staking.start_height,
     endHeight: delegationAPIResponse.data.delegation_staking.end_height,
+    bbnInceptionHeight:
+      delegationAPIResponse.data.delegation_staking.bbn_inception_height,
+    bbnInceptionTime:
+      delegationAPIResponse.data.delegation_staking.bbn_inception_time,
+    stakingSlashingTxHex:
+      delegationAPIResponse.data.delegation_staking.slashing_tx_hex,
     state,
     unbondingTime:
       delegationAPIResponse.data.delegation_unbonding.unbonding_time,
@@ -89,6 +99,8 @@ export const getDelegationV2 = async (
           signatureHex: signature.signature_hex,
         }),
       ),
+    unbondingSlashingTxHex:
+      delegationAPIResponse.data.delegation_unbonding.slashing_tx_hex,
   };
 };
 
@@ -126,9 +138,15 @@ export const getDelegationsV2 = async (
         stakingTxHashHex: apiDelegation.delegation_staking.staking_tx_hash_hex,
         startHeight: apiDelegation.delegation_staking.start_height,
         endHeight: apiDelegation.delegation_staking.end_height,
+        bbnInceptionHeight:
+          apiDelegation.delegation_staking.bbn_inception_height,
+        bbnInceptionTime: apiDelegation.delegation_staking.bbn_inception_time,
+        stakingSlashingTxHex: apiDelegation.delegation_staking.slashing_tx_hex,
         state,
         unbondingTime: apiDelegation.delegation_unbonding.unbonding_time,
         unbondingTxHex: apiDelegation.delegation_unbonding.unbonding_tx,
+        unbondingSlashingTxHex:
+          apiDelegation.delegation_unbonding.slashing_tx_hex,
         covenantUnbondingSignatures:
           apiDelegation.delegation_unbonding.covenant_unbonding_signatures?.map(
             (signature) => ({

diff --git a/src/app/api/getFinalityProviders.ts b/src/app/api/getFinalityProviders.ts
@@ -3,10 +3,7 @@ import { encode } from "url-safe-base64";
 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";
 
@@ -22,7 +19,6 @@ interface FinalityProvidersAPIResponse {
 
 interface FinalityProviderAPI {
   description: DescriptionAPI;
-  state: FinalityProviderState;
   commission: string;
   btc_pk: string;
   active_tvl: number;
@@ -39,35 +35,21 @@ interface DescriptionAPI {
   details: string;
 }
 
-export const getFinalityProviders = async ({
-  key,
-  pk,
-  sortBy,
-  order,
-  name,
-}: {
-  key: string;
-  name?: string;
-  sortBy?: string;
-  order?: "asc" | "desc";
-  pk?: string;
-}): Promise<PaginatedFinalityProviders> => {
+export const getFinalityProviders = async (
+  key: string,
+): Promise<PaginatedFinalityProviders> => {
   // const limit = 100;
   // const reverse = false;
 
   const params = {
     pagination_key: encode(key),
-    finality_provider_pk: pk,
-    sort_by: sortBy,
-    order,
-    name,
     // "pagination_reverse": reverse,
     // "pagination_limit": limit,
   };
 
   const response = await apiWrapper(
     "GET",
-    "/v2/finality-providers",
+    "/v1/finality-providers",
     "Error getting finality providers",
     params,
   );
@@ -88,7 +70,6 @@ export const getFinalityProviders = async ({
         securityContact: fp.description.security_contact,
         details: fp.description.details,
       },
-      state: fp.state,
       commission: fp.commission,
       btcPk: fp.btc_pk,
       activeTVLSat: fp.active_tvl,

diff --git a/src/app/api/getFinalityProvidersV2.ts b/src/app/api/getFinalityProvidersV2.ts
@@ -0,0 +1,106 @@
+import { encode } from "url-safe-base64";
+
+import { isValidUrl } from "@/utils/url";
+
+import { Pagination } from "../types/api";
+import {
+  FinalityProviderState,
+  FinalityProviderV2,
+} from "../types/finalityProviders";
+
+import { apiWrapper } from "./apiWrapper";
+
+export interface PaginatedFinalityProvidersV2 {
+  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<PaginatedFinalityProvidersV2> => {
+  // const limit = 100;
+  // const reverse = false;
+
+  const params = {
+    pagination_key: encode(key),
+    finality_provider_pk: pk,
+    sort_by: sortBy,
+    order,
+    name,
+    // "pagination_reverse": reverse,
+    // "pagination_limit": limit,
+  };
+
+  const response = await apiWrapper(
+    "GET",
+    "/v2/finality-providers",
+    "Error getting finality providers",
+    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/Delegations/Delegation.tsx b/src/app/components/Delegations/Delegation.tsx
@@ -4,6 +4,7 @@ import { FaBitcoin } from "react-icons/fa";
 import { IoIosWarning } from "react-icons/io";
 import { Tooltip } from "react-tooltip";
 
+import { useFinalityProviderV2Service } from "@/app/hooks/services/useFinalityProviderV2Service";
 import {
   type SigningStep,
   useTransactionService,
@@ -13,16 +14,13 @@ import {
   type Delegation as DelegationInterface,
   DelegationState,
 } from "@/app/types/delegations";
-import { shouldDisplayPoints } from "@/config";
 import { getNetworkConfig } from "@/config/network.config";
 import { satoshiToBtc } from "@/utils/btc";
 import { getState, getStateTooltip } from "@/utils/getState";
 import { maxDecimals } from "@/utils/maxDecimals";
 import { durationTillNow } from "@/utils/time";
 import { trim } from "@/utils/trim";
 
-import { DelegationPoints } from "../Points/DelegationPoints";
-
 interface DelegationProps {
   delegation: DelegationInterface;
   onWithdraw: (id: string) => void;
@@ -49,10 +47,8 @@ export const Delegation: React.FC<DelegationProps> = ({
   const { startTimestamp } = stakingTx;
   const [currentTime, setCurrentTime] = useState(Date.now());
   const { isApiNormal, isGeoBlocked } = useHealthCheck();
-  const shouldShowPoints =
-    isApiNormal && !isGeoBlocked && shouldDisplayPoints();
   const { transitionPhase1Delegation } = useTransactionService();
-
+  const { getFinalityProviderMoniker } = useFinalityProviderV2Service(); // get the moniker of the finality provider
   useEffect(() => {
     const timerId = setInterval(() => {
       setCurrentTime(Date.now());
@@ -145,27 +141,30 @@ export const Delegation: React.FC<DelegationProps> = ({
 
   return (
     <div
-      className={`relative rounded bg-secondary-contrast odd:bg-[#F9F9F9] p-4 text-base text-primary-dark`}
+      className={`relative rounded bg-secondary-contrast odd:bg-[#F9F9F9] p-4 text-sm text-primary-dark`}
     >
       {isOverflow && (
         <div className="absolute -top-1 right-1/2 flex translate-x-1/2 items-center gap-1 rounded-md bg-primary px-2 py-1 text-xs text-white lg:right-2 lg:top-1/2 lg:-translate-y-1/2 lg:translate-x-0">
-          <IoIosWarning size={16} />
+          <IoIosWarning size={14} />
           <p>overflow</p>
         </div>
       )}
       <div
-        className={`grid grid-flow-col grid-cols-2 grid-rows-3 items-center gap-2 lg:grid-flow-row ${shouldShowPoints ? "lg:grid-cols-6" : "lg:grid-cols-5"} lg:grid-rows-1`}
+        className={`grid grid-flow-col grid-cols-2 grid-rows-3 items-center gap-2 lg:grid-flow-row lg:grid-cols-[1.5fr_1fr_1fr_1fr_1fr_1fr] lg:grid-rows-1`}
       >
-        <div className="flex gap-1 items-center order-1">
+        <div className="order-3 lg:order-1">
+          {durationTillNow(startTimestamp, currentTime)}
+        </div>
+        <div className="order-4 lg:order-2 text-right lg:text-left">
+          {getFinalityProviderMoniker(finalityProviderPkHex)}
+        </div>
+        <div className="flex gap-1 items-center order-1 lg:order-3">
           <FaBitcoin className="text-primary" />
           <p>
             {maxDecimals(satoshiToBtc(stakingValueSat), 8)} {coinName}
           </p>
         </div>
-        <p className="order-3 lg:order-2">
-          {durationTillNow(startTimestamp, currentTime)}
-        </p>
-        <div className="justify-start lg:flex order-2 lg:order-3">
+        <div className="justify-start lg:flex order-2 lg:order-4">
           <a
             href={`${mempoolApiUrl}/tx/${stakingTxHashHex}`}
             target="_blank"
@@ -179,7 +178,7 @@ export const Delegation: React.FC<DelegationProps> = ({
         we need to center the text without the tooltip
         add its size 12px and gap 4px, 16/2 = 8px
         */}
-        <div className="relative flex justify-start lg:justify-start order-4">
+        <div className="relative flex justify-end lg:justify-start order-5">
           <div className="flex items-center justify-start gap-1">
             <p>{renderState()}</p>
             <span
@@ -196,10 +195,6 @@ export const Delegation: React.FC<DelegationProps> = ({
             />
           </div>
         </div>
-        <DelegationPoints
-          stakingTxHashHex={stakingTxHashHex}
-          className="relative flex justify-start lg:justify-start order-5"
-        />
         <div className="order-6">{generateActionButton()}</div>
       </div>
     </div>

diff --git a/src/app/components/Delegations/Delegations.tsx b/src/app/components/Delegations/Delegations.tsx
@@ -251,14 +251,12 @@ const DelegationsContent: React.FC<DelegationsContentProps> = ({
           Pending Transitions / Withdrawal (Phase 1)
         </Heading>
 
-        <div
-          className={`hidden ${shouldShowPoints ? "grid-cols-6" : "grid-cols-5"} gap-2 p-4 lg:grid text-primary-light text-xs`}
-        >
-          <p className="text-left">Amount</p>
+        <div className="hidden lg:grid grid-cols-[1.5fr_1fr_1fr_1fr_1fr_1fr] gap-2 p-4 text-primary-light text-xs">
           <p className="text-left">Inception</p>
-          <p className="text-left">Transaction hash</p>
+          <p className="text-left">Finality Provider</p>
+          <p className="text-left">Amount</p>
+          <p className="text-left">Transaction ID</p>
           <p className="text-left">Status</p>
-          {shouldShowPoints && <p className="text-left">Points</p>}
           <p className="text-left">Action</p>
         </div>
         <div

diff --git a/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx b/src/app/components/Staking/FinalityProviders/FinalityProviders.tsx
@@ -5,8 +5,8 @@ import {
   LoadingTableList,
   LoadingView,
 } from "@/app/components/Loading/Loading";
-import { useFinalityProviderService } from "@/app/hooks/services/useFinalityProviderService";
-import type { FinalityProvider as FinalityProviderInterface } from "@/app/types/finalityProviders";
+import { useFinalityProviderV2Service } from "@/app/hooks/services/useFinalityProviderV2Service";
+import type { FinalityProviderV2 as FinalityProviderInterface } from "@/app/types/finalityProviders";
 
 import { FinalityProvider } from "./FinalityProvider";
 import { FinalityProviderSearch } from "./FinalityProviderSearch";
@@ -30,7 +30,7 @@ export const FinalityProviders: React.FC<FinalityProvidersProps> = ({
     fetchNextPage,
     handleSearch,
     handleSort,
-  } = useFinalityProviderService();
+  } = useFinalityProviderV2Service();
 
   useEffect(() => {
     if (finalityProviders) {

diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
@@ -16,8 +16,8 @@ import { useHealthCheck } from "@/app/hooks/useHealthCheck";
 import { useAppState } from "@/app/state";
 import { ErrorHandlerParam, ErrorState } from "@/app/types/errors";
 import {
-  FinalityProvider,
-  FinalityProvider as FinalityProviderInterface,
+  FinalityProviderV2 as FinalityProviderInterface,
+  FinalityProviderV2,
 } from "@/app/types/finalityProviders";
 import { getFeeRateFromMempool } from "@/utils/getFeeRateFromMempool";
 import { isStakingSignReady } from "@/utils/isStakingSignReady";
@@ -58,7 +58,7 @@ export const Staking = () => {
   const [finalityProvider, setFinalityProvider] =
     useState<FinalityProviderInterface>();
   const [finalityProviders, setFinalityProviders] =
-    useState<FinalityProvider[]>();
+    useState<FinalityProviderV2[]>();
   // Selected fee rate, comes from the user input
   const [selectedFeeRate, setSelectedFeeRate] = useState(0);
   const [awaitingWalletResponse, setAwaitingWalletResponse] = useState(false);