status-im
/
liquid-funding
mirror of https://github.com/status-im/liquid-funding.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

add progress

This commit is contained in:
Barry Gitarts 2018-12-19 14:42:04 -05:00
parent 8193e4d42e
commit ce51770d44
1 changed files with 29 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
app/components/dashboard/FundingSummary.jsx
View File

@ -4,6 +4,7 @@ import { withStyles } from '@material-ui/core/styles'
import Card from '@material-ui/core/Card' import Card from '@material-ui/core/Card'
import CardContent from '@material-ui/core/CardContent' import CardContent from '@material-ui/core/CardContent'
import Typography from '@material-ui/core/Typography' import Typography from '@material-ui/core/Typography'
import LinearProgress from '@material-ui/core/LinearProgress'
import { FundingContext } from '../../context' import { FundingContext } from '../../context'
import { getDepositWithdrawTotals } from '../../selectors/pledging' import { getDepositWithdrawTotals } from '../../selectors/pledging'
@ -27,8 +28,16 @@ const styles = {
pos: { pos: {
marginBottom: 12, marginBottom: 12,
}, },
linearColorPrimary: {
backgroundColor: '#b2dfdb',
},
linearBarColorPrimary: {
backgroundColor: '#00695c',
},
} }
const getNet = (deposits, withdraws) => Number(deposits) - Number(withdraws)
const getValue = (deposits, withdraws) => (getNet(deposits, withdraws) / Number(deposits)) * 100
function SimpleCard(props) { function SimpleCard(props) {
const { classes, title } = props const { classes, title } = props
@ -50,15 +59,26 @@ function SimpleCard(props) {
<Typography variant="h5" component="h2"> <Typography variant="h5" component="h2">
{name} {name}
</Typography> </Typography>
<Typography key={name + 'withdraw'} className={classes.pos} color="textSecondary"> <CardContent>
Funded: {deposits} <Typography key={name + 'withdraw'} className={classes.pos} color="textSecondary">
</Typography> Funded: {deposits}
<Typography key={name + 'deposit'} className={classes.pos} color="textSecondary"> </Typography>
Withdrawn: {withdraws} <Typography key={name + 'deposit'} className={classes.pos} color="textSecondary">
</Typography> Withdrawn: {withdraws}
<Typography key={name + 'total'} className={classes.pos} color="textSecondary"> </Typography>
Net: {Number(deposits) - Number(withdraws)} <Typography key={name + 'total'} className={classes.pos} color="textSecondary">
</Typography> Net: {Number(deposits) - Number(withdraws)}
</Typography>
<LinearProgress
classes={{
colorPrimary: classes.linearColorPrimary,
barColorPrimary: classes.linearBarColorPrimary,
}}
color="primary"
variant="buffer"
value={getValue(deposits, withdraws)}
valueBuffer={100} />
</CardContent>
</Card> </Card>
) )
})} })}