status-im/liquid-funding
2
0
Fork 0
mirror of https://github.com/status-im/liquid-funding.git synced 2025-02-19 22:58:16 +00:00
Code Issues Projects Releases Wiki Activity

display spinner on authorize amount

Browse Source
This commit is contained in:
Barry Gitarts 2019-09-24 12:24:38 -04:00
parent e86fb69c60
commit 7d8dc9dcff
1 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
src/components/projects/FundProject.jsx
View File

@ -35,6 +35,7 @@ const schema = Yup.object().shape({
const { addGiverAndDonate } = LiquidPledging.methods const { addGiverAndDonate } = LiquidPledging.methods
const NOT_SUBMITTED = 'Not Submitted' const NOT_SUBMITTED = 'Not Submitted'
const AUTHORIZATION_SUBMITTED = 'Authorization Submitted'
const SUBMITTED = 'Submitted' const SUBMITTED = 'Submitted'
const CONFIRMED = 'Confirmed' const CONFIRMED = 'Confirmed'
const APPROVED = 'Approved' const APPROVED = 'Approved'
@ -57,6 +58,7 @@ const STEPS = ['Connect', 'Authorize Amount', 'Fund', 'Confirm']
const buttonText = ['Connect', 'Authorize Amount', 'Fund', 'Submitted', 'Confirmed'] const buttonText = ['Connect', 'Authorize Amount', 'Fund', 'Submitted', 'Confirmed']
function stepperProgress(values, projectData, submissionState) { function stepperProgress(values, projectData, submissionState) {
if (submissionState === CONFIRMED) return IS_CONFIRMED if (submissionState === CONFIRMED) return IS_CONFIRMED
if (submissionState === AUTHORIZATION_SUBMITTED) return NOT_APPROVED
if (submissionState === SUBMITTED) return IS_SUBMITTED if (submissionState === SUBMITTED) return IS_SUBMITTED
if (submissionState === APPROVED) return IS_APPROVED if (submissionState === APPROVED) return IS_APPROVED
if (!projectData.account) return NOT_CONNECTED if (!projectData.account) return NOT_CONNECTED
@ -112,7 +114,7 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
throw errors throw errors
}) })
}} }}
onSubmit={async (values) => { onSubmit={async (values, { resetForm }) => {
const activeStep = stepperProgress(values, projectData, submissionState) const activeStep = stepperProgress(values, projectData, submissionState)
if (!activeStep) return enableEthereum() if (!activeStep) return enableEthereum()
const { amount } = values const { amount } = values
@ -122,13 +124,14 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
const weiAmount = chainReadibleFn(amount) const weiAmount = chainReadibleFn(amount)
if (activeStep === NOT_APPROVED) { if (activeStep === NOT_APPROVED) {
const toSend = setAllowance(weiAmount) const toSend = setAllowance(weiAmount)
setSubmissionState(AUTHORIZATION_SUBMITTED)
return toSend return toSend
.send({ from: account }) .send({ from: account })
.then(async res => { .then(async res => {
console.log({res}) console.log({res})
setSubmissionState(APPROVED) setSubmissionState(APPROVED)
}) })
.catch(e => console.log({e})) .catch(e => console.log({e})).finally(() => resetForm())
} }
const args = [projectId, userAccount, goalToken, weiAmount] const args = [projectId, userAccount, goalToken, weiAmount]
@ -168,6 +171,8 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
const { firstHalf, secondHalf, fullWidth } = classes const { firstHalf, secondHalf, fullWidth } = classes
const usdValue = manifest ? convertTokenAmountUsd(manifest.goalToken, values.amount, prices) : 0 const usdValue = manifest ? convertTokenAmountUsd(manifest.goalToken, values.amount, prices) : 0
const activeStep = stepperProgress(values, projectData, submissionState) const activeStep = stepperProgress(values, projectData, submissionState)
const showSpinner = activeStep === IS_SUBMITTED || submissionState === AUTHORIZATION_SUBMITTED
const disableButton = submissionState === AUTHORIZATION_SUBMITTED || activeStep >= IS_SUBMITTED
return ( return (
<form onSubmit={handleSubmit} className={classes.submissionRoot}> <form onSubmit={handleSubmit} className={classes.submissionRoot}>
@ -241,10 +246,10 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
/> />
<div className={classes.amountText}>{getTokenLabel(manifest.goalToken)}</div> <div className={classes.amountText}>{getTokenLabel(manifest.goalToken)}</div>
</div>} </div>}
<Button disabled={activeStep >= IS_SUBMITTED} type="submit" variant="contained" className={classnames(classes.formButton)} classes={{ disabled: classes.disabledButton }}> <Button disabled={disableButton} type="submit" variant="contained" className={classnames(classes.formButton)} classes={{ disabled: classes.disabledButton }}>
<div className={classes.buttonContent}> <div className={classes.buttonContent}>
{activeStep === IS_CONFIRMED && <Check className={classes.check} />} {activeStep === IS_CONFIRMED && <Check className={classes.check} />}
{activeStep === IS_SUBMITTED && <CircularProgress className={classes.progress} size={24} disableShrink />} {showSpinner && <CircularProgress className={classes.progress} size={24} disableShrink />}
{buttonText[activeStep]} {buttonText[activeStep]}
</div> </div>
</Button> </Button>