Skip to content
This repository has been archived by the owner on Nov 10, 2023. It is now read-only.

Bug #313: Payload breaks ui #371

Merged
merged 6 commits into from
Dec 17, 2019
Merged

Bug #313: Payload breaks ui #371

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
55bbff9
Makes minMaxLength 2 to AddCustomToken
Agupane Dec 16, 2019
bab0035
Merge branch 'development' of https://github.com/gnosis/safe-react in…
Agupane Dec 17, 2019
0002851
Merge branch 'development' of https://github.com/gnosis/safe-react in…
Agupane Dec 17, 2019
59b16df
Fix styling
Agupane Dec 17, 2019
d86e9be
Update index.jsx
germartinez Dec 17, 2019
0e055fe
Fix typo
germartinez Dec 17, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 63 additions & 23 deletions src/routes/safe/components/Transactions/TxsTable/ExpandedTx/TxDescription/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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'
Expand All @@ -23,6 +25,13 @@ export const styles = () => ({
txData: {
wordBreak: 'break-all',
},
txDataParagraph: {
whiteSpace: 'normal',
},
linkTxData: {
textDecoration: 'underline',
cursor: 'pointer',
},
})

type Props = {
Expand Down Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think semantically this is a button, not a link. We have ButtonLink component just for that

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The HTML element (or anchor element), with its href attribute, creates a hyperlink to web pages, files, email addresses, locations in the same page, or anything else a URL can address

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

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 {
Expand Down