add AddressInput with ENS support to create safe form

src/components/forms/AddressInput/index.jsx

@@ -19,6 +19,7 @@ type Props = {
   fieldMutator: Function,
   testId?: string,
   validators?: Function[],
+  inputAdornment?: React.Element,
 }
 
 const isValidEnsName = name => /^([\w-]+\.)+(eth|test)$/.test(name)
@@ -35,6 +36,7 @@ const AddressInput = ({
   placeholder = 'Recipient*',
   fieldMutator,
   testId,
+  inputAdornment,
   validators = [],
 }: Props): React.Element<*> => (
   <>
@@ -47,6 +49,7 @@ const AddressInput = ({
         ifElseValidator(isValidEnsName, ensResolverHasAddress, mustBeEthereumAddress),
         ...validators,
       )}
+      inputAdornment={inputAdornment}
       placeholder={placeholder}
       text={text}
       className={className}

src/components/forms/validator.js

@@ -61,7 +61,7 @@ export const ok = () => undefined
 export const mustBeEthereumAddress = simpleMemoize((address: Field) => {
   const isAddress: boolean = getWeb3().utils.isAddress(address)
 
-  return isAddress ? undefined : 'Address should be a valid Ethereum address'
+  return isAddress ? undefined : 'Address should be a valid Ethereum address or ENS domain'
 })
 
 export const minMaxLength = (minLen: string | number, maxLen: string | number) => (value: string) => (value.length >= +minLen && value.length <= +maxLen ? undefined : `Should be ${minLen} to ${maxLen} symbols`)

src/routes/open/components/SafeOwnersConfirmationsForm/index.jsx

@@ -7,6 +7,7 @@ import MenuItem from '@material-ui/core/MenuItem'
 import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
 import SelectField from '~/components/forms/SelectField'
+import AddressInput from '~/components/forms/AddressInput'
 import {
   required, composeValidators, noErrorsOn, mustBeInteger, minValue,
 } from '~/components/forms/validator'
@@ -28,7 +29,7 @@ import Hairline from '~/components/layout/Hairline'
 import trash from '~/assets/icons/trash.svg'
 import QRIcon from '~/assets/icons/qrcode.svg'
 import ScanQRModal from './ScanQRModal'
-import { getAddressValidators } from './validators'
+import { getAddressValidator } from './validators'
 import { styles } from './style'
 
 type Props = {
@@ -135,7 +136,7 @@ const SafeOwners = (props: Props) => {
                 />
               </Col>
               <Col xs={6}>
-                <Field
+                <AddressInput
                   name={addressName}
                   component={TextField}
                   inputAdornment={
@@ -147,8 +148,11 @@ const SafeOwners = (props: Props) => {
                       ),
                     }
                   }
+                  fieldMutator={(val) => {
+                    form.mutators.setValue(addressName, val)
+                  }}
                   type="text"
-                  validate={getAddressValidators(otherAccounts, index)}
+                  validators={[getAddressValidator(otherAccounts, index)]}
                   placeholder="Owner Address*"
                   text="Owner Address"
                 />

src/routes/open/components/SafeOwnersConfirmationsForm/validators.js

@@ -1,17 +1,14 @@
 // @flow
 import {
-  required,
-  composeValidators,
   uniqueAddress,
-  mustBeEthereumAddress,
 } from '~/components/forms/validator'
 
-export const getAddressValidators = (addresses: string[], position: number) => {
+export const getAddressValidator = (addresses: string[], position: number) => {
   // thanks Rich Harris
   // https://twitter.com/Rich_Harris/status/1125850391155965952
   const copy = addresses.slice()
   copy[position] = copy[copy.length - 1]
   copy.pop()
 
-  return composeValidators(required, mustBeEthereumAddress, uniqueAddress(copy))
+  return uniqueAddress(copy)
 }

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

@@ -18,7 +18,6 @@ import { type Owner } from '~/routes/safe/store/models/owner'
 import {
   composeValidators,
   required,
-  mustBeEthereumAddress,
   minMaxLength,
   uniqueAddress,
 } from '~/components/forms/validator'
@@ -28,6 +27,12 @@ export const ADD_OWNER_NAME_INPUT_TEST_ID = 'add-owner-name-input'
 export const ADD_OWNER_ADDRESS_INPUT_TEST_ID = 'add-owner-address-testid'
 export const ADD_OWNER_NEXT_BTN_TEST_ID = 'add-owner-next-btn'
 
+const formMutators = {
+  setOwnerAddress: (args, state, utils) => {
+    utils.changeValue(state, 'ownerAddress', () => args[0])
+  },
+}
+
 type Props = {
   onClose: () => void,
   classes: Object,
@@ -35,12 +40,6 @@ type Props = {
   owners: List<Owner>,
 }
 
-const formMutators = {
-  setOwnerAddress: (args, state, utils) => {
-    utils.changeValue(state, 'ownerAddress', () => args[0])
-  },
-}
-
 const OwnerForm = ({
   classes, onClose, onSubmit, owners,
 }: Props) => {

src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx

@@ -9,6 +9,7 @@ import OpenInNew from '@material-ui/icons/OpenInNew'
 import Paragraph from '~/components/layout/Paragraph'
 import Row from '~/components/layout/Row'
 import GnoForm from '~/components/forms/GnoForm'
+import AddressInput from '~/components/forms/AddressInput'
 import Col from '~/components/layout/Col'
 import Button from '~/components/layout/Button'
 import Block from '~/components/layout/Block'
@@ -22,7 +23,6 @@ import { type Owner } from '~/routes/safe/store/models/owner'
 import {
   composeValidators,
   required,
-  mustBeEthereumAddress,
   minMaxLength,
   uniqueAddress,
 } from '~/components/forms/validator'
@@ -38,6 +38,12 @@ const openIconStyle = {
   color: secondary,
 }
 
+const formMutators = {
+  setOwnerAddress: (args, state, utils) => {
+    utils.changeValue(state, 'ownerAddress', () => args[0])
+  },
+}
+
 type Props = {
   onClose: () => void,
   classes: Object,
@@ -68,89 +74,97 @@ const OwnerForm = ({
         </IconButton>
       </Row>
       <Hairline />
-      <GnoForm onSubmit={handleSubmit}>
+      <GnoForm onSubmit={handleSubmit} formMutators={formMutators}>
-        {() => (
+        {(...args) => {
-          <React.Fragment>
+          const mutators = args[3]
-            <Block className={classes.formContainer}>
+
-              <Row>
+          return (
-                <Paragraph>
+            <React.Fragment>
-                  Review the owner you want to replace from the active Safe. Then specify the new owner you want to
+              <Block className={classes.formContainer}>
-                  replace it with:
+                <Row>
-                </Paragraph>
+                  <Paragraph>
-              </Row>
+                    Review the owner you want to replace from the active Safe. Then specify the new owner you want to
-              <Row>
+                    replace it with:
-                <Paragraph>Current owner</Paragraph>
+                  </Paragraph>
-              </Row>
+                </Row>
-              <Row className={classes.owner}>
+                <Row>
-                <Col xs={1} align="center">
+                  <Paragraph>Current owner</Paragraph>
-                  <Identicon address={ownerAddress} diameter={32} />
+                </Row>
-                </Col>
+                <Row className={classes.owner}>
-                <Col xs={7}>
+                  <Col xs={1} align="center">
-                  <Block className={classNames(classes.name, classes.userName)}>
+                    <Identicon address={ownerAddress} diameter={32} />
-                    <Paragraph size="lg" noMargin weight="bolder">
+                  </Col>
-                      {ownerName}
+                  <Col xs={7}>
-                    </Paragraph>
+                    <Block className={classNames(classes.name, classes.userName)}>
-                    <Block align="center" className={classes.user}>
+                      <Paragraph size="lg" noMargin weight="bolder">
-                      <Paragraph size="md" color="disabled" noMargin>
+                        {ownerName}
-                        {ownerAddress}
                       </Paragraph>
-                      <Link className={classes.open} to={getEtherScanLink('address', ownerAddress, network)} target="_blank">
+                      <Block align="center" className={classes.user}>
-                        <OpenInNew style={openIconStyle} />
+                        <Paragraph size="md" color="disabled" noMargin>
-                      </Link>
+                          {ownerAddress}
+                        </Paragraph>
+                        <Link
+                          className={classes.open}
+                          to={getEtherScanLink('address', ownerAddress, network)}
+                          target="_blank"
+                        >
+                          <OpenInNew style={openIconStyle} />
+                        </Link>
+                      </Block>
                     </Block>
-                  </Block>
+                  </Col>
-                </Col>
+                </Row>
+                <Row>
+                  <Paragraph>New owner</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={REPLACE_OWNER_NAME_INPUT_TEST_ID}
+                    />
+                  </Col>
+                </Row>
+                <Row margin="md">
+                  <Col xs={8}>
+                    <AddressInput
+                      name="ownerAddress"
+                      component={TextField}
+                      validators={[ownerDoesntExist]}
+                      placeholder="Owner address*"
+                      text="Owner address*"
+                      className={classes.addressInput}
+                      fieldMutator={mutators.setOwnerAddress}
+                      testId={REPLACE_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={REPLACE_OWNER_NEXT_BTN_TEST_ID}
+                >
+                  Next
+                </Button>
               </Row>
-              <Row>
+            </React.Fragment>
-                <Paragraph>New owner</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={REPLACE_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={REPLACE_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={REPLACE_OWNER_NEXT_BTN_TEST_ID}
-              >
-                Next
-              </Button>
-            </Row>
-          </React.Fragment>
-        )}
       </GnoForm>
     </React.Fragment>
   )