1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 15:35:46 +01:00
metamask-extension/ui/components/app/edit-gas-fee-popover/network-statistics/network-statistics.js
George Marshall 05a20bb721
Add responsive props to Box component (#15106)
* Adding responsive props to Box component

* Updating margin array prop instances

* Updating padding array prop instances

* Updates to docs, tests and margin, padding instances

* Optimizing class name object

* Simplifying single value logic

* replacing for loop with switch statement

* Memoizing generateClassNames function
2022-07-20 13:47:51 -07:00

83 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}
marginTop={3}
marginBottom={3}
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;