Keep logic in useDepositBTCTransaction

dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx

@@ -3,11 +3,10 @@ import {
   useActionFlowPause,
   useActionFlowTokenAmount,
   useAppDispatch,
-  useConnector,
+  useDepositBTCTransaction,
   useInvalidateQueries,
   useStakeFlowContext,
   useVerifyDepositAddress,
-  useWallet,
 } from "#/hooks"
 import { eip1193, logPromiseFailure } from "#/utils"
 import { PROCESS_STATUSES } from "#/types"
@@ -20,8 +19,6 @@ import WalletInteractionModal from "../WalletInteractionModal"
 const { userKeys } = queryKeysFactory
 
 export default function DepositBTCModal() {
-  const connector = useConnector()
-  const { address } = useWallet()
   const tokenAmount = useActionFlowTokenAmount()
   const { btcAddress, depositReceipt, stake } = useStakeFlowContext()
   const verifyDepositAddress = useVerifyDepositAddress()
@@ -70,32 +67,7 @@ export default function DepositBTCModal() {
     [onError, handlePause],
   )
 
-  const { mutate: sendBitcoinTransaction, status } = useMutation({
-    mutationKey: ["send-bitcoin"],
-    mutationFn: async ({
-      recipient,
-      amount,
-    }: {
-      recipient: string
-      amount: bigint
-    }) => {
-      if (!address) {
-        throw new Error("Bitcoin account was not connected.")
-      }
-
-      if (!connector) {
-        throw new Error("Connector was not defined.")
-      }
-      // @ts-expect-error adjust types to handle bitcoin wallet wrappers
-      const client = await connector.getClient()
-
-      const satoshis = Number(amount)
-
-      // @ts-expect-error adjust types to handle bitcoin wallet wrappers
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment
-      const txhash: string = await client.sendBitcoin(recipient, satoshis)
-      return txhash
-    },
+  const { mutate: sendBitcoinTransaction, status } = useDepositBTCTransaction({
     onSuccess: onDepositBTCSuccess,
     onError: onDepositBTCError,
   })

dapp/src/hooks/index.ts

@@ -35,3 +35,4 @@ export { default as useSignMessageAndCreateSession } from "./useSignMessageAndCr
 export { default as useScrollbarVisibility } from "./useScrollbarVisibility"
 export { default as useAccessCode } from "./useAccessCode"
 export { default as useFormField } from "./useFormField"
+export { default as useDepositBTCTransaction } from "./useDepositBTCTransaction"

dapp/src/hooks/useDepositBTCTransaction.ts

@@ -0,0 +1,42 @@
+import { useMutation, UseMutationOptions } from "@tanstack/react-query"
+import { useConnector } from "./orangeKit"
+import { useWallet } from "./useWallet"
+
+type MutationFnParams = {
+  recipient: string
+  amount: bigint
+}
+
+type UseDepositBTCTransactionOptions = Omit<
+  UseMutationOptions<string, Error, MutationFnParams>,
+  "mutationKey" | "mutationFn"
+>
+
+export default function useDepositBTCTransaction(
+  options: UseDepositBTCTransactionOptions,
+) {
+  const connector = useConnector()
+  const { address } = useWallet()
+  return useMutation({
+    mutationKey: ["send-bitcoin"],
+    mutationFn: async ({ recipient, amount }: MutationFnParams) => {
+      if (!address) {
+        throw new Error("Bitcoin account was not connected.")
+      }
+
+      if (!connector) {
+        throw new Error("Connector was not defined.")
+      }
+      // @ts-expect-error adjust types to handle bitcoin wallet wrappers
+      const client = await connector.getClient()
+
+      const satoshis = Number(amount)
+
+      // @ts-expect-error adjust types to handle bitcoin wallet wrappers
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-assignment
+      const txhash: string = await client.sendBitcoin(recipient, satoshis)
+      return txhash
+    },
+    ...options,
+  })
+}