* Fix method values length in TXs * arrays Improvment * Make use of EthHashInfo * review change
This commit is contained in:
parent
46c59460cd
commit
fffabf02ce
|
@ -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 { makeStyles } from '@material-ui/core/styles'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
|
@ -12,8 +12,6 @@ import {
|
||||||
MultiSendDetails,
|
MultiSendDetails,
|
||||||
} from 'src/routes/safe/store/actions/transactions/utils/multiSendDecodedDetails'
|
} from 'src/routes/safe/store/actions/transactions/utils/multiSendDecodedDetails'
|
||||||
import Bold from 'src/components/layout/Bold'
|
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 { humanReadableValue } from 'src/logic/tokens/utils/humanReadableValue'
|
||||||
import Collapse from 'src/components/Collapse'
|
import Collapse from 'src/components/Collapse'
|
||||||
import { useSelector } from 'react-redux'
|
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 { Transaction } from 'src/logic/safe/store/models/types/transaction'
|
||||||
import { DataDecoded } from 'src/routes/safe/store/models/types/transactions.d'
|
import { DataDecoded } from 'src/routes/safe/store/models/types/transactions.d'
|
||||||
import DividerLine from 'src/components/DividerLine'
|
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_VALUE_TEST_ID = 'tx-description-custom-value'
|
||||||
export const TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID = 'tx-description-custom-data'
|
export const TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID = 'tx-description-custom-data'
|
||||||
|
@ -34,9 +34,14 @@ const useStyles = makeStyles(styles)
|
||||||
const TxDetailsMethodName = styled(Text)`
|
const TxDetailsMethodName = styled(Text)`
|
||||||
text-indent: 4px;
|
text-indent: 4px;
|
||||||
`
|
`
|
||||||
const TxDetailsMethodParam = styled.div`
|
const TxDetailsMethodParam = styled.div<{ isArrayParameter: boolean }>`
|
||||||
text-indent: 8px;
|
padding-left: 8px;
|
||||||
display: flex;
|
display: ${({ isArrayParameter }) => (isArrayParameter ? 'block' : 'flex')};
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
p:first-of-type {
|
||||||
|
margin-right: ${({ isArrayParameter }) => (isArrayParameter ? '0' : '4px')};
|
||||||
|
}
|
||||||
`
|
`
|
||||||
const TxDetailsContent = styled.div`
|
const TxDetailsContent = styled.div`
|
||||||
padding: 8px 8px 8px 16px;
|
padding: 8px 8px 8px 16px;
|
||||||
|
@ -46,6 +51,10 @@ const TxInfo = styled.div`
|
||||||
padding: 8px 8px 8px 16px;
|
padding: 8px 8px 8px 16px;
|
||||||
`
|
`
|
||||||
|
|
||||||
|
const StyledMethodName = styled(Text)`
|
||||||
|
white-space: nowrap;
|
||||||
|
`
|
||||||
|
|
||||||
const TxInfoDetails = ({ data }: { data: DataDecoded }): React.ReactElement => (
|
const TxInfoDetails = ({ data }: { data: DataDecoded }): React.ReactElement => (
|
||||||
<TxInfo>
|
<TxInfo>
|
||||||
<TxDetailsMethodName size="lg" strong>
|
<TxDetailsMethodName size="lg" strong>
|
||||||
|
@ -53,10 +62,10 @@ const TxInfoDetails = ({ data }: { data: DataDecoded }): React.ReactElement => (
|
||||||
</TxDetailsMethodName>
|
</TxDetailsMethodName>
|
||||||
|
|
||||||
{data.parameters.map((param, index) => (
|
{data.parameters.map((param, index) => (
|
||||||
<TxDetailsMethodParam key={`${data.method}_param-${index}`}>
|
<TxDetailsMethodParam key={`${data.method}_param-${index}`} isArrayParameter={isArrayParameter(param.type)}>
|
||||||
<Text size="lg" strong>
|
<StyledMethodName size="lg" strong>
|
||||||
{param.name}({param.type}):
|
{param.name}({param.type}):
|
||||||
</Text>
|
</StyledMethodName>
|
||||||
<Value method={data.method} type={param.type} value={param.value} />
|
<Value method={data.method} type={param.type} value={param.value} />
|
||||||
</TxDetailsMethodParam>
|
</TxDetailsMethodParam>
|
||||||
))}
|
))}
|
||||||
|
@ -76,7 +85,7 @@ const MultiSendCustomDataAction = ({ tx, order }: { tx: MultiSendDetails; order:
|
||||||
<TxDetailsContent>
|
<TxDetailsContent>
|
||||||
<TxInfo>
|
<TxInfo>
|
||||||
<Bold>Send {humanReadableValue(tx.value)} ETH to:</Bold>
|
<Bold>Send {humanReadableValue(tx.value)} ETH to:</Bold>
|
||||||
<OwnerAddressTableCell address={tx.to} showLinks />
|
<EthHashInfo hash={tx.to} showIdenticon showCopyBtn showEtherscanBtn network={getNetwork()} />
|
||||||
</TxInfo>
|
</TxInfo>
|
||||||
|
|
||||||
{!!tx.data && <TxInfoDetails data={tx.data} />}
|
{!!tx.data && <TxInfoDetails data={tx.data} />}
|
||||||
|
@ -173,11 +182,15 @@ const GenericCustomData = ({ amount = '0', data, recipient, storedTx }: GenericC
|
||||||
<Block>
|
<Block>
|
||||||
<Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
|
<Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
|
||||||
<Bold>Send {amount} to:</Bold>
|
<Bold>Send {amount} to:</Bold>
|
||||||
{recipientName ? (
|
|
||||||
<OwnerAddressTableCell address={recipient} knownAddress showLinks userName={recipientName} />
|
<EthHashInfo
|
||||||
) : (
|
hash={recipient}
|
||||||
<EtherscanLink knownAddress={false} type="address" value={recipient} />
|
name={recipientName === 'UNKNOWN' ? undefined : recipientName}
|
||||||
)}
|
showIdenticon
|
||||||
|
showCopyBtn
|
||||||
|
showEtherscanBtn
|
||||||
|
network={getNetwork()}
|
||||||
|
/>
|
||||||
</Block>
|
</Block>
|
||||||
|
|
||||||
{!!storedTx?.dataDecoded && <TxActionData dataDecoded={storedTx.dataDecoded} />}
|
{!!storedTx?.dataDecoded && <TxActionData dataDecoded={storedTx.dataDecoded} />}
|
||||||
|
|
|
@ -1,21 +1,15 @@
|
||||||
import { Text } from '@gnosis.pm/safe-react-components'
|
import { Text, EthHashInfo } from '@gnosis.pm/safe-react-components'
|
||||||
import { makeStyles } from '@material-ui/core/styles'
|
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
import styled from 'styled-components'
|
import styled from 'styled-components'
|
||||||
|
|
||||||
import { styles } from './styles'
|
import { getNetwork } from 'src/config'
|
||||||
|
|
||||||
import {
|
import {
|
||||||
isAddress,
|
isAddress,
|
||||||
isArrayParameter,
|
isArrayParameter,
|
||||||
} from 'src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/utils'
|
} 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`
|
const NestedWrapper = styled.div`
|
||||||
text-indent: 24px;
|
padding-left: 4px;
|
||||||
`
|
`
|
||||||
|
|
||||||
const StyledText = styled(Text)`
|
const StyledText = styled(Text)`
|
||||||
|
@ -28,53 +22,38 @@ interface RenderValueProps {
|
||||||
value: string | string[]
|
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 (
|
|
||||||
<NestedWrapper>
|
|
||||||
{(value as string[]).map((value, index) => (
|
|
||||||
<SafeEtherscanLink type="address" key={`${method}-value-${index}`} cut={cut} value={value} />
|
|
||||||
))}
|
|
||||||
</NestedWrapper>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
return <SafeEtherscanLink type="address" className={classes.address} cut={cut} value={value as string} />
|
|
||||||
}
|
|
||||||
|
|
||||||
const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactElement => {
|
const GenericValue = ({ method, type, value }: RenderValueProps): React.ReactElement => {
|
||||||
if (isArrayParameter(type)) {
|
const getTextValue = (value: string) => <StyledText size="lg">{value}</StyledText>
|
||||||
return (
|
|
||||||
|
const getArrayValue = (parentId: string, value: string[] | string) => (
|
||||||
|
<div>
|
||||||
|
[
|
||||||
<NestedWrapper>
|
<NestedWrapper>
|
||||||
{(value as string[]).map((value, index) => (
|
{(value as string[]).map((currentValue, index) => {
|
||||||
<StyledText key={`${method}-value-${index}`} size="lg">
|
const key = `${parentId}-value-${index}`
|
||||||
{value}
|
return (
|
||||||
</StyledText>
|
<div key={key}>
|
||||||
))}
|
{Array.isArray(currentValue) ? getArrayValue(key, currentValue) : getTextValue(currentValue)}
|
||||||
</NestedWrapper>
|
</div>
|
||||||
)
|
)
|
||||||
|
})}
|
||||||
|
</NestedWrapper>
|
||||||
|
]
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
if (isArrayParameter(type) || Array.isArray(value)) {
|
||||||
|
return getArrayValue(method, value)
|
||||||
}
|
}
|
||||||
|
|
||||||
return <StyledText size="lg">{value as string}</StyledText>
|
return getTextValue(value as string)
|
||||||
}
|
}
|
||||||
|
|
||||||
const Value = ({ type, ...props }: RenderValueProps): React.ReactElement => {
|
const Value = ({ type, ...props }: RenderValueProps): React.ReactElement => {
|
||||||
if (isAddress(type)) {
|
if (isAddress(type)) {
|
||||||
return <EtherscanLink type={type} {...props} />
|
return (
|
||||||
|
<EthHashInfo hash={props.value as string} showCopyBtn showEtherscanBtn shortenHash={4} network={getNetwork()} />
|
||||||
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return <GenericValue type={type} {...props} />
|
return <GenericValue type={type} {...props} />
|
||||||
|
|
|
@ -63,7 +63,7 @@ const ExpandedTx = ({ cancelTx, tx }: ExpandedTxProps): React.ReactElement => {
|
||||||
<>
|
<>
|
||||||
<Block className={classes.expandedTxBlock}>
|
<Block className={classes.expandedTxBlock}>
|
||||||
<Row>
|
<Row>
|
||||||
<Col layout="column" xs={6}>
|
<Col layout="column" xs={6} className={classes.col}>
|
||||||
<Block className={cn(classes.txDataContainer, (isIncomingTx || isCreationTx) && classes.incomingTxBlock)}>
|
<Block className={cn(classes.txDataContainer, (isIncomingTx || isCreationTx) && classes.incomingTxBlock)}>
|
||||||
<div style={{ display: 'flex' }}>
|
<div style={{ display: 'flex' }}>
|
||||||
<Bold className={classes.txHash}>Hash:</Bold>
|
<Bold className={classes.txHash}>Hash:</Bold>
|
||||||
|
|
|
@ -1,6 +1,10 @@
|
||||||
import { border, lg, md } from 'src/theme/variables'
|
import { border, lg, md } from 'src/theme/variables'
|
||||||
|
|
||||||
const cssStyles = {
|
const cssStyles = {
|
||||||
|
col: {
|
||||||
|
wordBreak: 'break-word',
|
||||||
|
whiteSpace: 'normal',
|
||||||
|
},
|
||||||
expandedTxBlock: {
|
expandedTxBlock: {
|
||||||
borderBottom: `2px solid ${border}`,
|
borderBottom: `2px solid ${border}`,
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue