WA-234 Adding RemoveComponent into Safe dashboard

This commit is contained in:
apanizo 2018-06-11 17:28:43 +02:00
parent 67e170a847
commit a213007068
2 changed files with 36 additions and 19 deletions

View File

@ -29,13 +29,14 @@ type Props = Open & WithStyles & {
owners: List<OwnerProps>,
userAddress: string,
onAddOwner: () => void,
onRemoveOwner: (name: string, addres: string) => void,
}
export const ADD_OWNER_BUTTON_TEXT = 'Add'
export const REMOVE_OWNER_BUTTON_TEXT = 'Delete'
const Owners = openHoc(({
open, toggle, owners, classes, onAddOwner, userAddress,
open, toggle, owners, classes, onAddOwner, userAddress, onRemoveOwner,
}: Props) => (
<React.Fragment>
<ListItem onClick={toggle}>
@ -56,23 +57,27 @@ const Owners = openHoc(({
</ListItem>
<Collapse in={open} timeout="auto" unmountOnExit>
<List component="div" disablePadding>
{owners.map(owner => (
<ListItem key={owner.address} className={classes.nested}>
<ListItemIcon>
<Person />
</ListItemIcon>
<ListItemText
cut
primary={owner.name}
secondary={owner.address}
/>
{ !sameAddress(userAddress, owner.address) &&
<IconButton aria-label="Delete">
<Delete />
</IconButton>
}
</ListItem>
))}
{owners.map((owner) => {
const onRemoveIconClick = () => onRemoveOwner(owner.name, owner.address)
return (
<ListItem key={owner.address} className={classes.nested}>
<ListItemIcon>
<Person />
</ListItemIcon>
<ListItemText
cut
primary={owner.name}
secondary={owner.address}
/>
{ !sameAddress(userAddress, owner.address) &&
<IconButton aria-label="Delete" onClick={onRemoveIconClick}>
<Delete />
</IconButton>
}
</ListItem>
)
})}
</List>
</Collapse>
</React.Fragment>

View File

@ -14,6 +14,7 @@ import Transactions from '~/routes/safe/component/Transactions'
import AddTransaction from '~/routes/safe/component/AddTransaction'
import Threshold from '~/routes/safe/component/Threshold'
import AddOwner from '~/routes/safe/component/AddOwner'
import RemoveOwner from '~/routes/safe/component/RemoveOwner'
import Address from './Address'
import Balance from './Balance'
@ -74,6 +75,12 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
this.setState({ component: <AddOwner threshold={safe.get('threshold')} safe={safe} /> })
}
onRemoveOwner = (name: string, address: string) => {
const { safe } = this.props
this.setState({ component: <RemoveOwner threshold={safe.get('threshold')} safe={safe} name={name} userToRemove={address} /> })
}
render() {
const { safe, balance, userAddress } = this.props
const { component } = this.state
@ -83,7 +90,12 @@ class GnoSafe extends React.PureComponent<SafeProps, State> {
<Col sm={12} top="xs" md={5} margin="xl" overflow>
<List style={listStyle}>
<Balance balance={balance} />
<Owners owners={safe.owners} onAddOwner={this.onAddOwner} userAddress={userAddress} />
<Owners
owners={safe.owners}
onAddOwner={this.onAddOwner}
userAddress={userAddress}
onRemoveOwner={this.onRemoveOwner}
/>
<Confirmations confirmations={safe.get('threshold')} onEditThreshold={this.onEditThreshold} />
<Address address={safe.get('address')} />
<DailyLimit balance={balance} dailyLimit={safe.get('dailyLimit')} onWithdrawn={this.onWithdrawn} />