feat(tokens): form validation

kleros · Jul 30, 2018 · dd55b9e · dd55b9e
1 parent 9c99055
commit dd55b9e
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 13 deletions.
diff --git a/netlify.toml b/netlify.toml
@@ -4,7 +4,7 @@
   REACT_APP_PROD_RINKEBY_ARBITRATOR_ADDRESS="0x27a836a66a16d10a4d5a400dd89417e4e9a8961f"
   REACT_APP_PROD_MAINNET_ARBITRATOR_ADDRESS="0xa9f0ed953257de9598523c04741adc8225c9b1c5"
   REACT_APP_PROD_STORE_PROVIDER="https://develop.kleros.in"
-  REACT_APP_PROD_DOGE_IMAGES_BASE_URL="https://staging-doges-on-trial-doge-images.s3.us-east-2.amazonaws.com/"
+  REACT_APP_PROD_DOGE_IMAGES_BASE_URL="https://production-doges-on-trial-doge-images.s3.us-east-2.amazonaws.com/"
 
 [context.production.environment]
   REACT_APP_PROD_ETHEREUM_PROVIDER="<provider>"

diff --git a/src/components/__snapshots__/storyshots.test.js.snap b/src/components/__snapshots__/storyshots.test.js.snap
@@ -8670,7 +8670,7 @@ exports[`Storyshots Table default 1`] = `
                   value=""
                 />
                 <div
-                  className="TextInput-placeholder"
+                  className="TextInput-placeholder is-touched"
                 >
                   SEARCH
                 </div>
@@ -9508,7 +9508,7 @@ exports[`Storyshots Text Input default 1`] = `
               value=""
             />
             <div
-              className="TextInput-placeholder"
+              className="TextInput-placeholder is-touched"
             >
               EMAIL
             </div>
@@ -9816,7 +9816,7 @@ exports[`Storyshots Text Input error 1`] = `
               value=""
             />
             <div
-              className="TextInput-placeholder"
+              className="TextInput-placeholder is-touched"
             >
               EMAIL
             </div>
@@ -10437,7 +10437,7 @@ exports[`Storyshots Text Input valid 1`] = `
               value=""
             />
             <div
-              className="TextInput-placeholder"
+              className="TextInput-placeholder is-touched"
             >
               EMAIL
             </div>

diff --git a/src/components/text-input/index.js b/src/components/text-input/index.js
@@ -24,7 +24,9 @@ const TextInput = ({
     {placeholder && (
       <div
         className={`TextInput-placeholder${
-          touched || value ? ' is-touched' : ''
+          touched || (value !== null && value !== undefined)
+            ? ' is-touched'
+            : ''
         }`}
       >
         {placeholder}

diff --git a/src/containers/home/components/activate-pnk-form/index.js b/src/containers/home/components/activate-pnk-form/index.js
@@ -1,5 +1,5 @@
 import { form } from '../../../../utils/form-generator'
-import { required, number } from '../../../../utils/validation'
+import { required, number, positiveNumber } from '../../../../utils/validation'
 
 export const {
   Form: ActivatePNKForm,
@@ -8,7 +8,7 @@ export const {
 } = form('activatePNKForm', {
   amount: {
     type: 'text',
-    validate: [required, number],
+    validate: [required, number, positiveNumber],
     props: {
       type: 'number',
       className: 'Form-fullWidth'

diff --git a/src/containers/tokens/components/transfer-pnk-form/index.js b/src/containers/tokens/components/transfer-pnk-form/index.js
@@ -1,5 +1,5 @@
 import { form } from '../../../../utils/form-generator'
-import { required, number } from '../../../../utils/validation'
+import { required, number, positiveNumber } from '../../../../utils/validation'
 
 export const {
   Form: TransferPNKForm,
@@ -15,7 +15,7 @@ export const {
   },
   amount: {
     type: 'text',
-    validate: [required, number],
+    validate: [required, number, positiveNumber],
     props: {
       type: 'number',
       className: 'Form-noMargins'

diff --git a/src/containers/tokens/components/withdraw-pnk-form/index.js b/src/containers/tokens/components/withdraw-pnk-form/index.js
@@ -1,5 +1,5 @@
 import { form } from '../../../../utils/form-generator'
-import { required, number } from '../../../../utils/validation'
+import { required, number, positiveNumber } from '../../../../utils/validation'
 
 export const {
   Form: WithdrawPNKForm,
@@ -15,7 +15,7 @@ export const {
   },
   amount: {
     type: 'text',
-    validate: [required, number],
+    validate: [required, number, positiveNumber],
     props: {
       type: 'number',
       className: 'Form-noMargins'

diff --git a/src/containers/tokens/index.js b/src/containers/tokens/index.js
@@ -80,6 +80,25 @@ class Tokens extends PureComponent {
     fetchArbitratorData()
   }
 
+  validateTransferPNKForm = values => {
+    const { PNKBalance } = this.props
+    const errors = {}
+    if (PNKBalance.data.contractBalance < values.amount)
+      errors.amount = 'You do not own this much PNK.'
+    return errors
+  }
+
+  validateWithdrawPNKForm = values => {
+    const { PNKBalance } = this.props
+    const errors = {}
+    if (
+      PNKBalance.data.tokenBalance - PNKBalance.data.lockedTokens <
+      values.amount
+    )
+      errors.amount = 'You do not have this much free PNK.'
+    return errors
+  }
+
   render() {
     const {
       accounts,
@@ -118,6 +137,7 @@ class Tokens extends PureComponent {
             amount: PNKBalance.data.contractBalance
           }}
           onSubmit={transferPNK}
+          validate={this.validateTransferPNKForm}
         />
 
         <Button
@@ -141,6 +161,7 @@ class Tokens extends PureComponent {
             amount: PNKBalance.data.tokenBalance - PNKBalance.data.lockedTokens
           }}
           onSubmit={withdrawPNK}
+          validate={this.validateWithdrawPNKForm}
         />
 
         <Button

diff --git a/src/utils/validation.js b/src/utils/validation.js
@@ -1,3 +1,6 @@
-export const required = name => v => (v ? undefined : `${name} is required.`)
+export const required = name => v =>
+  v !== null && v !== undefined ? undefined : `${name} is required.`
 export const number = name => v =>
   Number.isNaN(Number(v)) ? `${name} must be a number.` : undefined
+export const positiveNumber = name => v =>
+  v < 0 ? `${name} must be positive.` : undefined