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 ? ( + ) : ( - + ) }