fix: transaction details

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/CreationTx/index.tsx

@@ -22,13 +22,16 @@ const useStyles = makeStyles({
   },
 })
 
-export const CreationTx = (props) => {
-  const { tx } = props
+export const CreationTx = ({ tx }) => {
   const classes = useStyles()
-  if (!tx) return null
+
+  if (!tx) {
+    return null
+  }
+
   const isCreationTx = tx.type === TransactionTypes.CREATION
 
-  return !isCreationTx ? null : (
+  return isCreationTx ? (
     <>
       <Paragraph noMargin>
         <Bold>Created: </Bold>
@@ -47,5 +50,5 @@ export const CreationTx = (props) => {
         {tx.masterCopy ? <EtherscanLink cut={8} type="address" value={tx.masterCopy} /> : 'n/a'}
       </Block>
     </>
-  )
+  ) : null
 }

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/IncomingTx/index.tsx

@@ -4,16 +4,17 @@ import { formatDate } from 'src/routes/safe/components/Transactions/TxsTable/col
 import Bold from 'src/components/layout/Bold'
 import Paragraph from 'src/components/layout/Paragraph'
 
-export const IncomingTx = (props) => {
-  const { tx } = props
-  if (!tx) return null
+export const IncomingTx = ({ tx }) => {
+  if (!tx) {
+    return null
+  }
+
   const isIncomingTx = !!INCOMING_TX_TYPES[tx.type]
-  return !isIncomingTx ? null : (
-    <>
-      <Paragraph noMargin>
-        <Bold>Created: </Bold>
-        {formatDate(tx.executionDate)}
-      </Paragraph>
-    </>
-  )
+
+  return isIncomingTx ? (
+    <Paragraph noMargin>
+      <Bold>Created: </Bold>
+      {formatDate(tx.executionDate)}
+    </Paragraph>
+  ) : null
 }

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/OutgoingTx/index.tsx

@@ -3,11 +3,23 @@ import React from 'react'
 import { formatDate } from 'src/routes/safe/components/Transactions/TxsTable/columns'
 import Bold from 'src/components/layout/Bold'
 import Paragraph from 'src/components/layout/Paragraph'
+import { TransactionTypes } from 'src/routes/safe/store/models/types/transaction'
 
-export const OutgoingTx = (props) => {
-  const { tx } = props
-  if (!tx || !(tx.type === 'outgoing')) return null
-  return (
+export const OutgoingTx = ({ tx }) => {
+  if (!tx) {
+    return null
+  }
+
+  const isOutgoingTx = [
+    TransactionTypes.OUTGOING,
+    TransactionTypes.UPGRADE,
+    TransactionTypes.CUSTOM,
+    TransactionTypes.SETTINGS,
+    TransactionTypes.COLLECTIBLE,
+    TransactionTypes.TOKEN,
+  ].includes(tx.type)
+
+  return isOutgoingTx ? (
     <>
       <Paragraph noMargin>
         <Bold>Created: </Bold>
@@ -36,5 +48,5 @@ export const OutgoingTx = (props) => {
         </Paragraph>
       )}
     </>
-  )
+  ) : null
 }

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/utils.ts

@@ -26,34 +26,37 @@ export const getTxData = (tx) => {
       txData.tokenId = value
       txData.isCollectibleTransfer = true
     }
+    if (tx.modifySettingsTx) {
+      txData.recipient = tx.recipient
+      txData.modifySettingsTx = true
+
+      if (tx.decodedParams[SAFE_METHODS_NAMES.REMOVE_OWNER]) {
+        const { _threshold, owner } = tx.decodedParams[SAFE_METHODS_NAMES.REMOVE_OWNER]
+        txData.action = SAFE_METHODS_NAMES.REMOVE_OWNER
+        txData.removedOwner = owner
+        txData.newThreshold = _threshold
+      } else if (tx.decodedParams[SAFE_METHODS_NAMES.CHANGE_THRESHOLD]) {
+        const { _threshold } = tx.decodedParams[SAFE_METHODS_NAMES.CHANGE_THRESHOLD]
+        txData.action = SAFE_METHODS_NAMES.CHANGE_THRESHOLD
+        txData.newThreshold = _threshold
+      } else if (tx.decodedParams[SAFE_METHODS_NAMES.ADD_OWNER_WITH_THRESHOLD]) {
+        const { _threshold, owner } = tx.decodedParams[SAFE_METHODS_NAMES.ADD_OWNER_WITH_THRESHOLD]
+        txData.action = SAFE_METHODS_NAMES.ADD_OWNER_WITH_THRESHOLD
+        txData.addedOwner = owner
+        txData.newThreshold = _threshold
+      } else if (tx.decodedParams[SAFE_METHODS_NAMES.SWAP_OWNER]) {
+        const { newOwner, oldOwner } = tx.decodedParams[SAFE_METHODS_NAMES.SWAP_OWNER]
+        txData.action = SAFE_METHODS_NAMES.SWAP_OWNER
+        txData.removedOwner = oldOwner
+        txData.addedOwner = newOwner
+      }
+    }
   } else if (tx.customTx) {
     txData.recipient = tx.recipient
     txData.data = tx.data
     txData.customTx = true
   } else if (Number(tx.value) > 0) {
     txData.recipient = tx.recipient
-  } else if (tx.modifySettingsTx) {
-    txData.recipient = tx.recipient
-    txData.modifySettingsTx = true
-
-    if (tx.decodedParams) {
-      if (tx.decodedParams[SAFE_METHODS_NAMES.REMOVE_OWNER]) {
-        const { _threshold, owner } = tx.decodedParams[SAFE_METHODS_NAMES.REMOVE_OWNER]
-        txData.removedOwner = owner
-        txData.newThreshold = _threshold
-      } else if (tx.decodedParams[SAFE_METHODS_NAMES.CHANGE_THRESHOLD]) {
-        const { _threshold } = tx.decodedParams[SAFE_METHODS_NAMES.CHANGE_THRESHOLD]
-        txData.newThreshold = _threshold
-      } else if (tx.decodedParams[SAFE_METHODS_NAMES.ADD_OWNER_WITH_THRESHOLD]) {
-        const { _threshold, owner } = tx.decodedParams[SAFE_METHODS_NAMES.ADD_OWNER_WITH_THRESHOLD]
-        txData.addedOwner = owner
-        txData.newThreshold = _threshold
-      } else if (tx.decodedParams[SAFE_METHODS_NAMES.SWAP_OWNER]) {
-        const { newOwner, oldOwner } = tx.decodedParams[SAFE_METHODS_NAMES.SWAP_OWNER]
-        txData.removedOwner = oldOwner
-        txData.addedOwner = newOwner
-      }
-    }
   } else if (tx.isCancellationTx) {
     txData.cancellationTx = true
   } else if (tx.creationTx) {