mirror of
https://github.com/hanzonet/explore.git
synced 2026-10-30 18:16:57 +00:00
tom goriunovandGitHub
5e80806796
* first version of the pack * single entry point * add custom components to the package * move form components to toolkit * add more utils and hooks to the package * minor fixes * add CI workflow * update readme and package.json * fix ts * fix build of env-validator * fix docker build * fix icons size * test fixes * more test fixes
41 lines
897 B
TypeScript
41 lines
897 B
TypeScript
import { chakra } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import { Skeleton } from 'toolkit/chakra/skeleton';
|
|
import { mdash } from 'toolkit/utils/htmlEntities';
|
|
|
|
interface Props {
|
|
percentage: number;
|
|
isLoading: boolean;
|
|
}
|
|
|
|
const GasTrackerNetworkUtilization = ({ percentage, isLoading }: Props) => {
|
|
const load = (() => {
|
|
if (percentage > 80) {
|
|
return 'high';
|
|
}
|
|
|
|
if (percentage > 50) {
|
|
return 'medium';
|
|
}
|
|
|
|
return 'low';
|
|
})();
|
|
|
|
const colors = {
|
|
high: 'red.600',
|
|
medium: 'orange.600',
|
|
low: 'green.600',
|
|
};
|
|
const color = colors[load];
|
|
|
|
return (
|
|
<Skeleton loading={ isLoading } whiteSpace="pre-wrap">
|
|
<span>Network utilization </span>
|
|
<chakra.span color={ color }>{ percentage.toFixed(2) }% { mdash } { load } load</chakra.span>
|
|
</Skeleton>
|
|
);
|
|
};
|
|
|
|
export default React.memo(GasTrackerNetworkUtilization);
|