Add manage owners list

This commit is contained in:
Germán Martínez 2019-05-23 10:48:25 +02:00
parent f2ef593a06
commit be319aa76c
4 changed files with 216 additions and 4 deletions

View File

@ -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}
/>

View File

@ -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)

View File

@ -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',
},
},
})

View File

@ -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}