feat: reduce signing in eoi

package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@babylonlabs-io/babylon-proto-ts": "0.0.3-canary.3",
     "@babylonlabs-io/bbn-core-ui": "^0.1.0",
-    "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.2",
+    "@babylonlabs-io/btc-staking-ts": "0.4.0-canary.3",
     "@bitcoin-js/tiny-secp256k1-asmjs": "2.2.3",
     "@bitcoinerlab/secp256k1": "^1.1.1",
     "@cosmjs/proto-signing": "^0.32.4",

src/app/api/getDelegationsV2.ts

@@ -23,18 +23,23 @@ interface DelegationsV2APIResponse {
 }
 interface DelegationV2API {
   finality_provider_btc_pks_hex: string[];
-  params_version: string;
+  params_version: number;
   staker_btc_pk_hex: string;
   delegation_staking: {
     staking_tx_hash_hex: string;
-    staking_time: string;
-    staking_amount: string;
+    staking_time: number;
+    staking_amount: number;
     start_height: number;
     end_height: number;
+    staking_tx_hex: string;
   };
   delegation_unbonding: {
-    unbonding_time: string;
+    unbonding_time: number;
     unbonding_tx: string;
+    covenant_unbonding_signatures?: {
+      covenant_btc_pk_hex: string;
+      signature_hex: string;
+    }[];
   };
   state: string;
 }
@@ -68,23 +73,27 @@ export const getDelegationV2 = async (
   return {
     finalityProviderBtcPksHex:
       delegationAPIResponse.data.finality_provider_btc_pks_hex,
-    paramsVersion: parseInt(delegationAPIResponse.data.params_version),
+    stakingTxHex: delegationAPIResponse.data.delegation_staking.staking_tx_hex,
+    paramsVersion: delegationAPIResponse.data.params_version,
     stakerBtcPkHex: delegationAPIResponse.data.staker_btc_pk_hex,
-    stakingAmount: parseInt(
-      delegationAPIResponse.data.delegation_staking.staking_amount,
-    ),
-    stakingTime: parseInt(
-      delegationAPIResponse.data.delegation_staking.staking_time,
-    ),
+    stakingAmount: delegationAPIResponse.data.delegation_staking.staking_amount,
+    stakingTime: delegationAPIResponse.data.delegation_staking.staking_time,
     stakingTxHashHex:
       delegationAPIResponse.data.delegation_staking.staking_tx_hash_hex,
     startHeight: delegationAPIResponse.data.delegation_staking.start_height,
     endHeight: delegationAPIResponse.data.delegation_staking.end_height,
     state,
-    unbondingTime: parseInt(
+    unbondingTime:
       delegationAPIResponse.data.delegation_unbonding.unbonding_time,
-    ),
-    unbondingTx: delegationAPIResponse.data.delegation_unbonding.unbonding_tx,
+    unbondingTxHex:
+      delegationAPIResponse.data.delegation_unbonding.unbonding_tx,
+    covenantUnbondingSignatures:
+      delegationAPIResponse.data.delegation_unbonding.covenant_unbonding_signatures?.map(
+        (signature) => ({
+          covenantBtcPkHex: signature.covenant_btc_pk_hex,
+          signatureHex: signature.signature_hex,
+        }),
+      ),
   };
 };
 
@@ -117,20 +126,24 @@ export const getDelegationsV2 = async (
       }
       return {
         finalityProviderBtcPksHex: apiDelegation.finality_provider_btc_pks_hex,
-        paramsVersion: parseInt(apiDelegation.params_version),
+        stakingTxHex: apiDelegation.delegation_staking.staking_tx_hex,
+        paramsVersion: apiDelegation.params_version,
         stakerBtcPkHex: apiDelegation.staker_btc_pk_hex,
-        stakingAmount: parseInt(
-          apiDelegation.delegation_staking.staking_amount,
-        ),
-        stakingTime: parseInt(apiDelegation.delegation_staking.staking_time),
+        stakingAmount: apiDelegation.delegation_staking.staking_amount,
+        stakingTime: apiDelegation.delegation_staking.staking_time,
         stakingTxHashHex: apiDelegation.delegation_staking.staking_tx_hash_hex,
         startHeight: apiDelegation.delegation_staking.start_height,
         endHeight: apiDelegation.delegation_staking.end_height,
         state,
-        unbondingTime: parseInt(
-          apiDelegation.delegation_unbonding.unbonding_time,
-        ),
-        unbondingTx: apiDelegation.delegation_unbonding.unbonding_tx,
+        unbondingTime: apiDelegation.delegation_unbonding.unbonding_time,
+        unbondingTxHex: apiDelegation.delegation_unbonding.unbonding_tx,
+        covenantUnbondingSignatures:
+          apiDelegation.delegation_unbonding.covenant_unbonding_signatures?.map(
+            (signature) => ({
+              covenantBtcPkHex: signature.covenant_btc_pk_hex,
+              signatureHex: signature.signature_hex,
+            }),
+          ),
       };
     },
   );

