add buttons in expanded tx view

This commit is contained in:
Mikhail Mikheev 2019-07-02 16:23:47 +04:00
parent ac00b647d4
commit 280f0cdddb
5 changed files with 97 additions and 26 deletions

View File

@ -0,0 +1,39 @@
// @flow
import React from 'react'
import { withStyles } from '@material-ui/core/styles'
import Row from '~/components/layout/Row'
import Button from '~/components/layout/Button'
import { lg } from '~/theme/variables'
type Props = {
onTxConfirm: Function,
onTxCancel: Function,
classes: Object,
}
const styles = () => ({
buttonRow: {
height: '56px',
justifyContent: 'center',
backgroundColor: '#f7f8fb',
},
button: {
height: '32px',
'&:last-child': {
marginLeft: lg,
},
},
})
const ButtonRow = ({ classes, onTxCancel, onTxConfirm }: Props) => (
<Row align="center" className={classes.buttonRow}>
<Button className={classes.button} variant="contained" minWidth={140} color="secondary" onClick={onTxCancel}>
Cancel TX
</Button>
<Button className={classes.button} variant="contained" minWidth={140} color="primary" onClick={onTxConfirm}>
Confirm TX
</Button>
</Row>
)
export default withStyles(styles)(ButtonRow)

View File

@ -8,9 +8,11 @@ import ListItem from '@material-ui/core/ListItem'
import ListItemIcon from '@material-ui/core/ListItemIcon'
import ListItemText from '@material-ui/core/ListItemText'
import Identicon from '~/components/Identicon'
import Hairline from '~/components/layout/Hairline'
import { type Owner } from '~/routes/safe/store/models/owner'
import { getEtherScanLink } from '~/logic/wallets/getWeb3'
import { secondary } from '~/theme/variables'
import { shortVersionOf } from '~/logic/wallets/ethAddresses'
import { styles } from './style'
type Props = {
@ -24,25 +26,28 @@ const openIconStyle = {
}
const OwnersList = ({ owners, classes }: Props) => (
<MuiList className={classes.ownersList}>
{owners.map(owner => (
<ListItem key={owner.address} className={classes.owner}>
<ListItemIcon>
<Identicon address={owner.address} diameter={32} className={classes.icon} />
</ListItemIcon>
<ListItemText
primary={owner.name}
secondary={(
<a href={getEtherScanLink(owner.address, 'rinkeby')} target="_blank" rel="noopener noreferrer">
{owner.address}
{' '}
<OpenInNew style={openIconStyle} />
</a>
)}
/>
</ListItem>
))}
</MuiList>
<>
<MuiList className={classes.ownersList}>
{owners.map(owner => (
<ListItem key={owner.address} className={classes.owner}>
<ListItemIcon>
<Identicon address={owner.address} diameter={32} className={classes.icon} />
</ListItemIcon>
<ListItemText
primary={owner.name}
secondary={(
<a href={getEtherScanLink(owner.address, 'rinkeby')} target="_blank" rel="noopener noreferrer">
{shortVersionOf(owner.address, 4)}
{' '}
<OpenInNew style={openIconStyle} />
</a>
)}
/>
</ListItem>
))}
</MuiList>
<Hairline color="#c8ced4" />
</>
)
export default withStyles(styles)(OwnersList)

View File

@ -5,7 +5,7 @@ export const styles = () => ({
ownersList: {
width: '100%',
padding: 0,
maxHeight: '192px',
height: '192px',
overflowY: 'scroll',
},
icon: {

View File

@ -14,13 +14,17 @@ 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 { openTxInEtherScan } from '~/logic/wallets/getWeb3'
import { getEtherScanLink, openTxInEtherScan, getWeb3 } from '~/logic/wallets/getWeb3'
import { shortVersionOf } from '~/logic/wallets/ethAddresses'
import { secondary } from '~/theme/variables'
import OwnersList from './OwnersList'
import ButtonRow from './ButtonRow'
import { styles } from './style'
import { formatDate } from '../columns'
const web3 = getWeb3()
const { toBN, fromWei } = web3.utils
type Props = {
classes: Object,
tx: Transaction,
@ -45,8 +49,16 @@ const ExpandedTx = ({
const confirmedLabel = `Confirmed [${tx.confirmations.size}/${threshold}]`
const unconfirmedLabel = `Unconfirmed [${owners.size - tx.confirmations.size}]`
const txStatus = tx.isExecuted ? 'success' : 'awaiting_confirmations'
const ownersWhoConfirmed = tx.confirmations.map(conf => conf.owner)
const ownersNotConfirmed = owners.filter(owner => !ownersWhoConfirmed.find(confOfwner => confOfwner.address === owner.address))
const ownersWhoConfirmed = []
const ownersUnconfirmed = []
owners.forEach((owner) => {
if (tx.confirmations.find(conf => conf.owner.address === owner.address)) {
ownersWhoConfirmed.push(owner)
} else {
ownersUnconfirmed.push(owner)
}
})
const handleTabChange = (event, tabClicked) => {
setTabIndex(tabClicked)
@ -88,9 +100,20 @@ const ExpandedTx = ({
<Hairline />
<Block className={classes.txDataContainer}>
<Paragraph noMargin>
<Bold>Send 1.00 ETH to:</Bold>
<Bold>
Send
{' '}
{fromWei(toBN(tx.value), 'ether')}
{' '}
{tx.symbol}
{' '}
to:
</Bold>
<br />
{tx.recipient}
<a href={getEtherScanLink(tx.recipient, 'rinkeby')} target="_blank" rel="noopener noreferrer">
{shortVersionOf(tx.recipient, 4)}
<OpenInNew style={openIconStyle} />
</a>
</Paragraph>
</Block>
</Col>
@ -103,7 +126,8 @@ const ExpandedTx = ({
<Hairline color="#c8ced4" />
</Row>
<Row>{tabIndex === 0 && <OwnersList owners={ownersWhoConfirmed} />}</Row>
<Row>{tabIndex === 1 && <OwnersList owners={ownersNotConfirmed} />}</Row>
<Row>{tabIndex === 1 && <OwnersList owners={ownersUnconfirmed} />}</Row>
<ButtonRow />
</Col>
</Row>
</Block>

View File

@ -57,6 +57,9 @@ export default createMuiTheme({
containedPrimary: {
backgroundColor: secondary,
},
containedSecondary: {
backgroundColor: error,
},
sizeLarge: {
padding: `${md} ${lg}`,
minHeight: '52px',