display error via tooltip

src/components/base/TextField.jsx

@@ -73,7 +73,43 @@ const useStyles = makeStyles((theme) => ({
     [theme.breakpoints.up('sm')]: {
       marginLeft: '1.3rem'
     }
+  },
+  toolTip: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gridColumn: '3 / 11',
+    backgroundColor: '#FFFFFF',
+    color: '#FF2D55',
+    textAlign: 'center',
+    borderRadius: '8px',
+    padding: '5px 0',
+    zIndex: 1,
+    boxShadow: '0px 4px 12px rgba(0, 34, 51, 0.08), 0px 2px 4px rgba(0, 34, 51, 0.16)',
+    minHeight: '3rem',
+    minWidth: '9rem',
+    '&:after': {
+      content: 'close-quote',
+      position: 'absolute',
+      top: '43%',
+      left: '50%',
+      marginLeft: '-5px',
+      borderWidth: '10px',
+      borderStyle: 'solid',
+      borderColor: '#FFFFFF transparent transparent transparent'
+    }
+  },
+  toolTipNoArrow: {
+    gridColumn: '5 / 10',
+    backgroundColor: '#FFFFFF',
+    color: '#FF2D55',
+    textAlign: 'center',
+    borderRadius: '8px',
+    padding: '5px 0',
+    zIndex: 1,
+    boxShadow: '0px 4px 12px rgba(0, 34, 51, 0.08), 0px 2px 4px rgba(0, 34, 51, 0.16)'
   }
+
 }))
 
 const renderLabel = (formLabelClass, idFor, label, isRequired) => (
@@ -100,6 +136,7 @@ function Input({
   bottomRightError,
   bottomLeftLabel,
   disabled,
+  errorText,
   placeholder,
   className,
   name,
@@ -122,6 +159,7 @@ function Input({
     >
       { labelForm }
       { topRightLabel }
+      {!!errorText && <span className={classes.toolTip}>{errorText}</span>}
       <InputBase
         id={idFor}
         error={errorBorder}

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,7 +24,12 @@ 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 schema = Yup.object().shape({
+  amount: Yup.number().typeError(NOT_NUMBER).required(REQUIRED).positive().integer()
+})
 const { addGiverAndDonate } = LiquidPledging.methods
 
 const NOT_SUBMITTED = 'Not Submitted'
@@ -92,6 +98,15 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
       initialValues={{
         amount: '',
       }}
+      validate={values => {
+        return schema.validate(values)
+          .catch(function(err) {
+            let errors = {}
+            const { errors: errs, params: { path } } = err
+            errors[path] = errs[0]
+            throw errors
+          })
+      }}
       onSubmit={async (values, { resetForm }) => {
         const activeStep = stepperProgress(values, projectData, submissionState)
         if (!activeStep) return enableEthereum()
@@ -216,7 +231,7 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
                   bottomRightLabel={usdValue}
                   onChange={handleChange}
                   onBlur={handleBlur}
-                  errorBorder={touched.amount && errors.amount}
+                  errorText={touched.amount && errors.amount}
                   disabled={activeStep >= IS_SUBMITTED}
                   value={values.amount || ''}
                 />