add transfer graph

app/components/TransfersGraph.jsx

@@ -0,0 +1,54 @@
+import Cytoscape from 'cytoscape'
+import dagre from 'cytoscape-dagre'
+import React, { Fragment } from 'react'
+import CytoscapeComponent from 'react-cytoscapejs'
+
+Cytoscape.use(dagre)
+const layout = { name: 'dagre' }
+
+const stylesheet = [
+  {
+    selector: 'node',
+    style: {
+      width: 5,
+      height: 5,
+      fontSize: '5px',
+      color: 'blue',
+      label: 'data(label)'
+    }
+  },
+  {
+    selector: 'edge',
+    style: {
+      label: 'data(label)',
+      curveStyle: 'bezier',
+      targetArrowShape: 'triangle',
+      arrowScale: 0.5,
+      fontSize: '5px',
+      width: 1
+    }
+  }
+]
+
+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' } }
+  ]
+
+  return (
+    <Fragment>
+      <CytoscapeComponent
+        elements={elements}
+        style={ { width: '100%', height: '600px', fontSize: '14px' } }
+        stylesheet={stylesheet}
+        layout={layout}
+      />
+    </Fragment>
+  )
+}
+
+export default TransfersGraph

app/utils/events.js

@@ -6,6 +6,7 @@ const AUTHORIZE_PAYMENT = 'AuthorizePayment'
 const GIVER_ADDED = 'GiverAdded'
 const DELEGATE_ADDED = 'DelegateAdded'
 const PROJECT_ADDED = 'ProjectAdded'
+const ALL_EVENTS = 'allEvents'
 const lookups = {
   [GIVER_ADDED]: {
     id: 'idGiver',
@@ -59,20 +60,31 @@ export const formatFundProfileEvent = async event => {
   }
 }
 
-const getPastEvents = async event => {
+const getPastEvents = async (event, raw = false) => {
   const events = await LiquidPledgingMock.getPastEvents(event, {
     addr: await web3.eth.getCoinbase(),
     fromBlock: 0,
     toBlock: 'latest'
   })
+  if (raw) return events
   const formattedEvents = await Promise.all(
     events.map(formatFundProfileEvent)
   )
   return formattedEvents
 }
+
+export const lpEventsSubscription = async () => {
+  //todo add on event handlers
+  const events = await LiquidPledgingMock.events.allEvents({
+    fromBlock: 0,
+    toBlock: 'latest'
+  })
+  return events
+}
 export const getFunderProfiles = async () => await getPastEvents(GIVER_ADDED)
 export const getDelegateProfiles = async () => await getPastEvents(DELEGATE_ADDED)
 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 getProfileEvents = async () => {
   const [ funderProfiles, delegateProfiles, projectProfiles]

package.json

@@ -38,11 +38,11 @@
     "babel-cli": "^6.26.0",
     "babel-eslint": "^10.0.1",
     "babel-preset-env": "^1.6.0",
+    "eslint": "^5.9.0",
     "eslint-config-airbnb": "^15.0.1",
+    "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-import": "^2.6.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
-    "eslint": "^5.9.0",
-    "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-react": "^7.11.1",
     "ganache-cli": "^6.1.3",
     "lerna": "^2.2.0",
@@ -58,12 +58,16 @@
     "@material-ui/icons": "^3.0.1",
     "async": "^2.4.0",
     "chai": "^4.1.0",
+    "cytoscape": "^3.3.0",
+    "cytoscape-cose-bilkent": "^4.0.0",
+    "cytoscape-dagre": "^2.2.2",
     "eslint": "^5.9.0",
     "eth-contract-class": "^0.0.12",
     "formik": "^1.3.2",
     "material-table": "^1.3.0",
     "ramda": "^0.26.1",
     "react": "^16.6.3",
+    "react-cytoscapejs": "^1.1.0",
     "react-dom": "^16.6.3"
   }
 }