Display value in custom transactions detail in transaction list

src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.jsx

@@ -13,7 +13,8 @@ export const TRANSACTIONS_DESC_ADD_OWNER_TEST_ID = 'tx-description-add-owner'
 export const TRANSACTIONS_DESC_REMOVE_OWNER_TEST_ID = 'tx-description-remove-owner'
 export const TRANSACTIONS_DESC_CHANGE_THRESHOLD_TEST_ID = 'tx-description-change-threshold'
 export const TRANSACTIONS_DESC_SEND_TEST_ID = 'tx-description-send'
-export const TRANSACTIONS_DESC_CUSTOM_TEST_ID = 'tx-description-custom'
+export const TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID = 'tx-description-custom-value'
+export const TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID = 'tx-description-custom-data'
 
 export const styles = () => ({
   txDataContainer: {
@@ -42,6 +43,8 @@ type DescriptionDescProps = {
 }
 
 type CustomDescProps = {
+  value: string,
+  recipient: string,
   data: String,
   classes: Obeject,
 }
@@ -88,9 +91,24 @@ const SettingsDescription = ({ removedOwner, addedOwner, newThreshold }: Descrip
   </>
 )
 
-const CustomDescription = ({ data, classes }: CustomDescProps) => (
+const CustomDescription = ({
+  data, value = 0, recipient, classes,
+}: CustomDescProps) => (
   <>
-    <Paragraph className={classes.txData} data-testid={TRANSACTIONS_DESC_CUSTOM_TEST_ID}>
+    <Paragraph noMargin data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
+      <Bold>
+        Send
+        {' '}
+        {value}
+        {' '}
+        ETH
+        {' '}
+        to:
+      </Bold>
+      <br />
+      <EtherscanLink type="address" value={recipient} />
+    </Paragraph>
+    <Paragraph className={classes.txData} data-testid={TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID}>
       <Bold>Data (hex encoded):</Bold>
       <br />
       {data}
@@ -109,7 +127,7 @@ const TxDescription = ({ tx, classes }: Props) => {
         <SettingsDescription removedOwner={removedOwner} newThreshold={newThreshold} addedOwner={addedOwner} />
       )}
       {customTx && (
-        <CustomDescription data={data} classes={classes} />
+        <CustomDescription data={data} value={value} recipient={recipient} classes={classes} />
       )}
       {!cancellationTx && !modifySettingsTx && !customTx && (
         <TransferDescription value={value} symbol={tx.symbol} recipient={recipient} />

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

@@ -23,6 +23,11 @@ export const getTxData = (tx: Transaction): DecodedTxData => {
   if (tx.isTokenTransfer && tx.decodedParams) {
     txData.recipient = tx.decodedParams.recipient
     txData.value = fromWei(toBN(tx.decodedParams.value), 'ether')
+  } else if (tx.customTx) {
+    txData.recipient = tx.recipient
+    txData.value = fromWei(toBN(tx.value), 'ether')
+    txData.data = tx.data
+    txData.customTx = true
   } else if (Number(tx.value) > 0) {
     txData.recipient = tx.recipient
     txData.value = fromWei(toBN(tx.value), 'ether')
@@ -49,9 +54,6 @@ export const getTxData = (tx: Transaction): DecodedTxData => {
     }
   } else if (tx.cancellationTx) {
     txData.cancellationTx = true
-  } else if (tx.customTx) {
-    txData.data = tx.data
-    txData.customTx = true
   }
 
   return txData