add confirm payment

app/components/PledgesTable.jsx

@@ -7,12 +7,18 @@ import WithdrawCard from './table/WithdrawCard'
 
 const convertToHours = seconds => seconds / 60 / 60
 const projectText = project => project === '0' ? 'N/A' : project
+const pledgeStateMap = {
+  0: 'Pledged',
+  1: 'Paying',
+  2: 'Paid'
+}
 const formatField = field => ({
   ...field,
   commitTime: convertToHours(field.commitTime),
   amount: toEther(field.amount),
   token: getTokenLabel(field.token),
-  intendedProject: projectText(field.intendedProject)
+  intendedProject: projectText(field.intendedProject),
+  pledgeState: pledgeStateMap[field.pledgeState]
 })
 class PledgesTable extends PureComponent {
   state = {
@@ -48,6 +54,7 @@ class PledgesTable extends PureComponent {
             { title: 'Commit Time', field: 'commitTime', type: 'numeric' },
             { title: 'Number of Delegates', field: 'nDelegates', type: 'numeric' },
             { title: 'Intended Project', field: 'intendedProject' },
+            { title: 'Pledge State', field: 'pledgeState' },
           ]}
           data={data.map(formatField)}
           title="Pledges"
@@ -69,7 +76,7 @@ class PledgesTable extends PureComponent {
             }
           ]}
         />
-        {rowData && <WithdrawCard  rowData={rowData} clearRowData={this.clearRowData} />}
+        {rowData && <WithdrawCard rowData={rowData} clearRowData={this.clearRowData} />}
       </Fragment>
     )
   }

app/components/table/WithdrawCard.jsx

@@ -12,10 +12,12 @@ import indigo from '@material-ui/core/colors/indigo'
 import blueGrey from '@material-ui/core/colors/blueGrey'
 import Collapse from '@material-ui/core/Collapse'
 import LiquidPledgingMock from 'Embark/contracts/LiquidPledgingMock'
+import LPVault from 'Embark/contracts/LPVault'
 import { getTokenLabel } from '../../utils/currencies'
 import { toWei } from '../../utils/conversions'
 
 const { withdraw } = LiquidPledgingMock.methods
+const { confirmPayment } = LPVault.methods
 
 const styles = {
   card: {
@@ -54,13 +56,15 @@ class Withdraw extends PureComponent {
   render() {
     const { classes, rowData } = this.props
     const { show } = this.state
+    const isPaying = rowData[7] === "1"
     return (
       <Formik
         initialValues={{}}
         onSubmit={async (values, { setSubmitting, resetForm, setStatus }) => {
           const { amount } = values
-          const args = [rowData.id, toWei(amount)]
-          withdraw(...args)
+          const args = isPaying ? [rowData.id] : [rowData.id, toWei(amount)]
+          const sendFn = isPaying ? confirmPayment : withdraw
+          sendFn(...args)
             .send()
             .then(res => {
               console.log({res})
@@ -88,10 +92,10 @@ class Withdraw extends PureComponent {
             <form autoComplete="off" onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', marginBottom: '0px' }}>
               <Card className={classes.card} elevation={0}>
                 <CardContent>
-                  <Typography variant="h5" component="h2">
-                    {`Withdraw ${values.amount || ''}  ${values.amount ? getTokenLabel(rowData[6]) : ''} from Pledge ${rowData.id}`}
+                  <Typography variant="h6" component="h2">
+                    {`${isPaying ? 'Confirm' : ''} Withdraw${isPaying ? 'al' : ''} ${values.amount || ''}  ${values.amount ? getTokenLabel(rowData[6]) : ''} from Pledge ${rowData.id}`}
                   </Typography>
-                  <TextField
+                  {!isPaying && <TextField
                     className={classes.amount}
                     id="amount"
                     name="amount"
@@ -102,11 +106,11 @@ class Withdraw extends PureComponent {
                     onChange={handleChange}
                     onBlur={handleBlur}
                     value={values.amount || ''}
-                  />
+                  />}
                 </CardContent>
                 <CardActions>
-                  <Button size="large" variant="outlined" onClick={this.close}>Cancel</Button>
-                  <Button size="large" variant="outlined" color="primary" type="submit">Withdraw</Button>
+                  <Button size="large" onClick={this.close}>Cancel</Button>
+                  <Button size="large" color="primary" type="submit">{isPaying ? 'Confirm' : 'Withdraw'}</Button>
                 </CardActions>
               </Card>
             </form>

test/NormalOperation.js

@@ -306,7 +306,7 @@ describe('LiquidPledging test', function() {
     assert.equal(res7.commitTime, 0);
     assert.equal(res7.oldPledge, 2);
     assert.equal(res7.token, giver1Token.$address);
-    assert.equal(res7.pledgeState, 2); // Pending
+    assert.equal(res7.pledgeState, 2); // Paid
   });
   it('Admin of the project1 should be able to cancel project1', async () => {
     await liquidPledging.cancelProject(3, { from: adminProject1, $extraGas: 100000 });