From f1d4cf47073e8e2790ec741b182c32a151013ebb Mon Sep 17 00:00:00 2001
From: Chris Maniewski <code@chmanie.com>
Date: Thu, 25 Jul 2024 22:40:28 +0200
Subject: [PATCH] fix: clear TxButton complete timeout on unmount

---
 src/components/v5/shared/TxButton/TxButton.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/v5/shared/TxButton/TxButton.tsx b/src/components/v5/shared/TxButton/TxButton.tsx
index 3ab9f8ae702..68edc0d0203 100644
--- 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) {