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/edit-gas-fee-popover.js
2021-12-12 04:56:28 +05:30

92 lines
3.4 KiB
JavaScript

import React from 'react';
import {
EDIT_GAS_MODES,
PRIORITY_LEVELS,
} from '../../../../shared/constants/gas';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { useTransactionModalContext } from '../../../contexts/transaction-modal';
import ErrorMessage from '../../ui/error-message';
import I18nValue from '../../ui/i18n-value';
import Popover from '../../ui/popover';
import Typography from '../../ui/typography/typography';
import { COLORS, TYPOGRAPHY } from '../../../helpers/constants/design-system';
import { INSUFFICIENT_FUNDS_ERROR_KEY } from '../../../helpers/constants/error-keys';
import { useGasFeeContext } from '../../../contexts/gasFee';
import EditGasItem from './edit-gas-item';
import NetworkStatistics from './network-statistics';
const EditGasFeePopover = () => {
const { balanceError, editGasMode } = useGasFeeContext();
const t = useI18nContext();
const { closeModal, currentModal } = useTransactionModalContext();
if (currentModal !== 'editGasFee') return null;
return (
<Popover
title={t('editGasFeeModalTitle')}
onClose={() => closeModal('editGasFee')}
className="edit-gas-fee-popover"
>
<>
<div className="edit-gas-fee-popover__wrapper">
<div className="edit-gas-fee-popover__content">
{balanceError && (
<ErrorMessage errorKey={INSUFFICIENT_FUNDS_ERROR_KEY} />
)}
<div className="edit-gas-fee-popover__content__header">
<span className="edit-gas-fee-popover__content__header-option">
<I18nValue messageKey="gasOption" />
</span>
<span className="edit-gas-fee-popover__content__header-time">
{editGasMode !== EDIT_GAS_MODES.SWAPS && (
<I18nValue messageKey="time" />
)}
</span>
<span className="edit-gas-fee-popover__content__header-max-fee">
<I18nValue messageKey="maxFee" />
</span>
</div>
{editGasMode !== EDIT_GAS_MODES.SWAPS && (
<EditGasItem priorityLevel={PRIORITY_LEVELS.LOW} />
)}
<EditGasItem priorityLevel={PRIORITY_LEVELS.MEDIUM} />
<EditGasItem priorityLevel={PRIORITY_LEVELS.HIGH} />
<div className="edit-gas-fee-popover__content__separator" />
{editGasMode !== EDIT_GAS_MODES.SWAPS && (
<EditGasItem priorityLevel={PRIORITY_LEVELS.DAPP_SUGGESTED} />
)}
<EditGasItem priorityLevel={PRIORITY_LEVELS.CUSTOM} />
<NetworkStatistics />
<Typography
className="edit-gas-fee-popover__know-more"
align="center"
color={COLORS.UI4}
tag={TYPOGRAPHY.Paragraph}
variant={TYPOGRAPHY.H7}
>
<I18nValue
messageKey="learmMoreAboutGas"
options={[
<a
key="learnMoreLink"
target="_blank"
rel="noopener noreferrer"
href="https://metamask.zendesk.com/hc/en-us/articles/4404600179227-User-Guide-Gas"
>
<I18nValue messageKey="learnMore" />
</a>,
]}
/>
</Typography>
</div>
</div>
</>
</Popover>
);
};
export default EditGasFeePopover;