resolve comments

babylonlabs-io · Jan 29, 2025 · 931ec20 · 931ec20
1 parent 9d4bb39
commit 931ec20
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 13 deletions.
diff --git a/src/app/hooks/services/useDelegationService.ts b/src/app/hooks/services/useDelegationService.ts
@@ -3,10 +3,12 @@ import { useCallback, useMemo, useState } from "react";
 import { DELEGATION_ACTIONS as ACTIONS } from "@/app/constants";
 import { useAppState } from "@/app/state";
 import { useDelegationV2State } from "@/app/state/DelegationV2State";
+import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
 import {
   DelegationV2,
   DelegationV2StakingState as State,
 } from "@/app/types/delegationsV2";
+import { FinalityProviderState } from "@/app/types/finalityProviders";
 import { BbnStakingParamsVersion } from "@/app/types/networkInfo";
 import { validateDelegation } from "@/utils/delegations";
 import { getBbnParamByVersion } from "@/utils/params";
@@ -69,6 +71,8 @@ export function useDelegationService() {
     submitSlashingWithdrawalTx,
   } = useTransactionService();
 
+  const { getFinalityProvider } = useFinalityProviderState();
+
   const validations = useMemo(
     () =>
       delegations.reduce(
@@ -92,6 +96,22 @@ export function useDelegationService() {
     [confirmationModal, processingDelegations],
   );
 
+  const slashedStatuses = useMemo(
+    () =>
+      delegations.reduce(
+        (acc, delegation) => ({
+          ...acc,
+          [delegation.stakingTxHashHex]: {
+            isSlashed:
+              getFinalityProvider(delegation.finalityProviderBtcPksHex[0])
+                ?.state === FinalityProviderState.SLASHED,
+          },
+        }),
+        {} as Record<string, { isSlashed: boolean }>,
+      ),
+    [delegations, getFinalityProvider],
+  );
+
   const COMMANDS: Record<ActionType, DelegationCommand> = useMemo(
     () => ({
       [ACTIONS.STAKE]: async ({
@@ -318,5 +338,6 @@ export function useDelegationService() {
     closeConfirmationModal,
     fetchMoreDelegations,
     executeDelegationAction,
+    slashedStatuses,
   };
 }
diff --git a/src/components/delegations/DelegationList/index.tsx b/src/components/delegations/DelegationList/index.tsx
@@ -8,7 +8,6 @@ import {
 } from "@/app/hooks/services/useDelegationService";
 import { useFinalityProviderState } from "@/app/state/FinalityProviderState";
 import { type DelegationV2 } from "@/app/types/delegationsV2";
-import { FinalityProviderState } from "@/app/types/finalityProviders";
 import { GridTable, type TableColumn } from "@/components/common/GridTable";
 import { FinalityProviderMoniker } from "@/components/delegations/DelegationList/components/FinalityProviderMoniker";
 import { getNetworkConfig } from "@/config/network";
@@ -23,6 +22,7 @@ import { TxHash } from "./components/TxHash";
 type TableParams = {
   validations: Record<string, { valid: boolean; error?: string }>;
   handleActionClick: (action: ActionType, delegation: DelegationV2) => void;
+  slashedStatuses: Record<string, { isSlashed: boolean }>;
 };
 
 const networkConfig = getNetworkConfig();
@@ -39,6 +39,7 @@ export function DelegationList() {
     executeDelegationAction,
     openConfirmationModal,
     closeConfirmationModal,
+    slashedStatuses,
   } = useDelegationService();
 
   const { getFinalityProvider } = useFinalityProviderState();
@@ -77,15 +78,14 @@ export function DelegationList() {
     {
       field: "actions",
       headerName: "Action",
-      renderCell: (row, _, { handleActionClick, validations }) => {
+      renderCell: (
+        row,
+        _,
+        { handleActionClick, validations, slashedStatuses },
+      ) => {
         const { valid, error } = validations[row.stakingTxHashHex];
-        const finalProvider = getFinalityProvider(
-          row.finalityProviderBtcPksHex[0],
-        );
-        const isSlashed =
-          finalProvider?.state === FinalityProviderState.SLASHED;
-
-        const slashedTooltip = (
+        const { isSlashed } = slashedStatuses[row.stakingTxHashHex] || {};
+        const tooltip = isSlashed ? (
           <>
             <span>
               This finality provider has been slashed.{" "}
@@ -98,13 +98,13 @@ export function DelegationList() {
               </Link>
             </span>
           </>
+        ) : (
+          error
         );
-        const tooltip = isSlashed ? slashedTooltip : error;
-        const disabled = !valid || isSlashed;
 
         return (
           <ActionButton
-            disabled={disabled}
+            disabled={!valid || isSlashed}
             tooltip={tooltip}
             delegation={row}
             state={row.state}
@@ -137,7 +137,11 @@ export function DelegationList() {
           cellClassName:
             "p-4 first:pl-4 first:rounded-l last:pr-4 last:rounded-r bg-secondary-contrast flex items-center text-sm justify-start group-even:bg-[#F9F9F9] text-primary-dark",
         }}
-        params={{ handleActionClick: openConfirmationModal, validations }}
+        params={{
+          handleActionClick: openConfirmationModal,
+          validations,
+          slashedStatuses,
+        }}
         fallback={<div>No delegations found</div>}
       />