display funded withdraw net summary per token

app/components/dashboard/FundingSummary.jsx

@@ -5,8 +5,7 @@ import Card from '@material-ui/core/Card'
 import CardContent from '@material-ui/core/CardContent'
 import Typography from '@material-ui/core/Typography'
 import { FundingContext } from '../../context'
-import { getDepositsTotal } from '../../selectors/pledging'
-import { getAuthorizations } from '../../selectors/vault'
+import { getDepositWithdrawTotals } from '../../selectors/pledging'
 
 const styles = {
   card: {
@@ -30,21 +29,31 @@ function SimpleCard(props) {
 
   return (
     <FundingContext.Consumer>
-      {({ allPledges, allLpEvents }) =>
+      {({ allPledges, allLpEvents, vaultEvents }) =>
         <Card className={classes.card}>
           <CardContent>
             <Typography variant="h5" component="h2">
               {title}
             </Typography>
             {!!allLpEvents &&
-             Object.entries(getDepositsTotal({ allLpEvents, allPledges })).map(deposit => {
-               const [name, amount] = deposit
-               return (
-                 <Typography key={name} className={classes.pos} color="textSecondary">
-                   Total Funded: {amount} {name}
-                 </Typography>
-               )
-             })}
+             Object.entries(getDepositWithdrawTotals({ allLpEvents, allPledges, vaultEvents }))
+                   .map(token => {
+                     const [name, amounts] = token
+                     const { deposits, withdraws } = amounts
+                     return (
+                       <div key={name}>
+                         <Typography key={name + 'withdraw'} className={classes.pos} color="textSecondary">
+                           Funded: {deposits} {name}
+                         </Typography>
+                         <Typography key={name + 'deposit'} className={classes.pos} color="textSecondary">
+                           Withdrawn: {withdraws} {name}
+                         </Typography>
+                         <Typography key={name + 'total'} className={classes.pos} color="textSecondary">
+                           Net: {Number(deposits) - Number(withdraws)} {name}
+                         </Typography>
+                       </div>
+                     )
+                   })}
           </CardContent>
         </Card>
       }

app/dapp.js

@@ -21,7 +21,8 @@ class App extends React.Component {
     allPledges: [],
     needsInit: true,
     transfers: [],
-    allLpEvents: []
+    allLpEvents: [],
+    vaultEvents: []
   };
 
   componentDidMount(){

app/selectors/pledging.js

@@ -5,6 +5,9 @@ import { getTokenLabel } from '../utils/currencies'
 export const getTransfers = state => state.allLpEvents.filter(
   obj => obj.event === 'Transfer'
 )
+const getWithdraws = state => state.vaultEvents.filter(
+  event => event.event === 'AuthorizePayment'
+)
 export const getPledges = state => state.allPledges
 
 export const getTransfersMemo = createSelector(
@@ -26,25 +29,37 @@ export const sumDeposits = deposits => deposits.reduce(
   BigInt(0)
 ).toString()
 
-const formatAndSumDeposits = (deposits, pledges) => {
+const formatAndSumDepositWithdraws = (deposits, pledges, withdraws) => {
   const tokens = {}
   deposits.forEach(deposit => {
     const { amount, to } = deposit.returnValues
     const { token } = pledges.find(p => Number(p.id) === Number(to))
     const tokenName = getTokenLabel(token)
-    if (tokens[tokenName]) tokens[tokenName] = BigInt(tokens[tokenName]) + BigInt(amount)
-    else tokens[tokenName] = BigInt(amount)
+    if (tokens[tokenName]) tokens[tokenName]['deposits'] = BigInt(tokens[tokenName]['deposits']) + BigInt(amount)
+    else tokens[tokenName] = { 'deposits': BigInt(amount) }
   })
+
+  withdraws
+    .filter(w => !isNaN(Number(w.returnValues.ref.slice(2))))
+    .forEach(withdraw => {
+      const { returnValues: { amount, token } } = withdraw
+      const tokenName = getTokenLabel(token)
+      if (tokens[tokenName]['withdraws']) tokens[tokenName]['withdraws'] = BigInt(tokens[tokenName]['withdraws']) + BigInt(amount)
+      else tokens[tokenName]['withdraws'] = BigInt(amount)
+    })
+
   Object
     .entries(tokens)
     .forEach(token => {
       const [key, value] = token
-      tokens[key] = toEther(value.toString())
+      tokens[key]['deposits'] = toEther(value['deposits'].toString())
+      if (tokens[key]['withdraws']) tokens[key]['withdraws'] = toEther(value['withdraws'].toString())
     })
   return tokens
 }
-export const getDepositsTotal = createSelector(
+export const getDepositWithdrawTotals = createSelector(
   getDepositsSelector,
   getPledges,
-  formatAndSumDeposits
+  getWithdraws,
+  formatAndSumDepositWithdraws
 )