TxList: Add info about the next tx to be executed (#2218)

* TxList: Add info about the next tx to be executed

* review changes

* update message

Co-authored-by: katspaugh <katspaugh@users.noreply.github.com>

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

@@ -1,8 +1,11 @@
 import { Icon, Link, Text } from '@gnosis.pm/safe-react-components'
 import React, { Fragment, ReactElement, useContext } from 'react'
+import { useSelector } from 'react-redux'
 
 import { Transaction, TransactionDetails } from 'src/logic/safe/store/models/types/gateway.d'
 import { sameString } from 'src/utils/strings'
+import { safeNonceSelector } from 'src/logic/safe/store/selectors'
+
 import {
   DisclaimerContainer,
   GroupedTransactions,
@@ -79,7 +82,11 @@ type QueueTxListProps = {
 
 export const QueueTxList = ({ transactions }: QueueTxListProps): ReactElement => {
   const { txLocation } = useContext(TxLocationContext)
-  const title = txLocation === 'queued.next' ? 'NEXT TRANSACTION' : 'QUEUE'
+  const nonce = useSelector(safeNonceSelector)
+  const title =
+    txLocation === 'queued.next'
+      ? 'NEXT TRANSACTION'
+      : `QUEUE - Transaction with nonce ${nonce} needs to be executed fisrt`
 
   const { lastItemId, setLastItemId } = useContext(TxsInfiniteScrollContext)
   if (transactions.length) {

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

@@ -2,7 +2,9 @@ import { Icon, Tooltip } from '@gnosis.pm/safe-react-components'
 import { default as MuiIconButton } from '@material-ui/core/IconButton'
 import React, { ReactElement } from 'react'
 import styled from 'styled-components'
+import { useSelector } from 'react-redux'
 
+import { safeNonceSelector } from 'src/logic/safe/store/selectors'
 import { Transaction } from 'src/logic/safe/store/models/types/gateway.d'
 import { useActionButtonsHandlers } from './hooks/useActionButtonsHandlers'
 
@@ -28,10 +30,20 @@ export const TxCollapsedActions = ({ transaction }: TxCollapsedActionsProps): Re
     isPending,
     disabledActions,
   } = useActionButtonsHandlers(transaction)
+  const nonce = useSelector(safeNonceSelector)
+
+  const getTitle = () => {
+    if (transaction.txStatus === 'AWAITING_EXECUTION') {
+      return transaction.executionInfo?.nonce === nonce
+        ? 'Execute'
+        : `Transaction with nonce ${nonce} needs to be executed first`
+    }
+    return 'Confirm'
+  }
 
   return (
     <>
-      <Tooltip title={transaction.txStatus === 'AWAITING_EXECUTION' ? 'Execute' : 'Confirm'} placement="top">
+      <Tooltip title={getTitle()} placement="top">
         <span>
           <IconButton
             size="small"

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

@@ -1,6 +1,8 @@
-import { Button } from '@gnosis.pm/safe-react-components'
+import { Button, Tooltip } from '@gnosis.pm/safe-react-components'
 import React, { ReactElement } from 'react'
+import { useSelector } from 'react-redux'
 
+import { safeNonceSelector } from 'src/logic/safe/store/selectors'
 import { Transaction } from 'src/logic/safe/store/models/types/gateway.d'
 import { useActionButtonsHandlers } from 'src/routes/safe/components/Transactions/TxList/hooks/useActionButtonsHandlers'
 
@@ -18,27 +20,41 @@ export const TxExpandedActions = ({ transaction }: TxExpandedActionsProps): Reac
     isPending,
     disabledActions,
   } = useActionButtonsHandlers(transaction)
+  const nonce = useSelector(safeNonceSelector)
 
   const onExecuteOrConfirm = (event) => {
     handleOnMouseLeave()
     handleConfirmButtonClick(event)
   }
 
+  const getConfirmTooltipTitle = () => {
+    if (transaction.txStatus === 'AWAITING_EXECUTION') {
+      return transaction.executionInfo?.nonce === nonce
+        ? 'Execute'
+        : `Transaction with nonce ${nonce} needs to be executed first`
+    }
+    return 'Confirm'
+  }
+
   // There is a problem in chrome that produces onMouseLeave event not being triggered properly.
   // https://github.com/facebook/react/issues/4492
   return (
     <>
-      <Button
-        size="md"
-        color="primary"
-        disabled={disabledActions}
-        onClick={onExecuteOrConfirm}
-        onMouseEnter={handleOnMouseEnter}
-        onMouseLeave={handleOnMouseLeave}
-        className="primary"
-      >
-        {transaction.txStatus === 'AWAITING_EXECUTION' ? 'Execute' : 'Confirm'}
-      </Button>
+      <Tooltip title={getConfirmTooltipTitle()} placement="top">
+        <span>
+          <Button
+            size="md"
+            color="primary"
+            disabled={disabledActions}
+            onClick={onExecuteOrConfirm}
+            onMouseEnter={handleOnMouseEnter}
+            onMouseLeave={handleOnMouseLeave}
+            className="primary"
+          >
+            {transaction.txStatus === 'AWAITING_EXECUTION' ? 'Execute' : 'Confirm'}
+          </Button>
+        </span>
+      </Tooltip>
       {canCancel && (
         <Button size="md" color="error" onClick={handleCancelButtonClick} className="error" disabled={isPending}>
           Reject