From 40022d102f976d00248da802d9bab41f7f2d536e Mon Sep 17 00:00:00 2001 From: Barry Gitarts Date: Tue, 18 Dec 2018 14:30:50 -0500 Subject: [PATCH] add deposits selectors and funding summary card --- app/components/Dashboard.jsx | 6 +- app/components/dashboard/FundingSummary.jsx | 60 +++++++++++++++++++ ...nfoCard.jsx => PledgeAllocationsChart.jsx} | 4 +- app/dapp.js | 13 ++-- app/selectors/pledging.js | 49 ++++++++++++++- 5 files changed, 121 insertions(+), 11 deletions(-) create mode 100644 app/components/dashboard/FundingSummary.jsx rename app/components/dashboard/{InfoCard.jsx => PledgeAllocationsChart.jsx} (92%) diff --git a/app/components/Dashboard.jsx b/app/components/Dashboard.jsx index 514dd30..cde9195 100644 --- a/app/components/Dashboard.jsx +++ b/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 = () => (
- + +
) diff --git a/app/components/dashboard/FundingSummary.jsx b/app/components/dashboard/FundingSummary.jsx new file mode 100644 index 0000000..1361698 --- /dev/null +++ b/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 ( + + {({ allPledges, allLpEvents }) => + + + + {title} + + {!!allLpEvents && + Object.entries(getDepositsTotal({ allLpEvents, allPledges })).map(deposit => { + const [name, amount] = deposit + return ( + + Total Funded: {amount} {name} + + ) + })} + + + } + + ) +} + +SimpleCard.propTypes = { + classes: PropTypes.object.isRequired, + title: PropTypes.string +} + +export default withStyles(styles)(SimpleCard) diff --git a/app/components/dashboard/InfoCard.jsx b/app/components/dashboard/PledgeAllocationsChart.jsx similarity index 92% rename from app/components/dashboard/InfoCard.jsx rename to app/components/dashboard/PledgeAllocationsChart.jsx index 3e074e8..f9eea1f 100644 --- a/app/components/dashboard/InfoCard.jsx +++ b/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: [ diff --git a/app/dapp.js b/app/dapp.js index b581d5a..6170509 100644 --- a/app/dapp.js +++ b/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 ( diff --git a/app/selectors/pledging.js b/app/selectors/pledging.js index b0fb4b1..8f807d1 100644 --- a/app/selectors/pledging.js +++ b/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 +)