bbgo_origin/frontend/components/TotalAssetsSummary.js

61 lines
1.4 KiB
JavaScript
Raw Normal View History

2022-06-11 00:57:54 +00:00
import { useEffect, useState } from 'react';
2022-06-12 15:11:42 +00:00
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';
2022-06-12 15:19:39 +00:00
import { makeStyles } from '@mui/styles';
2021-01-25 10:29:31 +00:00
function aggregateAssetsBy(assets, field) {
2022-06-11 00:57:54 +00:00
let total = 0.0;
for (let key in assets) {
if (assets[key]) {
let a = assets[key];
let value = a[field];
total += value;
2021-01-25 10:29:31 +00:00
}
2022-06-11 00:57:54 +00:00
}
2021-01-25 10:29:31 +00:00
2022-06-11 00:57:54 +00:00
return total;
2021-01-25 10:29:31 +00:00
}
2021-01-29 04:55:11 +00:00
const useStyles = makeStyles((theme) => ({
2022-06-11 00:57:54 +00:00
root: {
margin: theme.spacing(1),
},
title: {
fontSize: 14,
},
pos: {
marginTop: 12,
},
2021-01-29 04:55:11 +00:00
}));
2021-01-25 10:29:31 +00:00
export default function TotalAssetSummary({ assets }) {
2022-06-11 00:57:54 +00:00
const classes = useStyles();
return (
<Card className={classes.root} variant="outlined">
<CardContent>
<Typography
className={classes.title}
color="textSecondary"
gutterBottom
>
Total Account Balance
</Typography>
<Typography variant="h5" component="h2">
{Math.round(aggregateAssetsBy(assets, 'inBTC') * 1e8) / 1e8}{' '}
<span>BTC</span>
</Typography>
2021-01-25 10:29:31 +00:00
2022-06-11 00:57:54 +00:00
<Typography className={classes.pos} color="textSecondary">
Estimated Value
</Typography>
2021-01-25 10:29:31 +00:00
2022-06-11 00:57:54 +00:00
<Typography variant="h5" component="h3">
{Math.round(aggregateAssetsBy(assets, 'inUSD') * 100) / 100}{' '}
<span>USD</span>
</Typography>
</CardContent>
2021-01-25 10:29:31 +00:00
</Card>
2022-06-11 00:57:54 +00:00
);
2021-01-25 10:29:31 +00:00
}