src/app/components/Modals/EOIModal.tsx

@@ -17,7 +17,7 @@ interface EOIModalProps {
     eoi: EOIStepStatus;
   };
   open: boolean;
-  onClose: (value: boolean) => void;
+  onClose: () => void;
 }
 
 const STATUS_ICON = {

src/app/components/Modals/FeedbackModal.tsx

@@ -6,7 +6,7 @@ import { GeneralModal } from "./GeneralModal";
 
 interface FeedbackModalProps {
   open: boolean;
-  onClose: (value: boolean) => void;
+  onClose: () => void;
   type: "success" | "cancel" | null;
 }
 
@@ -142,7 +142,7 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
         </h3>
         <button
           className="btn btn-circle btn-ghost btn-sm"
-          onClick={() => onClose(false)}
+          onClick={() => onClose()}
         >
           <IoMdClose size={24} />
         </button>

src/app/components/Modals/GeneralModal.tsx

@@ -4,7 +4,7 @@ import { twMerge } from "tailwind-merge";
 
 interface GeneralModalProps {
   open: boolean;
-  onClose: (value: boolean) => void;
+  onClose: () => void;
   small?: boolean;
   children: ReactNode;
   className?: string;
@@ -39,7 +39,7 @@ export const GeneralModal: React.FC<GeneralModalProps> = ({
     <Modal
       ref={modalRef}
       open={open}
-      onClose={() => onClose(false)}
+      onClose={onClose}
       classNames={{
         modalContainer: "flex items-end justify-center md:items-center",
         modal: twMerge(

src/app/components/Modals/PendingVerificationModal.tsx

@@ -1,15 +1,16 @@
+import { useCallback } from "react";
 import { FaCheckCircle } from "react-icons/fa";
 
 import { useDelegationV2 } from "@/app/hooks/api/useDelegationV2";
+import { useTransactionService } from "@/app/hooks/services/useTransactionService";
 import { DelegationV2StakingState as state } from "@/app/types/delegationsV2";
 import { getNetworkConfig } from "@/config/network.config";
 
 import { GeneralModal } from "./GeneralModal";
 
 interface PendingVerificationModalProps {
   open: boolean;
-  onClose: (value: boolean) => void;
-  onStake?: () => void;
+  onClose: () => void;
   awaitingWalletResponse: boolean;
   stakingTxHash: string;
 }
@@ -39,14 +40,40 @@ const NotVerified = () => (
 export function PendingVerificationModal({
   open,
   onClose,
-  onStake,
   awaitingWalletResponse,
   stakingTxHash,
 }: PendingVerificationModalProps) {
+  const { submitStakingTx } = useTransactionService();
   const { networkName } = getNetworkConfig();
 
   const { data: delegation = null } = useDelegationV2(stakingTxHash);
 
+  const onStake = useCallback(async () => {
+    if (!delegation) {
+      throw new Error("Delegation not found");
+    }
+    const {
+      finalityProviderBtcPksHex,
+      stakingAmount,
+      stakingTime,
+      paramsVersion,
+      stakingTxHashHex,
+      stakingTxHex,
+    } = delegation;
+
+    await submitStakingTx(
+      {
+        finalityProviderPkNoCoordHex: finalityProviderBtcPksHex[0],
+        stakingAmountSat: stakingAmount,
+        stakingTimeBlocks: stakingTime,
+      },
+      paramsVersion,
+      stakingTxHashHex,
+      stakingTxHex,
+    );
+    onClose();
+  }, [delegation, submitStakingTx, onClose]);
+
   const verified = delegation?.state === state.VERIFIED;
 
   return (

src/app/components/Modals/PreviewModal.tsx

@@ -12,7 +12,7 @@ import { GeneralModal } from "./GeneralModal";
 
 interface PreviewModalProps {
   open: boolean;
-  onClose: (value: boolean) => void;
+  onClose: () => void;
   onSign: () => void;
   finalityProvider: string | undefined;
   stakingAmountSat: number;
@@ -55,7 +55,7 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
         {!awaitingWalletResponse && (
           <button
             className="btn btn-circle btn-ghost btn-sm"
-            onClick={() => onClose(false)}
+            onClick={() => onClose()}
           >
             <IoMdClose size={24} />
           </button>
@@ -119,7 +119,7 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
             <button
               className="btn btn-outline flex-1"
               onClick={() => {
-                onClose(false);
+                onClose();
               }}
             >
               Cancel

src/app/components/Staking/Staking.tsx

@@ -1,5 +1,4 @@
 import { useQuery, useQueryClient } from "@tanstack/react-query";
-import { Transaction } from "bitcoinjs-lib";
 import { useEffect, useMemo, useState } from "react";
 import { Tooltip } from "react-tooltip";
 import { useLocalStorage } from "usehooks-ts";
@@ -49,7 +48,6 @@ export const Staking = () => {
     publicKeyNoCoord,
     network: btcWalletNetwork,
     getNetworkFees,
-    pushTx,
   } = useBTCWallet();
 
   const disabled = isError;
@@ -80,7 +78,9 @@ export const Staking = () => {
   const latestParam = params?.bbnStakingParams?.latestParam;
 
   const [pendingVerificationOpen, setPendingVerificationOpen] = useState(false);
-  const [stakingTx, setStakingTx] = useState<string | undefined>();
+  const [stakingTxHashHex, setStakingTxHashHex] = useState<
+    string | undefined
+  >();
 
   const [eoiModalOpen, setEoiModalOpen] = useState(false);
   const [eoiStatuses, setEoiStatuses] = useState({
@@ -145,7 +145,7 @@ export const Staking = () => {
   ]);
 
   const handleResetState = () => {
-    setStakingTx(undefined);
+    setStakingTxHashHex(undefined);
     setPendingVerificationOpen(false);
     setEoiModalOpen(false);
     setEoiStatuses({
@@ -219,13 +219,13 @@ export const Staking = () => {
       };
       setAwaitingWalletResponse(true);
       setEoiModalOpen(true);
-      const stakingTX = await createDelegationEoi(
+      const stakingTxHashHex = await createDelegationEoi(
         eoiInput,
         feeRate,
         signingCallback,
       );
-      setEoiModalOpen(false);
-      setStakingTx(stakingTX.toHex());
+
+      setStakingTxHashHex(stakingTxHashHex);
       setPendingVerificationOpen(true);
     } catch (error: Error | any) {
       showError({
@@ -246,30 +246,7 @@ export const Staking = () => {
       });
     } finally {
       setAwaitingWalletResponse(false);
-    }
-  };
-
-  const handleStake = async () => {
-    if (!stakingTx) {
-      throw new Error("Staking transaction not found");
-    }
-    try {
-      // Right now we have staking tx
-      // later on this step should be changed to building and signing
-      await pushTx(stakingTx);
-      handleResetState();
-    } catch (error: Error | any) {
-      showError({
-        error: {
-          message: error.message,
-          errorState: ErrorState.STAKING,
-        },
-        noCancel: true,
-        retryAction: async () => {
-          await pushTx(stakingTx);
-          handleResetState();
-        },
-      });
+      setEoiModalOpen(false);
     }
   };
 
@@ -394,8 +371,8 @@ export const Staking = () => {
     }
   };
 
-  const handlePreviewModalClose = (isOpen: boolean) => {
-    setPreviewModalOpen(isOpen);
+  const handlePreviewModalClose = () => {
+    setPreviewModalOpen(false);
     handleFeedbackModal("cancel");
   };
 
@@ -555,13 +532,12 @@ export const Staking = () => {
         onClose={handleCloseFeedbackModal}
         type={feedbackModal.type}
       />
-      {stakingTx && (
+      {stakingTxHashHex && (
         <PendingVerificationModal
           open={pendingVerificationOpen}
           onClose={handlePendingVerificationClose}
-          stakingTxHash={Transaction.fromHex(stakingTx).getId()}
+          stakingTxHash={stakingTxHashHex}
           awaitingWalletResponse={awaitingWalletResponse}
-          onStake={handleStake}
         />
       )}
       <EOIModal