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,8 +74,11 @@ const OwnerForm = ({
         </IconButton>
       </Row>
       <Hairline />
-      <GnoForm onSubmit={handleSubmit}>
-        {() => (
+      <GnoForm onSubmit={handleSubmit} formMutators={formMutators}>
+        {(...args) => {
+          const mutators = args[3]
+
+          return (
             <React.Fragment>
               <Block className={classes.formContainer}>
                 <Row>
@@ -94,7 +103,11 @@ const OwnerForm = ({
                         <Paragraph size="md" color="disabled" noMargin>
                           {ownerAddress}
                         </Paragraph>
-                      <Link className={classes.open} to={getEtherScanLink('address', ownerAddress, network)} target="_blank">
+                        <Link
+                          className={classes.open}
+                          to={getEtherScanLink('address', ownerAddress, network)}
+                          target="_blank"
+                        >
                           <OpenInNew style={openIconStyle} />
                         </Link>
                       </Block>
@@ -120,14 +133,14 @@ const OwnerForm = ({
                 </Row>
                 <Row margin="md">
                   <Col xs={8}>
-                  <Field
+                    <AddressInput
                       name="ownerAddress"
                       component={TextField}
-                    type="text"
-                    validate={composeValidators(required, mustBeEthereumAddress, ownerDoesntExist)}
+                      validators={[ownerDoesntExist]}
                       placeholder="Owner address*"
                       text="Owner address*"
                       className={classes.addressInput}
+                      fieldMutator={mutators.setOwnerAddress}
                       testId={REPLACE_OWNER_ADDRESS_INPUT_TEST_ID}
                     />
                   </Col>
@@ -150,7 +163,8 @@ const OwnerForm = ({
                 </Button>
               </Row>
             </React.Fragment>
-        )}
+          )
+        }}
       </GnoForm>
     </React.Fragment>
   )