+ {t('transactionDetailGasHeading')}
+
+
+ {t('transactionDetailGasTooltipIntro', [
+ isMainnet ? t('networkNameEthereum') : '',
+ ])}
+
+ {t('transactionDetailGasTooltipExplanation')}
+
+
+ {t('transactionDetailGasTooltipConversion')}
+
+
+
+ }
+ position="top"
+ >
+
+
+
+ )
+ }
+ detailTitleColor={COLORS.BLACK}
+ detailText={
+
+ {renderHeartBeatIfNotInTest()}
+
- )}
-
- }
- />,
+
+ }
+ detailTotal={
+
+ {renderHeartBeatIfNotInTest()}
+
+
+ }
+ subText={t('editGasSubTextFee', [
+
+ {t('editGasSubTextFeeLabel')}
+ ,
+
+ {renderHeartBeatIfNotInTest()}
+
+
,
+ ])}
+ subTitle={
+ <>
+ {txData.dappSuggestedGasFees ? (
+
+ {t('transactionDetailDappGasMoreInfo')}
+
+ ) : (
+ ''
+ )}
+ {supportsEIP1559 && (
+
+ )}
+
+ }
+ />
+ ),
+ process.env.IN_TEST === 'true' ? null : ;
+
+const GasDetailItem = ({
+ hexMaximumTransactionFee,
+ hexMinimumTransactionFee,
+ isMainnet,
+ maxFeePerGas,
+ maxPriorityFeePerGas,
+ supportsEIP1559,
+ txData,
+ useNativeCurrencyAsPrimaryCurrency,
+}) => {
+ const t = useI18nContext();
+ return (
+
+
+
+
+
+ ()
+
+
+
+ {t('transactionDetailGasTooltipIntro', [
+ isMainnet ? t('networkNameEthereum') : '',
+ ])}
+
+
+ {t('transactionDetailGasTooltipExplanation')}
+
+
+
+ {t('transactionDetailGasTooltipConversion')}
+
+
+
+ }
+ position="top"
+ />
+
+ }
+ detailTitleColor={COLORS.BLACK}
+ detailText={
+
+
+
+
+ }
+ detailTotal={
+
+
+
+
+ }
+ subText={t('editGasSubTextFee', [
+
+
+
+
+
+
+
+
+ ,
+ ])}
+ subTitle={
+ supportsEIP1559 && (
+
+ )
+ }
+ />
+ );
+};
+
+GasDetailItem.propTypes = {
+ hexMaximumTransactionFee: PropTypes.string,
+ hexMinimumTransactionFee: PropTypes.string,
+ isMainnet: PropTypes.bool,
+ maxFeePerGas: PropTypes.string,
+ maxPriorityFeePerGas: PropTypes.string,
+ supportsEIP1559: PropTypes.bool,
+ txData: PropTypes.object,
+ useNativeCurrencyAsPrimaryCurrency: PropTypes.bool,
+};
+
+export default GasDetailItem;
diff --git a/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.scss b/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.scss
new file mode 100644
index 000000000..47d38af1f
--- /dev/null
+++ b/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.scss
@@ -0,0 +1,17 @@
+.gas-details-item {
+ &__estimate {
+ font-weight: 400;
+ font-style: italic;
+ font-size: 12px;
+ color: $Grey-500;
+ line-height: inherit;
+ }
+
+ &__gasfee-label {
+ font-weight: bold;
+ }
+
+ &__currency-container {
+ position: relative;
+ }
+}
diff --git a/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.test.js b/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.test.js
new file mode 100644
index 000000000..f94b70bbd
--- /dev/null
+++ b/ui/pages/confirm-transaction-base/gas-details-item/gas-details-item.test.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+
+import { ETH } from '../../../helpers/constants/common';
+import { renderWithProvider } from '../../../../test/jest';
+import configureStore from '../../../store/store';
+
+import GasDetailsItem from './gas-details-item';
+
+const render = (props) => {
+ const store = configureStore({
+ metamask: {
+ nativeCurrency: ETH,
+ preferences: {
+ useNativeCurrencyAsPrimaryCurrency: true,
+ },
+ provider: {},
+ },
+ });
+
+ return renderWithProvider(, store);
+};
+
+describe('GasDetailsItem', () => {
+ it('should render label', () => {
+ render();
+ expect(screen.queryByText('Gas')).toBeInTheDocument();
+ expect(screen.queryByText('(estimated)')).toBeInTheDocument();
+ expect(screen.queryByText('Max fee:')).toBeInTheDocument();
+ });
+
+ it('should render gas fee details', () => {
+ render({
+ hexMinimumTransactionFee: '0x1ca62a4f7800',
+ hexMaximumTransactionFee: '0x290ee75e3d900',
+ });
+ expect(screen.queryAllByText('0.000031')).toHaveLength(2);
+ expect(screen.queryByText('ETH')).toBeInTheDocument();
+ expect(screen.queryByText('0.000722')).toBeInTheDocument();
+ });
+});
diff --git a/ui/pages/confirm-transaction-base/gas-details-item/index.js b/ui/pages/confirm-transaction-base/gas-details-item/index.js
new file mode 100644
index 000000000..f6bacdbeb
--- /dev/null
+++ b/ui/pages/confirm-transaction-base/gas-details-item/index.js
@@ -0,0 +1 @@
+export { default } from './gas-details-item';
diff --git a/ui/pages/pages.scss b/ui/pages/pages.scss
index 300bdcf4a..df9de3f4e 100644
--- a/ui/pages/pages.scss
+++ b/ui/pages/pages.scss
@@ -5,6 +5,7 @@
@import 'confirm-approve/index';
@import 'confirm-decrypt-message/confirm-decrypt-message';
@import 'confirm-encryption-public-key/confirm-encryption-public-key';
+@import 'confirm-transaction-base/gas-details-item/gas-details-item';
@import 'confirmation/confirmation';
@import 'connected-sites/index';
@import 'connected-accounts/index';