move all routes to maincontainer

app/components/MainCointainer.jsx

@@ -20,6 +20,7 @@ import ListItemText from '@material-ui/core/ListItemText';
 import InboxIcon from '@material-ui/icons/MoveToInbox';
 import FundsManagement from './FundsManagement'
 import ContractAdmin from './ContractAdmin'
+import TransferGraph from './TransfersGraph'
 
 const drawerWidth = 240
 
@@ -156,10 +157,12 @@ class PersistentDrawerLeft extends React.Component {
             </Link>
           </List>
           <List>
-            <ListItem button>
-              <ListItemIcon><InboxIcon /></ListItemIcon>
-              <ListItemText primary="Insights" />
-            </ListItem>
+            <Link to="/insights/" className={classes.link}>
+              <ListItem button>
+                <ListItemIcon><InboxIcon /></ListItemIcon>
+                <ListItemText primary="Insights" />
+              </ListItem>
+            </Link>
           </List>
           <List>
             <Link to="/admin/" className={classes.link}>
@@ -182,6 +185,7 @@ class PersistentDrawerLeft extends React.Component {
           })}>
             <Route path="/funds-management" render={() => <FundsManagement open={open} />} />
             <Route path="/admin" component={ContractAdmin} />
+            <Route path="/insights" component={TransferGraph} />
             {this.props.children}
           </div>
         </main>

app/components/TransfersGraph.jsx

@@ -1,10 +1,11 @@
 import Cytoscape from 'cytoscape'
 import dagre from 'cytoscape-dagre'
-import React, { Fragment, memo } from 'react'
+import React, { Fragment } from 'react'
 import CytoscapeComponent from 'react-cytoscapejs'
 import { uniq } from 'ramda'
 import { toEther } from '../utils/conversions'
 import { getTokenLabel } from '../utils/currencies'
+import { FundingContext } from '../context'
 
 Cytoscape.use(dagre)
 const layout = { name: 'dagre' }
@@ -68,17 +69,21 @@ const createElements = (transfers, vaultEvents) => {
   ]
 }
 
-const TransfersGraph = ({ transfers, vaultEvents }) => {
+const TransfersGraph = () => {
   return (
-    <Fragment>
-      <CytoscapeComponent
-        elements={createElements(transfers, vaultEvents)}
-        style={ { width: '100%', height: '600px', fontSize: '14px' } }
-        stylesheet={stylesheet}
-        layout={layout}
-      />
-    </Fragment>
+    <FundingContext.Consumer>
+      {({ transfers, vaultEvents }) =>
+        <Fragment>
+          <CytoscapeComponent
+            elements={createElements(transfers, vaultEvents)}
+            style={ { width: '100%', height: '600px', fontSize: '14px' } }
+            stylesheet={stylesheet}
+            layout={layout}
+          />
+        </Fragment>
+      }
+    </FundingContext.Consumer>
   )
 }
 
-export default memo(TransfersGraph)
+export default TransfersGraph

app/dapp.js

@@ -9,7 +9,6 @@ import { getAllLPEvents, getAllVaultEvents, getProfileEvents, formatFundProfileE
 import { getAllPledges, appendToExistingPledges, transferBetweenPledges } from './utils/pledges';
 import { FundingContext } from './context'
 import { cancelProfile } from './utils/fundProfiles'
-import TransfersGraph from './components/TransfersGraph'
 import MainCointainer from './components/MainCointainer'
 
 const { getNetworkType } = web3.eth.net
@@ -35,7 +34,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 vaultEvents = await getAllVaultEvents()
           const transfers = allLpEvents.filter(obj => obj.event === 'Transfer')
           this.setState({
             account,
@@ -47,7 +46,7 @@ class App extends React.Component {
             allPledges,
             authorizedPayments,
             allLpEvents,
-            allVaultEvents,
+            vaultEvents,
             transfers
           })
         }
@@ -80,15 +79,13 @@ class App extends React.Component {
   }
 
   render() {
-    const { account, needsInit, lpAllowance, fundProfiles, allPledges, authorizedPayments, transfers, allVaultEvents } = this.state
+    const { account, needsInit, lpAllowance, fundProfiles, allPledges, authorizedPayments, transfers, vaultEvents } = this.state
     const { appendFundProfile, appendPledges, transferPledgeAmounts, cancelFundProfile } = this
-    const fundingContext = { allPledges, appendPledges, appendFundProfile, account, transferPledgeAmounts, authorizedPayments, cancelFundProfile, fundProfiles, needsInit, initVaultAndLP, standardTokenApproval }
+    const fundingContext = { allPledges, appendPledges, appendFundProfile, account, transferPledgeAmounts, authorizedPayments, cancelFundProfile, fundProfiles, needsInit, initVaultAndLP, standardTokenApproval, transfers, vaultEvents }
     return (
       <FundingContext.Provider value={fundingContext}>
         <Router>
-          <MainCointainer>
-            {false &&transfers && <TransfersGraph transfers={transfers} vaultEvents={allVaultEvents} />}
-          </MainCointainer>
+          <MainCointainer />
         </Router>
       </FundingContext.Provider>
     )