1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
2023-02-02 20:15:26 +00:00

83 lines
2.6 KiB
JavaScript

import React, { useContext } from 'react';
import {
FONT_WEIGHT,
TextColor,
TypographyVariant,
} 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={TextColor.textAlternative}
fontWeight={FONT_WEIGHT.BOLD}
marginTop={3}
marginBottom={3}
variant={TypographyVariant.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;