From 1717ea5b817f7f1ba6158f30975579a128027b13 Mon Sep 17 00:00:00 2001 From: Karolina Kosiorowska Date: Tue, 5 Nov 2024 11:19:01 +0100 Subject: [PATCH] Refactor `useDepositBTCTransaction` and use `useMutation` --- .../ActiveStakingStep/DepositBTCModal.tsx | 53 +++++++------ dapp/src/hooks/useDepositBTCTransaction.ts | 79 +++++++------------ dapp/src/hooks/useExecuteFunction.ts | 4 +- dapp/src/types/callback.ts | 2 +- 4 files changed, 60 insertions(+), 78 deletions(-) diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx index b9d3e04c9..61f1a1a1e 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from "react" +import React, { useCallback } from "react" import { useActionFlowPause, useActionFlowTokenAmount, @@ -34,57 +34,58 @@ export default function DepositBTCModal() { }, [dispatch, handleBitcoinBalanceInvalidation]) const onError = useCallback( - (error?: unknown) => { - console.error(error) - dispatch(setStatus(PROCESS_STATUSES.FAILED)) - }, + () => dispatch(setStatus(PROCESS_STATUSES.FAILED)), [dispatch], ) const handleStake = useExecuteFunction(stake, onStakeBTCSuccess, onError) - const onDepositBTCSuccess = useCallback(() => { - dispatch(setStatus(PROCESS_STATUSES.LOADING)) - - logPromiseFailure(handleStake()) - }, [dispatch, handleStake]) + const onDepositBTCSuccess = useCallback( + (transactionHash: string) => { + dispatch(setTxHash(transactionHash)) + logPromiseFailure(handleStake()) + }, + [dispatch, handleStake], + ) const onDepositBTCError = useCallback( (error: unknown) => { if (eip1193.didUserRejectRequest(error)) { handlePause() } else { - onError(error) + onError() } }, [onError, handlePause], ) - const { sendBitcoinTransaction, transactionHash, inProgress } = - useDepositBTCTransaction(onDepositBTCSuccess, onDepositBTCError) - - useEffect(() => { - if (transactionHash) { - dispatch(setTxHash(transactionHash)) - } - }, [dispatch, transactionHash]) + const { sendBitcoinTransaction, status } = useDepositBTCTransaction( + onDepositBTCSuccess, + onDepositBTCError, + ) const handledDepositBTC = useCallback(async () => { if (!tokenAmount?.amount || !btcAddress || !depositReceipt) return - const status = await verifyDepositAddress(depositReceipt, btcAddress) - - if (status === "valid") { - await sendBitcoinTransaction(btcAddress, tokenAmount?.amount) + const verificationStatus = await verifyDepositAddress( + depositReceipt, + btcAddress, + ) + + if (verificationStatus === "valid") { + sendBitcoinTransaction({ + recipient: btcAddress, + amount: tokenAmount?.amount, + }) } else { onError() } }, [ + tokenAmount?.amount, btcAddress, depositReceipt, - onError, verifyDepositAddress, sendBitcoinTransaction, - tokenAmount?.amount, + onError, ]) const handledDepositBTCWrapper = useCallback(() => { @@ -93,7 +94,7 @@ export default function DepositBTCModal() { useTimeout(handledDepositBTCWrapper, ONE_SEC_IN_MILLISECONDS) - if (inProgress || transactionHash) + if (status === "pending" || status === "success") return return diff --git a/dapp/src/hooks/useDepositBTCTransaction.ts b/dapp/src/hooks/useDepositBTCTransaction.ts index 5146e1457..c3eeb2e03 100644 --- a/dapp/src/hooks/useDepositBTCTransaction.ts +++ b/dapp/src/hooks/useDepositBTCTransaction.ts @@ -1,40 +1,28 @@ -import { useCallback, useEffect, useState } from "react" import { OnErrorCallback, OnSuccessCallback } from "#/types" +import { useMutation } from "@tanstack/react-query" import { useWallet } from "./useWallet" import { useConnector } from "./orangeKit/useConnector" -type SendBitcoinTransactionParams = Parameters< - (recipient: string, amount: bigint) => void -> - -type UseDepositBTCTransactionReturn = { - inProgress: boolean - transactionHash?: string - sendBitcoinTransaction: ( - ...params: SendBitcoinTransactionParams - ) => Promise -} - export function useDepositBTCTransaction( - onSuccess?: OnSuccessCallback, + onSuccess?: OnSuccessCallback, onError?: OnErrorCallback, -): UseDepositBTCTransactionReturn { +) { const connector = useConnector() const { address } = useWallet() - const [transactionHash, setTransactionHash] = useState( - undefined, - ) - const [inProgress, setInProgress] = useState(false) - - useEffect(() => { - if (transactionHash && onSuccess) { - onSuccess() - } - }, [onSuccess, transactionHash]) - - const sendBitcoinTransaction = useCallback( - async (recipient: string, amount: bigint) => { + const { + mutate: sendBitcoinTransaction, + status, + data, + } = useMutation({ + mutationKey: ["send-bitcoin"], + mutationFn: async ({ + recipient, + amount, + }: { + recipient: string + amount: bigint + }) => { if (!address) { throw new Error("Bitcoin account was not connected.") } @@ -42,29 +30,22 @@ export function useDepositBTCTransaction( if (!connector) { throw new Error("Connector was not defined.") } + // @ts-expect-error adjust types to handle bitcoin wallet wrappers + const client = await connector.getClient() - try { - // @ts-expect-error adjust types to handle bitcoin wallet wrappers - const client = await connector.getClient() - - const satoshis = Number(amount) + const satoshis = Number(amount) - setInProgress(true) - // @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) - setTransactionHash(txhash) - } catch (error) { - if (onError) { - onError(error) - } - console.error(error) - } finally { - setInProgress(false) - } + // @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 + }, + onSuccess: (responseData) => onSuccess?.(responseData), + onError: (error) => { + onError?.(error) + console.error(error) }, - [address, connector, onError], - ) + }) - return { sendBitcoinTransaction, transactionHash, inProgress } + return { sendBitcoinTransaction, status, data } } diff --git a/dapp/src/hooks/useExecuteFunction.ts b/dapp/src/hooks/useExecuteFunction.ts index 9f08aa884..a99ebcf0c 100644 --- a/dapp/src/hooks/useExecuteFunction.ts +++ b/dapp/src/hooks/useExecuteFunction.ts @@ -13,10 +13,10 @@ export function useExecuteFunction< return useCallback( async (...args: Parameters) => { try { - await fn(...args) + const response = await fn(...args) if (onSuccess) { - onSuccess() + onSuccess(response) } } catch (error) { if (onError) { diff --git a/dapp/src/types/callback.ts b/dapp/src/types/callback.ts index ee2275bb9..8fcfac9c0 100644 --- a/dapp/src/types/callback.ts +++ b/dapp/src/types/callback.ts @@ -1,3 +1,3 @@ -export type OnSuccessCallback = () => void +export type OnSuccessCallback = (data: DataType) => void export type OnErrorCallback = (error: ErrorType) => void