diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx index 6a0bf6e5e..cc2b29cef 100644 --- a/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx @@ -29,11 +29,8 @@ export default function DepositBTCModal() { queryKey: userKeys.balance(), }) - const sessionId = useRef(Math.random()) - const { cancel, resolve, sessionIdToPromise } = useCancelPromise( - sessionId.current, - "Deposit cancelled", - ) + const { cancel, resolve, shouldOpenErrorModal } = + useCancelPromise("Deposit cancelled") const onStakeBTCSuccess = useCallback(() => { handleBitcoinBalanceInvalidation() @@ -65,7 +62,7 @@ export default function DepositBTCModal() { const onDepositBTCError = useCallback( (error: unknown) => { - if (!sessionIdToPromise[sessionId.current].shouldOpenErrorModal) return + if (!shouldOpenErrorModal) return if (eip1193.didUserRejectRequest(error)) { handlePause() @@ -73,7 +70,7 @@ export default function DepositBTCModal() { onError(error) } }, - [sessionIdToPromise, handlePause, onError], + [shouldOpenErrorModal, handlePause, onError], ) const { mutate: sendBitcoinTransaction, status } = useDepositBTCTransaction({ diff --git a/dapp/src/components/TransactionModal/ActiveUnstakingStep/SignMessageModal.tsx b/dapp/src/components/TransactionModal/ActiveUnstakingStep/SignMessageModal.tsx index 877f83264..8a0d376d2 100644 --- a/dapp/src/components/TransactionModal/ActiveUnstakingStep/SignMessageModal.tsx +++ b/dapp/src/components/TransactionModal/ActiveUnstakingStep/SignMessageModal.tsx @@ -35,9 +35,7 @@ export default function SignMessageModal() { const handleBitcoinPositionInvalidation = useInvalidateQueries({ queryKey: userKeys.position(), }) - const sessionId = useRef(Math.random()) - const { cancel, resolve, sessionIdToPromise } = useCancelPromise( - sessionId.current, + const { cancel, resolve, shouldOpenErrorModal } = useCancelPromise( "Withdrawal cancelled", ) const { transactionFee } = useTransactionDetails( @@ -70,7 +68,7 @@ export default function SignMessageModal() { const onError = useCallback( (error: unknown) => { - if (!sessionIdToPromise[sessionId.current].shouldOpenErrorModal) return + if (!shouldOpenErrorModal) return if (eip1193.didUserRejectRequest(error)) { handlePause() @@ -78,7 +76,7 @@ export default function SignMessageModal() { onSignMessageError(error) } }, - [sessionIdToPromise, handlePause, onSignMessageError], + [shouldOpenErrorModal, handlePause, onSignMessageError], ) const { mutate: handleSignMessage } = useMutation({ diff --git a/dapp/src/hooks/useCancelPromise.ts b/dapp/src/hooks/useCancelPromise.ts index a6bb1666b..9a19756c0 100644 --- a/dapp/src/hooks/useCancelPromise.ts +++ b/dapp/src/hooks/useCancelPromise.ts @@ -1,4 +1,4 @@ -import { useCallback, useEffect } from "react" +import { useCallback, useEffect, useRef } from "react" const sessionIdToPromise: Record< number, @@ -9,17 +9,16 @@ const sessionIdToPromise: Record< } > = {} -export default function useCancelPromise( - sessionId: number, - errorMsgText: string, -) { +export default function useCancelPromise(errorMsgText: string) { + const sessionId = useRef(Math.random()) + useEffect(() => { let cancel = (_: Error) => {} const promise: Promise = new Promise((_, reject) => { cancel = reject }) - sessionIdToPromise[sessionId] = { + sessionIdToPromise[sessionId.current] = { cancel, promise, shouldOpenErrorModal: true, @@ -27,24 +26,29 @@ export default function useCancelPromise( }, [sessionId]) const cancel = useCallback(() => { - const sessionData = sessionIdToPromise[sessionId] - sessionIdToPromise[sessionId] = { + const currentSessionId = sessionId.current + const sessionData = sessionIdToPromise[currentSessionId] + sessionIdToPromise[currentSessionId] = { ...sessionData, shouldOpenErrorModal: false, } - sessionIdToPromise[sessionId].cancel(new Error(errorMsgText)) + sessionIdToPromise[currentSessionId].cancel(new Error(errorMsgText)) }, [errorMsgText, sessionId]) const resolve = useCallback( () => - Promise.race([sessionIdToPromise[sessionId].promise, Promise.resolve()]), + Promise.race([ + sessionIdToPromise[sessionId.current].promise, + Promise.resolve(), + ]), [sessionId], ) return { cancel, resolve, - sessionIdToPromise, + shouldOpenErrorModal: + sessionIdToPromise[sessionId.current]?.shouldOpenErrorModal, } }