fix: Disable queued Tx interaction while replacement Tx is pending

src/logic/safe/store/middleware/pendingTransactionsMiddleware.ts

@@ -9,7 +9,7 @@ import {
 } from 'src/logic/safe/store/actions/pendingTransactions'
 import { PENDING_TRANSACTIONS_ID, PendingTransactionPayload } from 'src/logic/safe/store/reducer/pendingTransactions'
 import { Dispatch } from 'src/logic/safe/store/actions/types'
-import { allPendingTxs } from 'src/logic/safe/store/selectors/pendingTransactions'
+import { allPendingTxIds } from 'src/logic/safe/store/selectors/pendingTransactions'
 
 // Share updated statuses between tabs/windows
 // Test env and Safari don't support BroadcastChannel
@@ -57,7 +57,7 @@ export const pendingTransactionsMiddleware =
         }
 
         const state = getState()
-        session.setItem(PENDING_TRANSACTIONS_ID, allPendingTxs(state))
+        session.setItem(PENDING_TRANSACTIONS_ID, allPendingTxIds(state))
         break
       }
       default:

src/logic/safe/store/selectors/pendingTransactions.ts

@@ -6,29 +6,43 @@ import { LocalTransactionStatus, Transaction } from 'src/logic/safe/store/models
 import { PendingTransactionsState, PENDING_TRANSACTIONS_ID } from 'src/logic/safe/store/reducer/pendingTransactions'
 import { currentChainId } from 'src/logic/config/store/selectors'
 import { ChainId } from 'src/config/chain'
+import { getTransactionByAttribute } from 'src/logic/safe/store/selectors/gatewayTransactions'
 
