add withdraws to transfer graph to map funds exiting

app/components/TransfersGraph.jsx

@@ -1,9 +1,10 @@
 import Cytoscape from 'cytoscape'
 import dagre from 'cytoscape-dagre'
-import React, { Fragment } from 'react'
+import React, { Fragment, memo } from 'react'
 import CytoscapeComponent from 'react-cytoscapejs'
 import { uniq } from 'ramda'
 import { toEther } from '../utils/conversions'
+import { getTokenLabel } from '../utils/currencies'
 
 Cytoscape.use(dagre)
 const layout = { name: 'dagre' }
@@ -32,9 +33,11 @@ const stylesheet = [
   }
 ]
 
-const createElements = transfers => {
+const getAuthorizations = events => events.filter(event => event.event === 'AuthorizePayment')
+const createElements = (transfers, vaultEvents) => {
   const nodes = []
   const edges = []
+  const authorizations = getAuthorizations(vaultEvents)
   transfers.forEach(transfer => {
     const { returnValues: { amount, from, to } } = transfer
     nodes.push({
@@ -47,17 +50,29 @@ const createElements = transfers => {
       data: { source: from === '0' ? 'Create Funding' : from, target: to, label: toEther(amount) }
     })
   })
+  authorizations.forEach(auth => {
+    const { returnValues: { amount, dest, token, ref } } = auth
+    const reference = Number(ref.slice(2)).toString()
+    if (!isNaN(reference)) {
+      nodes.push({
+        data: { id: dest, label: dest }
+      })
+      edges.push({
+        data: { source: reference, target: dest, label: `Withdraw ${toEther(amount)} ${getTokenLabel(token)}`}
+      })
+    }
+  })
   return [
     ...uniq(nodes),
     ...edges
   ]
 }
 
-const TransfersGraph = ({ transfers }) => {
+const TransfersGraph = ({ transfers, vaultEvents }) => {
   return (
     <Fragment>
       <CytoscapeComponent
-        elements={createElements(transfers)}
+        elements={createElements(transfers, vaultEvents)}
         style={ { width: '100%', height: '600px', fontSize: '14px' } }
         stylesheet={stylesheet}
         layout={layout}
@@ -66,4 +81,4 @@ const TransfersGraph = ({ transfers }) => {
   )
 }
 
-export default TransfersGraph
+export default memo(TransfersGraph)

app/dapp.js

@@ -10,7 +10,7 @@ import CreateFunding from './components/CreateFunding';
 import FunderProfilesTable from './components/FunderProfilesTable'
 import PledgesTable from './components/PledgesTable'
 import { initVaultAndLP, vaultPledgingNeedsInit, standardTokenApproval, getLpAllowance } from './utils/initialize'
-import { getAllLPEvents, getProfileEvents, formatFundProfileEvent, getAuthorizedPayments } from './utils/events'
+import { getAllLPEvents, getAllVaultEvents, getProfileEvents, formatFundProfileEvent, getAuthorizedPayments } from './utils/events'
 import { getAllPledges, appendToExistingPledges, transferBetweenPledges } from './utils/pledges';
 import { FundingContext } from './context'
 import { cancelProfile } from './utils/fundProfiles'
@@ -40,6 +40,7 @@ class App extends React.Component {
           const authorizedPayments = await getAuthorizedPayments()
           const account = await web3.eth.getCoinbase()
           const allLpEvents = await getAllLPEvents()
+          const allVaultEvents = await getAllVaultEvents()
           const transfers = allLpEvents.filter(obj => obj.event === 'Transfer')
           this.setState({
             account,
@@ -51,6 +52,7 @@ class App extends React.Component {
             allPledges,
             authorizedPayments,
             allLpEvents,
+            allVaultEvents,
             transfers
           })
         }
@@ -83,13 +85,13 @@ class App extends React.Component {
   }
 
   render() {
-    const { account, needsInit, lpAllowance, fundProfiles, allPledges, authorizedPayments, transfers } = this.state
+    const { account, needsInit, lpAllowance, fundProfiles, allPledges, authorizedPayments, transfers, allVaultEvents } = this.state
     const { appendFundProfile, appendPledges, transferPledgeAmounts, cancelFundProfile } = this
     const fundingContext = { account, transferPledgeAmounts, authorizedPayments }
     return (
       <FundingContext.Provider value={fundingContext}>
         <div>
-          {transfers && <TransfersGraph transfers={transfers} />}
+          {transfers && <TransfersGraph transfers={transfers} vaultEvents={allVaultEvents} />}
           {!!allPledges.length && <PledgesTable data={allPledges} transferPledgeAmounts={transferPledgeAmounts} fundProfiles={fundProfiles} />}
           {!!fundProfiles.length && <FunderProfilesTable data={fundProfiles} cancelFundProfile={cancelFundProfile}/>}
           <AddFunder appendFundProfile={appendFundProfile} />

app/utils/events.js

@@ -30,12 +30,13 @@ const formatVaultEvent = async event => {
   }
 }
 
-const getPastVaultEvents = async event => {
+const getPastVaultEvents = async (event, raw = false) => {
   const events = await LPVault.getPastEvents(event, {
     addr: await web3.eth.getCoinbase(),
     fromBlock: 0,
     toBlock: 'latest'
   })
+  if (raw) return events
   const formattedEvents = await Promise.all(
     events.map(formatVaultEvent)
   )
@@ -86,6 +87,7 @@ export const getDelegateProfiles = async () => await getPastEvents(DELEGATE_ADDE
 export const getProjectProfiles = async () => await getPastEvents(PROJECT_ADDED)
 export const getAllLPEvents = async () => await getPastEvents(ALL_EVENTS, true)
 export const getAuthorizedPayments = async () => getPastVaultEvents(AUTHORIZE_PAYMENT)
+export const getAllVaultEvents = async () => getPastVaultEvents(ALL_EVENTS,true)
 export const getProfileEvents = async () => {
   const [ funderProfiles, delegateProfiles, projectProfiles]
         = await Promise.all([getFunderProfiles(), getDelegateProfiles(), getProjectProfiles()])