Skip to content

F
frontend
Commit 0ccd05a8 authored by Igor Stuev's avatar Igor Stuev Committed by GitHub
Browse files
Options

Merge pull request #2099 from blockscout/fe-2060 

delete gas used utilization for some rollups
parents 6000e9cd f9c59fb4
Hide whitespace changes
Inline Side-by-side
Showing with 88 additions and 61 deletions
ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx
View file @ 0ccd05a8
......@@ -8,9 +8,9 @@ import config from 'configs/app';
import getBlockTotalReward from 'lib/block/getBlockTotalReward';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import { currencyUnits } from 'lib/units';
import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import Utilization from 'ui/shared/Utilization/Utilization';
type Props = Block & {
page: number;
......@@ -43,13 +43,11 @@ const AddressBlocksValidatedListItem = (props: Props) => {
<Flex columnGap={ 2 } w="100%">
<Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Gas used</Skeleton>
<Skeleton isLoaded={ !props.isLoading } color="text_secondary">{ BigNumber(props.gas_used || 0).toFormat() }</Skeleton>
{ props.gas_used && props.gas_used !== '0' && (
<Utilization
colorScheme="gray"
value={ BigNumber(props.gas_used || 0).dividedBy(BigNumber(props.gas_limit)).toNumber() }
isLoading={ props.isLoading }
/>
) }
<BlockGasUsed
gasUsed={ props.gas_used }
gasLimit={ props.gas_limit }
isLoading={ props.isLoading }
/>
</Flex>
{ !config.UI.views.block.hiddenFields?.total_reward && (
<Flex columnGap={ 2 } w="100%">
......
ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx
View file @ 0ccd05a8
......@@ -7,8 +7,8 @@ import type { Block } from 'types/api/block';
import config from 'configs/app';
import getBlockTotalReward from 'lib/block/getBlockTotalReward';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import Utilization from 'ui/shared/Utilization/Utilization';
type Props = Block & {
page: number;
......@@ -46,13 +46,11 @@ const AddressBlocksValidatedTableItem = (props: Props) => {
<Skeleton isLoaded={ !props.isLoading } flexBasis="80px">
{ BigNumber(props.gas_used || 0).toFormat() }
</Skeleton>
{ props.gas_used && props.gas_used !== '0' && (
<Utilization
colorScheme="gray"
value={ BigNumber(props.gas_used).dividedBy(BigNumber(props.gas_limit)).toNumber() }
isLoading={ props.isLoading }
/>
) }
<BlockGasUsed
gasUsed={ props.gas_used }
gasLimit={ props.gas_limit }
isLoading={ props.isLoading }
/>
</Flex>
</Td>
{ !config.UI.views.block.hiddenFields?.total_reward && (
......
ui/block/BlockDetails.tsx
View file @ 0ccd05a8
import { Grid, GridItem, Text, Link, Box, Tooltip, useColorModeValue, Skeleton } from '@chakra-ui/react';
import { Grid, GridItem, Text, Link, Box, Tooltip, Skeleton } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import capitalize from 'lodash/capitalize';
import { useRouter } from 'next/router';
......@@ -18,6 +18,7 @@ import { space } from 'lib/html-entities';
import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
import getQueryParamString from 'lib/router/getQueryParamString';
import { currencyUnits } from 'lib/units';
import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
......@@ -26,14 +27,12 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
import IconSvg from 'ui/shared/IconSvg';
import LinkInternal from 'ui/shared/links/LinkInternal';
import PrevNext from 'ui/shared/PrevNext';
import RawDataSnippet from 'ui/shared/RawDataSnippet';
import StatusTag from 'ui/shared/statusTag/StatusTag';
import TextSeparator from 'ui/shared/TextSeparator';
import Utilization from 'ui/shared/Utilization/Utilization';
import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
import ZkSyncL2TxnBatchHashesInfo from 'ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo';
......@@ -52,8 +51,6 @@ const BlockDetails = ({ query }: Props) => {
const router = useRouter();
const heightOrHash = getQueryParamString(router.query.height_or_hash);
const separatorColor = useColorModeValue('gray.200', 'gray.700');
const { data, isPlaceholderData } = query;
const handleCutClick = React.useCallback(() => {
......@@ -412,18 +409,13 @@ const BlockDetails = ({ query }: Props) => {
<Skeleton isLoaded={ !isPlaceholderData }>
{ BigNumber(data.gas_used || 0).toFormat() }
</Skeleton>
<Utilization
ml={ 4 }
colorScheme="gray"
value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() }
<BlockGasUsed
gasUsed={ data.gas_used }
gasLimit={ data.gas_limit }
isLoading={ isPlaceholderData }
ml={ 4 }
gasTarget={ data.gas_target_percentage }
/>
{ data.gas_target_percentage && (
<>
<TextSeparator color={ separatorColor } mx={ 1 }/>
<GasUsedToTargetRatio value={ data.gas_target_percentage } isLoading={ isPlaceholderData }/>
</>
) }
</DetailsInfoItem.Value>
<DetailsInfoItem.Label
......
ui/blocks/BlocksListItem.tsx
View file @ 0ccd05a8
import { Flex, Skeleton, Text, Box, useColorModeValue } from '@chakra-ui/react';
import { Flex, Skeleton, Text, Box } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import capitalize from 'lodash/capitalize';
import React from 'react';
......@@ -13,13 +13,12 @@ import { WEI } from 'lib/consts';
import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
import { currencyUnits } from 'lib/units';
import BlockTimestamp from 'ui/blocks/BlockTimestamp';
import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
import IconSvg from 'ui/shared/IconSvg';
import LinkInternal from 'ui/shared/links/LinkInternal';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import TextSeparator from 'ui/shared/TextSeparator';
import Utilization from 'ui/shared/Utilization/Utilization';
interface Props {
......@@ -35,8 +34,6 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
const burntFees = BigNumber(data.burnt_fees || 0);
const txFees = BigNumber(data.tx_fees || 0);
const separatorColor = useColorModeValue('gray.200', 'gray.700');
return (
<ListItemMobile rowGap={ 3 } key={ String(data.height) } isAnimated>
<Flex justifyContent="space-between" w="100%">
......@@ -85,13 +82,12 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
<Skeleton isLoaded={ !isLoading } display="inline-block" color="text_secondary" mr={ 4 }>
<span>{ BigNumber(data.gas_used || 0).toFormat() }</span>
</Skeleton>
<Utilization colorScheme="gray" value={ BigNumber(data.gas_used || 0).div(BigNumber(data.gas_limit)).toNumber() } isLoading={ isLoading }/>
{ data.gas_target_percentage && (
<>
<TextSeparator color={ separatorColor } mx={ 1 }/>
<GasUsedToTargetRatio value={ data.gas_target_percentage } isLoading={ isLoading }/>
</>
) }
<BlockGasUsed
gasUsed={ data.gas_used }
gasLimit={ data.gas_limit }
isLoading={ isLoading }
gasTarget={ data.gas_target_percentage }
/>
</Flex>
</Box>
{ !isRollup && !config.UI.views.block.hiddenFields?.total_reward && (
......
ui/blocks/BlocksTableItem.tsx
View file @ 0ccd05a8
......@@ -11,12 +11,11 @@ import config from 'configs/app';
import getBlockTotalReward from 'lib/block/getBlockTotalReward';
import { WEI } from 'lib/consts';
import BlockTimestamp from 'ui/blocks/BlockTimestamp';
import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
import IconSvg from 'ui/shared/IconSvg';
import LinkInternal from 'ui/shared/links/LinkInternal';
import TextSeparator from 'ui/shared/TextSeparator';
import Utilization from 'ui/shared/Utilization/Utilization';
interface Props {
......@@ -32,7 +31,6 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
const burntFees = BigNumber(data.burnt_fees || 0);
const txFees = BigNumber(data.tx_fees || 0);
const separatorColor = useColorModeValue('gray.200', 'gray.700');
const burntFeesIconColor = useColorModeValue('gray.500', 'inherit');
return (
......@@ -89,21 +87,12 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
<Td fontSize="sm">
<Skeleton isLoaded={ !isLoading } display="inline-block">{ BigNumber(data.gas_used || 0).toFormat() }</Skeleton>
<Flex mt={ 2 }>
<Tooltip label={ isLoading ? undefined : 'Gas Used %' }>
<Box>
<Utilization
colorScheme="gray"
value={ BigNumber(data.gas_used || 0).dividedBy(BigNumber(data.gas_limit)).toNumber() }
isLoading={ isLoading }
/>
</Box>
</Tooltip>
{ data.gas_target_percentage && (
<>
<TextSeparator color={ separatorColor } mx={ 1 }/>
<GasUsedToTargetRatio value={ data.gas_target_percentage } isLoading={ isLoading }/>
</>
) }
<BlockGasUsed
gasUsed={ data.gas_used }
gasLimit={ data.gas_limit }
isLoading={ isLoading }
gasTarget={ data.gas_target_percentage }
/>
</Flex>
</Td>
{ !isRollup && !config.UI.views.block.hiddenFields?.total_reward && (
......
ui/shared/block/BlockGasUsed.tsx 0 → 100644
View file @ 0ccd05a8
import { chakra, Tooltip, Box, useColorModeValue } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
import config from 'configs/app';
import GasUsedToTargetRatio from '../GasUsedToTargetRatio';
import TextSeparator from '../TextSeparator';
import Utilization from '../Utilization/Utilization';
const rollupFeature = config.features.rollup;
interface Props {
className?: string;
gasUsed?: string;
gasLimit: string;
gasTarget?: number;
isLoading?: boolean;
}
const BlockGasUsed = ({ className, gasUsed, gasLimit, gasTarget, isLoading }: Props) => {
const hasGasUtilization =
gasUsed && gasUsed !== '0' &&
(!rollupFeature.isEnabled || rollupFeature.type === 'optimistic' || rollupFeature.type === 'shibarium');
const separatorColor = useColorModeValue('gray.200', 'gray.700');
if (!hasGasUtilization) {
return null;
}
return (
<>
<Tooltip label={ isLoading ? undefined : 'Gas Used %' }>
<Box>
<Utilization
colorScheme="gray"
value={ BigNumber(gasUsed).dividedBy(BigNumber(gasLimit)).toNumber() }
isLoading={ isLoading }
className={ className }
/>
</Box>
</Tooltip>
{ gasTarget && (
<>
<TextSeparator color={ separatorColor } mx={ 1 }/>
<GasUsedToTargetRatio value={ gasTarget } isLoading={ isLoading }/>
</>
) }
</>
);
};
export default React.memo(chakra(BlockGasUsed));
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment