diff --git a/src/components/forms/validator.ts b/src/components/forms/validator.ts index e0a6ce0d..9aa3b87c 100644 --- a/src/components/forms/validator.ts +++ b/src/components/forms/validator.ts @@ -42,6 +42,14 @@ export const greaterThan = (min: number | string) => (value: string) => { return `Should be greater than ${min}` } +export const equalOrGreaterThan = (min: number | string) => (value: string): undefined | string => { + if (Number.isNaN(Number(value)) || Number.parseFloat(value) >= Number(min)) { + return undefined + } + + return `Should be equal or greater than ${min}` +} + const regexQuery = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,}))\.?)(?::\d{2,5})?(?:[/?#]\S*)?$/i const url = new RegExp(regexQuery) export const mustBeUrl = (value: string) => { 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 d7d3e00e..fc6915ae 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/AddressBookInput/index.tsx @@ -14,6 +14,19 @@ import { getAddressBookListSelector } from 'src/logic/addressBook/store/selector import { getAddressFromENS } from 'src/logic/wallets/getWeb3' import { isValidEnsName } from 'src/logic/wallets/ethAddresses' +export interface AddressBookProps { + fieldMutator: (address: string) => void + isCustomTx?: boolean + pristine: boolean + recipientAddress?: string + setSelectedEntry: ( + 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', @@ -30,34 +43,39 @@ const textFieldInputStyle = makeStyles(() => ({ }, })) -const filterAddressBookWithContractAddresses = async (addressBook) => { +const filterAddressBookWithContractAddresses = async ( + addressBook: List<{ address: string }>, +): Promise> => { const abFlags = await Promise.all( - addressBook.map(async ({ address }) => { - return (await mustBeEthereumContractAddress(address)) === undefined - }), + addressBook.map( + async ({ address }: { address: string }): Promise => { + return (await mustBeEthereumContractAddress(address)) === undefined + }, + ), ) - return addressBook.filter((adbkEntry, index) => abFlags[index]) + + return addressBook.filter((_, index) => abFlags[index]) } const AddressBookInput = ({ - classes, fieldMutator, isCustomTx, pristine, recipientAddress, setIsValidAddress, setSelectedEntry, -}: any) => { +}: AddressBookProps) => { + const classes = useStyles() const addressBook = useSelector(getAddressBookListSelector) const [isValidForm, setIsValidForm] = useState(true) - const [validationText, setValidationText] = useState(true) + 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) - const onAddressInputChanged = async (addressValue) => { + const onAddressInputChanged = async (addressValue: string): Promise => { setInputAddValue(addressValue) let resolvedAddress = addressValue let isValidText @@ -99,7 +117,7 @@ const AddressBookInput = ({ } useEffect(() => { - const filterAdbkContractAddresses = async () => { + const filterAdbkContractAddresses = async (): Promise => { if (!isCustomTx) { setADBKList(addressBook) return 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 91ddf4df..0c11b16e 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,7 +1,9 @@ import { makeStyles } from '@material-ui/core/styles' -import React from 'react' +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' import Field from 'src/components/forms/Field' import TextField from 'src/components/forms/TextField' import { @@ -16,7 +18,7 @@ import { styles } from 'src/routes/safe/components/Balances/SendModal/screens/Co const useStyles = makeStyles(styles) -export interface EthAddressProps { +export interface EthAddressInputProps { isContract?: boolean isRequired?: boolean name: string @@ -24,10 +26,24 @@ export interface EthAddressProps { text: string } -const EthAddressInput = ({ isContract = true, isRequired = true, name, onScannedValue, text }: EthAddressProps) => { +const EthAddressInput = ({ + isContract = true, + isRequired = true, + name, + onScannedValue, + text, +}: EthAddressInputProps) => { 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: '', + }) const handleScan = (value, closeQrModal) => { let scannedAddress = value @@ -44,15 +60,25 @@ const EthAddressInput = ({ isContract = true, isRequired = true, name, onScanned <> - + {selectedEntry?.address ? ( + + ) : ( + {}} + fieldMutator={onScannedValue} + isCustomTx + pristine={pristine} + /> + )} diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx index 69c172d4..a222e961 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/SendCustomTx/index.tsx @@ -19,7 +19,7 @@ import Field from 'src/components/forms/Field' import GnoForm from 'src/components/forms/GnoForm' import TextField from 'src/components/forms/TextField' import TextareaField from 'src/components/forms/TextareaField' -import { composeValidators, maxValue, mustBeFloat, greaterThan } from 'src/components/forms/validator' +import { composeValidators, maxValue, mustBeFloat, equalOrGreaterThan } from 'src/components/forms/validator' import Block from 'src/components/layout/Block' import Button from 'src/components/layout/Button' import ButtonLink from 'src/components/layout/ButtonLink' @@ -230,7 +230,7 @@ const SendCustomTx: React.FC = ({ initialValues, onClose, onNext, contrac placeholder="Value*" text="Value*" type="text" - validate={composeValidators(mustBeFloat, maxValue(ethBalance), greaterThan(0))} + validate={composeValidators(mustBeFloat, maxValue(ethBalance), equalOrGreaterThan(0))} /> diff --git a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx index 2c4b94a8..3630a2f1 100644 --- a/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx +++ b/src/routes/safe/components/Balances/SendModal/screens/ContractInteraction/index.tsx @@ -100,7 +100,6 @@ const ContractInteraction: React.FC = ({ > {(submitting, validating, rest, mutators) => { setCallResults = mutators.setCallResults - return ( <>