form validation wip

package.json

@@ -80,7 +80,6 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-final-form": "^4.1.0",
-    "react-final-form-listeners": "^1.0.2",
     "react-hot-loader": "4.8.4",
     "react-infinite-scroll-component": "^4.5.2",
     "react-redux": "7.0.2",

src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx

@@ -1,7 +1,6 @@
 // @flow
 import React, { useState } from 'react'
 import { List } from 'immutable'
-import { OnChange } from 'react-final-form-listeners'
 import { FormSpy } from 'react-final-form'
 import { withStyles } from '@material-ui/core/styles'
 import Block from '~/components/layout/Block'
@@ -17,8 +16,9 @@ import TextField from '~/components/forms/TextField'
 import Hairline from '~/components/layout/Hairline'
 import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator'
 import { type TokenProps } from '~/logic/tokens/store/model/token'
+import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
 import TokenPlaceholder from '~/routes/safe/components/Balances/assets/token_placeholder.svg'
-import { addressIsTokenContract, INITIAL_FORM_STATE } from './validators'
+import { addressIsTokenContract } from './validators'
 import { styles } from './style'
 
 type Props = {
@@ -31,19 +31,26 @@ type Props = {
   onClose: Function,
 }
 
+const INITIAL_FORM_STATE = {
+  address: '',
+  decimals: '',
+  symbol: '',
+  logoUri: '',
+}
+
 const AddCustomToken = (props: Props) => {
   const {
     classes, setActiveScreen, onClose, addToken, updateActiveTokens, safeAddress, activeTokens,
   } = props
-  const [formValue, setFormValue] = useState(INITIAL_FORM_STATE)
+  const [formValues, setFormValues] = useState(INITIAL_FORM_STATE)
 
-  const handleSubmit = (formValues) => {
+  const handleSubmit = (values) => {
     const activeTokensAddresses = activeTokens.map(({ address }) => address)
     const token = {
-      address: formValues.address,
+      address: values.address,
-      decimals: formValues.decimals,
+      decimals: values.decimals,
-      symbol: formValues.symbol,
+      symbol: values.symbol,
-      name: formValues.symbol,
+      name: values.symbol,
     }
 
     addToken(token)
@@ -51,13 +58,22 @@ const AddCustomToken = (props: Props) => {
     onClose()
   }
 
+  const populateFormValuesFromAddress = (tokenAddress) => {}
+
+  const formSpyOnChangeHandler = (state) => {
+    const { errors, validating, values } = state
+    if (!errors.address && !validating) {
+      populateFormValuesFromAddress(values.address)
+    }
+  }
+
   const goBackToTokenList = () => {
     setActiveScreen('tokenList')
   }
 
   return (
     <React.Fragment>
-      <GnoForm onSubmit={handleSubmit} initialValues={formValue}>
+      <GnoForm onSubmit={handleSubmit} initialValues={formValues}>
         {() => (
           <React.Fragment>
             <Block className={classes.formContainer}>
@@ -68,22 +84,15 @@ const AddCustomToken = (props: Props) => {
                 name="address"
                 component={TextField}
                 type="text"
-                validate={composeValidators(
+                validate={composeValidators(required, mustBeEthereumAddress, addressIsTokenContract)}
-                  required,
-                  mustBeEthereumAddress,
-                  addressIsTokenContract,
-                )}
                 placeholder="Token contract address*"
                 text="Token contract address*"
                 className={classes.addressInput}
               />
-              <OnChange name="address">
+              <FormSpy
-                {(value) => {
+                subscription={{ values: true, errors: true, validating: true }}
-                  if (value === '') {
+                onChange={formSpyOnChangeHandler}
-                    setFormValue(INITIAL_FORM_STATE)
+              />
-                  }
-                }}
-              </OnChange>
               <Row>
                 <Col xs={6} layout="column">
                   <Field
@@ -113,7 +122,12 @@ const AddCustomToken = (props: Props) => {
                 </Col>
                 <Col xs={6} layout="column" align="center">
                   <Paragraph className={classes.tokenImageHeading}>Token Image</Paragraph>
-                  <Img src={TokenPlaceholder} alt="Token image" height={100} />
+                  <Img
+                    src={formValues.logoUri || TokenPlaceholder}
+                    onError={setImageToPlaceholder}
+                    alt="Token image"
+                    height={100}
+                  />
                 </Col>
               </Row>
             </Block>

src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/validators.js

@@ -1,13 +1,6 @@
 // @flow
 import { getWeb3 } from '~/logic/wallets/getWeb3'
 
-export const INITIAL_FORM_STATE = {
-  address: '',
-  decimals: '',
-  symbol: '',
-  logoUri: '',
-}
-
 export const simpleMemoize = (fn: Function) => {
   let lastArg
   let lastResult