diff --git a/ui/pages/swaps/fee-card/__snapshots__/fee-card.test.js.snap b/ui/pages/swaps/fee-card/__snapshots__/fee-card.test.js.snap index 85bc1b6b4..dea196ec9 100644 --- a/ui/pages/swaps/fee-card/__snapshots__/fee-card.test.js.snap +++ b/ui/pages/swaps/fee-card/__snapshots__/fee-card.test.js.snap @@ -1,7 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`FeeCard renders the component with EIP-1559 V2 enabled 1`] = `null`; - exports[`FeeCard renders the component with EIP-1559 enabled 1`] = `null`; exports[`FeeCard renders the component with initial props 1`] = `null`; diff --git a/ui/pages/swaps/fee-card/fee-card.js b/ui/pages/swaps/fee-card/fee-card.js index f2451f624..28d7a0131 100644 --- a/ui/pages/swaps/fee-card/fee-card.js +++ b/ui/pages/swaps/fee-card/fee-card.js @@ -18,7 +18,6 @@ import { TYPOGRAPHY, FONT_WEIGHT, } from '../../../helpers/constants/design-system'; -import GasDetailsItemTitle from '../../../components/app/gas-details-item/gas-details-item-title'; import { MetaMetricsContext } from '../../../contexts/metametrics'; import { EVENT } from '../../../../shared/constants/metametrics'; @@ -35,10 +34,7 @@ export default function FeeCard({ numberOfQuotes, onQuotesClick, chainId, - smartTransactionsOptInStatus, - smartTransactionsEnabled, isBestQuote, - supportsEIP1559V2 = false, }) { const t = useContext(I18nContext); @@ -72,57 +68,50 @@ export default function FeeCard({
- ) : ( - <> - {t('transactionDetailGasHeading')} - -

- {t('swapGasFeesSummary', [ - getTranslatedNetworkName(), - ])} -

-

- {t('swapGasFeesDetails')} -

-

- { - trackEvent({ - event: 'Clicked "Gas Fees: Learn More" Link', - category: EVENT.CATEGORIES.SWAPS, - }); - global.platform.openTab({ - url: GAS_FEES_LEARN_MORE_URL, - }); - }} - target="_blank" - rel="noopener noreferrer" - > - {t('swapGasFeesLearnMore')} - -

- - } - containerClassName="fee-card__info-tooltip-content-container" - wrapperClassName="fee-card__row-label fee-card__info-tooltip-container" - wide - /> - - ) + <> + {t('transactionDetailGasHeading')} + +

+ {t('swapGasFeesSummary', [ + getTranslatedNetworkName(), + ])} +

+

+ {t('swapGasFeesDetails')} +

+

+ { + trackEvent({ + event: 'Clicked "Gas Fees: Learn More" Link', + category: EVENT.CATEGORIES.SWAPS, + }); + global.platform.openTab({ + url: GAS_FEES_LEARN_MORE_URL, + }); + }} + target="_blank" + rel="noopener noreferrer" + > + {t('swapGasFeesLearnMore')} + +

