WA-238 refactor inLimit form validator

src/components/forms/validator.js

@@ -47,3 +47,13 @@ export const uniqueAddress = (addresses: string[]) => (value: string) =>
 
 export const composeValidators = (...validators: Function[]) => (value: Field) =>
   validators.reduce((error, validator) => error || validator(value), undefined)
+
+export const inLimit = (limit: number, base: number, baseText: string) => (value: string) => {
+  const amount = Number(value)
+  const max = limit - base
+  if (amount <= max) {
+    return undefined
+  }
+
+  return `Should not exceed ${max} ETH (amount to reach ${baseText})`
+}

src/routes/safe/component/Transactions/MultisigForm/index.jsx

@@ -2,7 +2,7 @@
 import * as React from 'react'
 import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
-import { composeValidators, mustBeNumber, required, greaterThan, mustBeEthereumAddress } from '~/components/forms/validator'
+import { composeValidators, inLimit, mustBeNumber, required, greaterThan, mustBeEthereumAddress } from '~/components/forms/validator'
 import Block from '~/components/layout/Block'
 import Heading from '~/components/layout/Heading'
 import { TX_NAME_PARAM, TX_DESTINATION_PARAM, TX_VALUE_PARAM } from '~/routes/safe/component/Transactions/transactions'
@@ -23,16 +23,6 @@ type Props = {
   balance: number,
 }
 
-export const inLimit = (limit: number, spentToday: number) => (value: string) => {
-  const amount = Number(value)
-  const max = limit - spentToday
-  if (amount <= max) {
-    return undefined
-  }
-
-  return `Should not exceed ${max} ETH (amount to reach available balance)`
-}
-
 const WithdrawnForm = ({ balance }: Props) => () => (
   <Block margin="md">
     <Heading tag="h2" margin="lg">
@@ -66,7 +56,7 @@ const WithdrawnForm = ({ balance }: Props) => () => (
         name={TX_VALUE_PARAM}
         component={TextField}
         type="text"
-        validate={composeValidators(required, mustBeNumber, greaterThan(0), inLimit(balance, 0))}
+        validate={composeValidators(required, mustBeNumber, greaterThan(0), inLimit(balance, 0, 'available balance'))}
         placeholder="Amount in ETH*"
         text="Amount in ETH"
       />

src/routes/safe/component/Withdrawn/WithdrawnForm/index.jsx

@@ -2,7 +2,7 @@
 import * as React from 'react'
 import Field from '~/components/forms/Field'
 import TextField from '~/components/forms/TextField'
-import { composeValidators, mustBeNumber, required, greaterThan, mustBeEthereumAddress } from '~/components/forms/validator'
+import { composeValidators, inLimit, mustBeNumber, required, greaterThan, mustBeEthereumAddress } from '~/components/forms/validator'
 import Block from '~/components/layout/Block'
 import Heading from '~/components/layout/Heading'
 import { DESTINATION_PARAM, VALUE_PARAM } from '~/routes/safe/component/Withdrawn/withdrawn'
@@ -24,16 +24,6 @@ type Props = {
   spentToday: number,
 }
 
-export const inLimit = (limit: number, spentToday: number) => (value: string) => {
-  const amount = Number(value)
-  const max = limit - spentToday
-  if (amount <= max) {
-    return undefined
-  }
-
-  return `Should not exceed ${max} ETH (amount to reach daily limit)`
-}
-
 const WithdrawnForm = ({ limit, spentToday }: Props) => () => (
   <Block margin="md">
     <Heading tag="h2" margin="lg">
@@ -47,7 +37,7 @@ const WithdrawnForm = ({ limit, spentToday }: Props) => () => (
         name={VALUE_PARAM}
         component={TextField}
         type="text"
-        validate={composeValidators(required, mustBeNumber, greaterThan(0), inLimit(limit, spentToday))}
+        validate={composeValidators(required, mustBeNumber, greaterThan(0), inLimit(limit, spentToday, 'daily limit'))}
         placeholder="Amount in ETH*"
         text="Amount in ETH"
       />