ownerslist wip

src/routes/safe/components/Balances/Tokens/screens/TokenList/index.jsx

@@ -5,19 +5,19 @@ import cn from 'classnames'
 import SearchBar from 'material-ui-search-bar'
 import { withStyles } from '@material-ui/core/styles'
 import MuiList from '@material-ui/core/List'
-import Img from '~/components/layout/Img'
-import Block from '~/components/layout/Block'
 import ListItem from '@material-ui/core/ListItem'
 import ListItemIcon from '@material-ui/core/ListItemIcon'
+import CircularProgress from '@material-ui/core/CircularProgress'
 import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
 import ListItemText from '@material-ui/core/ListItemText'
-import Search from '@material-ui/icons/Search'
-import Button from '~/components/layout/Button'
 import Switch from '@material-ui/core/Switch'
+import Search from '@material-ui/icons/Search'
+import Img from '~/components/layout/Img'
+import Block from '~/components/layout/Block'
+import Button from '~/components/layout/Button'
 import Divider from '~/components/layout/Divider'
 import Hairline from '~/components/layout/Hairline'
 import Spacer from '~/components/Spacer'
-import CircularProgress from '@material-ui/core/CircularProgress'
 import Row from '~/components/layout/Row'
 import { ETH_ADDRESS } from '~/logic/tokens/utils/tokenHelpers'
 import { type Token } from '~/logic/tokens/store/model/token'

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/index.jsx

@@ -0,0 +1,39 @@
+// @flow
+import React, { useState } from 'react'
+import { List } from 'immutable'
+import { withStyles } from '@material-ui/core/styles'
+import OpenInNew from '@material-ui/icons/OpenInNew'
+import MuiList from '@material-ui/core/List'
+import ListItem from '@material-ui/core/ListItem'
+import ListItemIcon from '@material-ui/core/ListItemIcon'
+import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'
+import ListItemText from '@material-ui/core/ListItemText'
+import Tab from '@material-ui/core/Tab'
+import Row from '~/components/layout/Row'
+import Block from '~/components/layout/Block'
+import Col from '~/components/layout/Col'
+import Bold from '~/components/layout/Bold'
+import Span from '~/components/layout/Span'
+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 { shortVersionOf } from '~/logic/wallets/ethAddresses'
+// import { styles } from './style'
+
+type Props = {
+  owners: List<string>,
+}
+
+const OwnersList = ({ owners }: Props) => (
+  <MuiList>
+    {owners.map(owner => (
+      <ListItem>
+        <ListItemText>{owner}</ListItemText>
+      </ListItem>
+    ))}
+  </MuiList>
+)
+
+export default OwnersList

src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx

@@ -16,9 +16,10 @@ 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 { shortVersionOf } from '~/logic/wallets/ethAddresses'
+import { secondary } from '~/theme/variables'
+import OwnersList from './OwnersList'
 import { styles } from './style'
 import { formatDate } from '../columns'
-import { secondary } from '~/theme/variables'
 
 type Props = {
   classes: Object,
@@ -91,13 +92,15 @@ const ExpandedTx = ({
             </Paragraph>
           </Block>
         </Col>
-        <Col xs={6} className={classes.rightCol}>
+        <Col xs={6} className={classes.rightCol} layout="block">
           <Row>
             <Tabs value={tabIndex} onChange={handleTabChange} indicatorColor="secondary" textColor="secondary">
               <Tab label={confirmedLabel} />
               <Tab label={unconfirmedLabel} />
             </Tabs>
+            <Hairline color="#c8ced4" />
           </Row>
+          <Row>{tabIndex === 0 && <OwnersList owners={owners.map(owner => owner.address)} />}</Row>
         </Col>
       </Row>
     </Block>

src/routes/safe/components/TransactionsNew/TxsTable/style.js

@@ -16,6 +16,9 @@ export const styles = () => ({
   },
   extendedTxContainer: {
     padding: 0,
+    '&:last-child': {
+      padding: 0,
+    },
     backgroundColor: '#fffaf4',
   },
 })