add transfer to graph
This commit is contained in:
Barry Gitarts
parent
cca2ecddc7
commit
cac3d81559
|
|
@ -2,6 +2,8 @@ import Cytoscape from 'cytoscape'
|
|||
import dagre from 'cytoscape-dagre'
|
||||
import React, { Fragment } from 'react'
|
||||
import CytoscapeComponent from 'react-cytoscapejs'
|
||||
import { uniq } from 'ramda'
|
||||
import { toEther } from '../utils/conversions'
|
||||
|
||||
Cytoscape.use(dagre)
|
||||
const layout = { name: 'dagre' }
|
||||
|
|
@ -30,19 +32,32 @@ const stylesheet = [
|
|||
}
|
||||
]
|
||||
|
||||
const TransfersGraph = () => {
|
||||
const elements = [
|
||||
{ data: { id: 'one', label: 'Node 1' } },
|
||||
{ data: { id: 'two', label: 'Node 2' } },
|
||||
{ data: { id: 'three', label: 'Node 3' } },
|
||||
{ data: { source: 'one', target: 'two', label: 'Edge from Node1 to Node2' } },
|
||||
{ data: { source: 'one', target: 'three', label: 'Edge from Node1 to Node3' } }
|
||||
const createElements = transfers => {
|
||||
const nodes = []
|
||||
const edges = []
|
||||
transfers.forEach(transfer => {
|
||||
const { returnValues: { amount, from, to } } = transfer
|
||||
nodes.push({
|
||||
data: { id: from === '0' ? 'Create Funding' : from, label: `Pledge Id ${from}` }
|
||||
})
|
||||
nodes.push({
|
||||
data: { id: to, label: `Pledge Id ${to}` }
|
||||
})
|
||||
edges.push({
|
||||
data: { source: from === '0' ? 'Create Funding' : from, target: to, label: toEther(amount) }
|
||||
})
|
||||
})
|
||||
return [
|
||||
...uniq(nodes),
|
||||
...edges
|
||||
]
|
||||
}
|
||||
|
||||
const TransfersGraph = ({ transfers }) => {
|
||||
return (
|
||||
<Fragment>
|
||||
<CytoscapeComponent
|
||||
elements={elements}
|
||||
elements={createElements(transfers)}
|
||||
style={ { width: '100%', height: '600px', fontSize: '14px' } }
|
||||
stylesheet={stylesheet}
|
||||
layout={layout}
|
||||
|
|
|
|||
14
app/dapp.js
14
app/dapp.js
|
|
@ -10,13 +10,14 @@ import CreateFunding from './components/CreateFunding';
|
|||
import FunderProfilesTable from './components/FunderProfilesTable'
|
||||
import PledgesTable from './components/PledgesTable'
|
||||
import { initVaultAndLP, vaultPledgingNeedsInit, standardTokenApproval, getLpAllowance } from './utils/initialize'
|
||||
import { getProfileEvents, formatFundProfileEvent, getAuthorizedPayments } from './utils/events';
|
||||
import { getAllLPEvents, getProfileEvents, formatFundProfileEvent, getAuthorizedPayments } from './utils/events'
|
||||
import { getAllPledges, appendToExistingPledges, transferBetweenPledges } from './utils/pledges';
|
||||
import { FundingContext } from './context'
|
||||
import { cancelProfile } from './utils/fundProfiles'
|
||||
import SetMockedTime from './components/SetMockedTime'
|
||||
import TransfersGraph from './components/TransfersGraph'
|
||||
|
||||
const { getNetworkType } = web3.eth.net;
|
||||
const { getNetworkType } = web3.eth.net
|
||||
|
||||
class App extends React.Component {
|
||||
state = {
|
||||
|
|
@ -38,6 +39,8 @@ class App extends React.Component {
|
|||
const allPledges = await getAllPledges()
|
||||
const authorizedPayments = await getAuthorizedPayments()
|
||||
const account = await web3.eth.getCoinbase()
|
||||
const allLpEvents = await getAllLPEvents()
|
||||
const transfers = allLpEvents.filter(obj => obj.event === 'Transfer')
|
||||
this.setState({
|
||||
account,
|
||||
network,
|
||||
|
|
@ -46,7 +49,9 @@ class App extends React.Component {
|
|||
lpAllowance,
|
||||
fundProfiles,
|
||||
allPledges,
|
||||
authorizedPayments
|
||||
authorizedPayments,
|
||||
allLpEvents,
|
||||
transfers
|
||||
})
|
||||
}
|
||||
});
|
||||
|
|
@ -78,12 +83,13 @@ class App extends React.Component {
|
|||
}
|
||||
|
||||
render() {
|
||||
const { account, needsInit, lpAllowance, fundProfiles, allPledges, authorizedPayments } = this.state;
|
||||
const { account, needsInit, lpAllowance, fundProfiles, allPledges, authorizedPayments, transfers } = this.state
|
||||
const { appendFundProfile, appendPledges, transferPledgeAmounts, cancelFundProfile } = this
|
||||
const fundingContext = { account, transferPledgeAmounts, authorizedPayments }
|
||||
return (
|
||||
<FundingContext.Provider value={fundingContext}>
|
||||
<div>
|
||||
{transfers && <TransfersGraph transfers={transfers} />}
|
||||
{!!allPledges.length && <PledgesTable data={allPledges} transferPledgeAmounts={transferPledgeAmounts} fundProfiles={fundProfiles} />}
|
||||
{!!fundProfiles.length && <FunderProfilesTable data={fundProfiles} cancelFundProfile={cancelFundProfile}/>}
|
||||
<AddFunder appendFundProfile={appendFundProfile} />
|
||||
|
|
|
|||
50
yarn.lock
50
yarn.lock
|
|
@ -1940,6 +1940,34 @@ currently-unhandled@^0.4.1:
|
|||
dependencies:
|
||||
array-find-index "^1.0.1"
|
||||
|
||||
cytoscape-cose-bilkent@^4.0.0:
|
||||
version "4.0.0"
|
||||
resolved "https://registry.yarnpkg.com/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.0.0.tgz#5f0afbe5c55a7a026442b756ca388ce77c262967"
|
||||
integrity sha1-Xwr75cVaegJkQrdWyjiM53wmKWc=
|
||||
|
||||
cytoscape-dagre@^2.2.2:
|
||||
version "2.2.2"
|
||||
resolved "https://registry.yarnpkg.com/cytoscape-dagre/-/cytoscape-dagre-2.2.2.tgz#5f32a85c0ba835f167efee531df9e89ac58ff411"
|
||||
integrity sha512-zsg36qNwua/L2stJSWkcbSDcvW3E6VZf6KRe6aLnQJxuXuz89tMqI5EVYVKEcNBgzTEzFMFv0PE3T0nD4m6VDw==
|
||||
dependencies:
|
||||
dagre "^0.8.2"
|
||||
|
||||
cytoscape@^3.2.19, cytoscape@^3.3.0:
|
||||
version "3.3.0"
|
||||
resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.3.0.tgz#21ac2788978e38da487c4a1f38fed3c87a76035f"
|
||||
integrity sha512-iz8GG1O9TwcUs1/OISSqgy0nldLSF7RmOkKElc8pS1JtNrxDcIDW+/2WYjZJfMyu09qMFtyfwbLF7ND8LwnEYQ==
|
||||
dependencies:
|
||||
heap "^0.2.6"
|
||||
lodash.debounce "^4.0.8"
|
||||
|
||||
dagre@^0.8.2:
|
||||
version "0.8.4"
|
||||
resolved "https://registry.yarnpkg.com/dagre/-/dagre-0.8.4.tgz#26b9fb8f7bdc60c6110a0458c375261836786061"
|
||||
integrity sha512-Dj0csFDrWYKdavwROb9FccHfTC4fJbyF/oJdL9LNZJ8WUvl968P6PAKEriGqfbdArVJEmmfA+UyumgWEwcHU6A==
|
||||
dependencies:
|
||||
graphlib "^2.1.7"
|
||||
lodash "^4.17.4"
|
||||
|
||||
damerau-levenshtein@^1.0.4:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
|
||||
|
|
@ -3493,6 +3521,13 @@ graceful-fs@^4.1.10, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.4
|
|||
version "1.0.1"
|
||||
resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
|
||||
|
||||
graphlib@^2.1.7:
|
||||
version "2.1.7"
|
||||
resolved "https://registry.yarnpkg.com/graphlib/-/graphlib-2.1.7.tgz#b6a69f9f44bd9de3963ce6804a2fc9e73d86aecc"
|
||||
integrity sha512-TyI9jIy2J4j0qgPmOOrHTCtpPqJGN/aurBwc6ZT+bRii+di1I+Wv3obRhVrmBEXet+qkMaEX67dXrwsd3QQM6w==
|
||||
dependencies:
|
||||
lodash "^4.17.5"
|
||||
|
||||
growl@1.9.2:
|
||||
version "1.9.2"
|
||||
resolved "https://registry.yarnpkg.com/growl/-/growl-1.9.2.tgz#0ea7743715db8d8de2c5ede1775e1b45ac85c02f"
|
||||
|
|
@ -3614,7 +3649,7 @@ he@1.1.1:
|
|||
version "1.1.1"
|
||||
resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd"
|
||||
|
||||
heap@0.2.6:
|
||||
heap@0.2.6, heap@^0.2.6:
|
||||
version "0.2.6"
|
||||
resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.6.tgz#087e1f10b046932fc8594dd9e6d378afc9d1e5ac"
|
||||
|
||||
|
|
@ -4553,6 +4588,11 @@ lodash.create@3.1.1:
|
|||
lodash._basecreate "^3.0.0"
|
||||
lodash._isiterateecall "^3.0.0"
|
||||
|
||||
lodash.debounce@^4.0.8:
|
||||
version "4.0.8"
|
||||
resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
|
||||
integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
|
||||
|
||||
lodash.isarguments@^3.0.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
|
||||
|
|
@ -5668,6 +5708,14 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
|
|||
minimist "^1.2.0"
|
||||
strip-json-comments "~2.0.1"
|
||||
|
||||
react-cytoscapejs@^1.1.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.yarnpkg.com/react-cytoscapejs/-/react-cytoscapejs-1.1.0.tgz#2175e444f12f4023901a960f71e761cb5b5d0b3a"
|
||||
integrity sha512-CdeEVsOQmw3Cqz47Hx83RelZLT9y3ct6t+YTQ0nRdAt7n+bYD/bTskAmfAm1GvQhzCKylYi2VcY05B8nC4u2Gw==
|
||||
dependencies:
|
||||
cytoscape "^3.2.19"
|
||||
prop-types "^15.6.2"
|
||||
|
||||
react-dom@^16.6.3:
|
||||
version "16.6.3"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0"
|
||||
|
|
|
|||
Loading…
Reference in New Issue