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 updated funding summary card

This commit is contained in:
Barry Gitarts 2018-12-19 15:54:12 -05:00
parent ce51770d44
commit fbe5d6b194
1 changed files with 31 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -34,6 +34,10 @@ const styles = {
linearBarColorPrimary: { linearBarColorPrimary: {
backgroundColor: '#00695c', backgroundColor: '#00695c',
}, },
titleText: {
textAlign: 'center',
paddingTop: '2rem'
}
} }
const getNet = (deposits, withdraws) => Number(deposits) - Number(withdraws) const getNet = (deposits, withdraws) => Number(deposits) - Number(withdraws)
@ -55,20 +59,30 @@ function SimpleCard(props) {
const [name, amounts] = token const [name, amounts] = token
const { deposits, withdraws } = amounts const { deposits, withdraws } = amounts
return ( return (
<Card key={name} className={classes.fundingSummaries}> <Card key={name}>
<Typography variant="h5" component="h2"> <Typography variant="h5" className={classes.titleText}>
{name} {name}
</Typography> </Typography>
<CardContent> <CardContent className={classes.fundingSummaries}>
<Typography key={name + 'withdraw'} className={classes.pos} color="textSecondary"> <Typography variant="h3" >
Funded: {deposits} {deposits}
</Typography> </Typography>
<Typography key={name + 'deposit'} className={classes.pos} color="textSecondary"> <Typography variant="h6" key={name + 'withdraw'} className={classes.pos} color="textSecondary">
Withdrawn: {withdraws} Funded
</Typography> </Typography>
<Typography key={name + 'total'} className={classes.pos} color="textSecondary"> <Typography variant="h3">
Net: {Number(deposits) - Number(withdraws)} {withdraws}
</Typography> </Typography>
<Typography variant="h6" key={name + 'deposit'} className={classes.pos} color="textSecondary">
Withdrawn
</Typography>
<Typography variant="h3">
{Number(deposits) - Number(withdraws)}
</Typography>
<Typography variant="h6" key={name + 'total'} className={classes.pos} color="textSecondary">
Net Remaining
</Typography>
</CardContent>
<LinearProgress <LinearProgress
classes={{ classes={{
colorPrimary: classes.linearColorPrimary, colorPrimary: classes.linearColorPrimary,
@ -78,7 +92,6 @@ function SimpleCard(props) {
variant="buffer" variant="buffer"
value={getValue(deposits, withdraws)} value={getValue(deposits, withdraws)}
valueBuffer={100} /> valueBuffer={100} />
</CardContent>
</Card> </Card>
) )
})} })}