Bug: #482 - Address book Custom transactions Recipient validation (#577)

* (fix) text input bottom border

* Fix #482 input

* Merge branch 'development' of https://github.com/gnosis/safe-react into fix/#482-address-book

# Conflicts:
#	src/components/forms/TextField/index.jsx
#	src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.jsx
#	src/routes/safe/components/Balances/SendModal/screens/SendFunds/TokenSelectField/index.jsx
#	src/routes/safe/components/Balances/SendModal/screens/SendFunds/index.jsx
#	yarn.lock

* Fix custom tx addresses filtering

* Merge branch 'development' of https://github.com/gnosis/safe-react into fix/#482-address-book

# Conflicts:
#	yarn.lock

* Remove console logs
Fixed prettier issues

* Remove unnecessary template string

* Fix `tokenAddress` string conversion

* Use `secondaryBackground` value

Co-authored-by: Gabriel Rodríguez Alsina <[email protected]>
Co-authored-by: Fernando <[email protected]>

src/components/forms/TextField/index.jsx

@@ -1,8 +1,7 @@
 // @flow
+import React from 'react'
 import MuiTextField, { TextFieldProps } from '@material-ui/core/TextField'
 import { withStyles } from '@material-ui/core/styles'
-import React from 'react'
-
 import { lg } from '~/theme/variables'
 
 // Neded for solving a fix in Windows browsers
