Use current session data to check promise state

Previously, `shouldOpenErrorModal` returned a wrong value. Let's check the shouldOpenErrorModal value using the current sessionId to make sure the data is up to date.
thesis · Nov 25, 2024 · d196200 · d196200
1 parent fffdb6d
commit d196200
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 28 deletions.
diff --git a/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx b/dapp/src/components/TransactionModal/ActiveStakingStep/DepositBTCModal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from "react"
+import React, { useCallback, useRef } from "react"
 import {
   useActionFlowPause,
   useActionFlowTokenAmount,
@@ -29,8 +29,11 @@ export default function DepositBTCModal() {
     queryKey: userKeys.balance(),
   })
 
-  const { cancel, resolve, shouldOpenErrorModal } =
-    useCancelPromise("Deposit cancelled")
+  const sessionId = useRef(Math.random())
+  const { cancel, resolve, sessionIdToPromise } = useCancelPromise(
+    sessionId.current,
+    "Deposit cancelled",
+  )
 
   const onStakeBTCSuccess = useCallback(() => {
     handleBitcoinBalanceInvalidation()
@@ -62,15 +65,15 @@ export default function DepositBTCModal() {
 
   const onDepositBTCError = useCallback(
     (error: unknown) => {
-      if (!shouldOpenErrorModal) return
+      if (!sessionIdToPromise[sessionId.current].shouldOpenErrorModal) return
 
       if (eip1193.didUserRejectRequest(error)) {
         handlePause()
       } else {
         onError(error)
       }
     },
-    [shouldOpenErrorModal, handlePause, onError],
+    [sessionIdToPromise, 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
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from "react"
+import React, { useCallback, useRef, useState } from "react"
 import {
   useActionFlowPause,
   useActionFlowTokenAmount,
@@ -35,7 +35,9 @@ export default function SignMessageModal() {
   const handleBitcoinPositionInvalidation = useInvalidateQueries({
     queryKey: userKeys.position(),
   })
-  const { cancel, resolve, shouldOpenErrorModal } = useCancelPromise(
+  const sessionId = useRef(Math.random())
+  const { cancel, resolve, sessionIdToPromise } = useCancelPromise(
+    sessionId.current,
     "Withdrawal cancelled",
   )
   const { transactionFee } = useTransactionDetails(
@@ -68,15 +70,15 @@ export default function SignMessageModal() {
 
   const onError = useCallback(
     (error: unknown) => {
-      if (!shouldOpenErrorModal) return
+      if (!sessionIdToPromise[sessionId.current].shouldOpenErrorModal) return
 
       if (eip1193.didUserRejectRequest(error)) {
         handlePause()
       } else {
         onSignMessageError(error)
       }
     },
-    [shouldOpenErrorModal, handlePause, onSignMessageError],
+    [sessionIdToPromise, handlePause, onSignMessageError],
   )
 
   const { mutate: handleSignMessage } = useMutation({

diff --git a/dapp/src/hooks/useCancelPromise.ts b/dapp/src/hooks/useCancelPromise.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef } from "react"
+import { useCallback, useEffect } from "react"
 
 const sessionIdToPromise: Record<
   number,
@@ -9,47 +9,42 @@ const sessionIdToPromise: Record<
   }
 > = {}
 
-export default function useCancelPromise(errorMsgText: string) {
-  const sessionId = useRef(Math.random())
-
+export default function useCancelPromise(
+  sessionId: number,
+  errorMsgText: string,
+) {
   useEffect(() => {
     let cancel = (_: Error) => {}
     const promise: Promise<void> = new Promise((_, reject) => {
       cancel = reject
     })
 
-    sessionIdToPromise[sessionId.current] = {
+    sessionIdToPromise[sessionId] = {
       cancel,
       promise,
       shouldOpenErrorModal: true,
     }
-  }, [])
+  }, [sessionId])
 
   const cancel = useCallback(() => {
-    const currentSessionId = sessionId.current
-    const sessionData = sessionIdToPromise[currentSessionId]
-    sessionIdToPromise[currentSessionId] = {
+    const sessionData = sessionIdToPromise[sessionId]
+    sessionIdToPromise[sessionId] = {
       ...sessionData,
       shouldOpenErrorModal: false,
     }
 
-    sessionIdToPromise[currentSessionId].cancel(new Error(errorMsgText))
-  }, [errorMsgText])
+    sessionIdToPromise[sessionId].cancel(new Error(errorMsgText))
+  }, [errorMsgText, sessionId])
 
   const resolve = useCallback(
     () =>
-      Promise.race([
-        sessionIdToPromise[sessionId.current].promise,
-        Promise.resolve(),
-      ]),
-    [],
+      Promise.race([sessionIdToPromise[sessionId].promise, Promise.resolve()]),
+    [sessionId],
   )
-  const shouldOpenErrorModal =
-    sessionIdToPromise[sessionId.current]?.shouldOpenErrorModal
 
   return {
     cancel,
     resolve,
-    shouldOpenErrorModal,
+    sessionIdToPromise,
   }
 }