Adding ModalTxExecution on TxQueuePage

src/components/AccountConfirmationModal/index.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { UseModalBehaviour } from "@/hooks/useModalBehaviour";
+import { UseModalBehaviour } from "@/hooks/common/useModalBehaviour";
 
 import BaseConfirmationDialog from "../BaseConfirmationDialog";
 

src/components/AddressBook/AddressBookItem.tsx

@@ -10,9 +10,9 @@ import { ChainExtended } from "@/config/chain";
 import { AddressBookInput } from "@/domain/AddressBooks";
 import { UseDeleteAddressBookReturn } from "@/hooks/addressBook/useDeleteAddressBook";
 import { UseUpdateAddressBook } from "@/hooks/addressBook/useUpdateAddressBook";
+import { useRecentlyClicked } from "@/hooks/common/useRecentlyClicked";
 import { useForm } from "@/hooks/useForm";
 import useOnClickOutside from "@/hooks/useOnClickOutside";
-import { useRecentlyClicked } from "@/hooks/useRecentlyClicked";
 import { getExplorerUrl } from "@/utils/blockchain";
 import { notEmpty, onlyAddress } from "@/utils/inputValidation";
 

src/components/ArgumentForm/inputs/OptionArgument.tsx

@@ -4,7 +4,7 @@ import { OptionalFieldWrapper } from "@/components/OptionalFieldWrapper";
 import { usePolkadotContext } from "@/context/usePolkadotContext";
 import { ArgumentComponentProps } from "@/domain/substrateInputTypes";
 import { OrFalsy } from "@/domain/utilityTsTypes";
-import { useToggle } from "@/hooks/useToggle";
+import { useToggle } from "@/hooks/common/useToggle";
 import { getInitValue } from "@/services/substrate/getInitValue";
 import { Registry, TypeDef } from "@/services/substrate/types";
 

src/components/ModalWalletProvider/ConnectButton.tsx

@@ -7,9 +7,9 @@ import { StyledConnectButton } from "@/components/ModalWalletProvider/styled";
 import { ROUTES } from "@/config/routes";
 import { usePolkadotContext } from "@/context/usePolkadotContext";
 import { WalletConnectionEvents } from "@/domain/events/WalletConnectionEvents";
+import { useModalBehaviour } from "@/hooks/common/useModalBehaviour";
+import { useRecentlyClicked } from "@/hooks/common/useRecentlyClicked";
 import { useEventListenerCallback } from "@/hooks/useEventListenerCallback";
-import { useModalBehaviour } from "@/hooks/useModalBehaviour";
-import { useRecentlyClicked } from "@/hooks/useRecentlyClicked";
 import { useGetXsignerSelected } from "@/hooks/xsignerSelected/useGetXsignerSelected";
 import { WalletAccount } from "@/services/useink/types";
 import { areAddressesEqual } from "@/utils/blockchain";

src/components/MultisigEventListener/index.tsx

@@ -4,6 +4,7 @@ import { useEvents, useEventSubscription } from "useink";
 
 import { createToast } from "@/components/AppToastNotification";
 import { useLocalDbContext } from "@/context/uselocalDbContext";
+import { LocalMultisigEvents } from "@/domain/events/LocalMultisigEvents";
 import { MultisigContractEvents } from "@/domain/events/MultisigContractEvents";
 import { useMultisigContractPromise } from "@/hooks/contractPromise/useMultisigContractPromise";
 import { useGetXsignerSelected } from "@/hooks/xsignerSelected/useGetXsignerSelected";
@@ -29,6 +30,8 @@ export function MultisigEventListener() {
         icon: <HearingIcon />,
       });
     });
