Bugfix - Long values for Amount and Address fields (#2174)

* Add validations to prevent very long fields

* Fix validation for QR scan

* Get decimals according to the selected token

* Add decimals length validation

src/components/forms/validator.ts

@@ -89,6 +89,12 @@ export const mustBeEthereumContractAddress = memoize(
 export const minMaxLength = (minLen: number, maxLen: number) => (value: string): ValidatorReturnType =>
   value.length >= +minLen && value.length <= +maxLen ? undefined : `Should be ${minLen} to ${maxLen} symbols`
 
+export const minMaxDecimalsLength = (minLen: number, maxLen: number) => (value: string): ValidatorReturnType => {
+  const decimals = value.split('.')[1] || '0'
+  const minMaxLengthErrMsg = minMaxLength(minLen, maxLen)(decimals)
+  return minMaxLengthErrMsg ? `Should be ${minLen} to ${maxLen} decimals` : undefined
+}
+
 export const ADDRESS_REPEATED_ERROR = 'Address already introduced'
 export const OWNER_ADDRESS_IS_SAFE_ADDRESS_ERROR = 'Cannot use Safe itself as owner.'
 

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

@@ -23,6 +23,7 @@ export interface AddressBookProps {
   label?: string
   pristine?: boolean
   recipientAddress?: string
+  errorMsg?: string
   setIsValidAddress: (valid: boolean) => void
   setSelectedEntry: Dispatch<SetStateAction<{ address: string; name: string }> | null>
 }
@@ -159,6 +160,12 @@ export const AddressBookInput = (props: AddressBookProps): ReactElement => {
   const addressBookEntries = useSelector(addressBookSelector)
   const [validationText, setValidationText] = useState<string>('')
 
+  useEffect(() => {
+    if (props.errorMsg) {
+      setValidationText(props.errorMsg)
+    }
+  }, [props.errorMsg])
+
   return (
     <BaseAddressBookInput
       addressBookEntries={addressBookEntries}

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

@@ -10,7 +10,15 @@ import { getExplorerInfo } from 'src/config'
 import Field from 'src/components/forms/Field'
 import GnoForm from 'src/components/forms/GnoForm'
 import TextField from 'src/components/forms/TextField'
-import { composeValidators, maxValue, minValue, mustBeFloat, required } from 'src/components/forms/validator'
+import {
+  composeValidators,
+  maxValue,
+  minValue,
+  minMaxDecimalsLength,
+  mustBeFloat,
+  mustBeEthereumAddress,
+  required,
+} 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'
@@ -38,6 +46,7 @@ import { styles } from './style'
 import { EthHashInfo } from '@gnosis.pm/safe-react-components'
 import { spendingLimitAllowedBalance, getSpendingLimitByTokenAddress } from 'src/logic/safe/utils/spendingLimits'
 import { getBalanceAndDecimalsFromToken } from 'src/logic/tokens/utils/tokenHelpers'
+import { getNetworkInfo } from 'src/config'
 import Divider from 'src/components/Divider'
 
 const formMutators = {
@@ -89,6 +98,7 @@ const SendFunds = ({
   const classes = useStyles()
   const tokens = useSelector(extendedSafeTokensSelector)
   const addressBook = useSelector(addressBookSelector)
+  const { nativeCoin } = getNetworkInfo()
   const [selectedEntry, setSelectedEntry] = useState<{ address: string; name: string } | null>(() => {
     const defaultEntry = { address: recipientAddress || '', name: '' }
 
@@ -113,6 +123,7 @@ const SendFunds = ({
   })
   const [pristine, setPristine] = useState(true)
   const [isValidAddress, setIsValidAddress] = useState(false)
+  const [addressErrorMsg, setAddressErrorMsg] = useState('')
 
   useEffect(() => {
     if (selectedEntry === null && pristine) {
@@ -135,16 +146,17 @@ const SendFunds = ({
 
   const sendFundsValidation = (values) => {
     const { amount, token: tokenAddress, txType } = values ?? {}
-
     if (!amount || !tokenAddress) {
       return
     }
 
     const isSpendingLimit = tokenSpendingLimit && txType === 'spendingLimit'
-
+    const tokenDecimals =
+      Number(getBalanceAndDecimalsFromToken({ tokenAddress, tokens })?.decimals) || nativeCoin.decimals
     const amountValidation = composeValidators(
       required,
       mustBeFloat,
+      minMaxDecimalsLength(1, tokenDecimals),
       minValue(0, false),
       maxValue(
         isSpendingLimit
@@ -199,11 +211,15 @@ const SendFunds = ({
               scannedAddress = scannedAddress.replace('ethereum:', '')
             }
             const scannedName = addressBook ? getNameFromAddressBook(addressBook, scannedAddress) : ''
-            mutators.setRecipient(scannedAddress)
-            setSelectedEntry({
-              name: scannedName || '',
-              address: scannedAddress,
-            })
+            const addressErrorMessage = mustBeEthereumAddress(scannedAddress)
+            if (!addressErrorMessage) {
+              mutators.setRecipient(scannedAddress)
+              setSelectedEntry({
+                name: scannedName || '',
+                address: scannedAddress,
+              })
+            } else setAddressErrorMsg(addressErrorMessage)
+
             closeQrModal()
           }
 
@@ -268,6 +284,7 @@ const SendFunds = ({
                       <AddressBookInput
                         fieldMutator={mutators.setRecipient}
                         pristine={pristine}
+                        errorMsg={addressErrorMsg}
                         setIsValidAddress={setIsValidAddress}
                         setSelectedEntry={setSelectedEntry}
                       />