implement form populating after valid address
This commit is contained in:
parent
aff310806d
commit
22eb1a3c55
|
@ -18,7 +18,7 @@ const createStandardTokenContract = async () => {
|
||||||
|
|
||||||
return erc20Token
|
return erc20Token
|
||||||
}
|
}
|
||||||
const createHumanFriendlyTokenContract = async () => {
|
export const createHumanFriendlyTokenContract = async () => {
|
||||||
const web3 = getWeb3()
|
const web3 = getWeb3()
|
||||||
const humanErc20Token = await contract(HumanFriendlyToken)
|
const humanErc20Token = await contract(HumanFriendlyToken)
|
||||||
humanErc20Token.setProvider(web3.currentProvider)
|
humanErc20Token.setProvider(web3.currentProvider)
|
||||||
|
|
|
@ -20,6 +20,7 @@ import { setImageToPlaceholder } from '~/routes/safe/components/Balances/utils'
|
||||||
import TokenPlaceholder from '~/routes/safe/components/Balances/assets/token_placeholder.svg'
|
import TokenPlaceholder from '~/routes/safe/components/Balances/assets/token_placeholder.svg'
|
||||||
import { addressIsTokenContract, doesntExistInTokenList } from './validators'
|
import { addressIsTokenContract, doesntExistInTokenList } from './validators'
|
||||||
import { styles } from './style'
|
import { styles } from './style'
|
||||||
|
import { getSymbolAndDecimalsFromContract } from './utils'
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
classes: Object,
|
classes: Object,
|
||||||
|
@ -59,12 +60,31 @@ const AddCustomToken = (props: Props) => {
|
||||||
onClose()
|
onClose()
|
||||||
}
|
}
|
||||||
|
|
||||||
const populateFormValuesFromAddress = (tokenAddress) => {}
|
const populateFormValuesFromAddress = async (tokenAddress: string) => {
|
||||||
|
const tokenData = await getSymbolAndDecimalsFromContract(tokenAddress)
|
||||||
|
|
||||||
const formSpyOnChangeHandler = (state) => {
|
if (tokenData.length) {
|
||||||
const { errors, validating, values } = state
|
const [symbol, decimals] = tokenData
|
||||||
if (!errors.address && !validating) {
|
|
||||||
populateFormValuesFromAddress(values.address)
|
setFormValues({
|
||||||
|
address: tokenAddress,
|
||||||
|
symbol,
|
||||||
|
decimals,
|
||||||
|
name: symbol,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const formSpyOnChangeHandler = async (state) => {
|
||||||
|
const {
|
||||||
|
errors, validating, values, dirty,
|
||||||
|
} = state
|
||||||
|
if (dirty && !validating && errors.address) {
|
||||||
|
setFormValues(INITIAL_FORM_STATE)
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!errors.address && !validating && dirty) {
|
||||||
|
await populateFormValuesFromAddress(values.address)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -85,13 +105,23 @@ const AddCustomToken = (props: Props) => {
|
||||||
name="address"
|
name="address"
|
||||||
component={TextField}
|
component={TextField}
|
||||||
type="text"
|
type="text"
|
||||||
validate={composeValidators(required, mustBeEthereumAddress, doesntExistInTokenList(tokens), addressIsTokenContract)}
|
validate={composeValidators(
|
||||||
|
required,
|
||||||
|
mustBeEthereumAddress,
|
||||||
|
doesntExistInTokenList(tokens),
|
||||||
|
addressIsTokenContract,
|
||||||
|
)}
|
||||||
placeholder="Token contract address*"
|
placeholder="Token contract address*"
|
||||||
text="Token contract address*"
|
text="Token contract address*"
|
||||||
className={classes.addressInput}
|
className={classes.addressInput}
|
||||||
/>
|
/>
|
||||||
<FormSpy
|
<FormSpy
|
||||||
subscription={{ values: true, errors: true, validating: true }}
|
subscription={{
|
||||||
|
values: true,
|
||||||
|
errors: true,
|
||||||
|
validating: true,
|
||||||
|
dirty: true,
|
||||||
|
}}
|
||||||
onChange={formSpyOnChangeHandler}
|
onChange={formSpyOnChangeHandler}
|
||||||
/>
|
/>
|
||||||
<Row>
|
<Row>
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
// @flow
|
||||||
|
import { getHumanFriendlyToken } from '~/logic/tokens/store/actions/fetchTokens'
|
||||||
|
|
||||||
|
export const getSymbolAndDecimalsFromContract = async (tokenAddress: string) => {
|
||||||
|
const tokenContract = await getHumanFriendlyToken()
|
||||||
|
const token = await tokenContract.at(tokenAddress)
|
||||||
|
let values
|
||||||
|
|
||||||
|
try {
|
||||||
|
values = await Promise.all([token.symbol(), (await token.decimals()).toString()])
|
||||||
|
} catch {
|
||||||
|
values = []
|
||||||
|
}
|
||||||
|
|
||||||
|
return values
|
||||||
|
}
|
|
@ -3,6 +3,7 @@ import { List } from 'immutable'
|
||||||
import { getWeb3 } from '~/logic/wallets/getWeb3'
|
import { getWeb3 } from '~/logic/wallets/getWeb3'
|
||||||
import { type Token } from '~/logic/tokens/store/model/token'
|
import { type Token } from '~/logic/tokens/store/model/token'
|
||||||
import { sameAddress } from '~/logic/wallets/ethAddresses'
|
import { sameAddress } from '~/logic/wallets/ethAddresses'
|
||||||
|
// import { getStandardTokenContract } from '~/logic/tokens/store/actions/fetchTokens'
|
||||||
|
|
||||||
export const simpleMemoize = (fn: Function) => {
|
export const simpleMemoize = (fn: Function) => {
|
||||||
let lastArg
|
let lastArg
|
||||||
|
@ -17,14 +18,23 @@ export const simpleMemoize = (fn: Function) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
// eslint-disable-next-line
|
// eslint-disable-next-line
|
||||||
export const addressIsTokenContract = simpleMemoize(async (tokenAddress: string) => {
|
export const addressIsTokenContract = async (tokenAddress: string) => {
|
||||||
|
// SECOND APPROACH:
|
||||||
|
// They both seem to work the same
|
||||||
|
// const tokenContract = await getStandardTokenContract()
|
||||||
|
// try {
|
||||||
|
// await tokenContract.at(tokenAddress)
|
||||||
|
// } catch {
|
||||||
|
// return 'Not a token address'
|
||||||
|
// }
|
||||||
|
|
||||||
const web3 = getWeb3()
|
const web3 = getWeb3()
|
||||||
const call = await web3.eth.call({ to: tokenAddress, data: web3.utils.sha3('totalSupply()') })
|
const call = await web3.eth.call({ to: tokenAddress, data: web3.utils.sha3('totalSupply()') })
|
||||||
|
|
||||||
if (call === '0x') {
|
if (call === '0x') {
|
||||||
return 'Not a token address'
|
return 'Not a token address'
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
|
|
||||||
export const doesntExistInTokenList = (tokenList: List<Token>) => simpleMemoize((tokenAddress: string) => {
|
export const doesntExistInTokenList = (tokenList: List<Token>) => simpleMemoize((tokenAddress: string) => {
|
||||||
const tokenIndex = tokenList.findIndex(({ address }) => sameAddress(address, tokenAddress))
|
const tokenIndex = tokenList.findIndex(({ address }) => sameAddress(address, tokenAddress))
|
||||||
|
|
Loading…
Reference in New Issue