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,6 +59,7 @@ const EthAddressInput = ({ isContract = true, isRequired = true, name, onScanned
     <>
       <Row margin="md">
         <Col xs={11}>
+          {selectedEntry && selectedEntry.address ? (
             <Field
               component={TextField}
               name={name}
@@ -53,6 +69,15 @@ const EthAddressInput = ({ isContract = true, isRequired = true, name, onScanned
               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 />