update client state after pledges transfer

app/components/PledgesTable.jsx

@@ -27,11 +27,15 @@ class PledgesTable extends PureComponent {
   }
 
   render() {
-    const { data } = this.props
+    const { data, transferPledgeAmounts } = this.props
     const { row } = this.state
     return (
       <Fragment>
-        <TransferDialog row={row} handleClose={this.handleClose} />
+        <TransferDialog
+          row={row}
+          handleClose={this.handleClose}
+          transferPledgeAmounts={transferPledgeAmounts}
+        />
         <MaterialTable
           columns={[
             { title: 'Pledge Id', field: 'id', type: 'numeric' },
@@ -50,7 +54,6 @@ class PledgesTable extends PureComponent {
               tooltip: 'Transfer funds',
               onClick: (event, rowData) => {
                 this.handleClickOpen(rowData)
-                console.log({event, rowData})
               }
             }
           ]}

app/components/TransferDialog.jsx

@@ -10,10 +10,11 @@ import DialogContentText from '@material-ui/core/DialogContentText'
 import DialogTitle from '@material-ui/core/DialogTitle'
 import { getTokenLabel } from '../utils/currencies'
 import { toWei } from '../utils/conversions'
+import { FundingContext } from '../context'
 
 const { transfer } = LiquidPledgingMock.methods
 
-const TransferDialog = ({ row, handleClose }) => (
+const TransferDialog = ({ row, handleClose, transferPledgeAmounts }) => (
   <Formik
     initialValues={{}}
     onSubmit={async (values, { setSubmitting, resetForm, setStatus }) => {
@@ -23,13 +24,15 @@ const TransferDialog = ({ row, handleClose }) => (
       transfer(...args)
         .send()
         .then(res => {
-          console.log({res})
+          const { events: { Transfer: { returnValues } } } = res
+          transferPledgeAmounts(returnValues)
           handleClose()
 
         })
         .catch(e => {
           console.log({e})
         })
+        .finally(() => { resetForm() })
     }}
   >
     {({

app/context.js

@@ -0,0 +1,3 @@
+import React from 'react'
+
+export const FundingContext = React.createContext('funding')

app/dapp.js

@@ -11,7 +11,8 @@ import FunderProfilesTable from './components/FunderProfilesTable'
 import PledgesTable from './components/PledgesTable'
 import { initVaultAndLP, vaultPledgingNeedsInit, standardTokenApproval, getLpAllowance } from './utils/initialize'
 import { getProfileEvents, formatFundProfileEvent } from './utils/events';
-import { getAllPledges, appendToExistingPledges } from './utils/pledges';
+import { getAllPledges, appendToExistingPledges, transferBetweenPledges } from './utils/pledges';
+import { FundingContext } from './context'
 
 const { getNetworkType } = web3.eth.net;
 
@@ -57,23 +58,30 @@ class App extends React.Component {
     appendToExistingPledges(allPledges, this.setState)
   }
 
+  transferPledgeAmounts = tx => {
+    transferBetweenPledges(this.setState.bind(this), tx)
+  }
+
   render() {
     const { needsInit, lpAllowance, fundProfiles, allPledges } = this.state;
-    const { appendFundProfile, appendPledges } = this;
+    const { appendFundProfile, appendPledges, transferPledgeAmounts } = this
+    const fundingContext = { transferPledgeAmounts }
     return (
-      <div>
-        {allPledges && <PledgesTable data={allPledges} />}
-        {fundProfiles && <FunderProfilesTable data={fundProfiles} />}
-        <AddFunder appendFundProfile={appendFundProfile} />
-        <Divider variant="middle" />
-        <CreateFunding refreshTable={appendPledges} />
-        {needsInit && <Button variant="outlined" color="secondary" onClick={initVaultAndLP}>
-          Initialize Contracts
-        </Button>}
-        <Button variant="outlined" color="primary" onClick={standardTokenApproval}>
-          GIVE VAULT TOKEN APPROVAL
-        </Button>
-      </div>
+      <FundingContext.Provider value={fundingContext}>
+        <div>
+          {allPledges && <PledgesTable data={allPledges} transferPledgeAmounts={transferPledgeAmounts} />}
+          {fundProfiles && <FunderProfilesTable data={fundProfiles} />}
+          <AddFunder appendFundProfile={appendFundProfile} />
+          <Divider variant="middle" />
+          <CreateFunding refreshTable={appendPledges} />
+          {needsInit && <Button variant="outlined" color="secondary" onClick={initVaultAndLP}>
+            Initialize Contracts
+          </Button>}
+          <Button variant="outlined" color="primary" onClick={standardTokenApproval}>
+            GIVE VAULT TOKEN APPROVAL
+          </Button>
+        </div>
+      </FundingContext.Provider>
     )
   }
 }

app/utils/pledges.js

@@ -26,9 +26,32 @@ export const appendToExistingPledges = async (pledges, setState) => {
     setState((state) => ({
       ...state,
       allPledges: {
-        ...state.pledges,
+        ...state.allPledges,
         ...newPledges
       }
     }))
   }
 }
+
+export const transferBetweenPledges = (setState, tx) => {
+  const { from, to, amount } = tx
+  setState((state) => {
+    const { allPledges } = state;
+    const updatedPledges = allPledges.map(pledge => {
+      if (pledge.id === Number(from)) {
+        pledge.amount = (BigInt(pledge.amount) - BigInt(amount)).toString()
+        return pledge
+      }
+      if (pledge.id === Number(to)) {
+        pledge.amount = (BigInt(pledge.amount) + BigInt(amount)).toString()
+        return pledge
+      }
+      return pledge
+    })
+    console.log({updatedPledges, tx})
+    return {
+      ...state,
+      allPledges: [ ...updatedPledges ]
+    }
+  })
+}