1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/edit-gas-fee-popover/network-status/network-status.js

60 lines
2.1 KiB
JavaScript

import React from 'react';
import { toBigNumber } from '../../../../../shared/modules/conversion.utils';
import { COLORS } from '../../../../helpers/constants/design-system';
import { useGasFeeContext } from '../../../../contexts/gasFee';
import I18nValue from '../../../ui/i18n-value';
import Typography from '../../../ui/typography/typography';
import StatusSlider from './status-slider';
const NetworkStatus = () => {
const { gasFeeEstimates } = useGasFeeContext();
let estBaseFee = null;
if (gasFeeEstimates?.estimatedBaseFee) {
// estimatedBaseFee is not likely to be below 1, value .01 is used as test networks sometimes
// show have small values for it and more decimal places may cause UI to look broken.
estBaseFee = toBigNumber.dec(gasFeeEstimates?.estimatedBaseFee);
estBaseFee = estBaseFee.lessThan(0.01) ? 0.01 : estBaseFee.toFixed(2);
}
return (
<div className="network-status">
<Typography
color={COLORS.UI4}
fontSize="10px"
fontWeight="bold"
margin={[3, 0]}
variant="h6"
>
<I18nValue messageKey="networkStatus" />
</Typography>
<div className="network-status__info">
<div className="network-status__info__field">
<span className="network-status__info__field-data">
{estBaseFee !== null && `${estBaseFee} GWEI`}
</span>
<span className="network-status__info__field-label">Base fee</span>
</div>
<div className="network-status__info__separator" />
<div className="network-status__info__field network-status__info__field--priority-fee">
<span className="network-status__info__field-data">
0.5 - 22 GWEI
</span>
<span className="network-status__info__field-label">
Priority fee
</span>
</div>
<div className="network-status__info__separator" />
<div className="network-status__info__field">
<StatusSlider />
</div>
</div>
</div>
);
};
NetworkStatus.propTypes = {};
export default NetworkStatus;