From 62fe9796e4ce2d95f24485d64811b973d6be8288 Mon Sep 17 00:00:00 2001
From: alanrsoares <alan@axelar.network>
Date: Thu, 18 Jan 2024 17:16:45 -0300
Subject: [PATCH] fix: extract actions.removeTransaction call to higher context

---
 .../features/Transactions/Transactions.tsx    | 29 ++++++++++++-------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/apps/maestro/src/features/Transactions/Transactions.tsx b/apps/maestro/src/features/Transactions/Transactions.tsx
index f6100982f..52d9d3fab 100644
--- a/apps/maestro/src/features/Transactions/Transactions.tsx
+++ b/apps/maestro/src/features/Transactions/Transactions.tsx
@@ -56,11 +56,19 @@ function useGroupedStatuses(txHash: `0x${string}`) {
   }, [computed.indexedById, statuses, txHash]);
 }
 
-const ToastElement: FC<{
+type ToastElementProps = {
   txHash: `0x${string}`;
   chainId: number;
   txType?: TxType;
-}> = ({ txHash, chainId, txType }) => {
+  onRemoveTx?: (txHash: `0x${string}`) => void;
+};
+
+const ToastElement: FC<ToastElementProps> = ({
+  txHash,
+  chainId,
+  txType,
+  onRemoveTx,
+}) => {
   const { elapsedBlocks, expectedConfirmations, progress } = useGMPTxProgress(
     txHash,
     chainId
@@ -144,8 +152,6 @@ const ToastElement: FC<{
     </>
   );
 
-  const [, actions] = useTransactionsContainer();
-
   const handleDismiss = useCallback(() => {
     toast.dismiss(txHash);
 
@@ -155,9 +161,9 @@ const ToastElement: FC<{
         (x) => x.status === "error" || x.status === "insufficient_fee"
       )
     ) {
-      actions.removeTransaction(txHash);
+      onRemoveTx?.(txHash);
     }
-  }, [actions, groupedStatusesProps, txHash]);
+  }, [groupedStatusesProps, onRemoveTx, txHash]);
 
   return (
     <div className="bg-base-300 border-base-200 relative grid gap-2 rounded-md p-2 pl-4 pr-8 shadow-md shadow-black/10">
@@ -223,10 +229,13 @@ const GMPTransaction: FC<GMPTxStatusProps> = (props) => {
       actions.removeTransaction(props.txHash);
     }
 
-    toast.custom(<ToastElement {...props} />, {
-      id: props.txHash,
-      duration: Infinity,
-    });
+    toast.custom(
+      <ToastElement {...props} onRemoveTx={actions.removeTransaction} />,
+      {
+        id: props.txHash,
+        duration: Infinity,
+      }
+    );
 
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
     task(props.txHash);