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',