diff --git a/src/routes/safe/components/Layout.jsx b/src/routes/safe/components/Layout.jsx index 3df55380..572bc36f 100644 --- a/src/routes/safe/components/Layout.jsx +++ b/src/routes/safe/components/Layout.jsx @@ -90,7 +90,7 @@ class Layout extends React.Component { 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 { etherScanLink={etherScanLink} threshold={safe.threshold} owners={safe.owners} + network={network} + userAddress={userAddress} createTransaction={createTransaction} updateSafeName={updateSafeName} /> diff --git a/src/routes/safe/components/Settings/ManageOwners/index.jsx b/src/routes/safe/components/Settings/ManageOwners/index.jsx new file mode 100644 index 00000000..5cf27683 --- /dev/null +++ b/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, + network: string, + userAddress: string, + createTransaction: Function, +} + +type Action = 'AddOwner' + +class ManageOwners extends React.Component { + 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 ( + + + + Manage Safe Owners + + + NAME + ADDRESS + + + + {owners.map(owner => ( + + + + + {owner.get('name')} + + + + + + + + + + + + {owner.get('address')} + + + + + + + + ))} + + + + + + + + + + + ) + } +} + +export default withStyles(styles)(ManageOwners) diff --git a/src/routes/safe/components/Settings/ManageOwners/style.js b/src/routes/safe/components/Settings/ManageOwners/style.js new file mode 100644 index 00000000..1d674731 --- /dev/null +++ b/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', + }, + }, +}) diff --git a/src/routes/safe/components/Settings/index.jsx b/src/routes/safe/components/Settings/index.jsx index e2a18781..66991158 100644 --- a/src/routes/safe/components/Settings/index.jsx +++ b/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, threshold: number, + network: string, createTransaction: Function, + updateSafeName: Function, } type Action = 'RemoveSafe' @@ -60,8 +63,10 @@ class Settings extends React.Component { etherScanLink, safeAddress, safeName, - owners, threshold, + owners, + network, + userAddress, createTransaction, updateSafeName, } = this.props @@ -103,7 +108,7 @@ class Settings extends React.Component { className={cn(classes.menuOption, menuOptionIndex === 2 && classes.active)} onClick={this.handleChange(2)} > - Owners + Owners ({owners.size}) { updateSafeName={updateSafeName} /> )} - {granted && menuOptionIndex === 2 &&

To be done

} + {granted && menuOptionIndex === 2 && ( + + )} {granted && menuOptionIndex === 3 && (