extract tx description to a separate component

This commit is contained in:
mmv 2019-07-10 17:23:53 +04:00
parent 95105237c2
commit 5a2d6bba91
3 changed files with 61 additions and 25 deletions

View File

@ -0,0 +1,57 @@
// @flow
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
import OpenInNew from '@material-ui/icons/OpenInNew'
import { type Transaction } from '~/routes/safe/store/models/transaction'
import Bold from '~/components/layout/Bold'
import Paragraph from '~/components/layout/Paragraph'
import Block from '~/components/layout/Block'
import { getEtherScanLink, getWeb3 } from '~/logic/wallets/getWeb3'
import { shortVersionOf } from '~/logic/wallets/ethAddresses'
import { md, lg, secondary } from '~/theme/variables'
const web3 = getWeb3()
const { toBN, fromWei } = web3.utils
const openIconStyle = {
height: '13px',
color: secondary,
}
export const styles = () => ({
txDataContainer: {
padding: `${lg} ${md}`,
},
})
type Props = {
classes: Object,
tx: Transaction,
}
const TxDescription = ({ tx, classes }: Props) => {
const description = ''
return (
<Block className={classes.txDataContainer}>
<Paragraph noMargin>
<Bold>
Send
{' '}
{fromWei(toBN(tx.value), 'ether')}
{' '}
{tx.symbol}
{' '}
to:
</Bold>
<br />
<a href={getEtherScanLink(tx.recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
{shortVersionOf(tx.recipient, 4)}
<OpenInNew style={openIconStyle} />
</a>
</Paragraph>
</Block>
)
}
export default withStyles(styles)(TxDescription)

View File

@ -12,18 +12,16 @@ import Paragraph from '~/components/layout/Paragraph'
import Hairline from '~/components/layout/Hairline'
import { type Transaction } from '~/routes/safe/store/models/transaction'
import { type Owner } from '~/routes/safe/store/models/owner'
import { getEtherScanLink, openTxInEtherScan, getWeb3 } from '~/logic/wallets/getWeb3'
import { openTxInEtherScan } from '~/logic/wallets/getWeb3'
import { shortVersionOf } from '~/logic/wallets/ethAddresses'
import { secondary } from '~/theme/variables'
import TxDescription from './TxDescription'
import OwnersColumn from './OwnersColumn'
import CancelTxModal from './CancelTxModal'
import ApproveTxModal from './ApproveTxModal'
import { styles } from './style'
import { formatDate } from '../columns'
const web3 = getWeb3()
const { toBN, fromWei } = web3.utils
type Props = {
classes: Object,
tx: Transaction,
@ -102,24 +100,7 @@ const ExpandedTx = ({
)}
</Block>
<Hairline />
<Block className={classes.txDataContainer}>
<Paragraph noMargin>
<Bold>
Send
{' '}
{fromWei(toBN(tx.value), 'ether')}
{' '}
{tx.symbol}
{' '}
to:
</Bold>
<br />
<a href={getEtherScanLink(tx.recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
{shortVersionOf(tx.recipient, 4)}
<OpenInNew style={openIconStyle} />
</a>
</Paragraph>
</Block>
<TxDescription tx={tx} />
</Col>
<OwnersColumn
tx={tx}

View File

@ -1,7 +1,5 @@
// @flow
import {
md, lg, connected, error,
} from '~/theme/variables'
import { md, lg, connected, error } from '~/theme/variables'
export const styles = () => ({
txDataContainer: {