Add manage owners list
This commit is contained in:
parent
f2ef593a06
commit
be319aa76c
|
@ -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}
|
||||
/>
|
||||
|
|
|
@ -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)
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
})
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue