set address from ens on blur
This commit is contained in:
parent
2beb8afc29
commit
e5061a5731
|
@ -1,7 +1,6 @@
|
|||
// @flow
|
||||
import * as React from 'react'
|
||||
import { Field } from 'react-final-form'
|
||||
import { OnChange } from 'react-final-form-listeners'
|
||||
import TextField from '~/components/forms/TextField'
|
||||
import { composeValidators, required, mustBeEthereumAddress } from '~/components/forms/validator'
|
||||
import { getAddressFromENS } from '~/logic/wallets/getWeb3'
|
||||
|
@ -11,37 +10,61 @@ type Props = {
|
|||
name?: string,
|
||||
text?: string,
|
||||
placeholder?: string,
|
||||
fieldMutator: Function,
|
||||
}
|
||||
|
||||
const isValidEnsName = name => /^([\w-]+\.)+(eth|test)$/.test(name)
|
||||
|
||||
const { useState, useEffect } = React
|
||||
|
||||
// an idea for second field was taken from here
|
||||
// https://github.com/final-form/react-final-form-listeners/blob/master/src/OnBlur.js
|
||||
|
||||
const AddressInput = ({
|
||||
className = '',
|
||||
name = 'recipientAddress',
|
||||
text = 'Recipient*',
|
||||
placeholder = 'Recipient*',
|
||||
fieldMutator,
|
||||
}: Props): React.Element<*> => (
|
||||
<>
|
||||
<Field
|
||||
name={name}
|
||||
component={TextField}
|
||||
type="text"
|
||||
// validate={composeValidators(required, mustBeEthereumAddress)}
|
||||
validate={composeValidators(required, mustBeEthereumAddress)}
|
||||
placeholder={placeholder}
|
||||
text={text}
|
||||
className={className}
|
||||
/>
|
||||
<OnChange name={name}>
|
||||
{async (value) => {
|
||||
if (isValidEnsName(value)) {
|
||||
try {
|
||||
const resolverAddr = await getAddressFromENS(value)
|
||||
} catch {
|
||||
console.error('No resolver for ENS name')
|
||||
<Field
|
||||
name={name}
|
||||
subscription={{ active: true, value: true }}
|
||||
render={({ meta, input }) => {
|
||||
const [prevActive, setPrevActive] = useState<boolean>(!!meta.active)
|
||||
|
||||
useEffect(() => {
|
||||
async function setAddressFromENS() {
|
||||
if (isValidEnsName(input.value)) {
|
||||
try {
|
||||
const resolverAddr = await getAddressFromENS(input.value)
|
||||
fieldMutator(resolverAddr)
|
||||
} catch (err) {
|
||||
console.error('Error when trying to fetch address for ENS name: ', err)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (prevActive && !meta.active) {
|
||||
setAddressFromENS()
|
||||
} else if (prevActive !== meta.active) {
|
||||
setPrevActive(meta.active)
|
||||
}
|
||||
}, [meta.active])
|
||||
|
||||
return null
|
||||
}}
|
||||
</OnChange>
|
||||
/>
|
||||
</>
|
||||
)
|
||||
|
||||
|
|
|
@ -69,6 +69,9 @@ const SendFunds = ({
|
|||
onTokenChange: (args, state, utils) => {
|
||||
utils.changeValue(state, 'amount', () => '')
|
||||
},
|
||||
setRecipient: (args, state, utils) => {
|
||||
utils.changeValue(state, 'recipientAddress', () => args[0])
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
|
@ -111,6 +114,7 @@ const SendFunds = ({
|
|||
placeholder="Recipient*"
|
||||
text="Recipient*"
|
||||
className={classes.addressInput}
|
||||
fieldMutator={mutators.setRecipient}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
|
|
Loading…
Reference in New Issue