diff --git a/src/components/forms/AddressInput/index.jsx b/src/components/forms/AddressInput/index.jsx index fe017123..fe8398c5 100644 --- a/src/components/forms/AddressInput/index.jsx +++ b/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} diff --git a/src/components/forms/validator.js b/src/components/forms/validator.js index 7c63f5ab..4ba68677 100644 --- a/src/components/forms/validator.js +++ b/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`) diff --git a/src/routes/open/components/SafeOwnersConfirmationsForm/index.jsx b/src/routes/open/components/SafeOwnersConfirmationsForm/index.jsx index bd36a6cf..3978e3f4 100644 --- a/src/routes/open/components/SafeOwnersConfirmationsForm/index.jsx +++ b/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) => { /> - { ), } } + fieldMutator={(val) => { + form.mutators.setValue(addressName, val) + }} type="text" - validate={getAddressValidators(otherAccounts, index)} + validators={[getAddressValidator(otherAccounts, index)]} placeholder="Owner Address*" text="Owner Address" /> diff --git a/src/routes/open/components/SafeOwnersConfirmationsForm/validators.js b/src/routes/open/components/SafeOwnersConfirmationsForm/validators.js index 97f877d7..e4697f0e 100644 --- a/src/routes/open/components/SafeOwnersConfirmationsForm/validators.js +++ b/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) } diff --git a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.jsx b/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.jsx index 9361bf91..0cdf09b7 100644 --- a/src/routes/safe/components/Settings/ManageOwners/AddOwnerModal/screens/OwnerForm/index.jsx +++ b/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, } -const formMutators = { - setOwnerAddress: (args, state, utils) => { - utils.changeValue(state, 'ownerAddress', () => args[0]) - }, -} - const OwnerForm = ({ classes, onClose, onSubmit, owners, }: Props) => { diff --git a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx b/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx index 623d856c..4892a679 100644 --- a/src/routes/safe/components/Settings/ManageOwners/ReplaceOwnerModal/screens/OwnerForm/index.jsx +++ b/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 = ({ - - {() => ( - - - - - Review the owner you want to replace from the active Safe. Then specify the new owner you want to - replace it with: - - - - Current owner - - - - - - - - - {ownerName} - - - - {ownerAddress} + + {(...args) => { + const mutators = args[3] + + return ( + + + + + Review the owner you want to replace from the active Safe. Then specify the new owner you want to + replace it with: + + + + Current owner + + + + + + + + + {ownerName} - - - + + + {ownerAddress} + + + + + - - + + + + New owner + + + + + + + + + + + + + + + + - - New owner - - - - - - - - - - - - - - - - - - - )} + + ) + }} )