add confirmation display on button

add check to button

src/components/base/icons/AnimateCheck.jsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import classnames from 'classnames'
+import { makeStyles } from '@material-ui/core/styles'
+
+const styles = () => ({
+  check: {
+    fill: 'none',
+    stroke: 'green',
+    strokeWidth: 20,
+    strokeLinecap: 'round',
+    strokeDasharray: 180,
+    strokeDashoffset: 180,
+    animation: '$draw 2s infinite ease',
+  },
+  '@keyframes draw': {
+    to: {
+      strokeDashoffset: 0,
+    }
+  }
+})
+const useStyles = makeStyles(styles)
+
+const SVG = () => {
+  const classes = useStyles()
+
+  return (
+    <svg viewBox="0 0 100 100">
+      <path x="0" y="0" width="100%" height="100%" className={classnames(classes.check)} d="M10,50 l25,40 l95,-70" />
+    </svg>
+  )
+}
+
+export default SVG

src/components/projects/FundProject.jsx

@@ -10,6 +10,7 @@ import Typography from '@material-ui/core/Typography'
 import { FundingContext } from '../../context'
 import TextDisplay from '../base/TextDisplay'
 import Icon from '../base/icons/IconByName'
+import Check from '@material-ui/icons/Check'
 import * as Yup from 'yup'
 import { convertTokenAmountUsd, formatPercent } from '../../utils/prices'
 import { getAmountFromPledgesInfo } from '../../utils/pledges'
@@ -53,7 +54,7 @@ const addProjectSucessMsg = response => {
   return `Project created with ID of ${idProject}, will redirect to your new project page in a few seconds`
 }
 const STEPS = ['Connect', 'Authorize Amount', 'Fund', 'Confirm']
-const buttonText = ['Connect', 'Authorize Amount', 'Fund', 'Awaiting Confirmation', 'Confirmed']
+const buttonText = ['Connect', 'Authorize Amount', 'Fund', 'Submitted', 'Confirmed']
 function stepperProgress(values, projectData, submissionState) {
   if (submissionState === CONFIRMED) return IS_CONFIRMED
   if (submissionState === SUBMITTED) return IS_SUBMITTED
@@ -111,7 +112,7 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
             throw errors
           })
       }}
-      onSubmit={async (values, { resetForm }) => {
+      onSubmit={async (values) => {
         const activeStep = stepperProgress(values, projectData, submissionState)
         if (!activeStep) return enableEthereum()
         const { amount } = values
@@ -151,10 +152,9 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
           })
           .finally(() => {
             client.resetStore()
-            resetForm()
           })
 
-        console.log({amount, resetForm, getProjectId, addProjectSucessMsg, account, openSnackBar})
+        console.log({amount, getProjectId, addProjectSucessMsg, account, openSnackBar})
       }}
     >
       {({
@@ -241,9 +241,10 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
                 />
                 <div className={classes.amountText}>{getTokenLabel(manifest.goalToken)}</div>
               </div>}
-              <Button disabled={activeStep >= IS_SUBMITTED} type="submit" color="primary" variant="contained" className={classnames(classes.formButton)}>
+              <Button disabled={activeStep >= IS_SUBMITTED} type="submit" variant="contained" className={classnames(classes.formButton)} classes={{ disabled: classes.disabledButton }}>
                 <div className={classes.buttonContent}>
-                  <CircularProgress className={classes.progress} size={24} disableShrink />
+                  {activeStep === IS_CONFIRMED && <Check className={classes.check} />}
+                  {activeStep === IS_SUBMITTED && <CircularProgress className={classes.progress} size={24} disableShrink />}
                   {buttonText[activeStep]}
                 </div>
               </Button>

src/components/projects/styles/FundProject.js

@@ -19,6 +19,9 @@ const styles = theme => ({
   amountInput: {
     textAlign: 'right'
   },
+  check: {
+    color: theme.palette.primary[500]
+  },
   root: {
     display: 'grid',
     gridTemplateColumns: 'repeat(12, [col] 1fr)',
@@ -50,7 +53,7 @@ const styles = theme => ({
     gridColumnEnd: 13
   },
   progress: {
-    color: 'white',
+    color: theme.palette.primary[500],
     animationDuration: '350ms'
   },
   submissionRoot: {
@@ -78,7 +81,15 @@ const styles = theme => ({
     gridColumnEnd: '13',
     height: '50px',
     marginTop: '1.5rem',
-    borderRadius: '8px'
+    borderRadius: '8px',
+    backgroundColor: theme.palette.primary[500],
+    color: 'white',
+    '&:hover': {
+      backgroundColor: "#34489f",
+    }
+  },
+  disabledButton: {
+    backgroundColor: 'none'
   },
   buttonContent: {
     display: 'flex',

src/index.js

@@ -25,6 +25,9 @@ const theme = createMuiTheme({
     },
     text: {
       grey: '#939BA1'
+    },
+    action: {
+      disabledBackground: '#FAFAFA'
     }
   }
 });