Fix bug modal on Tx Queue tab when a transaction is executed (#146)

* Bump version 0.2.0-beta

* Bump version 0.3.0-beta

* Fix modal view behaviour

src/components/TxTable/ModalTxExecution/useRemovedTxIds.tsx

@@ -14,42 +14,55 @@ interface Props {
   callback: () => void;
 }
 
-interface UseRemovedTxIdsReturn {
-  transactionToProcess: TransactionWithAction | undefined;
+interface UsePendingTxRemovalReturn {
+  pendingTransaction: TransactionWithAction | undefined;
 }
 
-export function useRemovedTxIds({
+/**
+ * Listen blockchain events to identify transactions recently executed
+ * or cancelled that are not yet indexed in database.
+ *
+ * It uses events to detect changes and returns the ID of the transaction pending
+ * to be removed from the queue of proposed transactions.
+ */
+export function usePendingTxRemoval({
   data,
   callback,
-}: Props): UseRemovedTxIdsReturn {
-  const [transactionToProcess, setTransactionWillBeExecuted] =
-    useState<UseRemovedTxIdsReturn["transactionToProcess"]>();
+}: Props): UsePendingTxRemovalReturn {
+  const [pendingTransaction, setPendingTransaction] = useState<
+    UsePendingTxRemovalReturn["pendingTransaction"] | undefined
+  >();
   const { localMultisigEventRepo } = useLocalDbContext();
   const [newEvent, setNewEvent] = useState<BlockchainIssuedEvent | undefined>();
 
-  useEventListenerCallback(LocalMultisigEvents.eventAdded, () =>
-    setNewEvent(
-      localMultisigEventRepo
-        .getEvents()
-        .find(
-          (event) =>
-            event.name === MultisigContractEvents.TransactionExecuted ||
-            event.name === MultisigContractEvents.TransactionCancelled
-        )
-    )
-  );
+  useEventListenerCallback(LocalMultisigEvents.eventAdded, () => {
+    const latestEvent = localMultisigEventRepo
+      .getEvents()
+      .find(
+        (event) =>
+          event.name === MultisigContractEvents.TransactionExecuted ||
+          event.name === MultisigContractEvents.TransactionCancelled
+      );
+
+    if (latestEvent && latestEvent !== newEvent) {
+      setNewEvent(latestEvent);
+    }
+  });
+
   useEffect(() => {
     if (!data || !newEvent) return;
 
     const willBeExecuted = data.find((tx) => tx.txId === newEvent.args[0]);
-    if (willBeExecuted) {
-      setTransactionWillBeExecuted({
+    if (willBeExecuted && willBeExecuted !== pendingTransaction) {
+      setPendingTransaction({
         ...willBeExecuted,
         actionName: newEvent.name,
       });
       callback();
+      setNewEvent(undefined);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [callback, data, localMultisigEventRepo, newEvent]);
 
-  return { transactionToProcess };
+  return { pendingTransaction };
 }

src/components/TxTable/TransactionsQueueDetail.tsx

@@ -1,16 +1,16 @@
 import { Box } from "@mui/material";
-import router from "next/router";
 import React from "react";
 import { ChainId } from "useink/dist/chains";
 
 import { LoadingSkeleton } from "@/components/common/LoadingSkeleton";
 import { SignatoriesAccount } from "@/domain/SignatoriesAccount";
 import { useModalBehaviour } from "@/hooks/common/useModalBehaviour";
+import { useReplaceURLParam } from "@/hooks/common/useReplaceParam";
 import { useMultisigContractPromise } from "@/hooks/contractPromise/useMultisigContractPromise";
 import { useListTxQueue } from "@/hooks/transactions/useListTxQueue";
 
 import { ModalTxExecution } from "./ModalTxExecution";
-import { useRemovedTxIds } from "./ModalTxExecution/useRemovedTxIds";
+import { usePendingTxRemoval } from "./ModalTxExecution/useRemovedTxIds";
 import { TxDetailItem } from "./TxDetailItem";
 
 interface Props {
@@ -27,10 +27,11 @@ export const TransactionQueueDetail: React.FC<Props> = ({
     xsignerAccount.address
   );
   const { isOpen, closeModal, openModal } = useModalBehaviour();
-  const { transactionToProcess } = useRemovedTxIds({
+  const { pendingTransaction } = usePendingTxRemoval({
     data,
     callback: () => openModal(),
   });
+  const { replaceUrlParam } = useReplaceURLParam();
 
   if (data === undefined || multisigContractPromise?.contract === undefined) {
     return (
@@ -40,21 +41,6 @@ export const TransactionQueueDetail: React.FC<Props> = ({
     );
   }
 
-  const replaceURLParam = (paramValue: string) => {
-    const newQueryParams = { ...router.query };
-
-    newQueryParams["tab"] = paramValue;
-
-    router.replace(
-      {
-        pathname: router.pathname,
-        query: newQueryParams,
-      },
-      undefined,
-      { shallow: true }
-    );
-  };
-
   return (
     <>
       {data.map((txData) => {
@@ -71,9 +57,9 @@ export const TransactionQueueDetail: React.FC<Props> = ({
       <ModalTxExecution
         open={isOpen}
         onClose={closeModal}
-        transactionToProcess={transactionToProcess}
+        transactionToProcess={pendingTransaction}
         onConfirmText="Go to history"
-        onConfirm={() => replaceURLParam("history")}
+        onConfirm={() => replaceUrlParam({ name: "tab", value: "history" })}
       />
     </>
   );

src/hooks/common/useReplaceParam.ts

@@ -0,0 +1,31 @@
+import router from "next/router";
+import { useCallback } from "react";
+
+interface UrlParameter {
+  name: string;
+  value: string;
+}
+
+interface UseReplaceUrlParam {
+  replaceUrlParam: ({ name, value }: UrlParameter) => void;
+}
+
+export function useReplaceURLParam(): UseReplaceUrlParam {
+  const replaceUrlParam = useCallback(({ name, value }: UrlParameter) => {
+    const newQueryParams = { ...router.query };
+
+    // Assigns the parameter value based on the provided parameter name
+    newQueryParams[name] = value;
+
+    router.replace(
+      {
+        pathname: router.pathname,
+        query: newQueryParams,
+      },
+      undefined,
+      { shallow: true }
+    );
+  }, []);
+
+  return { replaceUrlParam };
+}