Bug #313: Payload breaks ui (#371)

* Makes minMaxLength 2 to AddCustomToken

* Fix styling

* Fix typo
This commit is contained in:
Agustin Pane 2019-12-17 17:55:24 -03:00 committed by Germán Martínez
parent b30e5c9109
commit 12432353b6
1 changed files with 63 additions and 23 deletions

View File

@ -1,5 +1,5 @@
// @flow
import React from 'react'
import React, { useState } from 'react'
import { withStyles } from '@material-ui/core/styles'
import { type Transaction } from '~/routes/safe/store/models/transaction'
import Bold from '~/components/layout/Bold'
@ -8,6 +8,8 @@ import Paragraph from '~/components/layout/Paragraph'
import Block from '~/components/layout/Block'
import { md, lg } from '~/theme/variables'
import { getTxData } from './utils'
import { shortVersionOf } from '~/logic/wallets/ethAddresses'
import LinkWithRef from '~/components/layout/Link'
export const TRANSACTIONS_DESC_ADD_OWNER_TEST_ID = 'tx-description-add-owner'
export const TRANSACTIONS_DESC_REMOVE_OWNER_TEST_ID = 'tx-description-remove-owner'
@ -23,6 +25,13 @@ export const styles = () => ({
txData: {
wordBreak: 'break-all',
},
txDataParagraph: {
whiteSpace: 'normal',
},
linkTxData: {
textDecoration: 'underline',
cursor: 'pointer',
},
})
type Props = {
@ -91,28 +100,59 @@ const SettingsDescription = ({ removedOwner, addedOwner, newThreshold }: Descrip
const CustomDescription = ({
data, value = 0, recipient, classes,
}: CustomDescProps) => (
<>
<Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
<Bold>
Send
{' '}
{value}
{' '}
ETH
{' '}
to:
</Bold>
<EtherscanLink type="address" value={recipient} />
</Block>
<Block className={classes.txData} data-testid={TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID}>
<Bold>Data (hex encoded):</Bold>
<Paragraph size="md" noMargin>
{data}
</Paragraph>
</Block>
</>
)
}: CustomDescProps) => {
const [showTxData, setShowTxData] = useState(false)
return (
<>
<Block data-testid={TRANSACTIONS_DESC_CUSTOM_VALUE_TEST_ID}>
<Bold>
Send
{' '}
{value}
{' '}
ETH
{' '}
to:
</Bold>
<EtherscanLink type="address" value={recipient} />
</Block>
<Block className={classes.txData} data-testid={TRANSACTIONS_DESC_CUSTOM_DATA_TEST_ID}>
<Bold>Data (hex encoded):</Bold>
<Paragraph size="md" noMargin className={classes.txDataParagraph}>
{showTxData ? (
<>
{data}
{' '}
<LinkWithRef
aria-label="Hide details of the transaction"
onClick={() => setShowTxData(false)}
rel="noopener noreferrer"
target="_blank"
className={classes.linkTxData}
>
Show Less
</LinkWithRef>
</>
) : (
<>
{shortVersionOf(data, 20)}
{' '}
<LinkWithRef
aria-label="Show details of the transaction"
onClick={() => setShowTxData(true)}
rel="noopener noreferrer"
target="_blank"
className={classes.linkTxData}
>
Show More
</LinkWithRef>
</>
)}
</Paragraph>
</Block>
</>
)
}
const TxDescription = ({ tx, classes }: Props) => {
const {