diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/CustomDescription.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/CustomDescription.tsx
index 58d7967a..eb92ec0b 100644
--- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/CustomDescription.tsx
+++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/CustomDescription.tsx
@@ -22,9 +22,12 @@ import Paragraph from 'src/components/layout/Paragraph'
import LinkWithRef from 'src/components/layout/Link'
import { shortVersionOf } from 'src/logic/wallets/ethAddresses'
import { Transaction } from 'src/routes/safe/store/models/types/transaction'
+import { DataDecoded } from 'src/routes/safe/store/models/types/transactions'
+import DividerLine from 'src/components/DividerLine'
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 TRANSACTION_DESC_ACTION_TEST_ID = 'tx-description-action-data'
const useStyles = makeStyles(styles)
@@ -45,42 +48,55 @@ const TxInfo = styled.div`
padding: 8px 8px 8px 16px;
`
-const MultiSendCustomData = ({ tx, order }: { tx: MultiSendDetails; order: number }): React.ReactElement => {
+const TxInfoDetails = ({ data }: { data: DataDecoded }): React.ReactElement => (
+
+
+ {data.method}
+
+
+ {data.parameters.map((param, index) => (
+
+
+ {param.name}({param.type}):
+
+
+
+
+ ))}
+
+)
+
+const MultiSendCustomDataAction = ({ tx, order }: { tx: MultiSendDetails; order: number }): React.ReactElement => {
const classes = useStyles()
const methodName = tx.data?.method ? ` (${tx.data.method})` : ''
return (
- <>
- }
- >
-
-
- Send {humanReadableValue(tx.value)} ETH to:
-
-
- {tx.data && (
-
-
- {tx.data.method}
-
- {tx.data?.parameters.map((param, index) => (
-
-
-
- {param.name}({param.type}):
-
-
-
-
- ))}
-
- )}
-
-
- >
+ }
+ >
+
+
+ Send {humanReadableValue(tx.value)} ETH to:
+
+
+
+ {!!tx.data && }
+
+
+ )
+}
+
+const MultiSendCustomData = ({ txDetails }: { txDetails: MultiSendDetails[] }): React.ReactElement => {
+ const classes = useStyles()
+
+ return (
+
+ {txDetails.map((tx, index) => (
+
+ ))}
+
)
}
@@ -128,13 +144,31 @@ const TxData = ({ data }: { data: string }): React.ReactElement => {
)
}
+const TxActionData = ({ dataDecoded }: { dataDecoded: DataDecoded }): React.ReactElement => {
+ const classes = useStyles()
+
+ return (
+ <>
+
+
+
+ Action
+
+
+
+
+ >
+ )
+}
+
interface GenericCustomDataProps {
amount?: string
data: string
recipient: string
+ storedTx: Transaction
}
-const GenericCustomData = ({ amount = '0', data, recipient }: GenericCustomDataProps): React.ReactElement => {
+const GenericCustomData = ({ amount = '0', data, recipient, storedTx }: GenericCustomDataProps): React.ReactElement => {
const classes = useStyles()
const recipientName = useSelector((state) => getNameFromAddressBook(state, recipient))
@@ -148,6 +182,9 @@ const GenericCustomData = ({ amount = '0', data, recipient }: GenericCustomDataP
)}
+
+ {!!storedTx?.dataDecoded && }
+
Data (hex encoded):
@@ -164,16 +201,12 @@ interface CustomDescriptionProps {
}
const CustomDescription = ({ amount, data, recipient, storedTx }: CustomDescriptionProps): React.ReactElement => {
- const classes = useStyles()
+ const txDetails = (storedTx.multiSendTx && extractMultiSendDecodedData(storedTx).txDetails) ?? undefined
- return storedTx.multiSendTx ? (
-
- {extractMultiSendDecodedData(storedTx).txDetails?.map((tx, index) => (
-
- ))}
-
+ return txDetails ? (
+
) : (
-
+
)
}