@@ -27,6 +26,7 @@ class TextField extends React.PureComponent<TextFieldProps> {
       inputAdornment,
       meta,
       multiline,
+      render,
       rows,
       testId,
       text,
@@ -54,10 +54,11 @@ class TextField extends React.PureComponent<TextFieldProps> {
 
     return (
       <MuiTextField
-        error={meta.error && (meta.touched || !meta.pristine)}
-        helperText={showError ? meta.error : helperText || ' '}
-        inputProps={inputProps} // blank in order to force to have helper text
         InputProps={inputRootProps}
+        error={meta.error && (meta.touched || !meta.pristine)}
+        helperText={showError ? meta.error : helperText || ' '} // blank in order to force to have helper text
+        // eslint-disable-next-line
+        inputProps={inputProps}
         multiline={multiline}
         name={name}
         onChange={onChange}

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

@@ -1,17 +1,15 @@
 // @flow
-import MuiTextField from '@material-ui/core/TextField'
+import React, { useEffect, useState } from 'react'
 import { withStyles } from '@material-ui/core/styles'
-import makeStyles from '@material-ui/core/styles/makeStyles'
+import { useSelector } from 'react-redux'
 import Autocomplete from '@material-ui/lab/Autocomplete'
+import MuiTextField from '@material-ui/core/TextField'
+import makeStyles from '@material-ui/core/styles/makeStyles'
 import { List } from 'immutable'
-import React, { useEffect, useState } from 'react'
-import { useSelector } from 'react-redux'
-
 import { styles } from './style'
-
-import Identicon from '~/components/Identicon'
-import { mustBeEthereumAddress, mustBeEthereumContractAddress } from '~/components/forms/validator'
 import { getAddressBookListSelector } from '~/logic/addressBook/store/selectors'
+import { mustBeEthereumAddress, mustBeEthereumContractAddress } from '~/components/forms/validator'
+import Identicon from '~/components/Identicon'
 import { getAddressFromENS } from '~/logic/wallets/getWeb3'
 
 type Props = {
@@ -55,10 +53,10 @@ const AddressBookInput = ({
   classes,
   fieldMutator,
   isCustomTx,
-  pristine,
   recipientAddress,
-  setIsValidAddress,
   setSelectedEntry,
+  pristine,
+  setIsValidAddress,
 }: Props) => {
   const addressBook = useSelector(getAddressBookListSelector)
   const [isValidForm, setIsValidForm] = useState(true)
@@ -93,7 +91,7 @@ const AddressBookInput = ({
       const adbkToFilter = isCustomTx ? await filterAddressBookWithContractAddresses(addressBook) : addressBook
       // Then Filters the entries based on the input of the user
       const filteredADBK = adbkToFilter.filter(adbkEntry => {
-        const { address, name } = adbkEntry
+        const { name, address } = adbkEntry
         return (
           name.toLowerCase().includes(addressValue.toLowerCase()) ||
           address.toLowerCase().includes(addressValue.toLowerCase())
@@ -134,8 +132,15 @@ const AddressBookInput = ({
   return (
     <>
       <Autocomplete
-        closeIcon={null}
+        id="free-solo-demo"
+        freeSolo
         disableOpenOnFocus
+        open={!blurred}
+        onClose={() => setBlurred(true)}
+        role="listbox"
+        options={adbkList.toArray()}
+        style={{ display: 'flex', flexGrow: 1 }}
+        closeIcon={null}
         filterOptions={(optionsArray, { inputValue }) =>
           optionsArray.filter(item => {
             const inputLowerCase = inputValue.toLowerCase()
@@ -144,9 +149,13 @@ const AddressBookInput = ({
             return foundName || foundAddress
           })
         }
-        freeSolo
         getOptionLabel={adbkEntry => adbkEntry.address || ''}
-        id="free-solo-demo"
+        onOpen={() => {
+          setSelectedEntry(null)
+          setBlurred(false)
+        }}
+        //  defaultValue={{ address: recipientAddress }}
+        value={{ address: inputAddValue }}
         onChange={(event, value) => {
           let address = ''
           let name = ''
@@ -157,25 +166,33 @@ const AddressBookInput = ({
           setSelectedEntry({ address, name })
           fieldMutator(address)
         }}
-        onClose={() => setBlurred(true)}
-        onOpen={() => {
-          setSelectedEntry(null)
-          setBlurred(false)
+        renderOption={adbkEntry => {
+          const { name, address } = adbkEntry
+          return (
+            <div className={classes.itemOptionList}>
+              <div className={classes.identicon}>
+                <Identicon address={address} diameter={32} />
+              </div>
+              <div className={classes.adbkEntryName}>
+                <span>{name}</span>
+                <span>{address}</span>
+              </div>
+            </div>
+          )
         }}
-        open={!blurred}
-        options={adbkList.toArray()}
         renderInput={params => (
           <MuiTextField
             {...params}
-            // eslint-disable-next-line
-            autoFocus={!blurred || pristine}
+            label={!isValidForm ? validationText : 'Recipient'}
             error={!isValidForm}
             fullWidth
+            autoFocus={!blurred || pristine}
+            variant="filled"
             id="filled-error-helper-text"
-            InputLabelProps={{
-              shrink: true,
-              required: true,
-              classes: labelStyling,
+            value={{ address: inputAddValue }}
+            onChange={event => {
+              setInputTouched(true)
+              onAddressInputChanged(event.target.value)
             }}
             InputProps={{
               ...params.InputProps,
@@ -184,32 +201,13 @@ const AddressBookInput = ({
               },
               className: statusClasses,
             }}
-            label={!isValidForm ? validationText : 'Recipient'}
-            onChange={event => {
-              setInputTouched(true)
-              onAddressInputChanged(event.target.value)
+            InputLabelProps={{
+              shrink: true,
+              required: true,
+              classes: labelStyling,
             }}
-            value={{ address: inputAddValue }}
-            variant="filled"
           />
         )}
-        renderOption={adbkEntry => {
-          const { address, name } = adbkEntry
-          return (
-            <div className={classes.itemOptionList}>
-              <div className={classes.identicon}>
-                <Identicon address={address} diameter={32} />
-              </div>
-              <div className={classes.adbkEntryName}>
-                <span>{name}</span>
-                <span>{address}</span>
-              </div>
-            </div>
-          )
-        }}
-        role="listbox"
-        style={{ display: 'flex', flexGrow: 1 }}
-        value={{ address: inputAddValue }}
       />
     </>
   )