add handling for authorization, transfer and confirmation

src/components/base/TextField.jsx

@@ -99,6 +99,7 @@ function Input({
   bottomRightLabel,
   bottomRightError,
   bottomLeftLabel,
+  disabled,
   placeholder,
   className,
   name,
@@ -128,6 +129,7 @@ function Input({
         endAdornment={endAdornment}
         placeholder={placeholder}
         name={name}
+        disabled={disabled}
         onChange={onChange}
         classes={{
           root: classes.root,

src/components/projects/FundProject.jsx

@@ -30,6 +30,12 @@ const { addGiverAndDonate } = LiquidPledging.methods
 const NOT_SUBMITTED = 'Not Submitted'
 const SUBMITTED = 'Submitted'
 const CONFIRMED = 'Confirmed'
+const APPROVED = 'Approved'
+const NOT_CONNECTED = 0
+const NOT_APPROVED = 1
+const IS_APPROVED = 2
+const IS_SUBMITTED = 3
+const IS_CONFIRMED = 4
 
 const useStyles = makeStyles(styles)
 const getProjectId = response => {
@@ -41,18 +47,19 @@ 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', 'Confirmation']
+const buttonText = ['Connect', 'Authorize Amount', 'Fund', 'Awaiting Confirmation', 'Confirmed']
 function stepperProgress(values, projectData, submissionState) {
-  console.log({values, projectData})
-  if (submissionState === CONFIRMED) return 4
-  if (submissionState === SUBMITTED) return 3
-  if (!projectData.account) return 0
+  if (submissionState === CONFIRMED) return IS_CONFIRMED
+  if (submissionState === SUBMITTED) return IS_SUBMITTED
+  if (submissionState === APPROVED) return IS_APPROVED
+  if (!projectData.account) return NOT_CONNECTED
   const { manifest: { goalToken }, authorization } = projectData
   const { amount } = values
   const { chainReadibleFn } = getTokenByAddress(goalToken)
   const weiAmount = amount ? chainReadibleFn(amount) : '0'
   const isAuthorized = toBN(authorization).gte(toBN(weiAmount))
-  if (!isAuthorized) return 1
-  return 2
+  if (!isAuthorized) return NOT_APPROVED
+  return IS_APPROVED
 }
 const optimisticUpdate = (client, pledgesInfo, weiAmount) => {
   const { __typename } = pledgesInfo
@@ -90,14 +97,24 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
         if (!activeStep) return enableEthereum()
         const { amount } = values
         const { goalToken } = manifest
-        const { chainReadibleFn } = getTokenByAddress(goalToken)
+        const { chainReadibleFn, setAllowance } = getTokenByAddress(goalToken)
         const userAccount = account ? account : await enableEthereum()
         const weiAmount = chainReadibleFn(amount)
+        if (activeStep === NOT_APPROVED) {
+          const toSend = setAllowance(weiAmount)
+          return toSend
+            .send({ from: account })
+            .then(async res => {
+              console.log({res})
+              setSubmissionState(APPROVED)
+            })
+            .catch(e => console.log({e}))
+        }
+
         const args = [projectId, userAccount, goalToken, weiAmount]
         const toSend = addGiverAndDonate(...args)
-        const estimatedGas = await toSend.estimateGas()
         toSend
-          .send({gas: estimatedGas + 100})
+          .send({from: account})
           .on('transactionHash', (hash) => {
             optimisticUpdate(client, pledgesInfo, weiAmount)
             setSubmissionState(SUBMITTED)
@@ -199,11 +216,12 @@ const SubmissionSection = ({ classes, projectData, projectId, profileData, start
                   bottomRightLabel={usdValue}
                   onChange={handleChange}
                   onBlur={handleBlur}
+                  disabled={activeStep >= IS_SUBMITTED}
                   value={values.amount || ''}
                 />
                 <div className={classes.amountText}>{getTokenLabel(manifest.goalToken)}</div>
               </div>}
-              <Button type="submit" color="primary" variant="contained" className={classnames(classes.formButton)}>{STEPS[activeStep]}</Button>
+              <Button disabled={activeStep >= IS_SUBMITTED} type="submit" color="primary" variant="contained" className={classnames(classes.formButton)}>{buttonText[activeStep]}</Button>
               <FundStepper steps={STEPS} activeStep={activeStep} />
             </div>}
           </form>

src/utils/currencies.js

@@ -19,7 +19,9 @@ export const currencies = [
     contract: SNT,
     humanReadibleFn: toEther,
     chainReadibleFn: toWei,
-    getAllowance: () => getLpAllowance(SNT)
+    getAllowance: () => getLpAllowance(SNT),
+    setAllowance: (amount) => transferApproval(SNT, amount)
+
   },
   {
     value: '0xf5dce57282a584d2746faf1593d3121fcac444dc',
@@ -29,7 +31,9 @@ export const currencies = [
     contract: cDAI,
     humanReadibleFn: compoundWhole,
     chainReadibleFn: compoundToChain,
-    getAllowance: () => getLpAllowance(cDAI)
+    getAllowance: () => getLpAllowance(cDAI),
+    setAllowance: (amount) => transferApproval(cDAI, amount)
+
   },
   {
     value: '0x4Ddc2D193948926D02f9B1fE9e1daa0718270ED5',
@@ -39,7 +43,8 @@ export const currencies = [
     contract: cETH,
     humanReadibleFn: compoundWhole,
     chainReadibleFn: compoundToChain,
-    getAllowance: () => getLpAllowance(cETH)
+    getAllowance: () => getLpAllowance(cETH),
+    setAllowance: (amount) => transferApproval(cETH, amount)
   },
   {
     value: '0xc02aaa39b223fe8d0a0e5c4f27ead9083c756cc2',
@@ -57,7 +62,9 @@ export const currencies = [
     contract: DAI,
     humanReadibleFn: toEther,
     chainReadibleFn: toWei,
-    getAllowance: () => getLpAllowance(DAI)
+    getAllowance: () => getLpAllowance(DAI),
+    setAllowance: (amount) => transferApproval(DAI, amount)
+
   }
 ]
 
@@ -83,6 +90,11 @@ export const getAllowanceFromAddress = tokenAddress => {
   return token.getAllowance()
 }
 
+export const setAllowanceFromAddress = async (tokenAddres, amount) => {
+  const token = getTokenByAddress(tokenAddres)
+  return token.setAllowance(amount)
+}
+
 export const getLpAllowance = async contract => {
   const { methods: { allowance } } = contract || SNT
   const account = await web3.eth.getCoinbase()
@@ -90,3 +102,12 @@ export const getLpAllowance = async contract => {
   const allowanceAmt = await allowance(account, spender).call()
   return allowanceAmt
 }
+
+export const transferApproval = (contract, amount) => {
+  const { methods: { approve } } = contract || SNT
+  const spender = LiquidPledging._address
+  return approve(
+    spender,
+    amount
+  )
+}