Create edit owner modal window
This commit is contained in:
parent
ccee257a39
commit
cf8427b89a
|
@ -0,0 +1,140 @@
|
|||
// @flow
|
||||
import React from 'react'
|
||||
import { connect } from 'react-redux'
|
||||
import { List } from 'immutable'
|
||||
import { withStyles } from '@material-ui/core/styles'
|
||||
import OpenInNew from '@material-ui/icons/OpenInNew'
|
||||
import Row from '~/components/layout/Row'
|
||||
import Col from '~/components/layout/Col'
|
||||
import Link from '~/components/layout/Link'
|
||||
import Block from '~/components/layout/Block'
|
||||
import GnoForm from '~/components/forms/GnoForm'
|
||||
import Button from '~/components/layout/Button'
|
||||
import Hairline from '~/components/layout/Hairline'
|
||||
import Field from '~/components/forms/Field'
|
||||
import TextField from '~/components/forms/TextField'
|
||||
import Paragraph from '~/components/layout/Paragraph'
|
||||
import Identicon from '~/components/Identicon'
|
||||
import IconButton from '@material-ui/core/IconButton'
|
||||
import Close from '@material-ui/icons/Close'
|
||||
import { getEtherScanLink } from '~/logic/wallets/getWeb3'
|
||||
import type { Owner } from '~/routes/safe/store/models/owner'
|
||||
import { makeOwner } from '~/routes/safe/store/models/owner'
|
||||
import {
|
||||
composeValidators,
|
||||
required,
|
||||
minMaxLength,
|
||||
} from '~/components/forms/validator'
|
||||
import Modal from '~/components/Modal'
|
||||
import { setOwners } from '~/logic/safe/utils'
|
||||
import { styles } from './style'
|
||||
import { secondary } from '~/theme/variables'
|
||||
|
||||
const openIconStyle = {
|
||||
height: '16px',
|
||||
color: secondary,
|
||||
}
|
||||
|
||||
const stylesModal = () => ({
|
||||
smallerModalWindow: {
|
||||
height: 'auto',
|
||||
position: 'static',
|
||||
},
|
||||
})
|
||||
|
||||
type Props = {
|
||||
onClose: () => void,
|
||||
classes: Object,
|
||||
isOpen: boolean,
|
||||
safeAddress: string,
|
||||
ownerAddress: string,
|
||||
owners: List<Owner>,
|
||||
network: string,
|
||||
}
|
||||
|
||||
const EditOwnerComponent = ({
|
||||
onClose,
|
||||
isOpen,
|
||||
classes,
|
||||
safeAddress,
|
||||
ownerAddress,
|
||||
owners,
|
||||
network,
|
||||
}: Props) => {
|
||||
const handleSubmit = (values) => {
|
||||
const updatedOwners = owners.filter(o => o.address !== ownerAddress).push(
|
||||
makeOwner({ name: values.ownerName, address: ownerAddress }),
|
||||
)
|
||||
setOwners(safeAddress, updatedOwners)
|
||||
onClose()
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title="Edit owner from Safe"
|
||||
description="Edit owner from Safe"
|
||||
handleClose={onClose}
|
||||
open={isOpen}
|
||||
paperClassName={stylesModal.smallerModalWindow}
|
||||
>
|
||||
<Row align="center" grow className={classes.heading}>
|
||||
<Paragraph className={classes.manage} noMargin weight="bolder">
|
||||
Edit owner name
|
||||
</Paragraph>
|
||||
<IconButton onClick={onClose} disableRipple>
|
||||
<Close className={classes.close} />
|
||||
</IconButton>
|
||||
</Row>
|
||||
<Hairline />
|
||||
<GnoForm onSubmit={handleSubmit}>
|
||||
{(...args) => (
|
||||
<React.Fragment>
|
||||
<Block className={classes.container}>
|
||||
<Row margin="md">
|
||||
<Field
|
||||
name="ownerName"
|
||||
component={TextField}
|
||||
type="text"
|
||||
validate={composeValidators(required, minMaxLength(1, 50))}
|
||||
placeholder="Owner name*"
|
||||
text="Owner name*"
|
||||
className={classes.addressInput}
|
||||
/>
|
||||
</Row>
|
||||
<Row>
|
||||
<Block align="center" className={classes.user}>
|
||||
<Identicon address={ownerAddress} diameter={32} />
|
||||
<Paragraph style={{ marginLeft: 10 }} size="md" color="disabled" noMargin>
|
||||
{ownerAddress}
|
||||
</Paragraph>
|
||||
<Link className={classes.open} to={getEtherScanLink(ownerAddress, network)} target="_blank">
|
||||
<OpenInNew style={openIconStyle} />
|
||||
</Link>
|
||||
</Block>
|
||||
</Row>
|
||||
</Block>
|
||||
<Hairline />
|
||||
<Row align="center" className={classes.buttonRow}>
|
||||
<Button className={classes.button} minWidth={140} onClick={onClose}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
type="submit"
|
||||
className={classes.button}
|
||||
variant="contained"
|
||||
minWidth={140}
|
||||
color="primary"
|
||||
>
|
||||
Save
|
||||
</Button>
|
||||
</Row>
|
||||
</React.Fragment>
|
||||
)}
|
||||
</GnoForm>
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
|
||||
const EditOwnerModal = withStyles(styles)(EditOwnerComponent)
|
||||
|
||||
export default EditOwnerModal
|
|
@ -0,0 +1,39 @@
|
|||
// @flow
|
||||
import {
|
||||
lg, md, sm, error, background,
|
||||
} from '~/theme/variables'
|
||||
|
||||
export const styles = (theme: Object) => ({
|
||||
heading: {
|
||||
padding: `${sm} ${lg}`,
|
||||
justifyContent: 'space-between',
|
||||
maxHeight: '75px',
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
manage: {
|
||||
fontSize: '24px',
|
||||
},
|
||||
container: {
|
||||
padding: `${md} ${lg}`,
|
||||
paddingBottom: '40px',
|
||||
},
|
||||
close: {
|
||||
height: '35px',
|
||||
width: '35px',
|
||||
},
|
||||
buttonRow: {
|
||||
height: '84px',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
buttonEdit: {
|
||||
color: '#fff',
|
||||
backgroundColor: error,
|
||||
},
|
||||
open: {
|
||||
paddingLeft: sm,
|
||||
width: 'auto',
|
||||
'&:hover': {
|
||||
cursor: 'pointer',
|
||||
},
|
||||
},
|
||||
})
|
|
@ -22,6 +22,7 @@ import Button from '~/components/layout/Button'
|
|||
import AddOwnerModal from './AddOwnerModal'
|
||||
import RemoveOwnerModal from './RemoveOwnerModal'
|
||||
import ReplaceOwnerModal from './ReplaceOwnerModal'
|
||||
import EditOwnerModal from './EditOwnerModal'
|
||||
import OwnerAddressTableCell from './OwnerAddressTableCell'
|
||||
import type { Owner } from '~/routes/safe/store/models/owner'
|
||||
import {
|
||||
|
@ -62,6 +63,7 @@ class ManageOwners extends React.Component<Props, State> {
|
|||
showAddOwner: false,
|
||||
showRemoveOwner: false,
|
||||
showReplaceOwner: false,
|
||||
showEditOwner: false,
|
||||
}
|
||||
|
||||
onShow = (action: Action, row?: Object) => () => {
|
||||
|
@ -95,6 +97,7 @@ class ManageOwners extends React.Component<Props, State> {
|
|||
showAddOwner,
|
||||
showRemoveOwner,
|
||||
showReplaceOwner,
|
||||
showEditOwner,
|
||||
selectedOwnerName,
|
||||
selectedOwnerAddress,
|
||||
} = this.state
|
||||
|
@ -185,6 +188,14 @@ class ManageOwners extends React.Component<Props, State> {
|
|||
userAddress={userAddress}
|
||||
createTransaction={createTransaction}
|
||||
/>
|
||||
<EditOwnerModal
|
||||
onClose={this.onHide('EditOwner')}
|
||||
isOpen={showEditOwner}
|
||||
safeAddress={safeAddress}
|
||||
ownerAddress={selectedOwnerAddress}
|
||||
owners={owners}
|
||||
network={network}
|
||||
/>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue