check token in relay and update the form state if found

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

@@ -35,26 +35,9 @@ class Tokens extends React.Component<Props, State> {
     activeScreen,
   })
 
-  onTokenAdd = (formValues) => {
-    const {
-      addToken, updateActiveTokens, safeAddress, activeTokens,
-    } = this.props
-
-    const activeTokensAddresses = List(activeTokens.map(({ address }) => address))
-    const token = {
-      address: formValues.tokenAddress,
-      decimals: formValues.tokenDecimals,
-      symbol: formValues.tokenSymbol,
-      name: formValues.tokenSymbol,
-    }
-
-    addToken(token)
-    updateActiveTokens(safeAddress, activeTokensAddresses.push(token.address))
-  }
-
   render() {
     const {
-      onClose, classes, tokens, activeTokens, fetchTokens, updateActiveTokens, safeAddress,
+      onClose, classes, tokens, activeTokens, fetchTokens, updateActiveTokens, safeAddress, addToken,
     } = this.props
     const { activeScreen } = this.state
 
@@ -80,7 +63,14 @@ class Tokens extends React.Component<Props, State> {
           />
         )}
         {activeScreen === 'addCustomToken' && (
-          <AddCustomToken setActiveScreen={this.setActiveScreen} onTokenAdd={this.onTokenAdd} onClose={onClose} />
+          <AddCustomToken
+            setActiveScreen={this.setActiveScreen}
+            onClose={onClose}
+            addToken={addToken}
+            safeAddress={safeAddress}
+            activeTokens={activeTokens}
+            updateActiveTokens={updateActiveTokens}
+          />
         )}
       </React.Fragment>
     )

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

@@ -1,5 +1,6 @@
 // @flow
-import React from 'react'
+import React, { useState } from 'react'
+import { List } from 'immutable'
 import { withStyles } from '@material-ui/core/styles'
 import Block from '~/components/layout/Block'
 import Paragraph from '~/components/layout/Paragraph'
@@ -15,32 +16,48 @@ import Hairline from '~/components/layout/Hairline'
 import {
   composeValidators, required, mustBeEthereumAddress, mustBeInteger,
 } from '~/components/forms/validator'
+import { type TokenProps } from '~/logic/tokens/store/model/token'
 import TokenPlaceholder from '~/routes/safe/components/Balances/assets/token_placeholder.svg'
+import { checkTokenExistence, INITIAL_FORM_STATE } from './validators'
 import { styles } from './style'
 
 type Props = {
   classes: Object,
-  onTokenAdd: Function,
+  addToken: Function,
+  updateActiveTokens: Function,
+  safeAddress: string,
+  activeTokens: List<TokenProps>,
   setActiveScreen: Function,
   onClose: Function,
 }
 
 const AddCustomToken = (props: Props) => {
   const {
-    classes, setActiveScreen, onTokenAdd, onClose,
+    classes, setActiveScreen, onClose, addToken, updateActiveTokens, safeAddress, activeTokens,
   } = props
+  const [formValue, setFormValue] = useState(INITIAL_FORM_STATE)
+
+  const handleSubmit = (formValues) => {
+    const activeTokensAddresses = activeTokens.map(({ address }) => address)
+    const token = {
+      address: formValues.address,
+      decimals: formValues.decimals,
+      symbol: formValues.symbol,
+      name: formValues.symbol,
+    }
+
+    addToken(token)
+    updateActiveTokens(safeAddress, activeTokensAddresses.push(token.address))
+    onClose()
+  }
 
   const goBackToTokenList = () => {
     setActiveScreen('tokenList')
   }
-  const handleSubmit = (values) => {
-    onTokenAdd(values)
-    onClose()
-  }
 
   return (
     <React.Fragment>
-      <GnoForm onSubmit={handleSubmit}>
+      <GnoForm onSubmit={handleSubmit} initialValues={formValue}>
         {() => (
           <React.Fragment>
             <Block className={classes.formContainer}>
@@ -48,10 +65,10 @@ const AddCustomToken = (props: Props) => {
                 Add custom token
               </Paragraph>
               <Field
-                name="tokenAddress"
+                name="address"
                 component={TextField}
                 type="text"
-                validate={composeValidators(required, mustBeEthereumAddress)}
+                validate={composeValidators(required, mustBeEthereumAddress, checkTokenExistence(setFormValue))}
                 placeholder="Token contract address*"
                 text="Token contract address*"
                 className={classes.addressInput}
@@ -59,7 +76,7 @@ const AddCustomToken = (props: Props) => {
               <Row>
                 <Col xs={6} layout="column">
                   <Field
-                    name="tokenSymbol"
+                    name="symbol"
                     component={TextField}
                     type="text"
                     validate={required}
@@ -68,8 +85,9 @@ const AddCustomToken = (props: Props) => {
                     className={classes.addressInput}
                   />
                   <Field
-                    name="tokenDecimals"
+                    name="decimals"
                     component={TextField}
+                    disabled
                     type="text"
                     validate={composeValidators(required, mustBeInteger)}
                     placeholder="Token decimals*"

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

@@ -0,0 +1,45 @@
+// @flow
+import { fetchToken } from '~/logic/tokens/api'
+
+export const INITIAL_FORM_STATE = {
+  address: '',
+  decimals: '',
+  symbol: '',
+  logoUri: '',
+}
+
+export const simpleMemoize = (fn: Function) => {
+  let lastArg
+  let lastResult
+  return (arg: any) => {
+    if (arg !== lastArg) {
+      lastArg = arg
+      lastResult = fn(arg)
+    }
+    return lastResult
+  }
+}
+
+export const checkTokenExistence = (updateForm: ?Function) => simpleMemoize(async (tokenAddress: string) => {
+  if (!tokenAddress && updateForm) {
+    updateForm(INITIAL_FORM_STATE)
+  }
+
+  const relayToken = await fetchToken(tokenAddress)
+
+  if (!relayToken.data.count) {
+    return "Couldn't find the token"
+  }
+
+  if (updateForm) {
+    const {
+      address, symbol, decimals, logoUri,
+    } = relayToken.data.results[0]
+    updateForm({
+      address,
+      symbol,
+      decimals: String(decimals),
+      logoUri,
+    })
+  }
+})