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/transaction-alerts/transaction-alerts.js
flexa-rob e7527b65ee
17921 Update TransactionAlerts with BannerAlert (#17940)
* use banner alerts

* update selector for banner alert content

* lintage

* update button click for banner alert structure

* bump global branches coverage target

* removed unnecessary Typography usage

* remove Typography usage

* transaction alerts story

* pending transaction alerts

* created separate stories for each alert scenario
2023-03-13 12:29:10 -07:00

78 lines
2.6 KiB
JavaScript

import React from 'react';
import PropTypes from 'prop-types';
import { useSelector } from 'react-redux';
import { PriorityLevels } from '../../../../shared/constants/gas';
import { submittedPendingTransactionsSelector } from '../../../selectors';
import { useGasFeeContext } from '../../../contexts/gasFee';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { BannerAlert, ButtonLink, Text } from '../../component-library';
import SimulationErrorMessage from '../../ui/simulation-error-message';
import { SEVERITIES } from '../../../helpers/constants/design-system';
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
const TransactionAlerts = ({
userAcknowledgedGasMissing,
setUserAcknowledgedGasMissing,
}) => {
const { estimateUsed, hasSimulationError, supportsEIP1559, isNetworkBusy } =
useGasFeeContext();
const pendingTransactions = useSelector(submittedPendingTransactionsSelector);
const t = useI18nContext();
return (
<div className="transaction-alerts">
{supportsEIP1559 && hasSimulationError && (
<SimulationErrorMessage
userAcknowledgedGasMissing={userAcknowledgedGasMissing}
setUserAcknowledgedGasMissing={setUserAcknowledgedGasMissing}
/>
)}
{supportsEIP1559 && pendingTransactions?.length > 0 && (
<BannerAlert severity={SEVERITIES.WARNING}>
<Text as="p">
<strong>
{pendingTransactions?.length === 1
? t('pendingTransactionSingle', [pendingTransactions?.length])
: t('pendingTransactionMultiple', [
pendingTransactions?.length,
])}
</strong>{' '}
{t('pendingTransactionInfo')}
{t('learnCancelSpeeedup', [
<ButtonLink
key="cancelSpeedUpInfo"
href={ZENDESK_URLS.SPEEDUP_CANCEL}
rel="noopener noreferrer"
target="_blank"
>
{t('cancelSpeedUp')}
</ButtonLink>,
])}
</Text>
</BannerAlert>
)}
{estimateUsed === PriorityLevels.low && (
<BannerAlert
data-testid="low-gas-fee-alert"
severity={SEVERITIES.WARNING}
>
{t('lowPriorityMessage')}
</BannerAlert>
)}
{supportsEIP1559 && isNetworkBusy ? (
<BannerAlert severity={SEVERITIES.WARNING}>
{t('networkIsBusy')}
</BannerAlert>
) : null}
</div>
);
};
TransactionAlerts.propTypes = {
userAcknowledgedGasMissing: PropTypes.bool,
setUserAcknowledgedGasMissing: PropTypes.func,
};
export default TransactionAlerts;