Set address book suggestions

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

@@ -50,7 +50,7 @@ const AddressBookInput = ({
 }: any) => {
   const addressBook = useSelector(getAddressBookListSelector)
   const [isValidForm, setIsValidForm] = useState(true)
-  const [validationText, setValidationText] = useState<any>(true)
+  const [validationText, setValidationText] = useState<any>('')
   const [inputTouched, setInputTouched] = useState(false)
   const [blurred, setBlurred] = useState(pristine)
   const [adbkList, setADBKList] = useState(List([]))

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/EthAddressInput/index.tsx

@@ -1,7 +1,8 @@
 import { makeStyles } from '@material-ui/core/styles'
-import React from 'react'
+import React, { useState } from 'react'
 
 import { ScanQRWrapper } from 'src/components/ScanQRModal/ScanQRWrapper'
+import AddressBookInput from 'src/routes/safe/components/Balances/SendModal/screens/AddressBookInput'
 import Field from 'src/components/forms/Field'
 import TextField from 'src/components/forms/TextField'
 import {
@@ -22,12 +23,26 @@ export interface EthAddressProps {
   name: string
   onScannedValue: (scannedValue: string) => void
   text: string
+  value?: string
+  pristine: boolean
 }
 
-const EthAddressInput = ({ isContract = true, isRequired = true, name, onScannedValue, text }: EthAddressProps) => {
+const EthAddressInput = ({
+  isContract = true,
+  isRequired = true,
+  name,
+  onScannedValue,
+  text,
+  value,
+  pristine,
+}: EthAddressProps) => {
   const classes = useStyles()
   const validatorsList = [isRequired && required, mustBeEthereumAddress, isContract && mustBeEthereumContractAddress]
   const validate = composeValidators(...validatorsList.filter((_) => _))
+  const [selectedEntry, setSelectedEntry] = useState<{ address?: string; name?: string } | null>({
+    address: value,
+    name: '',
+  })
 
   const handleScan = (value, closeQrModal) => {
     let scannedAddress = value
@@ -44,15 +59,25 @@ const EthAddressInput = ({ isContract = true, isRequired = true, name, onScanned
     <>
       <Row margin="md">
         <Col xs={11}>
-          <Field
-            component={TextField}
-            name={name}
-            placeholder={text}
-            testId={name}
-            text={text}
-            type="text"
-            validate={validate}
-          />
+          {selectedEntry && selectedEntry.address ? (
+            <Field
+              component={TextField}
+              name={name}
+              placeholder={text}
+              testId={name}
+              text={text}
+              type="text"
+              validate={validate}
+            />
+          ) : (
+            <AddressBookInput
+              setSelectedEntry={setSelectedEntry}
+              setIsValidAddress={() => {}}
+              fieldMutator={onScannedValue}
+              isCustomTx
+              pristine={pristine}
+            />
+          )}
         </Col>
         <Col center="xs" className={classes} middle="xs" xs={1}>
           <ScanQRWrapper handleScan={handleScan} />

src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx

@@ -100,15 +100,16 @@ const ContractInteraction: React.FC<ContractInteractionProps> = ({
       >
         {(submitting, validating, rest, mutators) => {
           setCallResults = mutators.setCallResults
-
           return (
             <>
               <Block className={classes.formContainer}>
                 <SafeInfo />
                 <FormDivisor />
                 <EthAddressInput
+                  value={rest.values.contractAddress}
                   name="contractAddress"
                   onScannedValue={mutators.setContractAddress}
+                  pristine={rest.pristine}
                   text="Contract Address*"
                 />
                 <ContractABI />