From ba5b6cf4889f079dd853602d004c8e2811ae8032 Mon Sep 17 00:00:00 2001
From: Mikhail Mikheev <mdoublemmm@gmail.com>
Date: Mon, 1 Jul 2019 16:43:20 +0400
Subject: [PATCH] ownerslist wip

---
 .../Tokens/screens/TokenList/index.jsx        | 10 ++---
 .../TxsTable/ExpandedTx/OwnersList/index.jsx  | 39 +++++++++++++++++++
 .../TxsTable/ExpandedTx/index.jsx             |  7 +++-
 .../TransactionsNew/TxsTable/style.js         |  3 ++
 4 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/index.jsx

diff --git a/src/routes/safe/components/Balances/Tokens/screens/TokenList/index.jsx b/src/routes/safe/components/Balances/Tokens/screens/TokenList/index.jsx
index 15e552c3..a9d0ae19 100644
--- a/src/routes/safe/components/Balances/Tokens/screens/TokenList/index.jsx
+++ b/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'
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/OwnersList/index.jsx
new file mode 100644
index 00000000..bc60dad5
--- /dev/null
+++ b/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
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx b/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx
index 45215dea..c9960fb6 100644
--- a/src/routes/safe/components/TransactionsNew/TxsTable/ExpandedTx/index.jsx
+++ b/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>
diff --git a/src/routes/safe/components/TransactionsNew/TxsTable/style.js b/src/routes/safe/components/TransactionsNew/TxsTable/style.js
index c5d5ddbc..f7106318 100644
--- a/src/routes/safe/components/TransactionsNew/TxsTable/style.js
+++ b/src/routes/safe/components/TransactionsNew/TxsTable/style.js
@@ -16,6 +16,9 @@ export const styles = () => ({
   },
   extendedTxContainer: {
     padding: 0,
+    '&:last-child': {
+      padding: 0,
+    },
     backgroundColor: '#fffaf4',
   },
 })