bbgo_origin/apps/frontend/components/TotalAssetsDetails.js

88 lines
1.9 KiB
JavaScript
Raw Normal View History

import React from 'react';
2022-06-12 15:11:42 +00:00
import CardContent from '@mui/material/CardContent';
import Card from '@mui/material/Card';
2022-06-12 15:19:39 +00:00
import { makeStyles } from '@mui/styles';
2022-06-12 15:11:42 +00:00
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import ListItemAvatar from '@mui/material/ListItemAvatar';
import Avatar from '@mui/material/Avatar';
const useStyles = makeStyles((theme) => ({
2022-06-11 00:57:54 +00:00
root: {
margin: theme.spacing(1),
},
cardContent: {},
}));
const logoCurrencies = {
2022-06-11 00:57:54 +00:00
BTC: true,
ETH: true,
BCH: true,
LTC: true,
USDT: true,
BNB: true,
COMP: true,
XRP: true,
LINK: true,
DOT: true,
SXP: true,
DAI: true,
MAX: true,
TWD: true,
SNT: true,
YFI: true,
GRT: true,
};
2022-06-11 00:57:54 +00:00
export default function TotalAssetsDetails({ assets }) {
const classes = useStyles();
2022-06-11 00:57:54 +00:00
const sortedAssets = [];
for (let k in assets) {
sortedAssets.push(assets[k]);
}
sortedAssets.sort((a, b) => {
if (a.inUSD > b.inUSD) {
return -1;
}
2022-06-11 00:57:54 +00:00
if (a.inUSD < b.inUSD) {
return 1;
}
2022-06-11 00:57:54 +00:00
return 0;
});
2022-06-11 00:57:54 +00:00
const items = sortedAssets.map((a) => {
return (
2022-06-11 00:57:54 +00:00
<ListItem key={a.currency} dense>
{a.currency in logoCurrencies ? (
<ListItemAvatar>
<Avatar
alt={a.currency}
src={`/images/${a.currency.toLowerCase()}-logo.svg`}
/>
</ListItemAvatar>
) : (
<ListItemAvatar>
<Avatar alt={a.currency} />
</ListItemAvatar>
)}
<ListItemText
primary={`${a.currency} ${a.total}`}
secondary={`=~ ${Math.round(a.inUSD)} USD`}
/>
</ListItem>
);
2022-06-11 00:57:54 +00:00
});
2022-06-11 00:57:54 +00:00
return (
<Card className={classes.root} variant="outlined">
<CardContent className={classes.cardContent}>
<List dense>{items}</List>
</CardContent>
</Card>
);
}