diff --git a/src/components/forms/validator.ts b/src/components/forms/validator.ts index 2f5e052e..8cf59811 100644 --- a/src/components/forms/validator.ts +++ b/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 } diff --git a/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx index 94cf2b62..fc6915ae 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx +++ b/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): Promise => { +const filterAddressBookWithContractAddresses = async ( + addressBook: List<{ address: string }>, +): Promise> => { const abFlags = await Promise.all( addressBook.map( async ({ address }: { address: string }): Promise => { @@ -50,11 +53,11 @@ const filterAddressBookWithContractAddresses = async (addressBook: Array): }, ), ) + 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('') + const [validationText, setValidationText] = useState('') const [inputTouched, setInputTouched] = useState(false) const [blurred, setBlurred] = useState(pristine) - const [adbkList, setADBKList] = useState(List([])) + const [adbkList, setADBKList] = useState>(List([])) const [inputAddValue, setInputAddValue] = useState(recipientAddress) diff --git a/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts b/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts index b7468d06..b6d2d076 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/style.ts +++ b/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', }, diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/EthAddressInput/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/EthAddressInput/index.tsx index a4cef3f1..d846772f 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/EthAddressInput/index.tsx +++ b/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, - pristine, -}: EthAddressProps) => { +}: AddressBookInputProps) => { 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 = ({ <> - {selectedEntry && selectedEntry.address ? ( + {selectedEntry?.address ? ( = ({