+    events.length &&
+      document.dispatchEvent(new CustomEvent(LocalMultisigEvents.eventAdded));
   }, [events, localMultisigEventRepo]);
 
   useEffect(() => {

src/components/NetworkConfirmationModal/index.tsx

@@ -5,7 +5,7 @@ import { useEffect, useState } from "react";
 import { getChain } from "@/config/chain";
 import { ROUTES } from "@/config/routes";
 import { usePolkadotContext } from "@/context/usePolkadotContext";
-import { useModalBehaviour } from "@/hooks/useModalBehaviour";
+import { useModalBehaviour } from "@/hooks/common/useModalBehaviour";
 import { useGetXsignerSelected } from "@/hooks/xsignerSelected/useGetXsignerSelected";
 
 import BaseConfirmationDialog from "../BaseConfirmationDialog";

src/components/Transaction/steps/Review.tsx

@@ -3,6 +3,7 @@ import { ApiPromise } from "@polkadot/api";
 
 import { AccountSigner } from "@/components/StepperSignersAccount/AccountSigner";
 import { ChainExtended, getChain } from "@/config/chain";
+import { useNameAddressBookContext } from "@/context/NameInAddressBookContext";
 import { useNetworkApi } from "@/hooks/useNetworkApi";
 import { chainTokenSymbol } from "@/services/useink/substrate/tokenTypes";
 
@@ -22,6 +23,7 @@ export const ReviewTokens = (props: Props) => {
   const { apiPromise: api } = useNetworkApi();
   const symbol = chainTokenSymbol(api as ApiPromise);
   const customToken = getChain();
+  const { nameConnectedOrAddressBookOrSigners } = useNameAddressBookContext();
 
   return (
     <Box display="flex" alignItems="center" flexDirection="column" gap={2}>
@@ -35,7 +37,7 @@ export const ReviewTokens = (props: Props) => {
             <Typography component="div">
               <AccountSigner
                 key={to}
-                name="Signer 1"
+                name={nameConnectedOrAddressBookOrSigners(to) || ""}
                 address={to}
                 truncateAmount={12}
               />

src/components/TxBuilderStepper/ProposeTxStep/index.tsx

@@ -7,10 +7,10 @@ import ErrorMessage from "@/components/common/ErrorMessage";
 import { ExplorerLink } from "@/components/ExplorerLink";
 import { TextFieldWithLoadingProps } from "@/components/TextFieldWithLoading/TextFieldWithLoading";
 import { ROUTES } from "@/config/routes";
+import { useRecentlyClicked } from "@/hooks/common/useRecentlyClicked";
 import { useMultisigContractPromise } from "@/hooks/contractPromise/useMultisigContractPromise";
 import { sringArgsToContractParam } from "@/hooks/externalTxData/stringArgsToContractParam";
 import { useCreateExternalTxData } from "@/hooks/externalTxData/useCreateExternalTxData";
-import { useRecentlyClicked } from "@/hooks/useRecentlyClicked";
 import { useGetXsignerSelected } from "@/hooks/xsignerSelected/useGetXsignerSelected";
 import {
   replacerArgs,

src/components/TxTable/ConfirmationWidget.tsx

@@ -5,8 +5,11 @@ import { Dispatch, SetStateAction, useEffect, useMemo } from "react";
 import { LoadingButton } from "@/components/common/LoadingButton";
 import { usePolkadotContext } from "@/context/usePolkadotContext";
 import { MultisigContractEvents } from "@/domain/events/MultisigContractEvents";
+import {
+  TWO_SECONDS,
+  useRecentlyClicked,
+} from "@/hooks/common/useRecentlyClicked";
 import { useDryRunExecution } from "@/hooks/useDryRunExecution";
-import { TWO_SECONDS, useRecentlyClicked } from "@/hooks/useRecentlyClicked";
 import { ContractPromise } from "@/services/substrate/types";
 import { shouldDisable } from "@/services/useink/utils";
 

src/components/TxTable/ModalTxExecution/index.tsx

@@ -0,0 +1,87 @@
+import CloseIcon from "@mui/icons-material/Close";
+import {
+  Button,
+  DialogActions,
+  IconButton,
+  Modal,
+  Typography,
+} from "@mui/material";
+import React from "react";
+
+import {
+  ModalStyled,
+  ModalTypography,
+} from "@/components/ModalAddressBook/styled";
+import { BlockchainIssuedEvent } from "@/domain/BlockchainIssuedEvent";
+import { MultisigContractEvents } from "@/domain/events/MultisigContractEvents";
+import { TransactionProposedItemUi } from "@/domain/TransactionProposedItemUi";
+
+export type TransactionWithAction = TransactionProposedItemUi & {
+  actionName: BlockchainIssuedEvent["name"];
+};
+
+interface Props {
+  open: boolean;
+  onClose: () => void;
+  onConfirm?: () => void;
+  onConfirmText?: string;
+  transactionToProcess: TransactionWithAction | undefined;
+}
+
+export function ModalTxExecution({
+  open,
+  onClose,
+  onConfirm,
+  onConfirmText = "Confirm",
+  transactionToProcess,
+}: Props) {
+  if (!open || !transactionToProcess) return;
+
+  const action =
+    transactionToProcess.actionName ===
+    MultisigContractEvents.TransactionExecuted
+      ? "executed"
+      : "cancelled";
+
+  return (
+    <Modal open={open} onClose={onClose}>
+      <ModalStyled>
+        <ModalTypography id="tx-modal-execution-title" variant="h3">
+          {`Transaction #${transactionToProcess.txId} has been "${action}"!`}
+        </ModalTypography>
+        <IconButton
+          aria-label="close"
+          onClick={onClose}
+          sx={{
+            position: "absolute",
+            right: 8,
+            top: 8,
+            color: (theme) => theme.palette.grey[500],
+          }}
+        >
+          <CloseIcon />
+        </IconButton>
+        <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+          The transaction with identifier {transactionToProcess.txId} will be
+          out of the of the queue for reaching the required number of
+          signatures.
+        </Typography>
+        <Typography id="modal-modal-description" sx={{ mt: 2 }}>
+          You can follow the transaction in the history tab.
+        </Typography>
+
+        <DialogActions>
+          <Button onClick={onClose}>Stay here</Button>
+          <Button
+            onClick={() => {
+              onConfirm?.();
+              onClose();
+            }}
+          >
+            {onConfirmText}
+          </Button>
+        </DialogActions>
+      </ModalStyled>
+    </Modal>
+  );
+}

src/components/TxTable/ModalTxExecution/useRemovedTxIds.tsx

@@ -0,0 +1,55 @@
+import { useEffect, useState } from "react";
+
+import { useLocalDbContext } from "@/context/uselocalDbContext";
+import { BlockchainIssuedEvent } from "@/domain/BlockchainIssuedEvent";
+import { LocalMultisigEvents } from "@/domain/events/LocalMultisigEvents";
+import { MultisigContractEvents } from "@/domain/events/MultisigContractEvents";
+import { TransactionProposedItemUi } from "@/domain/TransactionProposedItemUi";
+import { useEventListenerCallback } from "@/hooks/useEventListenerCallback";
+
+import { TransactionWithAction } from ".";
+
+interface Props {
+  data: TransactionProposedItemUi[] | undefined;
+  callback: () => void;
+}
+
+interface UseRemovedTxIdsReturn {
+  transactionToProcess: TransactionWithAction | undefined;
+}
+
+export function useRemovedTxIds({
+  data,
+  callback,
+}: Props): UseRemovedTxIdsReturn {
+  const [transactionToProcess, setTransactionWillBeExecuted] =
+    useState<UseRemovedTxIdsReturn["transactionToProcess"]>();
+  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
+        )
+    )
+  );
+  useEffect(() => {
+    if (!data || !newEvent) return;
+
+    const willBeExecuted = data.find((tx) => tx.txId === newEvent.args[0]);
+    if (willBeExecuted) {
+      setTransactionWillBeExecuted({
+        ...willBeExecuted,
+        actionName: newEvent.name,
+      });
+      callback();
+    }
+  }, [callback, data, localMultisigEventRepo, newEvent]);
+
+  return { transactionToProcess };
+}

src/components/TxTable/NameInAddressBook.tsx

@@ -1,6 +1,5 @@
 import { useEffect, useState } from "react";
 
-import { LoadingSkeleton } from "@/components/common/LoadingSkeleton";
 import { useNameAddressBookContext } from "@/context/NameInAddressBookContext";
 import { truncateAddress } from "@/utils/formatString";
 
@@ -23,7 +22,7 @@ export function NameInAddressBook({ recipient }: Props) {
   }, [recipient, nameConnectedOrAddressBookOrSigners]);
 
   if (isLoading || nameInAddressBook === undefined) {
-    return <LoadingSkeleton count={1} />;
+    return "-";
   }
 
   return nameInAddressBook

src/components/TxTable/TransactionsQueueDetail.tsx

@@ -1,12 +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 { useMultisigContractPromise } from "@/hooks/contractPromise/useMultisigContractPromise";
 import { useListTxQueue } from "@/hooks/transactions/useListTxQueue";
 
+import { ModalTxExecution } from "./ModalTxExecution";
+import { useRemovedTxIds } from "./ModalTxExecution/useRemovedTxIds";
 import { TxDetailItem } from "./TxDetailItem";
 
 interface Props {
@@ -22,6 +26,11 @@ export const TransactionQueueDetail: React.FC<Props> = ({
   const { multisigContractPromise } = useMultisigContractPromise(
     xsignerAccount.address
   );
+  const { isOpen, closeModal, openModal } = useModalBehaviour();
+  const { transactionToProcess } = useRemovedTxIds({
+    data,
+    callback: () => openModal(),
+  });
 
   if (data === undefined || multisigContractPromise?.contract === undefined) {
     return (
@@ -31,6 +40,21 @@ 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) => {
@@ -44,6 +68,13 @@ export const TransactionQueueDetail: React.FC<Props> = ({
           />
         );
       })}
+      <ModalTxExecution
+        open={isOpen}
+        onClose={closeModal}
+        transactionToProcess={transactionToProcess}
+        onConfirmText="Go to history"
+        onConfirm={() => replaceURLParam("history")}
+      />
     </>
   );
 };

src/components/XsignerAccountInfoWidget/SelectXsignerItems.tsx

@@ -12,7 +12,7 @@ import * as React from "react";
 
 import { ROUTES } from "@/config/routes";
 import { SignatoriesAccount } from "@/domain/SignatoriesAccount";
-import { UseModalBehaviour } from "@/hooks/useModalBehaviour";
+import { UseModalBehaviour } from "@/hooks/common/useModalBehaviour";
 import { formatThreshold, truncateAddress } from "@/utils/formatString";
 
 import CopyButton from "../common/CopyButton";

src/components/XsignerAccountInfoWidget/SwitchUserAccount.tsx

@@ -1,7 +1,7 @@
 import ChangeCircleRoundedIcon from "@mui/icons-material/ChangeCircleRounded";
 import { IconButton } from "@mui/material";
 
-import { UseModalBehaviour } from "@/hooks/useModalBehaviour";
+import { UseModalBehaviour } from "@/hooks/common/useModalBehaviour";
 
 type Props = UseModalBehaviour;
 

src/components/XsignerAccountInfoWidget/XsignerAccountInfoUI.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 
 import { ChainColors, CHAINS_ALLOWED } from "@/config/chain";
 import { SignatoriesAccount } from "@/domain/SignatoriesAccount";
-import { useModalBehaviour } from "@/hooks/useModalBehaviour";
+import { useModalBehaviour } from "@/hooks/common/useModalBehaviour";
 import { useSetXsignerSelected } from "@/hooks/xsignerSelected/useSetXsignerSelected";
 import { formatThreshold, truncateAddress } from "@/utils/formatString";
 

src/components/guards/ConnectedGuard.tsx

@@ -3,7 +3,7 @@ import { ReactElement, ReactNode, useEffect } from "react";
 
 import { ROUTES, RouteValue, routeValues } from "@/config/routes";
 import { usePolkadotContext } from "@/context/usePolkadotContext";
-import { useDelay } from "@/hooks/useDelay";
+import { useDelay } from "@/hooks/common/useDelay";
 import { DELAY_UNTIL_READ_WALLETS } from "@/services/useink/constants";
 
 interface ConnectionGuardProps {

src/components/guards/WhenWalletIsConnectedGuard.tsx

@@ -4,7 +4,7 @@ import { PropsWithChildren, useEffect } from "react";
 import { FallbackSpinner } from "@/components/common/FallbackSpinner";
 import { ROUTES } from "@/config/routes";
 import { usePolkadotContext } from "@/context/usePolkadotContext";
-import { useDelay } from "@/hooks/useDelay";
+import { useDelay } from "@/hooks/common/useDelay";
 import { useFindSignersAccount } from "@/hooks/xsignersAccount";
 import { DELAY_UNTIL_READ_WALLETS } from "@/services/useink/constants";