diff --git a/app/components/TransfersGraph.jsx b/app/components/TransfersGraph.jsx index 4364958..fb0b7d5 100644 --- a/app/components/TransfersGraph.jsx +++ b/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 ( { ) } -export default TransfersGraph +export default memo(TransfersGraph) diff --git a/app/dapp.js b/app/dapp.js index b3ed927..5f7c6a9 100644 --- a/app/dapp.js +++ b/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 (
- {transfers && } + {transfers && } {!!allPledges.length && } {!!fundProfiles.length && } diff --git a/app/utils/events.js b/app/utils/events.js index 56006a9..bec9a8a 100644 --- a/app/utils/events.js +++ b/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()])