fix displayButtonRow boolean expression

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/ButtonRow/index.jsx

@@ -12,6 +12,7 @@ type Props = {
   onTxCancel: Function,
   classes: Object,
   showConfirmBtn: boolean,
+  showCancelBtn: boolean,
 }
 
 const styles = () => ({
@@ -34,14 +35,16 @@ const styles = () => ({
 })
 
 const ButtonRow = ({
-  classes, onTxCancel, onTxConfirm, showConfirmBtn,
+  classes, onTxCancel, onTxConfirm, showConfirmBtn, showCancelBtn,
 }: Props) => (
   <Row align="center" className={classes.buttonRow}>
-    <Button className={classes.button} variant="contained" minWidth={140} color="secondary" onClick={onTxCancel}>
+    {showCancelBtn && (
-      <BlockIcon className={classes.icon} />
+      <Button className={classes.button} variant="contained" minWidth={140} color="secondary" onClick={onTxCancel}>
-      {' '}
+        <BlockIcon className={classes.icon} />
+        {' '}
 Cancel TX
-    </Button>
+      </Button>
+    )}
     {showConfirmBtn && (
       <Button className={classes.button} variant="contained" minWidth={140} color="primary" onClick={onTxConfirm}>
         <EditIcon className={classes.icon} />

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx

@@ -16,6 +16,7 @@ import { type Transaction } from '~/routes/safe/store/models/transaction'
 import { type Owner } from '~/routes/safe/store/models/owner'
 import { getEtherScanLink, openTxInEtherScan, getWeb3 } from '~/logic/wallets/getWeb3'
 import { shortVersionOf } from '~/logic/wallets/ethAddresses'
+import { EMPTY_DATA } from '~/logic/wallets/ethTransactions'
 import { secondary } from '~/theme/variables'
 import OwnersList from './OwnersList'
 import ButtonRow from './ButtonRow'
@@ -48,20 +49,29 @@ const openIconStyle = {
 const txStatusToLabel = {
   success: 'Success',
   awaiting_confirmations: 'Awaiting confirmations',
+  cancelled: 'Cancelled',
 }
 
+const isCancellationTransaction = (tx: Transaction, safeAddress: string) => !tx.value && tx.data === EMPTY_DATA && tx.recipient === safeAddress
+
 const ExpandedTx = ({
-  classes, tx, threshold, owners, granted, userAddress, safeAddress, createTransaction,
+  classes,
+  tx,
+  threshold,
+  owners,
+  granted,
+  userAddress,
+  safeAddress,
+  createTransaction,
 }: Props) => {
   const [tabIndex, setTabIndex] = useState<number>(0)
   const [openModal, setOpenModal] = useState<OpenModal>(null)
   const openApproveModal = () => setOpenModal('approveTx')
   const openCancelModal = () => setOpenModal('cancelTx')
   const closeModal = () => setOpenModal(null)
-
+  const cancellationTx = isCancellationTransaction(tx, safeAddress)
   const confirmedLabel = `Confirmed [${tx.confirmations.size}/${threshold}]`
   const unconfirmedLabel = `Unconfirmed [${owners.size - tx.confirmations.size}]`
-  const txStatus = tx.isExecuted ? 'success' : 'awaiting_confirmations'
 
   const ownersWhoConfirmed = []
   const ownersUnconfirmed = []
@@ -78,6 +88,7 @@ const ExpandedTx = ({
       ownersUnconfirmed.push(owner)
     }
   })
+  const displayButtonRow = (!tx.isExecuted && tx.status !== 'cancelled' && !cancellationTx) || (cancellationTx && !currentUserAlreadyConfirmed)
 
   const handleTabChange = (event, tabClicked) => {
     setTabIndex(tabClicked)
@@ -102,8 +113,8 @@ const ExpandedTx = ({
               </Paragraph>
               <Paragraph noMargin>
                 <Bold>TX status: </Bold>
-                <Span className={classes[txStatus]} style={{ fontWeight: 'bold' }}>
+                <Span className={classes[tx.status]} style={{ fontWeight: 'bold' }}>
-                  {txStatusToLabel[txStatus]}
+                  {txStatusToLabel[tx.status]}
                 </Span>
               </Paragraph>
               <Paragraph noMargin>
@@ -147,18 +158,31 @@ to:
             </Row>
             <Row>{tabIndex === 0 && <OwnersList owners={ownersWhoConfirmed} />}</Row>
             <Row>{tabIndex === 1 && <OwnersList owners={ownersUnconfirmed} />}</Row>
-            {granted && (
+            {granted && displayButtonRow && (
               <ButtonRow
                 onTxConfirm={openApproveModal}
                 onTxCancel={openCancelModal}
                 showConfirmBtn={!currentUserAlreadyConfirmed}
+                showCancelBtn={!cancellationTx}
               />
             )}
           </Col>
         </Row>
       </Block>
-      <CancelTxModal isOpen={openModal === 'cancelTx'} createTransaction={createTransaction} onClose={closeModal} tx={tx} safeAddress={safeAddress} />
+      <CancelTxModal
-      <ApproveTxModal isOpen={openModal === 'approveTx'} createTransaction={createTransaction} onClose={closeModal} tx={tx} safeAddress={safeAddress} />
+        isOpen={openModal === 'cancelTx'}
+        createTransaction={createTransaction}
+        onClose={closeModal}
+        tx={tx}
+        safeAddress={safeAddress}
+      />
+      <ApproveTxModal
+        isOpen={openModal === 'approveTx'}
+        createTransaction={createTransaction}
+        onClose={closeModal}
+        tx={tx}
+        safeAddress={safeAddress}
+      />
     </>
   )
 }

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/style.js

@@ -1,5 +1,7 @@
 // @flow
-import { md, lg, connected } from '~/theme/variables'
+import {
+  md, lg, connected, error,
+} from '~/theme/variables'
 
 export const styles = () => ({
   txDataContainer: {
@@ -15,4 +17,7 @@ export const styles = () => ({
   success: {
     color: connected,
   },
+  cancelled: {
+    color: error,
+  },
 })