diff --git a/package.json b/package.json index cbbcd9bd..6abb539c 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "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", diff --git a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx index 6ea45555..72b93cf4 100644 --- a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx +++ b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx @@ -1,6 +1,7 @@ // @flow import React, { useState } from 'react' import { List } from 'immutable' +import { OnChange } from 'react-final-form-listeners' import { withStyles } from '@material-ui/core/styles' import Block from '~/components/layout/Block' import Paragraph from '~/components/layout/Paragraph' @@ -13,12 +14,10 @@ import Checkbox from '~/components/forms/Checkbox' import GnoForm from '~/components/forms/GnoForm' import TextField from '~/components/forms/TextField' import Hairline from '~/components/layout/Hairline' -import { - composeValidators, required, mustBeEthereumAddress, mustBeInteger, -} from '~/components/forms/validator' +import { composeValidators, required, mustBeEthereumAddress } 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 { checkTokenExistenceAndSetFields, INITIAL_FORM_STATE } from './validators' import { styles } from './style' type Props = { @@ -68,11 +67,22 @@ const AddCustomToken = (props: Props) => { name="address" component={TextField} type="text" - validate={composeValidators(required, mustBeEthereumAddress, checkTokenExistence(setFormValue))} + validate={composeValidators( + required, + mustBeEthereumAddress, + checkTokenExistenceAndSetFields(setFormValue), + )} placeholder="Token contract address*" text="Token contract address*" className={classes.addressInput} /> + + {(value) => { + if (value === '') { + setFormValue(INITIAL_FORM_STATE) + } + }} + { component={TextField} disabled type="text" - validate={composeValidators(required, mustBeInteger)} placeholder="Token decimals*" text="Token decimals*" className={classes.addressInput} diff --git a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/validators.js b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/validators.js index afbece17..bfcd65f9 100644 --- a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/validators.js +++ b/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/validators.js @@ -20,11 +20,7 @@ export const simpleMemoize = (fn: Function) => { } } -export const checkTokenExistence = (updateForm: ?Function) => simpleMemoize(async (tokenAddress: string) => { - if (!tokenAddress && updateForm) { - updateForm(INITIAL_FORM_STATE) - } - +export const checkTokenExistenceAndSetFields = (updateForm: ?Function) => simpleMemoize(async (tokenAddress: string, anotherArgument, andAnotherone) => { const relayToken = await fetchToken(tokenAddress) if (!relayToken.data.count) { diff --git a/yarn.lock b/yarn.lock index 19fb50a1..812fc48d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1086,7 +1086,7 @@ dependencies: regenerator-runtime "^0.12.0" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3": version "7.4.3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.3.tgz#79888e452034223ad9609187a0ad1fe0d2ad4bdc" integrity sha512-9lsJwJLxDh/T3Q3SZszfWOTkk3pHbkmH+3KY+zwIDmsNlxsumuhS2TH3NIpktU4kNvfzy+k3eLT7aTJSPTo0OA== @@ -13092,6 +13092,13 @@ react-fast-compare@^2.0.2: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== +react-final-form-listeners@^1.0.2: + version "1.0.2" + resolved "https://registry.yarnpkg.com/react-final-form-listeners/-/react-final-form-listeners-1.0.2.tgz#b52da984300281cf1f69a6412e86df6249e2bf1c" + integrity sha512-AaUUHcXRhD3esC80yUfYPI8FJ3TUiMu0f4hk18QL8NMCWjokg6NWS32WkRJsH3bLWDoiy7+uNVOAAyO/XoupyA== + dependencies: + "@babel/runtime" "^7.1.5" + react-final-form@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/react-final-form/-/react-final-form-4.1.0.tgz#4e1b513de164771b2b824f3fb9c0548014255971"