-export const allPendingTxs = (state: AppReduxState): PendingTransactionsState => {
+export const allPendingTxIds = (state: AppReduxState): PendingTransactionsState => {
   return state[PENDING_TRANSACTIONS_ID]
 }
 
-const pendingTxsByChain = createSelector(
-  allPendingTxs,
+export const pendingTxIdsByChain = createSelector(
+  allPendingTxIds,
   currentChainId,
   (statuses, chainId): PendingTransactionsState[ChainId] => {
     return statuses[chainId]
   },
 )
 
+export const pendingTxByChain = createSelector(
+  (state: AppReduxState) => state,
+  pendingTxIdsByChain,
+  (state: AppReduxState, pendingTxIds: PendingTransactionsState[ChainId]): Transaction | undefined => {
+    if (!pendingTxIds) {
+      return
+    }
+
+    const pendingTxId = Object.keys(pendingTxIds)[0]
+    return getTransactionByAttribute(state, { attributeValue: pendingTxId, attributeName: 'id' })
+  },
+)
+
 export const isTxPending = createSelector(
-  pendingTxsByChain,
+  pendingTxIdsByChain,
   (_: AppReduxState, id: string) => id,
   (pendingTxs: PendingTransactionsState[ChainId], id: string): boolean => {
     return pendingTxs ? !!pendingTxs?.[id] : false
   },
 )
 
 export const selectTxStatus = createSelector(
-  pendingTxsByChain,
+  pendingTxIdsByChain,
   (_: AppReduxState, tx: Transaction) => tx,
   (pendingTxs: PendingTransactionsState[ChainId], tx: Transaction): TransactionStatus => {
     return !!pendingTxs?.[tx.id] ? LocalTransactionStatus.PENDING : tx.txStatus

src/routes/safe/components/Transactions/TxList/TxCollapsedActions.tsx

@@ -37,6 +37,11 @@ export const TxCollapsedActions = ({ transaction }: TxCollapsedActionsProps): Re
   const txStatus = useTxStatus(transaction)
   const isAwaitingEx = isAwaitingExecution(txStatus)
 
+  const onExecuteOrConfirm = (event) => {
+    handleOnMouseLeave()
+    handleConfirmButtonClick(event)
+  }
+
   const getTitle = () => {
     if (isAwaitingEx) {
       return (transaction.executionInfo as MultisigExecutionInfo)?.nonce === nonce
@@ -53,7 +58,7 @@ export const TxCollapsedActions = ({ transaction }: TxCollapsedActionsProps): Re
           <IconButton
             size="small"
             type="button"
-            onClick={handleConfirmButtonClick}
+            onClick={onExecuteOrConfirm}
             disabled={disabledActions}
             onMouseEnter={handleOnMouseEnter}
             onMouseLeave={handleOnMouseLeave}

src/routes/safe/components/Transactions/TxList/TxQueueRow.tsx

@@ -1,11 +1,18 @@
 import { AccordionDetails } from '@gnosis.pm/safe-react-components'
 import { ReactElement, useContext, useEffect, useState } from 'react'
 
-import { LocalTransactionStatus, Transaction } from 'src/logic/safe/store/models/types/gateway.d'
+import {
+  isMultisigExecutionInfo,
+  LocalTransactionStatus,
+  Transaction,
+} from 'src/logic/safe/store/models/types/gateway.d'
 import { NoPaddingAccordion, StyledAccordionSummary } from './styled'
 import { TxDetails } from './TxDetails'
 import { TxHoverContext } from './TxHoverProvider'
 import { TxQueueCollapsed } from './TxQueueCollapsed'
+import { useSelector } from 'react-redux'
+import { AppReduxState } from 'src/store'
+import { isTxPending, pendingTxByChain } from 'src/logic/safe/store/selectors/pendingTransactions'
 
 type TxQueueRowProps = {
   isGrouped?: boolean
@@ -15,15 +22,21 @@ type TxQueueRowProps = {
 export const TxQueueRow = ({ isGrouped = false, transaction }: TxQueueRowProps): ReactElement => {
   const { activeHover } = useContext(TxHoverContext)
   const [tx, setTx] = useState<Transaction>(transaction)
+  const willBeReplaced = tx.txStatus === LocalTransactionStatus.WILL_BE_REPLACED ? ' will-be-replaced' : ''
+  const isPending = useSelector((state: AppReduxState) => isTxPending(state, transaction.id))
+  const pendingTx = useSelector(pendingTxByChain)
+  const pendingTxNonce = isMultisigExecutionInfo(pendingTx?.executionInfo) ? pendingTx?.executionInfo.nonce : undefined
+  const nonce = isMultisigExecutionInfo(transaction.executionInfo) ? transaction.executionInfo.nonce : undefined
+  const isReplacementTxPending = !isPending && nonce && pendingTxNonce && nonce === pendingTxNonce
 
   useEffect(() => {
-    if (activeHover && activeHover !== transaction.id) {
+    if ((activeHover && activeHover !== transaction.id) || isReplacementTxPending) {
       setTx((currTx) => ({ ...currTx, txStatus: LocalTransactionStatus.WILL_BE_REPLACED }))
       return
     }
 
     setTx(transaction)
-  }, [activeHover, transaction])
+  }, [activeHover, transaction, isReplacementTxPending])
 
   return (
     <NoPaddingAccordion
@@ -32,6 +45,7 @@ export const TxQueueRow = ({ isGrouped = false, transaction }: TxQueueRowProps):
         unmountOnExit: true,
         appear: true,
       }}
+      className={willBeReplaced}
     >
       <StyledAccordionSummary>
         <TxQueueCollapsed isGrouped={isGrouped} transaction={tx} />

src/routes/safe/components/Transactions/TxList/styled.tsx

@@ -92,7 +92,7 @@ export const StyledTransactions = styled.div`
 
     &:last-of-type {
       div {
-        row-gap: 0px;
+        row-gap: 0;
       }
     }
   }
@@ -144,10 +144,14 @@ const gridColumns = {
 }
 
 const willBeReplaced = css`
+  .will-be-replaced {
+    pointer-events: none;
+    filter: grayscale(1) opacity(0.8) !important;
+  }
   .will-be-replaced * {
+    pointer-events: none;
     color: gray !important;
     text-decoration: line-through !important;
-    filter: grayscale(1) opacity(0.8) !important;
   }
 `
 
@@ -431,7 +435,7 @@ export const OwnerList = styled.ul`
       margin: 5px;
     }
 
-    span::first-of-type {
+    span:first-of-type {
       color: #008c73;
       font-weight: bold;
     }