(Fix) Fix undefined for maxValue validator in case there is no token selected (#1031)

* Fix undefined for maxValue validator  in case there is no token selected

* Add condition on validator

* Fix reset form status

* Force the re-validation on the amount field

* Fix paste address

src/components/forms/validator.ts

@@ -58,14 +58,18 @@ export const minValue = (min: number | string) => (value: string) => {
   return `Should be at least ${min}`
 }
 
-export const maxValue = (max: number | string) => (value: string) => {
+export const maxValueCheck = (max: number | string, value: string): string | undefined => {
-  if (Number.isNaN(Number(value)) || parseFloat(value) <= parseFloat(max.toString())) {
+  if (!max || Number.isNaN(Number(value)) || parseFloat(value) <= parseFloat(max.toString())) {
     return undefined
   }
 
   return `Maximum value is ${max}`
 }
 
+export const maxValue = (max: number | string) => (value: string) => {
+  return maxValueCheck(max, value)
+}
+
 export const ok = () => undefined
 
 export const mustBeEthereumAddress = simpleMemoize((address: string) => {

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

@@ -88,6 +88,9 @@ const AddressBookInput = ({
         )
       })
       setADBKList(filteredADBK)
+      if (!isValidText) {
+        setSelectedEntry({ address: addressValue })
+      }
     }
     setIsValidForm(isValidText === undefined)
     setValidationText(isValidText)

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

@@ -17,7 +17,14 @@ import { ScanQRWrapper } from 'src/components/ScanQRModal/ScanQRWrapper'
 import Field from 'src/components/forms/Field'
 import GnoForm from 'src/components/forms/GnoForm'
 import TextField from 'src/components/forms/TextField'
-import { composeValidators, greaterThan, maxValue, mustBeFloat, required } from 'src/components/forms/validator'
+import {
+  composeValidators,
+  greaterThan,
+  maxValue,
+  maxValueCheck,
+  mustBeFloat,
+  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'
@@ -39,7 +46,7 @@ const formMutators = {
     utils.changeValue(state, 'amount', () => args[0])
   },
   onTokenChange: (args, state, utils) => {
-    utils.changeValue(state, 'amount', () => '')
+    utils.changeValue(state, 'amount', () => state.formState.values.amount)
   },
   setRecipient: (args, state, utils) => {
     utils.changeValue(state, 'recipientAddress', () => args[0])
@@ -56,6 +63,7 @@ const SendFunds = ({ initialValues, onClose, onNext, recipientAddress, selectedT
     address: recipientAddress || initialValues.recipientAddress,
     name: '',
   })
+
   const [pristine, setPristine] = useState(true)
   const [isValidAddress, setIsValidAddress] = useState(true)
 
@@ -86,7 +94,18 @@ const SendFunds = ({ initialValues, onClose, onNext, recipientAddress, selectedT
         </IconButton>
       </Row>
       <Hairline />
-      <GnoForm formMutators={formMutators} initialValues={initialValues} onSubmit={handleSubmit}>
+      <GnoForm
+        formMutators={formMutators}
+        initialValues={initialValues}
+        onSubmit={handleSubmit}
+        validation={(values) => {
+          const selectedTokenRecord = tokens.find((token) => token.address === values?.token)
+
+          return {
+            amount: maxValueCheck(selectedTokenRecord?.balance, values.amount),
+          }
+        }}
+      >
         {(...args) => {
           const formState = args[2]
           const mutators = args[3]
@@ -224,11 +243,15 @@ const SendFunds = ({ initialValues, onClose, onNext, recipientAddress, selectedT
                         required,
                         mustBeFloat,
                         greaterThan(0),
-                        maxValue(selectedTokenRecord && selectedTokenRecord.balance),
+                        maxValue(selectedTokenRecord?.balance),
                       )}
                     />
                     <OnChange name="token">
                       {() => {
+                        setSelectedEntry({
+                          name: selectedEntry?.name,
+                          address: selectedEntry?.address,
+                        })
                         mutators.onTokenChange()
                       }}
                     </OnChange>