diff --git a/package.json b/package.json index 6abb539c..cbbcd9bd 100644 --- a/package.json +++ b/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", 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 a0639876..44e9c68e 100644 --- a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/index.jsx +++ b/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, - decimals: formValues.decimals, - symbol: formValues.symbol, - name: formValues.symbol, + address: values.address, + decimals: values.decimals, + symbol: values.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 ( - + {() => ( @@ -68,22 +84,15 @@ const AddCustomToken = (props: Props) => { name="address" component={TextField} type="text" - validate={composeValidators( - required, - mustBeEthereumAddress, - addressIsTokenContract, - )} + validate={composeValidators(required, mustBeEthereumAddress, addressIsTokenContract)} placeholder="Token contract address*" text="Token contract address*" className={classes.addressInput} /> - - {(value) => { - if (value === '') { - setFormValue(INITIAL_FORM_STATE) - } - }} - + { Token Image - Token image + Token image 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 2d36d433..ba36cddf 100644 --- a/src/routes/safe/components/Balances/Tokens/screens/AddCustomToken/validators.js +++ b/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