+ + } + containerClassName="fee-card__info-tooltip-content-container" + wrapperClassName="fee-card__row-label fee-card__info-tooltip-container" + wide + /> + } detailText={primaryFee.fee} detailTotal={secondaryFee.fee} @@ -209,8 +198,5 @@ FeeCard.propTypes = { onQuotesClick: PropTypes.func.isRequired, numberOfQuotes: PropTypes.number.isRequired, chainId: PropTypes.string.isRequired, - smartTransactionsOptInStatus: PropTypes.bool, - smartTransactionsEnabled: PropTypes.bool, isBestQuote: PropTypes.bool.isRequired, - supportsEIP1559V2: PropTypes.bool, }; diff --git a/ui/pages/swaps/fee-card/fee-card.test.js b/ui/pages/swaps/fee-card/fee-card.test.js index 218fba458..5caea9a71 100644 --- a/ui/pages/swaps/fee-card/fee-card.test.js +++ b/ui/pages/swaps/fee-card/fee-card.test.js @@ -9,23 +9,15 @@ import { setBackgroundConnection, MOCKS, } from '../../../../test/jest'; -import { EDIT_GAS_MODES } from '../../../../shared/constants/gas'; import { MAINNET_CHAIN_ID } from '../../../../shared/constants/network'; -import { - checkNetworkAndAccountSupports1559, - getEIP1559V2Enabled, - getPreferences, - getSelectedAccount, -} from '../../../selectors'; +import { checkNetworkAndAccountSupports1559 } from '../../../selectors'; import { getGasEstimateType, getGasFeeEstimates, getIsGasEstimatesLoading, } from '../../../ducks/metamask/metamask'; -import { GasFeeContextProvider } from '../../../contexts/gasFee'; import { TRANSACTION_ENVELOPE_TYPE_NAMES } from '../../../helpers/constants/transactions'; -import { useGasFeeEstimates } from '../../../hooks/useGasFeeEstimates'; import FeeCard from '.'; @@ -153,56 +145,4 @@ describe('FeeCard', () => { expect(getByText(`: ${props.secondaryFee.maxFee}`)).toBeInTheDocument(); expect(queryByTestId('fee-card__edit-link')).not.toBeInTheDocument(); }); - - it('renders the component with EIP-1559 V2 enabled', () => { - useGasFeeEstimates.mockImplementation(() => ({ gasFeeEstimates: {} })); - useSelector.mockImplementation((selector) => { - if (selector === getPreferences) { - return { - useNativeCurrencyAsPrimaryCurrency: true, - }; - } - if (selector === getEIP1559V2Enabled) { - return true; - } - if (selector === getSelectedAccount) { - return { - balance: '0x440aa47cc2556', - }; - } - if (selector === checkNetworkAndAccountSupports1559) { - return true; - } - return undefined; - }); - - const store = configureMockStore(middleware)(createSwapsMockStore()); - const props = createProps({ - networkAndAccountSupports1559: true, - maxPriorityFeePerGasDecGWEI: '3', - maxFeePerGasDecGWEI: '4', - supportsEIP1559V2: true, - }); - const { getByText } = renderWithProvider( - - - , - store, - ); - expect(getByText('Best of 6 quotes.')).toBeInTheDocument(); - expect(getByText('Gas')).toBeInTheDocument(); - expect(getByText('(estimated)')).toBeInTheDocument(); - expect(getByText('Swap suggested')).toBeInTheDocument(); - expect(getByText('Max fee')).toBeInTheDocument(); - expect(getByText(props.primaryFee.fee)).toBeInTheDocument(); - expect(getByText(props.secondaryFee.fee)).toBeInTheDocument(); - expect(getByText(`: ${props.secondaryFee.maxFee}`)).toBeInTheDocument(); - expect(getByText('Includes a 0.875% MetaMask fee.')).toBeInTheDocument(); - expect( - document.querySelector('.fee-card__top-bordered-row'), - ).toMatchSnapshot(); - }); }); diff --git a/ui/pages/swaps/view-quote/view-quote.js b/ui/pages/swaps/view-quote/view-quote.js index 3e42fb9e8..7a576d1be 100644 --- a/ui/pages/swaps/view-quote/view-quote.js +++ b/ui/pages/swaps/view-quote/view-quote.js @@ -60,7 +60,6 @@ import { isHardwareWallet, getHardwareWalletType, checkNetworkAndAccountSupports1559, - getEIP1559V2Enabled, getUSDConversionRate, } from '../../../selectors'; import { getNativeCurrency, getTokens } from '../../../ducks/metamask/metamask'; @@ -92,8 +91,6 @@ import { hexWEIToDecGWEI, addHexes, } from '../../../helpers/utils/conversions.util'; -import { GasFeeContextProvider } from '../../../contexts/gasFee'; -import { TransactionModalContextProvider } from '../../../contexts/transaction-modal'; import MainQuoteSummary from '../main-quote-summary'; import { calcGasTotal } from '../../send/send.utils'; import { getCustomTxParamsData } from '../../confirm-approve/confirm-approve.util'; @@ -105,10 +102,7 @@ import { } from '../swaps.util'; import { useTokenTracker } from '../../../hooks/useTokenTracker'; import { QUOTES_EXPIRED_ERROR } from '../../../../shared/constants/swaps'; -import { - EDIT_GAS_MODES, - GAS_RECOMMENDATIONS, -} from '../../../../shared/constants/gas'; +import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas'; import CountdownTimer from '../countdown-timer'; import SwapsFooter from '../swaps-footer'; import PulseLoader from '../../../components/ui/pulse-loader'; // TODO: Replace this with a different loading component. @@ -125,7 +119,6 @@ export default function ViewQuote() { const dispatch = useDispatch(); const t = useContext(I18nContext); const trackEvent = useContext(MetaMetricsContext); - const eip1559V2Enabled = useSelector(getEIP1559V2Enabled); const [dispatchedSafeRefetch, setDispatchedSafeRefetch] = useState(false); const [submitClicked, setSubmitClicked] = useState(false); @@ -830,176 +823,150 @@ export default function ViewQuote() { submitClicked, ]); - const transaction = { - userFeeLevel: swapsUserFeeLevel || GAS_RECOMMENDATIONS.HIGH, - txParams: { - maxFeePerGas, - maxPriorityFeePerGas, - gas: maxGasLimit, - }, - }; - - const supportsEIP1559V2 = eip1559V2Enabled && networkAndAccountSupports1559; - return ( - - -
-
- {selectQuotePopoverShown && ( - setSelectQuotePopoverShown(false)} - onSubmit={(aggId) => dispatch(swapsQuoteSelected(aggId))} - swapToSymbol={destinationTokenSymbol} - initialAggId={usedQuote.aggregator} - onQuoteDetailsIsOpened={trackQuoteDetailsOpened} - hideEstimatedGasFee={ - smartTransactionsEnabled && smartTransactionsOptInStatus - } - /> - )} - -
- {viewQuotePriceDifferenceComponent} - {(showInsufficientWarning || tokenBalanceUnavailable) && ( - setWarningHidden(true)} - /> - )} -
-
- -
- - {currentSmartTransactionsEnabled && - smartTransactionsOptInStatus && - !smartTransactionFees?.tradeTxFees && ( - - - - )} - {(!currentSmartTransactionsEnabled || - !smartTransactionsOptInStatus || - smartTransactionFees?.tradeTxFees) && ( -
- { - trackAllAvailableQuotesOpened(); - setSelectQuotePopoverShown(true); - }} - chainId={chainId} - isBestQuote={isBestQuote} - supportsEIP1559V2={supportsEIP1559V2} - networkAndAccountSupports1559={networkAndAccountSupports1559} - maxPriorityFeePerGasDecGWEI={hexWEIToDecGWEI( - maxPriorityFeePerGas, - )} - maxFeePerGasDecGWEI={hexWEIToDecGWEI(maxFeePerGas)} - smartTransactionsEnabled={currentSmartTransactionsEnabled} - smartTransactionsOptInStatus={smartTransactionsOptInStatus} - /> -
- )} -
- { - setSubmitClicked(true); - if (!balanceError) { - if ( - currentSmartTransactionsEnabled && - smartTransactionsOptInStatus && - smartTransactionFees?.tradeTxFees - ) { - dispatch( - signAndSendSwapsSmartTransaction({ - unsignedTransaction, - trackEvent, - history, - additionalTrackingParams, - }), - ); - } else { - dispatch( - signAndSendTransactions( - history, - trackEvent, - additionalTrackingParams, - ), - ); - } - } else if (destinationToken.symbol === defaultSwapsToken.symbol) { - history.push(DEFAULT_ROUTE); - } else { - history.push(`${ASSET_ROUTE}/${destinationToken.address}`); - } - }} - submitText={ - currentSmartTransactionsEnabled && - smartTransactionsOptInStatus && - swapsSTXLoading - ? t('preparingSwap') - : t('swap') +
+
+ {selectQuotePopoverShown && ( + setSelectQuotePopoverShown(false)} + onSubmit={(aggId) => dispatch(swapsQuoteSelected(aggId))} + swapToSymbol={destinationTokenSymbol} + initialAggId={usedQuote.aggregator} + onQuoteDetailsIsOpened={trackQuoteDetailsOpened} + hideEstimatedGasFee={ + smartTransactionsEnabled && smartTransactionsOptInStatus } - hideCancel - disabled={isSwapButtonDisabled} - className={isShowingWarning && 'view-quote__thin-swaps-footer'} - showTopBorder + /> + )} + +
+ {viewQuotePriceDifferenceComponent} + {(showInsufficientWarning || tokenBalanceUnavailable) && ( + setWarningHidden(true)} + /> + )} +
+
+
- - + + {currentSmartTransactionsEnabled && + smartTransactionsOptInStatus && + !smartTransactionFees?.tradeTxFees && ( + + + + )} + {(!currentSmartTransactionsEnabled || + !smartTransactionsOptInStatus || + smartTransactionFees?.tradeTxFees) && ( +
+ { + trackAllAvailableQuotesOpened(); + setSelectQuotePopoverShown(true); + }} + chainId={chainId} + isBestQuote={isBestQuote} + maxPriorityFeePerGasDecGWEI={hexWEIToDecGWEI( + maxPriorityFeePerGas, + )} + maxFeePerGasDecGWEI={hexWEIToDecGWEI(maxFeePerGas)} + /> +
+ )} +
+ { + setSubmitClicked(true); + if (!balanceError) { + if ( + currentSmartTransactionsEnabled && + smartTransactionsOptInStatus && + smartTransactionFees?.tradeTxFees + ) { + dispatch( + signAndSendSwapsSmartTransaction({ + unsignedTransaction, + trackEvent, + history, + additionalTrackingParams, + }), + ); + } else { + dispatch( + signAndSendTransactions( + history, + trackEvent, + additionalTrackingParams, + ), + ); + } + } else if (destinationToken.symbol === defaultSwapsToken.symbol) { + history.push(DEFAULT_ROUTE); + } else { + history.push(`${ASSET_ROUTE}/${destinationToken.address}`); + } + }} + submitText={ + currentSmartTransactionsEnabled && + smartTransactionsOptInStatus && + swapsSTXLoading + ? t('preparingSwap') + : t('swap') + } + hideCancel + disabled={isSwapButtonDisabled} + className={isShowingWarning && 'view-quote__thin-swaps-footer'} + showTopBorder + /> +
); }