add buttons in expanded tx view

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) => (
+  <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)

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,6 +26,7 @@ const openIconStyle = {
 }
 
 const OwnersList = ({ owners, classes }: Props) => (
+  <>
     <MuiList className={classes.ownersList}>
       {owners.map(owner => (
         <ListItem key={owner.address} className={classes.owner}>
@@ -34,7 +37,7 @@ const OwnersList = ({ owners, classes }: Props) => (
             primary={owner.name}
             secondary={(
               <a href={getEtherScanLink(owner.address, 'rinkeby')} target="_blank" rel="noopener noreferrer">
-              {owner.address}
+                {shortVersionOf(owner.address, 4)}
                 {' '}
                 <OpenInNew style={openIconStyle} />
               </a>
@@ -43,6 +46,8 @@ const OwnersList = ({ owners, classes }: Props) => (
         </ListItem>
       ))}
     </MuiList>
+    <Hairline color="#c8ced4" />
+  </>
 )
 
 export default withStyles(styles)(OwnersList)

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: {

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 = ({
           <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>

src/theme/mui.js

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