From fffabf02cedad04645ca7c260a96f6b1895f9f03 Mon Sep 17 00:00:00 2001 From: nicolas Date: Mon, 21 Sep 2020 15:03:27 -0300 Subject: [PATCH] (Bugfix) - #1233 Fix method values length in TXs (#1314) * Fix method values length in TXs * arrays Improvment * Make use of EthHashInfo * review change --- .../TxDescription/CustomDescription.tsx | 43 +++++++---- .../ExpandedTx/TxDescription/Value.tsx | 73 +++++++------------ .../TxsTable/ExpandedTx/index.tsx | 2 +- .../Transactions/TxsTable/ExpandedTx/style.ts | 4 + 4 files changed, 59 insertions(+), 63 deletions(-) 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 a4a8199c..489451af 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/CustomDescription.tsx +++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/CustomDescription.tsx @@ -1,4 +1,4 @@ -import { IconText, Text } from '@gnosis.pm/safe-react-components' +import { IconText, Text, EthHashInfo } from '@gnosis.pm/safe-react-components' import { makeStyles } from '@material-ui/core/styles' import React from 'react' import styled from 'styled-components' @@ -12,8 +12,6 @@ import { MultiSendDetails, } from 'src/routes/safe/store/actions/transactions/utils/multiSendDecodedDetails' import Bold from 'src/components/layout/Bold' -import OwnerAddressTableCell from 'src/routes/safe/components/Settings/ManageOwners/OwnerAddressTableCell' -import EtherscanLink from 'src/components/EtherscanLink' import { humanReadableValue } from 'src/logic/tokens/utils/humanReadableValue' import Collapse from 'src/components/Collapse' import { useSelector } from 'react-redux' @@ -24,6 +22,8 @@ import { shortVersionOf } from 'src/logic/wallets/ethAddresses' import { Transaction } from 'src/logic/safe/store/models/types/transaction' import { DataDecoded } from 'src/routes/safe/store/models/types/transactions.d' import DividerLine from 'src/components/DividerLine' +import { isArrayParameter } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils' +import { getNetwork } from 'src/config' export const TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID = 'tx-description-custom-value' export const TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID = 'tx-description-custom-data' @@ -34,9 +34,14 @@ const useStyles = makeStyles(styles) const TxDetailsMethodName = styled(Text)` text-indent: 4px; ` -const TxDetailsMethodParam = styled.div` - text-indent: 8px; - display: flex; +const TxDetailsMethodParam = styled.div<{ isArrayParameter: boolean }>` + padding-left: 8px; + display: ${({ isArrayParameter }) => (isArrayParameter ? 'block' : 'flex')}; + align-items: center; + + p:first-of-type { + margin-right: ${({ isArrayParameter }) => (isArrayParameter ? '0' : '4px')}; + } ` const TxDetailsContent = styled.div` padding: 8px 8px 8px 16px; @@ -46,6 +51,10 @@ const TxInfo = styled.div` padding: 8px 8px 8px 16px; ` +const StyledMethodName = styled(Text)` + white-space: nowrap; +` + const TxInfoDetails = ({ data }: { data: DataDecoded }): React.ReactElement => ( @@ -53,10 +62,10 @@ const TxInfoDetails = ({ data }: { data: DataDecoded }): React.ReactElement => ( {data.parameters.map((param, index) => ( - - + + {param.name}({param.type}): - + ))} @@ -76,7 +85,7 @@ const MultiSendCustomDataAction = ({ tx, order }: { tx: MultiSendDetails; order: Send {humanReadableValue(tx.value)} ETH to: - + {!!tx.data && } @@ -173,11 +182,15 @@ const GenericCustomData = ({ amount = '0', data, recipient, storedTx }: GenericC Send {amount} to: - {recipientName ? ( - - ) : ( - - )} + + {!!storedTx?.dataDecoded && } diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx index 409440a5..7a0108e2 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx +++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/Value.tsx @@ -1,21 +1,15 @@ -import { Text } from '@gnosis.pm/safe-react-components' -import { makeStyles } from '@material-ui/core/styles' +import { Text, EthHashInfo } from '@gnosis.pm/safe-react-components' import React from 'react' import styled from 'styled-components' -import { styles } from './styles' - +import { getNetwork } from 'src/config' import { isAddress, isArrayParameter, } from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils' -import { useWindowDimensions } from 'src/logic/hooks/useWindowDimensions' -import SafeEtherscanLink from 'src/components/EtherscanLink' - -const useStyles = makeStyles(styles) const NestedWrapper = styled.div` - text-indent: 24px; + padding-left: 4px; ` const StyledText = styled(Text)` @@ -28,53 +22,38 @@ interface RenderValueProps { value: string | string[] } -const EtherscanLink = ({ method, type, value }: RenderValueProps): React.ReactElement => { - const classes = useStyles() - const [cut, setCut] = React.useState(0) - const { width } = useWindowDimensions() - - React.useEffect(() => { - if (width <= 900) { - setCut(4) - } else if (width <= 1024) { - setCut(8) - } else { - setCut(12) - } - }, [width]) - - if (isArrayParameter(type)) { - return ( - - {(value as string[]).map((value, index) => ( - - ))} - - ) - } - - return -} - const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactElement => { - if (isArrayParameter(type)) { - return ( + const getTextValue = (value: string) => {value} + + const getArrayValue = (parentId: string, value: string[] | string) => ( +
+ [ - {(value as string[]).map((value, index) => ( - - {value} - - ))} + {(value as string[]).map((currentValue, index) => { + const key = `${parentId}-value-${index}` + return ( +
+ {Array.isArray(currentValue) ? getArrayValue(key, currentValue) : getTextValue(currentValue)} +
+ ) + })}
- ) + ] +
+ ) + + if (isArrayParameter(type) || Array.isArray(value)) { + return getArrayValue(method, value) } - return {value as string} + return getTextValue(value as string) } const Value = ({ type, ...props }: RenderValueProps): React.ReactElement => { if (isAddress(type)) { - return + return ( + + ) } return diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx index 7bd08ad8..2bc2c2bb 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx +++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/index.tsx @@ -63,7 +63,7 @@ const ExpandedTx = ({ cancelTx, tx }: ExpandedTxProps): React.ReactElement => { <> - +
Hash: diff --git a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/style.ts b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/style.ts index f149263b..d76074be 100644 --- a/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/style.ts +++ b/src/routes/safe/components/Transactions/TxsTable/ExpandedTx/style.ts @@ -1,6 +1,10 @@ import { border, lg, md } from 'src/theme/variables' const cssStyles = { + col: { + wordBreak: 'break-word', + whiteSpace: 'normal', + }, expandedTxBlock: { borderBottom: `2px solid ${border}`, },