Add manage owners list

src/routes/safe/components/Layout.jsx

@@ -90,7 +90,7 @@ class Layout extends React.Component<Props, State> {
 
   render() {
     const {
-      safe, provider, network, classes, granted, tokens, activeTokens, createTransaction, updateSafeName,
+      safe, provider, network, classes, granted, tokens, activeTokens, createTransaction, userAddress, updateSafeName,
     } = this.props
     const { tabIndex } = this.state
 
@@ -150,6 +150,8 @@ class Layout extends React.Component<Props, State> {
             etherScanLink={etherScanLink}
             threshold={safe.threshold}
             owners={safe.owners}
+            network={network}
+            userAddress={userAddress}
             createTransaction={createTransaction}
             updateSafeName={updateSafeName}
           />

src/routes/safe/components/Settings/ManageOwners/index.jsx

@@ -0,0 +1,139 @@
+// @flow
+import React from 'react'
+import classNames from 'classnames'
+import { withStyles } from '@material-ui/core/styles'
+import Identicon from '~/components/Identicon'
+import Block from '~/components/layout/Block'
+import Col from '~/components/layout/Col'
+import Field from '~/components/forms/Field'
+import {
+  composeValidators, required, minMaxLength,
+} from '~/components/forms/validator'
+import TextField from '~/components/forms/TextField'
+import Row from '~/components/layout/Row'
+import Paragraph from '~/components/layout/Paragraph'
+import Hairline from '~/components/layout/Hairline'
+import Button from '~/components/layout/Button'
+import AddOwnerModal from './AddOwnerModal'
+import { sm, boldFont } from '~/theme/variables'
+import { styles } from './style'
+
+const controlsStyle = {
+  backgroundColor: 'white',
+  padding: sm,
+}
+
+const addOwnerButtonStyle = {
+  marginRight: sm,
+  fontWeight: boldFont,
+}
+
+type Props = {
+  classes: Object,
+  safeAddress: string,
+  safeName: string,
+  owners: List<Owner>,
+  network: string,
+  userAddress: string,
+  createTransaction: Function,
+}
+
+type Action = 'AddOwner'
+
+class ManageOwners extends React.Component<Props, State> {
+  state = {
+    showAddOwner: false,
+  }
+
+  onShow = (action: Action) => () => {
+    this.setState(() => ({ [`show${action}`]: true }))
+  }
+
+  onHide = (action: Action) => () => {
+    this.setState(() => ({ [`show${action}`]: false }))
+  }
+
+  render() {
+    const {
+      classes,
+      safeAddress,
+      safeName,
+      owners,
+      threshold,
+      network,
+      userAddress,
+      createTransaction,
+    } = this.props
+    const { showAddOwner } = this.state
+
+    return (
+      <React.Fragment>
+        <Block className={classes.formContainer}>
+          <Paragraph noMargin className={classes.title} size="lg" weight="bolder">
+            Manage Safe Owners
+          </Paragraph>
+          <Row className={classes.header}>
+            <Col xs={3}>NAME</Col>
+            <Col xs={9}>ADDRESS</Col>
+          </Row>
+          <Hairline />
+          <Block>
+            {owners.map(owner => (
+              <React.Fragment key={owner.get('address')}>
+                <Row className={classes.owner}>
+                  <Col xs={3}>
+                    <Paragraph size="lg" noMargin>
+                      {owner.get('name')}
+                    </Paragraph>
+                  </Col>
+                  <Col xs={1} align="right">
+                    <Block className={classNames(classes.name, classes.userName)}>
+                      <Identicon address={owner.get('address')} diameter={32} />
+                    </Block>
+                  </Col>
+                  <Col xs={8}>
+                    <Block className={classNames(classes.name, classes.userName)}>
+                      <Block align="center" className={classes.user}>
+                        <Paragraph size="md" color="disabled" noMargin>
+                          {owner.get('address')}
+                        </Paragraph>
+                      </Block>
+                    </Block>
+                  </Col>
+                </Row>
+                <Hairline />
+              </React.Fragment>
+            ))}
+          </Block>
+        </Block>
+        <Hairline />
+        <Row style={controlsStyle} align="end" grow>
+          <Col end="xs">
+            <Button
+              style={addOwnerButtonStyle}
+              size="small"
+              variant="contained"
+              color="primary"
+              onClick={this.onShow('AddOwner')}
+            >
+              Add new owner
+            </Button>
+          </Col>
+        </Row>
+        <AddOwnerModal
+          onClose={this.onHide('AddOwner')}
+          isOpen={showAddOwner}
+          safeAddress={safeAddress}
+          safeName={safeName}
+          owners={owners}
+          threshold={threshold}
+          network={network}
+          userAddress={userAddress}
+          createTransaction={createTransaction}
+        />
+      </React.Fragment>
+    )
+  }
+}
+
+export default withStyles(styles)(ManageOwners)

src/routes/safe/components/Settings/ManageOwners/style.js

@@ -0,0 +1,56 @@
+// @flow
+import {
+  sm, xs, lg, border,
+} from '~/theme/variables'
+
+export const styles = () => ({
+  title: {
+    padding: `${lg} 20px`,
+    fontSize: '16px',
+  },
+  formContainer: {
+    minHeight: '369px',
+  },
+  header: {
+    padding: `${sm} ${lg}`,
+  },
+  owners: {
+    padding: lg,
+  },
+  name: {
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+  },
+  userName: {
+    whiteSpace: 'nowrap',
+  },
+  owner: {
+    padding: sm,
+    paddingLeft: lg,
+    alignItems: 'center',
+  },
+  user: {
+    justifyContent: 'left',
+  },
+  open: {
+    paddingLeft: sm,
+    width: 'auto',
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
+  container: {
+    marginTop: xs,
+    alignItems: 'center',
+  },
+  address: {
+    paddingLeft: '6px',
+  },
+  open: {
+    paddingLeft: sm,
+    width: 'auto',
+    '&:hover': {
+      cursor: 'pointer',
+    },
+  },
+})

src/routes/safe/components/Settings/index.jsx

@@ -13,6 +13,7 @@ import Hairline from '~/components/layout/Hairline'
 import type { Owner } from '~/routes/safe/store/models/owner'
 import ThresholdSettings from './ThresholdSettings'
 import UpdateSafeName from './UpdateSafeName'
+import ManageOwners from './ManageOwners'
 import actions, { type Actions } from './actions'
 import { styles } from './style'
 
@@ -29,7 +30,9 @@ type Props = Actions & {
   safeName: string,
   owners: List<Owner>,
   threshold: number,
+  network: string,
   createTransaction: Function,
+  updateSafeName: Function,
 }
 
 type Action = 'RemoveSafe'
@@ -60,8 +63,10 @@ class Settings extends React.Component<Props, State> {
       etherScanLink,
       safeAddress,
       safeName,
-      owners,
       threshold,
+      owners,
+      network,
+      userAddress,
       createTransaction,
       updateSafeName,
     } = this.props
@@ -103,7 +108,7 @@ class Settings extends React.Component<Props, State> {
                     className={cn(classes.menuOption, menuOptionIndex === 2 && classes.active)}
                     onClick={this.handleChange(2)}
                   >
-                    Owners
+                    Owners ({owners.size})
                   </Row>
                   <Hairline />
                   <Row
@@ -133,7 +138,17 @@ class Settings extends React.Component<Props, State> {
                   updateSafeName={updateSafeName}
                 />
               )}
-              {granted && menuOptionIndex === 2 && <p>To be done</p>}
+              {granted && menuOptionIndex === 2 && (
+                <ManageOwners
+                  owners={owners}
+                  threshold={threshold}
+                  safeAddress={safeAddress}
+                  safeName={safeName}
+                  network={network}
+                  createTransaction={createTransaction}
+                  userAddress={userAddress}
+                />
+              )}
               {granted && menuOptionIndex === 3 && (
                 <ThresholdSettings
                   owners={owners}