diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/ButtonRow/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/ButtonRow/index.jsx new file mode 100644 index 00000000..051af519 --- /dev/null +++ b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/ButtonRow/index.jsx @@ -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) => ( + + + + +) + +export default withStyles(styles)(ButtonRow) diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/index.jsx index a62cf8fd..5e2761ab 100644 --- a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/index.jsx +++ b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/index.jsx @@ -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) => ( - - {owners.map(owner => ( - - - - - - {owner.address} - {' '} - - - )} - /> - - ))} - + <> + + {owners.map(owner => ( + + + + + + {shortVersionOf(owner.address, 4)} + {' '} + + + )} + /> + + ))} + + + ) export default withStyles(styles)(OwnersList) diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/style.js b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/style.js index f5ab831b..384a8582 100644 --- a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/style.js +++ b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/style.js @@ -5,7 +5,7 @@ export const styles = () => ({ ownersList: { width: '100%', padding: 0, - maxHeight: '192px', + height: '192px', overflowY: 'scroll', }, icon: { diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx index bb1132d3..10ee3b5a 100644 --- a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx +++ b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx @@ -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 = ({ - Send 1.00 ETH to: + + Send + {' '} + {fromWei(toBN(tx.value), 'ether')} + {' '} + {tx.symbol} + {' '} + to: +
- {tx.recipient} + + {shortVersionOf(tx.recipient, 4)} + +
@@ -103,7 +126,8 @@ const ExpandedTx = ({ {tabIndex === 0 && } - {tabIndex === 1 && } + {tabIndex === 1 && } + diff --git a/src/theme/mui.js b/src/theme/mui.js index 55dcd377..4ea37801 100644 --- a/src/theme/mui.js +++ b/src/theme/mui.js @@ -57,6 +57,9 @@ export default createMuiTheme({ containedPrimary: { backgroundColor: secondary, }, + containedSecondary: { + backgroundColor: error, + }, sizeLarge: { padding: `${md} ${lg}`, minHeight: '52px',