Fix types + improve form values

src/components/forms/validator.ts

@@ -40,7 +40,7 @@ export const greaterThan = (min: number | string) => (value: string) => {
   return `Should be greater than ${min}`
 }
 
-export const equalOrGreaterThan = (min: number | string) => (value: string) => {
+export const equalOrGreaterThan = (min: number | string) => (value: string): undefined | string => {
   if (Number.isNaN(Number(value)) || Number.parseFloat(value) >= Number(min)) {
     return undefined
   }

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

@@ -15,17 +15,18 @@ import { getAddressFromENS } from 'src/logic/wallets/getWeb3'
 import { isValidEnsName } from 'src/logic/wallets/ethAddresses'
 
 export interface AddressBookProps {
-  classes: any
   fieldMutator: (address: string) => void
   isCustomTx?: boolean
   pristine: boolean
   recipientAddress?: string
   setSelectedEntry: (
-    entry: { address?: string; name?: string } | React.SetStateAction<{ address: any; name: string }>,
+    entry: { address?: string; name?: string } | React.SetStateAction<{ address: string; name: string }>,
   ) => void
   setIsValidAddress: (valid?: boolean) => void
 }
 
+const useStyles = makeStyles(styles)
+
 const textFieldLabelStyle = makeStyles(() => ({
   root: {
     overflow: 'hidden',
@@ -42,7 +43,9 @@ const textFieldInputStyle = makeStyles(() => ({
   },
 }))
 
-const filterAddressBookWithContractAddresses = async (addressBook: Array<any>): Promise<any> => {
+const filterAddressBookWithContractAddresses = async (
+  addressBook: List<{ address: string }>,
+): Promise<List<{ address: string }>> => {
   const abFlags = await Promise.all(
     addressBook.map(
       async ({ address }: { address: string }): Promise<boolean> => {
@@ -50,11 +53,11 @@ const filterAddressBookWithContractAddresses = async (addressBook: Array<any>):
       },
     ),
   )
+
   return addressBook.filter((_, index) => abFlags[index])
 }
 
 const AddressBookInput = ({
-  classes,
   fieldMutator,
   isCustomTx,
   pristine,
@@ -62,12 +65,13 @@ const AddressBookInput = ({
   setIsValidAddress,
   setSelectedEntry,
 }: AddressBookProps) => {
+  const classes = useStyles()
   const addressBook = useSelector(getAddressBookListSelector)
   const [isValidForm, setIsValidForm] = useState(true)
-  const [validationText, setValidationText] = useState<any>('')
+  const [validationText, setValidationText] = useState<string>('')
   const [inputTouched, setInputTouched] = useState(false)
   const [blurred, setBlurred] = useState(pristine)
-  const [adbkList, setADBKList] = useState(List([]))
+  const [adbkList, setADBKList] = useState<List<{ address: string }>>(List([]))
 
   const [inputAddValue, setInputAddValue] = useState(recipientAddress)
 

src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts

@@ -1,4 +1,6 @@
-export const styles = () => ({
+import { createStyles } from '@material-ui/core'
+
+export const styles = createStyles({
   itemOptionList: {
     display: 'flex',
   },

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

@@ -1,5 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles'
 import React, { useState } from 'react'
+import { useFormState, useField } from 'react-final-form'
 
 import { ScanQRWrapper } from 'src/components/ScanQRModal/ScanQRWrapper'
 import AddressBookInput from 'src/routes/safe/components/Balances/SendModal/screens/AddressBookInput'
@@ -17,14 +18,12 @@ import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/Co
 
 const useStyles = makeStyles(styles)
 
-export interface EthAddressProps {
+export interface AddressBookInputProps {
   isContract?: boolean
   isRequired?: boolean
   name: string
   onScannedValue: (scannedValue: string) => void
   text: string
-  value?: string
-  pristine: boolean
 }
 
 const EthAddressInput = ({
@@ -33,12 +32,14 @@ const EthAddressInput = ({
   name,
   onScannedValue,
   text,
-  value,
+}: AddressBookInputProps) => {
-  pristine,
-}: EthAddressProps) => {
   const classes = useStyles()
   const validatorsList = [isRequired && required, mustBeEthereumAddress, isContract && mustBeEthereumContractAddress]
   const validate = composeValidators(...validatorsList.filter((_) => _))
+  const { pristine } = useFormState({ subscription: { pristine: true } })
+  const {
+    input: { value },
+  } = useField('contractAddress', { subscription: { value: true } })
   const [selectedEntry, setSelectedEntry] = useState<{ address?: string; name?: string } | null>({
     address: value,
     name: '',
@@ -59,7 +60,7 @@ const EthAddressInput = ({
     <>
       <Row margin="md">
         <Col xs={11}>
-          {selectedEntry && selectedEntry.address ? (
+          {selectedEntry?.address ? (
             <Field
               component={TextField}
               name={name}

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

@@ -106,10 +106,8 @@ const ContractInteraction: React.FC<ContractInteractionProps> = ({
                 <SafeInfo />
                 <FormDivisor />
                 <EthAddressInput
-                  value={rest.values.contractAddress}
                   name="contractAddress"
                   onScannedValue={mutators.setContractAddress}
-                  pristine={rest.pristine}
                   text="Contract Address*"
                 />
                 <ContractABI />