add deposits selectors and funding summary card

app/components/Dashboard.jsx

@@ -1,9 +1,11 @@
 import React from 'react'
-import InfoCard from './dashboard/InfoCard'
+import PledgeAllocationsChart from './dashboard/PledgeAllocationsChart'
+import FundingSummary from './dashboard/FundingSummary'
 
 const Dashboard = () => (
   <div>
-    <InfoCard title="Pledge Allocations" />
+    <FundingSummary title="Funding Summary" />
+    <PledgeAllocationsChart title="Pledge Allocations" />
   </div>
 )
 

app/components/dashboard/FundingSummary.jsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { withStyles } from '@material-ui/core/styles'
+import Card from '@material-ui/core/Card'
+import CardContent from '@material-ui/core/CardContent'
+import Typography from '@material-ui/core/Typography'
+import { FundingContext } from '../../context'
+import { getDepositsTotal } from '../../selectors/pledging'
+import { getAuthorizations } from '../../selectors/vault'
+
+const styles = {
+  card: {
+    minWidth: 275,
+  },
+  bullet: {
+    display: 'inline-block',
+    margin: '0 2px',
+    transform: 'scale(0.8)',
+  },
+  title: {
+    fontSize: 14,
+  },
+  pos: {
+    marginBottom: 12,
+  },
+}
+
+function SimpleCard(props) {
+  const { classes, title } = props
+
+  return (
+    <FundingContext.Consumer>
+      {({ allPledges, allLpEvents }) =>
+        <Card className={classes.card}>
+          <CardContent>
+            <Typography variant="h5" component="h2">
+              {title}
+            </Typography>
+            {!!allLpEvents &&
+             Object.entries(getDepositsTotal({ allLpEvents, allPledges })).map(deposit => {
+               const [name, amount] = deposit
+               return (
+                 <Typography key={name} className={classes.pos} color="textSecondary">
+                   Total Funded: {amount} {name}
+                 </Typography>
+               )
+             })}
+          </CardContent>
+        </Card>
+      }
+    </FundingContext.Consumer>
+  )
+}
+
+SimpleCard.propTypes = {
+  classes: PropTypes.object.isRequired,
+  title: PropTypes.string
+}
+
+export default withStyles(styles)(SimpleCard)

app/components/dashboard/PledgeAllocationsChart.jsx

@@ -2,9 +2,7 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import { withStyles } from '@material-ui/core/styles'
 import Card from '@material-ui/core/Card'
-import CardActions from '@material-ui/core/CardActions'
 import CardContent from '@material-ui/core/CardContent'
-import Button from '@material-ui/core/Button'
 import Typography from '@material-ui/core/Typography'
 import randomMC from 'random-material-color'
 import { Doughnut } from 'react-chartjs-2'
@@ -40,7 +38,7 @@ const pledgesChartData = pledges => {
     labels.push(
       `pledge ${id} - ${getTokenLabel(token)}`
     )
-    backgroundColor.push(randomMC.getColor({ text: `${id}` }))
+    backgroundColor.push(randomMC.getColor({ shades: ['300'], text: `${id}` }))
   })
   return {
     datasets: [

app/dapp.js

@@ -6,10 +6,11 @@ import LiquidPledgingMock from 'Embark/contracts/LiquidPledgingMock';
 import web3 from 'Embark/web3'
 import { initVaultAndLP, vaultPledgingNeedsInit, standardTokenApproval, getLpAllowance } from './utils/initialize'
 import { getAllLPEvents, getAllVaultEvents, getProfileEvents, formatFundProfileEvent, getAuthorizedPayments } from './utils/events'
-import { getAllPledges, appendToExistingPledges, transferBetweenPledges } from './utils/pledges';
+import { getAllPledges, appendToExistingPledges, transferBetweenPledges } from './utils/pledges'
 import { FundingContext } from './context'
 import { cancelProfile } from './utils/fundProfiles'
 import MainCointainer from './components/MainCointainer'
+import { getTransfersMemo } from './selectors/pledging'
 
 const { getNetworkType } = web3.eth.net
 
@@ -18,7 +19,9 @@ class App extends React.Component {
     lpAllowance: 0,
     fundProfiles: [],
     allPledges: [],
-    needsInit: true
+    needsInit: true,
+    transfers: [],
+    allLpEvents: []
   };
 
   componentDidMount(){
@@ -35,7 +38,7 @@ class App extends React.Component {
           const account = await web3.eth.getCoinbase()
           const allLpEvents = await getAllLPEvents()
           const vaultEvents = await getAllVaultEvents()
-          const transfers = allLpEvents.filter(obj => obj.event === 'Transfer')
+          const transfers = getTransfersMemo({ allLpEvents })
           this.setState({
             account,
             network,
@@ -79,9 +82,9 @@ class App extends React.Component {
   }
 
   render() {
-    const { account, needsInit, lpAllowance, fundProfiles, allPledges, authorizedPayments, transfers, vaultEvents } = this.state
+    const { account, needsInit, lpAllowance, fundProfiles, allPledges, allLpEvents, authorizedPayments, transfers, vaultEvents } = this.state
     const { appendFundProfile, appendPledges, transferPledgeAmounts, cancelFundProfile } = this
-    const fundingContext = { allPledges, appendPledges, appendFundProfile, account, transferPledgeAmounts, authorizedPayments, cancelFundProfile, fundProfiles, needsInit, initVaultAndLP, standardTokenApproval, transfers, vaultEvents }
+    const fundingContext = { allPledges, allLpEvents, appendPledges, appendFundProfile, account, transferPledgeAmounts, authorizedPayments, cancelFundProfile, fundProfiles, needsInit, initVaultAndLP, standardTokenApproval, transfers, vaultEvents }
     return (
       <FundingContext.Provider value={fundingContext}>
         <Router>

app/selectors/pledging.js

@@ -1,3 +1,50 @@
 import { createSelector } from 'reselect'
+import { toEther } from '../utils/conversions'
+import { getTokenLabel } from '../utils/currencies'
 
-export const getDeposits = createSelector()
+export const getTransfers = state => state.allLpEvents.filter(
+  obj => obj.event === 'Transfer'
+)
+export const getPledges = state => state.allPledges
+
+export const getTransfersMemo = createSelector(
+  getTransfers,
+  transfers => transfers
+)
+
+export const getDeposits = transfers => transfers.filter(
+  transfer => transfer.returnValues.from === '0'
+)
+
+const getDepositsSelector = createSelector(
+  getTransfersMemo,
+  getDeposits
+)
+
+export const sumDeposits = deposits => deposits.reduce(
+  (pv,cv) => pv + BigInt(cv.returnValues.amount),
+  BigInt(0)
+).toString()
+
+const formatAndSumDeposits = (deposits, pledges) => {
+  const tokens = {}
+  deposits.forEach(deposit => {
+    const { amount, to } = deposit.returnValues
+    const { token } = pledges.find(p => Number(p.id) === Number(to))
+    const tokenName = getTokenLabel(token)
+    if (tokens[tokenName]) tokens[tokenName] = BigInt(tokens[tokenName]) + BigInt(amount)
+    else tokens[tokenName] = BigInt(amount)
+  })
+  Object
+    .entries(tokens)
+    .forEach(token => {
+      const [key, value] = token
+      tokens[key] = toEther(value.toString())
+    })
+  return tokens
+}
+export const getDepositsTotal = createSelector(
+  getDepositsSelector,
+  getPledges,
+  formatAndSumDeposits
+)