set address from ens on blur

src/components/forms/AddressInput/index.jsx

@@ -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}>
+    <Field
-      {async (value) => {
+      name={name}
-        if (isValidEnsName(value)) {
+      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(value)
+                const resolverAddr = await getAddressFromENS(input.value)
-          } catch {
+                fieldMutator(resolverAddr)
-            console.error('No resolver for ENS name')
+              } 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>
+    />
   </>
 )
 

src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx

@@ -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>