fix: clear TxButton complete timeout on unmount

JoinColony · Jul 25, 2024 · f1d4cf4 · f1d4cf4
1 parent 6e00e00
commit f1d4cf4
Showing 1 changed file with 3 additions and 1 deletion.
diff --git a/src/components/v5/shared/TxButton/TxButton.tsx b/src/components/v5/shared/TxButton/TxButton.tsx
@@ -52,6 +52,7 @@ const TxButton: FC = () => {
 
   // Shows the "Completed" messasge just a little longer after all transactions are completed
   useEffect(() => {
+    let timeoutId: NodeJS.Timeout;
     if (groupState === TransactionGroupStatus.Pending) {
       setShowPending(true);
     } else if (
@@ -60,10 +61,11 @@ const TxButton: FC = () => {
     ) {
       setShowPending(false);
       setShowCompleted(true);
-      setTimeout(() => {
+      timeoutId = setTimeout(() => {
         setShowCompleted(false);
       }, 5000);
     }
+    return () => clearTimeout(timeoutId);
   }, [groupState, prevGroupState]);
 
   if (showPending) {