Mark Sinclair
e52fe65985
* Add identicons package * Tidy up styling and move methods into component directories with better naming * Add mixnode status colours to theme * Mixnode status and icon components * Add status to mixnode types * Add API method to get mixnode details * Add mixnode details to state * Add status and name+description section to mixnode detail page * Wrap with div instead of p * Limit width of description and link to new tab * Limit length of link button and truncate with elipsis * Replace `filter` with `find` * Move mix node detail components to a location that is better named * Refactor mixnode detail state and separate into an independent context from main state. This prevents the mixnode detail page from showing stale data when switching between mix nodes. * Tidy up mixnode detail page adding new state provider and a guard component to handle loading, error and not found states * Layout changes to mixnode description header section * Add methods to Explorer API client to get a mixnode by id, active set by status and overview summary * Add color prop to StatsCard and make count optional * Add optional start and end children to TableToolbar * Tidy up naming * Add summary overview and getting mixnodes by active set status to main state * Add mix node status overview cards * Add mix node status to routes * Mixnode list has a dropdown component to select the active set status * Clean up caching code * Add resource to get a single mixnode by id * Add API resources to get `active`, `inactive` and `standby` mixnodes * Add mixnode summary to API * Add overview summary endpoint to API * Fix OpenAPI/swagger base url * Make clippy happy * Add method to get validators * Add methods to get active and rewarded mixnodes * Fix naming * Move client creation to crate root * Move cache to module * Delete unused files * Add validators API resource * Add gateways API resource * Move tasks to crate root * Add new HTTP resources for validators and gateways to routes * Tidy up naming and locations for mixnodes * Add validator and gateways to state, and tidy up naming * Add gateways and validator modules to main * Overview shows validator and gateway summaries from state * Bundle variable weight Open Sans fonts * Fix up font weights and sizes * Fix up typing * Fix up social icons * Fix navbar colour * Fix paper colour in dark mode and border radius * Fix up stats card * Tidy up Nym icons * Fix up overview * Fix up spacing and padding for overview * Add light mode shades that are darker for mixnode status values * Review feedback
79 lines
2.0 KiB
TypeScript
79 lines
2.0 KiB
TypeScript
import * as React from 'react';
|
|
import { Box, Card, CardContent, IconButton, Typography } from '@mui/material';
|
|
import { useTheme } from '@mui/material/styles';
|
|
import EastIcon from '@mui/icons-material/East';
|
|
|
|
interface StatsCardProps {
|
|
icon: React.ReactNode;
|
|
title: string;
|
|
count?: string | number;
|
|
errorMsg?: Error | string;
|
|
onClick?: () => void;
|
|
color?: string;
|
|
}
|
|
export const StatsCard: React.FC<StatsCardProps> = ({
|
|
icon,
|
|
title,
|
|
count,
|
|
onClick,
|
|
errorMsg,
|
|
color: colorProp,
|
|
}) => {
|
|
const theme = useTheme();
|
|
const color = colorProp || theme.palette.text.primary;
|
|
return (
|
|
<Card onClick={onClick} sx={{ height: '100%' }}>
|
|
<CardContent
|
|
sx={{
|
|
padding: 1.5,
|
|
paddingLeft: 3,
|
|
'&:last-child': {
|
|
paddingBottom: 1.5,
|
|
},
|
|
cursor: 'pointer',
|
|
fontSize: 14,
|
|
fontWeight: 600,
|
|
}}
|
|
>
|
|
<Box display="flex" alignItems="center" color={color}>
|
|
<Box display="flex">
|
|
{icon}
|
|
<Typography
|
|
ml={3}
|
|
mr={0.75}
|
|
fontSize="inherit"
|
|
fontWeight="inherit"
|
|
data-testid={`${title}-amount`}
|
|
>
|
|
{count === undefined || count === null ? '' : count}
|
|
</Typography>
|
|
<Typography
|
|
mr={1}
|
|
fontSize="inherit"
|
|
fontWeight="inherit"
|
|
data-testid={title}
|
|
>
|
|
{title}
|
|
</Typography>
|
|
</Box>
|
|
<IconButton color="inherit" sx={{ fontSize: '16px' }}>
|
|
<EastIcon fontSize="inherit" />
|
|
</IconButton>
|
|
</Box>
|
|
{errorMsg && (
|
|
<Typography variant="body2" sx={{ color: 'danger', padding: 2 }}>
|
|
{errorMsg}
|
|
</Typography>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
StatsCard.defaultProps = {
|
|
onClick: undefined,
|
|
errorMsg: undefined,
|
|
color: undefined,
|
|
count: undefined,
|
|
};
|