mirror of
https://github.com/luxfi/explore.git
synced 2026-09-24 00:28:18 +00:00
tom goriunovandGitHub
ae5489b1f7
* add custom headers to API resource * refactoring * page title * chart * gas prices snippet * GasPrice component * add ENV for gas units * dark theme and other tweaks * tests * add base and priority fee * [skip ci] small fiat values * change behavior of the variable * update tooltip layout * refactor gas info tooltip * refactor GasPrice component * fix logic and deploy demo for eth mainnet * tests * remove link from anchor * [skip ci] rollback ENVs for demo * review fixes * fix tests
40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
import { Flex, Box, Text, Skeleton } from '@chakra-ui/react';
|
|
import React from 'react';
|
|
|
|
import type { PaginationParams } from 'ui/shared/pagination/types';
|
|
|
|
import useApiQuery from 'lib/api/useApiQuery';
|
|
import { nbsp } from 'lib/html-entities';
|
|
import { HOMEPAGE_STATS } from 'stubs/stats';
|
|
import Pagination from 'ui/shared/pagination/Pagination';
|
|
|
|
interface Props {
|
|
pagination: PaginationParams;
|
|
}
|
|
|
|
const BlocksTabSlot = ({ pagination }: Props) => {
|
|
const statsQuery = useApiQuery('stats', {
|
|
queryOptions: {
|
|
placeholderData: HOMEPAGE_STATS,
|
|
},
|
|
});
|
|
|
|
return (
|
|
<Flex alignItems="center" columnGap={ 8 } display={{ base: 'none', lg: 'flex' }}>
|
|
{ statsQuery.data?.network_utilization_percentage !== undefined && (
|
|
<Box>
|
|
<Text as="span" fontSize="sm">
|
|
Network utilization (last 50 blocks):{ nbsp }
|
|
</Text>
|
|
<Skeleton display="inline-block" fontSize="sm" color="blue.400" fontWeight={ 600 } isLoaded={ !statsQuery.isPlaceholderData }>
|
|
<span>{ statsQuery.data.network_utilization_percentage.toFixed(2) }%</span>
|
|
</Skeleton>
|
|
</Box>
|
|
) }
|
|
<Pagination my={ 1 } { ...pagination }/>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default BlocksTabSlot;
|