mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-23 11:46:13 +02:00
f8f4397339
When the gas API is down, the logic we use will no longer compute all of the data that the gas API returns in order to reduce the burden on Infura. Specifically, only estimated fees for different priority levels, as well as the latest base fee, will be available; all other data points, such as the latest and historical priority fee range and network stability, will be missing. This commit updates the frontend logic to account for this lack of data by merely hiding the relevant pieces of the UI that would otherwise be shown.
82 lines
2.6 KiB
JavaScript
82 lines
2.6 KiB
JavaScript
import React, { useContext } from 'react';
|
|
import {
|
|
COLORS,
|
|
FONT_WEIGHT,
|
|
TYPOGRAPHY,
|
|
} from '../../../../helpers/constants/design-system';
|
|
import { isNullish } from '../../../../helpers/utils/util';
|
|
import { formatGasFeeOrFeeRange } from '../../../../helpers/utils/gas';
|
|
import { I18nContext } from '../../../../contexts/i18n';
|
|
import { useGasFeeContext } from '../../../../contexts/gasFee';
|
|
import Typography from '../../../ui/typography/typography';
|
|
import { BaseFeeTooltip, PriorityFeeTooltip } from './tooltips';
|
|
import StatusSlider from './status-slider';
|
|
|
|
const NetworkStatistics = () => {
|
|
const t = useContext(I18nContext);
|
|
const { gasFeeEstimates } = useGasFeeContext();
|
|
const formattedLatestBaseFee = formatGasFeeOrFeeRange(
|
|
gasFeeEstimates?.estimatedBaseFee,
|
|
{
|
|
precision: 0,
|
|
},
|
|
);
|
|
const formattedLatestPriorityFeeRange = formatGasFeeOrFeeRange(
|
|
gasFeeEstimates?.latestPriorityFeeRange,
|
|
{ precision: [1, 0] },
|
|
);
|
|
const networkCongestion = gasFeeEstimates?.networkCongestion;
|
|
|
|
return (
|
|
<div className="network-statistics">
|
|
<Typography
|
|
color={COLORS.TEXT_ALTERNATIVE}
|
|
fontWeight={FONT_WEIGHT.BOLD}
|
|
margin={[3, 0]}
|
|
variant={TYPOGRAPHY.H8}
|
|
>
|
|
{t('networkStatus')}
|
|
</Typography>
|
|
<div className="network-statistics__info">
|
|
{isNullish(formattedLatestBaseFee) ? null : (
|
|
<div
|
|
className="network-statistics__field"
|
|
data-testid="formatted-latest-base-fee"
|
|
>
|
|
<BaseFeeTooltip>
|
|
<span className="network-statistics__field-data">
|
|
{formattedLatestBaseFee}
|
|
</span>
|
|
<span className="network-statistics__field-label">
|
|
{t('baseFee')}
|
|
</span>
|
|
</BaseFeeTooltip>
|
|
</div>
|
|
)}
|
|
{isNullish(formattedLatestPriorityFeeRange) ? null : (
|
|
<div
|
|
className="network-statistics__field"
|
|
data-testid="formatted-latest-priority-fee-range"
|
|
>
|
|
<PriorityFeeTooltip>
|
|
<span className="network-statistics__field-data">
|
|
{formattedLatestPriorityFeeRange}
|
|
</span>
|
|
<span className="network-statistics__field-label">
|
|
{t('priorityFee')}
|
|
</span>
|
|
</PriorityFeeTooltip>
|
|
</div>
|
|
)}
|
|
{isNullish(networkCongestion) ? null : (
|
|
<div className="network-statistics__field">
|
|
<StatusSlider />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default NetworkStatistics;
|