fix: withdraw slashing tx

package.json

@@ -27,8 +27,8 @@
   "dependencies": {
     "@babylonlabs-io/babylon-proto-ts": "0.0.3-canary.5",
     "@babylonlabs-io/bbn-core-ui": "0.6.10",
-    "@babylonlabs-io/bbn-wallet-connect": "0.1.31",
-    "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.5",
+    "@babylonlabs-io/bbn-wallet-connect": "0.1.34",
+    "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.6",
     "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
     "@bitcoinerlab/secp256k1": "^1.1.1",
     "@cosmjs/proto-signing": "^0.32.4",
@@ -104,4 +104,4 @@
       "tr46": "4.0.0"
     }
   }
-}
+}

src/app/components/Modals/SlashingModal.tsx

@@ -1,21 +1,30 @@
 import { Text } from "@babylonlabs-io/bbn-core-ui";
 
+import { BbnStakingParamsVersion } from "@/app/types/networkInfo";
+import { NetworkConfig } from "@/config/network";
+
 import { ConfirmationModal } from "./ConfirmationModal";
 
 interface UnbondModalProps {
   processing: boolean;
   open: boolean;
   onClose: () => void;
   onSubmit: () => void;
+  networkConfig: NetworkConfig;
+  param: BbnStakingParamsVersion | null;
 }
 
 export const SlashingModal = (props: UnbondModalProps) => {
+  const { networkConfig, param } = props;
+  const slashingRate = (param?.slashing?.slashingRate ?? 0) * 100;
+
   return (
-    <ConfirmationModal title="Withdraw Non-Slashed Balance" {...props}>
+    <ConfirmationModal title="Withdraw Balance" {...props}>
       <Text variant="body1" className="pt-8 pb-10">
-        The Finality Provider you delegated to has been slashed and removed from
-        the network. You can withdraw your non-slashed balance after the
-        timelock period ends. Slashed funds cannot be recovered.
+        Your finality provider equivocated(double-voted) leading to{" "}
+        {slashingRate}% of your stake getting slashed. You are about to withdraw
+        the remaining balance. A transaction fee will be deducted from your
+        stake by the {networkConfig.btc.networkName} network.
       </Text>
     </ConfirmationModal>
   );

src/app/hooks/services/useDelegationService.ts

@@ -7,7 +7,9 @@ import {
   DelegationV2,
   DelegationV2StakingState as State,
 } from "@/app/types/delegationsV2";
+import { BbnStakingParamsVersion } from "@/app/types/networkInfo";
 import { validateDelegation } from "@/utils/delegations";
+import { getBbnParamByVersion } from "@/utils/params";
 
 import { useTransactionService } from "./useTransactionService";
 
@@ -40,6 +42,7 @@ type DelegationCommand = (props: TxProps) => Promise<void>;
 interface ConfirmationModalState {
   action: ActionType;
   delegation: DelegationV2;
+  param: BbnStakingParamsVersion;
 }
 
 export function useDelegationService() {
@@ -49,7 +52,7 @@ export function useDelegationService() {
     Record<string, boolean>
   >({});
 
-  const { availableUTXOs = [] } = useAppState();
+  const { availableUTXOs = [], networkInfo } = useAppState();
   const {
     delegations = [],
     fetchMoreDelegations,
@@ -63,6 +66,7 @@ export function useDelegationService() {
     submitUnbondingTx,
     submitEarlyUnbondedWithdrawalTx,
     submitTimelockUnbondedWithdrawalTx,
+    submitSlashingWithdrawalTx,
   } = useTransactionService();
 
   const validations = useMemo(
@@ -167,7 +171,7 @@ export function useDelegationService() {
           );
         }
 
-        await submitEarlyUnbondedWithdrawalTx(
+        await submitSlashingWithdrawalTx(
           stakingInput,
           paramsVersion,
           slashing.unbondingSlashingTxHex,
@@ -207,7 +211,7 @@ export function useDelegationService() {
           throw new Error("Slashing tx not found, can't submit withdrawal");
         }
 
-        await submitTimelockUnbondedWithdrawalTx(
+        await submitSlashingWithdrawalTx(
           stakingInput,
           paramsVersion,
           slashing.stakingSlashingTxHex,
@@ -225,17 +229,24 @@ export function useDelegationService() {
       submitUnbondingTx,
       submitEarlyUnbondedWithdrawalTx,
       submitTimelockUnbondedWithdrawalTx,
+      submitSlashingWithdrawalTx,
     ],
   );
 
   const openConfirmationModal = useCallback(
     (action: ActionType, delegation: DelegationV2) => {
+      const param = getBbnParamByVersion(
+        delegation.paramsVersion,
+        networkInfo?.params.bbnStakingParams.versions || [],
+      );
+
       setConfirmationModal({
         action,
         delegation,
+        param,
       });
     },
-    [],
+    [networkInfo],
   );
 
   const closeConfirmationModal = useCallback(

src/app/hooks/services/useTransactionService.ts

@@ -606,6 +606,68 @@ export const useTransactionService = () => {
     ],
   );
 
+  /**
+   * Submit the withdrawal transaction for a slashed staking
+   *
+   * @param stakingInput - The staking inputs
+   * @param paramVersion - The param version of the EOI
+   * @param slashingTxHex - The slashing transaction hex that to be withdrawn
+   */
+  const submitSlashingWithdrawalTx = useCallback(
+    async (
+      stakingInput: BtcStakingInputs,
+      paramVersion: number,
+      slashingTxHex: string,
+    ) => {
+      // Perform checks
+      if (!versionedParams || versionedParams?.length === 0) {
+        throw new Error("Params not loaded");
+      }
+      if (!btcConnected || !btcNetwork)
+        throw new Error("BTC Wallet not connected");
+
+      validateStakingInput(stakingInput);
+
+      const p = getBbnParamByVersion(paramVersion, versionedParams);
+      if (!p)
+        throw new Error(
+          `Unable to find staking params for version ${paramVersion}`,
+        );
+
+      const staking = new Staking(
+        btcNetwork!,
+        {
+          address,
+          publicKeyNoCoordHex: publicKeyNoCoord,
+        },
+        p,
+        stakingInput.finalityProviderPkNoCoordHex,
+        stakingInput.stakingTimelock,
+      );
+
+      const { psbt } = staking.createWithdrawSlashingTransaction(
+        Transaction.fromHex(slashingTxHex),
+        defaultFeeRate,
+      );
+
+      const signedWithdrawalPsbtHex = await signPsbt(psbt.toHex());
+      const signedWithdrawalTx = Psbt.fromHex(
+        signedWithdrawalPsbtHex,
+      ).extractTransaction();
+      await pushTx(signedWithdrawalTx.toHex());
+    },
+    [
+      versionedParams,
+      btcConnected,
+      btcNetwork,
+      address,
+      publicKeyNoCoord,
+      signPsbt,
+      pushTx,
+      defaultFeeRate,
+    ],
+  );
+
   return {
     createDelegationEoi,
     estimateStakingFee,
@@ -614,6 +676,7 @@ export const useTransactionService = () => {
     submitUnbondingTx,
     submitEarlyUnbondedWithdrawalTx,
     submitTimelockUnbondedWithdrawalTx,
+    submitSlashingWithdrawalTx,
   };
 };
 

src/components/delegations/DelegationList/components/DelegationModal.tsx

@@ -7,13 +7,17 @@ import { WithdrawModal } from "@/app/components/Modals/WithdrawModal";
 import { DELEGATION_ACTIONS as ACTIONS } from "@/app/constants";
 import { ActionType } from "@/app/hooks/services/useDelegationService";
 import { DelegationV2 } from "@/app/types/delegationsV2";
+import { BbnStakingParamsVersion } from "@/app/types/networkInfo";
+import { NetworkConfig } from "@/config/network";
 
 interface ConfirmationModalProps {
   processing: boolean;
   action: ActionType | undefined;
   delegation: DelegationV2 | null;
   onSubmit: (action: ActionType, delegation: DelegationV2) => void;
   onClose: () => void;
+  networkConfig: NetworkConfig;
+  param: BbnStakingParamsVersion | null;
 }
 
 export function DelegationModal({

src/components/delegations/DelegationList/index.tsx

@@ -7,7 +7,7 @@ import {
 import { type DelegationV2 } from "@/app/types/delegationsV2";
 import { GridTable, type TableColumn } from "@/components/common/GridTable";
 import { FinalityProviderMoniker } from "@/components/delegations/DelegationList/components/FinalityProviderMoniker";
-import { getNetworkConfigBBN } from "@/config/network/bbn";
+import { getNetworkConfig } from "@/config/network";
 
 import { ActionButton } from "./components/ActionButton";
 import { Amount } from "./components/Amount";
@@ -21,7 +21,7 @@ type TableParams = {
   handleActionClick: (action: ActionType, delegation: DelegationV2) => void;
 };
 
-const { networkFullName: bbnNetworkFullName } = getNetworkConfigBBN();
+const networkConfig = getNetworkConfig();
 
 const columns: TableColumn<DelegationV2, TableParams>[] = [
   {
@@ -90,7 +90,7 @@ export function DelegationList() {
   return (
     <div className="bg-secondary-contrast p-6 border border-primary-dark/20">
       <Heading variant="h6" className="text-primary-light py-2 mb-6">
-        {bbnNetworkFullName} Stakes
+        {networkConfig.bbn.networkFullName} Stakes
       </Heading>
 
       <GridTable
@@ -116,9 +116,11 @@ export function DelegationList() {
       <DelegationModal
         action={confirmationModal?.action}
         delegation={confirmationModal?.delegation ?? null}
+        param={confirmationModal?.param ?? null}
         processing={processing}
         onSubmit={executeDelegationAction}
         onClose={closeConfirmationModal}
+        networkConfig={networkConfig}
       />
     </div>
   );

src/config/network/index.ts

@@ -0,0 +1,17 @@
+import { BBNConfig, BTCConfig } from "@babylonlabs-io/bbn-wallet-connect";
+
+import { getNetworkConfigBBN } from "./bbn";
+import { getNetworkConfigBTC } from "./btc";
+
+export interface NetworkConfig {
+  bbn: BBNConfig;
+  btc: BTCConfig;
+}
+
+// Get all network configs
+export const getNetworkConfig = (): NetworkConfig => {
+  return {
+    bbn: getNetworkConfigBBN(),
+    btc: getNetworkConfigBTC(),
+  };
+};