add validation schema to fund project

src/components/projects/FundProject.jsx

@@ -9,6 +9,7 @@ import Typography from '@material-ui/core/Typography'
 import { FundingContext } from '../../context'
 import TextDisplay from '../base/TextDisplay'
 import Icon from '../base/icons/IconByName'
+import * as Yup from 'yup'
 import { convertTokenAmountUsd, formatPercent } from '../../utils/prices'
 import { getAmountFromPledgesInfo } from '../../utils/pledges'
 import { useProjectData } from './hooks'
@@ -23,10 +24,16 @@ import styles from './styles/FundProject'
 import Loading from '../base/Loading'
 import BreadCrumb from '../base/BreadCrumb'
 import FundStepper from './FundStepper'
+import { errorStrings } from '../../constants/errors'
 
-
+const { REQUIRED, NOT_NUMBER } = errorStrings
 const { addGiverAndDonate } = LiquidPledging.methods
 
+const validationSchema = Yup.object().shape({
+  amount: Yup.number(NOT_NUMBER).required(REQUIRED).positive().integer()
+})
+
+
 const NOT_SUBMITTED = 'Not Submitted'
 const SUBMITTED = 'Submitted'
 const CONFIRMED = 'Confirmed'
@@ -56,7 +63,8 @@ function stepperProgress(values, projectData, submissionState) {
   const { manifest: { goalToken }, authorization } = projectData
   const { amount } = values
   const { chainReadibleFn } = getTokenByAddress(goalToken)
-  const weiAmount = amount ? chainReadibleFn(amount) : '0'
+  const sanitizedAmount = amount.replace(/\D/g,'')
+  const weiAmount = sanitizedAmount ? chainReadibleFn(sanitizedAmount) : '0'
   const isAuthorized = toBN(authorization).gte(toBN(weiAmount))
   if (!isAuthorized) return NOT_APPROVED
   return IS_APPROVED
@@ -92,6 +100,7 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
       initialValues={{
         amount: '',
       }}
+      validationSchema={validationSchema}
       onSubmit={async (values, { resetForm }) => {
         const activeStep = stepperProgress(values, projectData, submissionState)
         if (!activeStep) return enableEthereum()
@@ -140,8 +149,8 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
     >
       {({
         values,
-        errors: _errors,
-        touched: _touched,
+        errors,
+        touched,
         handleChange,
         handleBlur,
         handleSubmit,
@@ -216,6 +225,7 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
                   bottomRightLabel={usdValue}
                   onChange={handleChange}
                   onBlur={handleBlur}
+                  errorBorder={touched.amount && errors.amount}
                   disabled={activeStep >= IS_SUBMITTED}
                   value={values.amount || ''}
                 />

src/components/projects/styles/ListProjects.js

@@ -1,7 +1,6 @@
 import { makeStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles(theme => ({
-  theme,
   addIcon: {
     color: '#4360DF',
     fontSize: '2.5em'
@@ -21,14 +20,19 @@ const useStyles = makeStyles(theme => ({
     gridTemplateRows: '4rem 4rem 3rem 0.5fr 1fr 0.3fr'
   },
   title: {
-    fontSize: '2.5rem',
-    textAlign: 'center'
-
+    fontSize: '2rem',
+    textAlign: 'center',
+    [theme.breakpoints.up('md')]: {
+      fontSize: '2.5rem'
+    }
   },
   subTitle: {
     color: '#4360DF',
-    fontSize: '1.5rem',
-    textAlign: 'center'
+    fontSize: '1rem',
+    textAlign: 'center',
+    [theme.breakpoints.up('md')]: {
+      fontSize: '1.5rem'
+    }
   },
   cardText: {
     gridColumn: '1 / 49',

src/constants/errors.js

@@ -1,7 +1,9 @@
 const TOO_LONG = 'Too Long!'
 const REQUIRED = 'Required'
+const NOT_NUMBER = 'Not a number'
 
 export const errorStrings = {
   TOO_LONG,
-  REQUIRED
+  REQUIRED,
+  NOT_NUMBER
 }