extract tx description to a separate component
This commit is contained in:
parent
95105237c2
commit
5a2d6bba91
|
@ -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)
|
|
@ -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}
|
||||
|
|
|
@ -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: {
|
||||
|
|
Loading…
Reference in New Issue