status-im
/
safe-react
mirror of https://github.com/status-im/safe-react.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add AddressInput with ENS support to AddOwner

This commit is contained in:
Mikhail Mikheev 2019-07-26 18:38:44 +04:00
parent e5061a5731
commit 7d936b1f80
1 changed files with 63 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

116
src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.jsx
View File

@ -6,6 +6,7 @@ import Close from '@material-ui/icons/Close'
import IconButton from '@material-ui/core/IconButton'
import Paragraph from '~/components/layout/Paragraph'
import Row from '~/components/layout/Row'
import AddressInput from '~/components/forms/AddressInput'
import GnoForm from '~/components/forms/GnoForm'
import Col from '~/components/layout/Col'
import Button from '~/components/layout/Button'
@ -34,6 +35,12 @@ type Props = {
owners: List<Owner>,
}
const formMutators = {
setOwnerAddress: (args, state, utils) => {
utils.changeValue(state, 'ownerAddress', () => args[0])
},
}
const OwnerForm = ({
classes, onClose, onSubmit, owners,
}: Props) => {
@ -54,60 +61,63 @@ const OwnerForm = ({
</IconButton>
</Row>
<Hairline />
<GnoForm onSubmit={handleSubmit}>
{() => (
<React.Fragment>
<Block className={classes.formContainer}>
<Row margin="md">
<Paragraph>Add a new owner to the active Safe</Paragraph>
<GnoForm onSubmit={handleSubmit} formMutators={formMutators}>
{(...args) => {
const mutators = args[3]
return (
<React.Fragment>
<Block className={classes.formContainer}>
<Row margin="md">
<Paragraph>Add a new owner to the active Safe</Paragraph>
</Row>
<Row margin="md">
<Col xs={8}>
<Field
name="ownerName"
component={TextField}
type="text"
validate={composeValidators(required, minMaxLength(1, 50))}
placeholder="Owner name*"
text="Owner name*"
className={classes.addressInput}
testId={ADD_OWNER_NAME_INPUT_TEST_ID}
/>
</Col>
</Row>
<Row margin="md">
<Col xs={8}>
<AddressInput
name="ownerAddress"
// validate={composeValidators(required, mustBeEthereumAddress, ownerDoesntExist)}
placeholder="Owner address*"
text="Owner address*"
className={classes.addressInput}
fieldMutator={mutators.setOwnerAddress}
testId={ADD_OWNER_ADDRESS_INPUT_TEST_ID}
/>
</Col>
</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"
testId={ADD_OWNER_NEXT_BTN_TEST_ID}
>
Next
</Button>
</Row>
<Row margin="md">
<Col xs={8}>
<Field
name="ownerName"
component={TextField}
type="text"
validate={composeValidators(required, minMaxLength(1, 50))}
placeholder="Owner name*"
text="Owner name*"
className={classes.addressInput}
testId={ADD_OWNER_NAME_INPUT_TEST_ID}
/>
</Col>
</Row>
<Row margin="md">
<Col xs={8}>
<Field
name="ownerAddress"
component={TextField}
type="text"
validate={composeValidators(required, mustBeEthereumAddress, ownerDoesntExist)}
placeholder="Owner address*"
text="Owner address*"
className={classes.addressInput}
testId={ADD_OWNER_ADDRESS_INPUT_TEST_ID}
/>
</Col>
</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"
testId={ADD_OWNER_NEXT_BTN_TEST_ID}
>
Next
</Button>
</Row>
</React.Fragment>
)}
</React.Fragment>
)
}}
</GnoForm>
</React.Fragment>
)