+
+ DAI
+
+
-
- {subTitle}
-
+ {React.isValidElement(subTitle) ? (
+
+ {subTitle}
+
+ )}
export const getCustomSwapsGasPrice = (state) =>
state.metamask.swapsState.customGasPrice;
+export const getCustomMaxFeePerGas = (state) =>
+ state.metamask.swapsState.customMaxFeePerGas;
+
+export const getCustomMaxPriorityFeePerGas = (state) =>
+ state.metamask.swapsState.customMaxPriorityFeePerGas;
+
export const getFetchParams = (state) => state.metamask.swapsState.fetchParams;
export const getQuotes = (state) => state.metamask.swapsState.quotes;
@@ -503,6 +511,7 @@ export const fetchQuotesAndSetQuoteState = (
const hardwareWalletUsed = isHardwareWallet(state);
const hardwareWalletType = getHardwareWalletType(state);
+ const EIP1559Network = isEIP1559Network(state);
metaMetricsEvent({
event: 'Quotes Requested',
category: 'swaps',
@@ -544,7 +553,9 @@ export const fetchQuotesAndSetQuoteState = (
),
);
- const gasPriceFetchPromise = dispatch(fetchAndSetSwapsGasPriceInfo());
+ const gasPriceFetchPromise = EIP1559Network
+ ? null // For EIP 1559 we can get gas prices via "useGasFeeEstimates".
+ : dispatch(fetchAndSetSwapsGasPriceInfo());
const [[fetchedQuotes, selectedAggId]] = await Promise.all([
fetchAndSetQuotesPromise,
@@ -616,6 +627,7 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
const state = getState();
const chainId = getCurrentChainId(state);
const hardwareWalletUsed = isHardwareWallet(state);
+ const EIP1559Network = isEIP1559Network(state);
let swapsLivenessForNetwork = {
swapsFeatureIsLive: false,
useNewSwapsApi: false,
@@ -637,6 +649,8 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
}
const customSwapsGas = getCustomSwapsGas(state);
+ const customMaxFeePerGas = getCustomMaxFeePerGas(state);
+ const customMaxPriorityFeePerGas = getCustomMaxPriorityFeePerGas(state);
const fetchParams = getFetchParams(state);
const { metaData, value: swapTokenValue, slippage } = fetchParams;
const { sourceTokenInfo = {}, destinationTokenInfo = {} } = metaData;
@@ -649,6 +663,26 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
const { fast: fastGasEstimate } = getSwapGasPriceEstimateData(state);
+ let maxFeePerGas;
+ let maxPriorityFeePerGas;
+ let baseAndPriorityFeePerGas;
+
+ if (EIP1559Network) {
+ const {
+ high: { suggestedMaxFeePerGas, suggestedMaxPriorityFeePerGas },
+ estimatedBaseFee = '0',
+ } = getGasFeeEstimates(state);
+ maxFeePerGas =
+ customMaxFeePerGas || decGWEIToHexWEI(suggestedMaxFeePerGas);
+ maxPriorityFeePerGas =
+ customMaxPriorityFeePerGas ||
+ decGWEIToHexWEI(suggestedMaxPriorityFeePerGas);
+ baseAndPriorityFeePerGas = addHexes(
+ decGWEIToHexWEI(estimatedBaseFee),
+ maxPriorityFeePerGas,
+ );
+ }
+
const usedQuote = getUsedQuote(state);
const usedTradeTxParams = usedQuote.trade;
@@ -668,7 +702,13 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
const usedGasPrice = getUsedSwapsGasPrice(state);
usedTradeTxParams.gas = maxGasLimit;
- usedTradeTxParams.gasPrice = usedGasPrice;
+ if (EIP1559Network) {
+ usedTradeTxParams.maxFeePerGas = maxFeePerGas;
+ usedTradeTxParams.maxPriorityFeePerGas = maxPriorityFeePerGas;
+ delete usedTradeTxParams.gasPrice;
+ } else {
+ usedTradeTxParams.gasPrice = usedGasPrice;
+ }
const usdConversionRate = getUSDConversionRate(state);
const destinationValue = calcTokenAmount(
@@ -682,7 +722,10 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
.plus(usedQuote.approvalNeeded?.gas || '0x0', 16)
.toString(16);
const gasEstimateTotalInUSD = getValueFromWeiHex({
- value: calcGasTotal(totalGasLimitEstimate, usedGasPrice),
+ value: calcGasTotal(
+ totalGasLimitEstimate,
+ EIP1559Network ? baseAndPriorityFeePerGas : usedGasPrice,
+ ),
toCurrency: 'usd',
conversionRate: usdConversionRate,
numberOfDecimals: 6,
@@ -714,6 +757,11 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
is_hardware_wallet: hardwareWalletUsed,
hardware_wallet_type: getHardwareWalletType(state),
};
+ if (EIP1559Network) {
+ swapMetaData.max_fee_per_gas = maxFeePerGas;
+ swapMetaData.max_priority_fee_per_gas = maxPriorityFeePerGas;
+ swapMetaData.base_and_priority_fee_per_gas = baseAndPriorityFeePerGas;
+ }
metaMetricsEvent({
event: 'Swap Started',
@@ -744,6 +792,11 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
}
if (approveTxParams) {
+ if (EIP1559Network) {
+ approveTxParams.maxFeePerGas = maxFeePerGas;
+ approveTxParams.maxPriorityFeePerGas = maxPriorityFeePerGas;
+ delete approveTxParams.gasPrice;
+ }
const approveTxMeta = await dispatch(
addUnapprovedTransaction(
{ ...approveTxParams, amount: '0x0' },
diff --git a/ui/ducks/swaps/swaps.test.js b/ui/ducks/swaps/swaps.test.js
index c3a9c9e3e..192e1bb9d 100644
--- a/ui/ducks/swaps/swaps.test.js
+++ b/ui/ducks/swaps/swaps.test.js
@@ -1,6 +1,6 @@
import nock from 'nock';
-import { MOCKS } from '../../../test/jest';
+import { MOCKS, createSwapsMockStore } from '../../../test/jest';
import { setSwapsLiveness } from '../../store/actions';
import { setStorageItem } from '../../helpers/utils/storage-helpers';
import * as swaps from './swaps';
@@ -164,4 +164,82 @@ describe('Ducks - Swaps', () => {
expect(swapsLiveness).toMatchObject(expectedSwapsLiveness);
});
});
+
+ describe('getCustomSwapsGas', () => {
+ it('returns "customMaxGas"', () => {
+ const state = createSwapsMockStore();
+ const customMaxGas = '29000';
+ state.metamask.swapsState.customMaxGas = customMaxGas;
+ expect(swaps.getCustomSwapsGas(state)).toBe(customMaxGas);
+ });
+ });
+
+ describe('getCustomMaxFeePerGas', () => {
+ it('returns "customMaxFeePerGas"', () => {
+ const state = createSwapsMockStore();
+ const customMaxFeePerGas = '20';
+ state.metamask.swapsState.customMaxFeePerGas = customMaxFeePerGas;
+ expect(swaps.getCustomMaxFeePerGas(state)).toBe(customMaxFeePerGas);
+ });
+ });
+
+ describe('getCustomMaxPriorityFeePerGas', () => {
+ it('returns "customMaxPriorityFeePerGas"', () => {
+ const state = createSwapsMockStore();
+ const customMaxPriorityFeePerGas = '3';
+ state.metamask.swapsState.customMaxPriorityFeePerGas = customMaxPriorityFeePerGas;
+ expect(swaps.getCustomMaxPriorityFeePerGas(state)).toBe(
+ customMaxPriorityFeePerGas,
+ );
+ });
+ });
+
+ describe('getSwapsFeatureIsLive', () => {
+ it('returns true for "swapsFeatureIsLive"', () => {
+ const state = createSwapsMockStore();
+ const swapsFeatureIsLive = true;
+ state.metamask.swapsState.swapsFeatureIsLive = swapsFeatureIsLive;
+ expect(swaps.getSwapsFeatureIsLive(state)).toBe(swapsFeatureIsLive);
+ });
+
+ it('returns false for "swapsFeatureIsLive"', () => {
+ const state = createSwapsMockStore();
+ const swapsFeatureIsLive = false;
+ state.metamask.swapsState.swapsFeatureIsLive = swapsFeatureIsLive;
+ expect(swaps.getSwapsFeatureIsLive(state)).toBe(swapsFeatureIsLive);
+ });
+ });
+
+ describe('getUseNewSwapsApi', () => {
+ it('returns true for "useNewSwapsApi"', () => {
+ const state = createSwapsMockStore();
+ const useNewSwapsApi = true;
+ state.metamask.swapsState.useNewSwapsApi = useNewSwapsApi;
+ expect(swaps.getUseNewSwapsApi(state)).toBe(useNewSwapsApi);
+ });
+
+ it('returns false for "useNewSwapsApi"', () => {
+ const state = createSwapsMockStore();
+ const useNewSwapsApi = false;
+ state.metamask.swapsState.useNewSwapsApi = useNewSwapsApi;
+ expect(swaps.getUseNewSwapsApi(state)).toBe(useNewSwapsApi);
+ });
+ });
+
+ describe('getUsedQuote', () => {
+ it('returns selected quote', () => {
+ const state = createSwapsMockStore();
+ expect(swaps.getUsedQuote(state)).toMatchObject(
+ state.metamask.swapsState.quotes.TEST_AGG_2,
+ );
+ });
+
+ it('returns best quote', () => {
+ const state = createSwapsMockStore();
+ state.metamask.swapsState.selectedAggId = null;
+ expect(swaps.getUsedQuote(state)).toMatchObject(
+ state.metamask.swapsState.quotes.TEST_AGG_BEST,
+ );
+ });
+ });
});
diff --git a/ui/helpers/constants/gas.js b/ui/helpers/constants/gas.js
index d9bb1fbd5..94ea4f7ef 100644
--- a/ui/helpers/constants/gas.js
+++ b/ui/helpers/constants/gas.js
@@ -7,10 +7,10 @@ export const GAS_FORM_ERRORS = {
MAX_FEE_HIGH_WARNING: 'editGasMaxFeeHigh',
};
-export function getGasFormErrorText(type, t) {
+export function getGasFormErrorText(type, t, { minimumGasLimit } = {}) {
switch (type) {
case GAS_FORM_ERRORS.GAS_LIMIT_OUT_OF_BOUNDS:
- return t('editGasLimitOutOfBounds');
+ return t('editGasLimitOutOfBounds', [minimumGasLimit]);
case GAS_FORM_ERRORS.MAX_PRIORITY_FEE_TOO_LOW:
return t('editGasMaxPriorityFeeLow');
case GAS_FORM_ERRORS.MAX_FEE_TOO_LOW:
diff --git a/ui/hooks/useGasFeeInputs.js b/ui/hooks/useGasFeeInputs.js
index 140e0fa19..b56303e74 100644
--- a/ui/hooks/useGasFeeInputs.js
+++ b/ui/hooks/useGasFeeInputs.js
@@ -3,8 +3,15 @@ import { useCallback, useState } from 'react';
import { useSelector } from 'react-redux';
import { findKey } from 'lodash';
-import { GAS_ESTIMATE_TYPES } from '../../shared/constants/gas';
-import { multiplyCurrencies } from '../../shared/modules/conversion.utils';
+import {
+ GAS_ESTIMATE_TYPES,
+ EDIT_GAS_MODES,
+ GAS_LIMITS,
+} from '../../shared/constants/gas';
+import {
+ multiplyCurrencies,
+ conversionLessThan,
+} from '../../shared/modules/conversion.utils';
import {
getMaximumGasTotalInHexWei,
getMinimumGasTotalInHexWei,
@@ -152,7 +159,12 @@ function getMatchingEstimateFromGasFees(
* './useGasFeeEstimates'
* ).GasEstimates} - gas fee input state and the GasFeeEstimates object
*/
-export function useGasFeeInputs(defaultEstimateToUse = 'medium', transaction) {
+export function useGasFeeInputs(
+ defaultEstimateToUse = 'medium',
+ transaction,
+ minimumGasLimit,
+ editGasMode,
+) {
// We need to know whether to show fiat conversions or not, so that we can
// default our fiat values to empty strings if showing fiat is not wanted or
// possible.
@@ -257,9 +269,11 @@ export function useGasFeeInputs(defaultEstimateToUse = 'medium', transaction) {
// conditionally set to the appropriate fields to compute the minimum
// and maximum cost of a transaction given the current estimates or selected
// gas fees.
+
const gasSettings = {
gasLimit: decimalToHex(gasLimit),
};
+
if (gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET) {
gasSettings.maxFeePerGas = decGWEIToHexWEI(maxFeePerGasToUse);
gasSettings.maxPriorityFeePerGas = decGWEIToHexWEI(
@@ -276,8 +290,18 @@ export function useGasFeeInputs(defaultEstimateToUse = 'medium', transaction) {
// The maximum amount this transaction will cost
const maximumCostInHexWei = getMaximumGasTotalInHexWei(gasSettings);
+
+ // If in swaps, we want to calculate the minimum gas fee differently than the max
+ const minGasSettings = {};
+ if (editGasMode === EDIT_GAS_MODES.SWAPS) {
+ minGasSettings.gasLimit = decimalToHex(minimumGasLimit);
+ }
+
// The minimum amount this transaction will cost's
- const minimumCostInHexWei = getMinimumGasTotalInHexWei(gasSettings);
+ const minimumCostInHexWei = getMinimumGasTotalInHexWei({
+ ...gasSettings,
+ ...minGasSettings,
+ });
// We need to display the estimated fiat currency impact of the
// maxPriorityFeePerGas field to the user. This hook calculates that amount.
@@ -331,7 +355,12 @@ export function useGasFeeInputs(defaultEstimateToUse = 'medium', transaction) {
const gasErrors = {};
const gasWarnings = {};
- if (gasLimit < 21000 || gasLimit > 7920027) {
+ const gasLimitTooLow = conversionLessThan(
+ { value: gasLimit, fromNumericBase: 'dec' },
+ { value: minimumGasLimit || GAS_LIMITS.SIMPLE, fromNumericBase: 'hex' },
+ );
+
+ if (gasLimitTooLow) {
gasErrors.gasLimit = GAS_FORM_ERRORS.GAS_LIMIT_OUT_OF_BOUNDS;
}
diff --git a/ui/pages/swaps/awaiting-signatures/__snapshots__/swap-step-icon.test.js.snap b/ui/pages/swaps/awaiting-signatures/__snapshots__/swap-step-icon.test.js.snap
index 681947428..bb0b0b5ae 100644
--- a/ui/pages/swaps/awaiting-signatures/__snapshots__/swap-step-icon.test.js.snap
+++ b/ui/pages/swaps/awaiting-signatures/__snapshots__/swap-step-icon.test.js.snap
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`SwapStepIcon renders the component 1`] = `
+exports[`SwapStepIcon renders the component with step 1 by default 1`] = `
`;
+
+exports[`SwapStepIcon renders the component with step 2 1`] = `
+
{subTitle}
+ ) : (
+
+
+
+`;
diff --git a/ui/pages/swaps/awaiting-signatures/swap-step-icon.test.js b/ui/pages/swaps/awaiting-signatures/swap-step-icon.test.js
index 47c92d7aa..941bca984 100644
--- a/ui/pages/swaps/awaiting-signatures/swap-step-icon.test.js
+++ b/ui/pages/swaps/awaiting-signatures/swap-step-icon.test.js
@@ -4,8 +4,13 @@ import { renderWithProvider } from '../../../../test/jest';
import SwapStepIcon from './swap-step-icon';
describe('SwapStepIcon', () => {
- it('renders the component', () => {
+ it('renders the component with step 1 by default', () => {
const { container } = renderWithProvider(
+
+`;
+
+exports[`FeeCard renders the component with EIP-1559 enabled 2`] = `
+
+
++ Using the best quote +
+
+
+ + 6 quotes +
+
+
+
+
+
+`;
+
exports[`FeeCard renders the component with initial props 1`] = `
+
+
+ Quote includes a 0.875% MetaMask fee
+
+
+
+
+
+
+
+
+
-
-
-
-
-
- {t('swapEstimatedNetworkFee')}
-
- - {t('swapNetworkFeeSummary', [getTranslatedNetworkName()])} -
-- {t('swapEstimatedNetworkFeeSummary', [ - - {t('swapEstimatedNetworkFee')} - , - ])} -
-- {t('swapMaxNetworkFeeInfo', [ - - {t('swapMaxNetworkFees')} - , - ])} -
- - } - containerClassName="fee-card__info-tooltip-content-container" - wrapperClassName="fee-card__row-label fee-card__info-tooltip-container" - wide - /> -
-
- {primaryFee.fee}
-
- {secondaryFee && (
-
- {secondaryFee.fee}
+ {EIP1559Network && (
+
+ {t('transactionDetailGasHeading')}
+
+
+ {t('maxFee')}
+
+ {`: ${secondaryFee.maxFee}`}
+ onFeeCardMaxRowClick()}
+ >
+ {t('edit')}
+
+
+ )
+ }
+ />,
+ ]}
+ />
+ )}
+ {!EIP1559Network && (
+
+ {t('swapGasFeesSummary', [ + getTranslatedNetworkName(), + ])} +
++ {t('swapGasFeesDetails')} +
+ + + } + containerClassName="fee-card__info-tooltip-content-container" + wrapperClassName="fee-card__row-label fee-card__info-tooltip-container" + wide + /> + + } + detailText={primaryFee.fee} + detailTotal={secondaryFee.fee} + subTitle={ +
+
-
+
-
+ {t('swapEstimatedNetworkFee')}
- )}
- onFeeCardMaxRowClick()}
- >
-
-
-
- {t('swapMaxNetworkFees')}
+
+
- + {t('swapNetworkFeeSummary', [getTranslatedNetworkName()])} +
++ {t('swapEstimatedNetworkFeeSummary', [ + + {t('swapEstimatedNetworkFee')} + , + ])} +
++ {t('swapMaxNetworkFeeInfo', [ + + {t('swapMaxNetworkFees')} + , + ])} +
+ + } + containerClassName="fee-card__info-tooltip-content-container" + wrapperClassName="fee-card__row-label fee-card__info-tooltip-container" + wide + />{t('edit')}
-
-
+ )}
+ {!EIP1559Network && (
+
- {primaryFee.maxFee}
-
- {secondaryFee?.maxFee !== undefined && (
-
- {secondaryFee.maxFee}
+
-
+
+ {primaryFee.fee}
- )}
+ {secondaryFee && (
+
+ {secondaryFee.fee}
+
+ )}
+ onFeeCardMaxRowClick()}
+ >
+
+ )}
+
{!hideTokenApprovalRow && (
+
+
+ {t('swapMaxNetworkFees')}
+
+ {t('edit')}
+
+
+
+ {primaryFee.maxFee}
+
+ {secondaryFee?.maxFee !== undefined && (
+
+ {secondaryFee.maxFee}
+
+ )}
+
@@ -199,4 +302,6 @@ FeeCard.propTypes = {
numberOfQuotes: PropTypes.number.isRequired,
tokenConversionRate: PropTypes.number,
chainId: PropTypes.string.isRequired,
+ EIP1559Network: PropTypes.bool.isRequired,
+ maxPriorityFeePerGasDecGWEI: PropTypes.string,
};
diff --git a/ui/pages/swaps/fee-card/fee-card.test.js b/ui/pages/swaps/fee-card/fee-card.test.js
index 7a81e4903..f1cbd05a2 100644
--- a/ui/pages/swaps/fee-card/fee-card.test.js
+++ b/ui/pages/swaps/fee-card/fee-card.test.js
@@ -1,9 +1,30 @@
import React from 'react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
-import { renderWithProvider } from '../../../../test/jest';
+import {
+ renderWithProvider,
+ createSwapsMockStore,
+ MOCKS,
+} from '../../../../test/jest';
import { MAINNET_CHAIN_ID } from '../../../../shared/constants/network';
import FeeCard from '.';
+const middleware = [thunk];
+
+jest.mock('../../../hooks/useGasFeeEstimates', () => {
+ return {
+ useGasFeeEstimates: () => {
+ return {
+ gasFeeEstimates: MOCKS.createGasFeeEstimatesForFeeMarket(),
+ gasEstimateType: 'fee-market',
+ estimatedGasFeeTimeBounds: undefined,
+ isGasEstimatesLoading: false,
+ };
+ },
+ };
+});
+
const createProps = (customProps = {}) => {
return {
primaryFee: {
@@ -32,6 +53,7 @@ const createProps = (customProps = {}) => {
onQuotesClick: jest.fn(),
tokenConversionRate: 0.015,
chainId: MAINNET_CHAIN_ID,
+ EIP1559Network: false,
...customProps,
};
};
@@ -58,4 +80,29 @@ describe('FeeCard', () => {
document.querySelector('.fee-card__top-bordered-row'),
).toMatchSnapshot();
});
+
+ it('renders the component with EIP-1559 enabled', () => {
+ const store = configureMockStore(middleware)(createSwapsMockStore());
+ const props = createProps({
+ EIP1559Network: true,
+ maxPriorityFeePerGasDecGWEI: '3',
+ });
+ const { getByText } = renderWithProvider(
+
+ 10
+
+
+
+ DAI
+
+
+`;
+
+exports[`ViewQuote renders the component with EIP-1559 enabled 2`] = `
+
+
+ DAI
+
+
+
+`;
+
+exports[`ViewQuote renders the component with EIP-1559 enabled 3`] = `
+
+
+ 1
+
+
+ DAI
+
+
+ =
+
+
+ 2.2
+
+
+ USDC
+
+
+
+
+
+
+
+`;
+
exports[`ViewQuote renders the component with initial props 1`] = `
+
+
+
+
+ + 3 quotes +
+
+
+
+ {
return quotesToRenderableData(
quotes,
- gasPrice,
+ EIP1559Network ? baseAndPriorityFeePerGas : gasPrice,
conversionRate,
currentCurrency,
approveGas,
@@ -195,6 +241,8 @@ export default function ViewQuote() {
}, [
quotes,
gasPrice,
+ baseAndPriorityFeePerGas,
+ EIP1559Network,
conversionRate,
currentCurrency,
approveGas,
@@ -221,7 +269,7 @@ export default function ViewQuote() {
const { feeInFiat, feeInEth } = getRenderableNetworkFeesForQuote({
tradeGas: usedGasLimit,
approveGas,
- gasPrice,
+ gasPrice: EIP1559Network ? baseAndPriorityFeePerGas : gasPrice,
currentCurrency,
conversionRate,
tradeValue,
@@ -238,7 +286,7 @@ export default function ViewQuote() {
} = getRenderableNetworkFeesForQuote({
tradeGas: maxGasLimit,
approveGas,
- gasPrice,
+ gasPrice: EIP1559Network ? maxFeePerGas : gasPrice,
currentCurrency,
conversionRate,
tradeValue,
@@ -455,7 +503,10 @@ export default function ViewQuote() {
};
const nonGasFeeIsPositive = new BigNumber(nonGasFee, 16).gt(0);
- const approveGasTotal = calcGasTotal(approveGas || '0x0', gasPrice);
+ const approveGasTotal = calcGasTotal(
+ approveGas || '0x0',
+ EIP1559Network ? baseAndPriorityFeePerGas : gasPrice,
+ );
const extraNetworkFeeTotalInHexWEI = new BigNumber(nonGasFee, 16)
.plus(approveGasTotal, 16)
.toString(16);
@@ -474,26 +525,29 @@ export default function ViewQuote() {
extraInfoRowLabel = t('aggregatorFeeCost');
}
- const onFeeCardMaxRowClick = () =>
- dispatch(
- showModal({
- name: 'CUSTOMIZE_METASWAP_GAS',
- value: tradeValue,
- customGasLimitMessage: approveGas
- ? t('extraApprovalGas', [hexToDecimal(approveGas)])
- : '',
- customTotalSupplement: approveGasTotal,
- extraInfoRow: extraInfoRowLabel
- ? {
- label: extraInfoRowLabel,
- value: `${extraNetworkFeeTotalInEth} ${nativeCurrencySymbol}`,
- }
- : null,
- initialGasPrice: gasPrice,
- initialGasLimit: maxGasLimit,
- minimumGasLimit: new BigNumber(nonCustomMaxGasLimit, 16).toNumber(),
- }),
- );
+ const onFeeCardMaxRowClick = () => {
+ EIP1559Network
+ ? setShowEditGasPopover(true)
+ : dispatch(
+ showModal({
+ name: 'CUSTOMIZE_METASWAP_GAS',
+ value: tradeValue,
+ customGasLimitMessage: approveGas
+ ? t('extraApprovalGas', [hexToDecimal(approveGas)])
+ : '',
+ customTotalSupplement: approveGasTotal,
+ extraInfoRow: extraInfoRowLabel
+ ? {
+ label: extraInfoRowLabel,
+ value: `${extraNetworkFeeTotalInEth} ${nativeCurrencySymbol}`,
+ }
+ : null,
+ initialGasPrice: gasPrice,
+ initialGasLimit: maxGasLimit,
+ minimumGasLimit: new BigNumber(nonCustomMaxGasLimit, 16).toNumber(),
+ }),
+ );
+ };
const tokenApprovalTextComponent = (
@@ -590,6 +644,10 @@ export default function ViewQuote() {
const isShowingWarning =
showInsufficientWarning || shouldShowPriceDifferenceWarning;
+ const onCloseEditGasPopover = () => {
+ setShowEditGasPopover(false);
+ };
+
return (
@@ -697,8 +775,8 @@ export default function ViewQuote() {
balanceError ||
tokenBalanceUnavailable ||
disableSubmissionDueToPriceWarning ||
- gasPrice === null ||
- gasPrice === undefined
+ (EIP1559Network && baseAndPriorityFeePerGas === undefined) ||
+ (!EIP1559Network && (gasPrice === null || gasPrice === undefined))
}
className={isShowingWarning && 'view-quote__thin-swaps-footer'}
showTopBorder
diff --git a/ui/pages/swaps/view-quote/view-quote.test.js b/ui/pages/swaps/view-quote/view-quote.test.js
index f1b362f80..89b802169 100644
--- a/ui/pages/swaps/view-quote/view-quote.test.js
+++ b/ui/pages/swaps/view-quote/view-quote.test.js
@@ -6,6 +6,7 @@ import {
renderWithProvider,
createSwapsMockStore,
setBackgroundConnection,
+ MOCKS,
} from '../../../../test/jest';
import ViewQuote from '.';
@@ -13,6 +14,18 @@ jest.mock('../../../components/ui/info-tooltip/info-tooltip-icon', () => () =>
'
)}
+
+ {showEditGasPopover && EIP1559Network && (
+