Remove experimental gas editing for Swaps (#14942)

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`;

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({
     <div className="fee-card">
       <div className="fee-card__main">
         <TransactionDetail
-          disableEditGasFeeButton={
+          disableEditGasFeeButton
-            smartTransactionsEnabled && smartTransactionsOptInStatus
-          }
           rows={[
             <TransactionDetailItem
               key="gas-item"
               detailTitle={
-                supportsEIP1559V2 &&
+                <>
-                (!smartTransactionsEnabled || !smartTransactionsOptInStatus) ? (
+                  {t('transactionDetailGasHeading')}
-                  <GasDetailsItemTitle />
+                  <InfoTooltip
-                ) : (
+                    position="top"
-                  <>
+                    contentText={
-                    {t('transactionDetailGasHeading')}
+                      <>
-                    <InfoTooltip
+                        <p className="fee-card__info-tooltip-paragraph">
-                      position="top"
+                          {t('swapGasFeesSummary', [
-                      contentText={
+                            getTranslatedNetworkName(),
-                        <>
+                          ])}
-                          <p className="fee-card__info-tooltip-paragraph">
+                        </p>
-                            {t('swapGasFeesSummary', [
+                        <p className="fee-card__info-tooltip-paragraph">
-                              getTranslatedNetworkName(),
+                          {t('swapGasFeesDetails')}
-                            ])}
+                        </p>
-                          </p>
+                        <p className="fee-card__info-tooltip-paragraph">
-                          <p className="fee-card__info-tooltip-paragraph">
+                          <a
-                            {t('swapGasFeesDetails')}
+                            className="fee-card__link"
-                          </p>
+                            onClick={() => {
-                          <p className="fee-card__info-tooltip-paragraph">
+                              trackEvent({
-                            <a
+                                event: 'Clicked "Gas Fees: Learn More" Link',
-                              className="fee-card__link"
+                                category: EVENT.CATEGORIES.SWAPS,
-                              onClick={() => {
+                              });
-                                trackEvent({
+                              global.platform.openTab({
-                                  event: 'Clicked "Gas Fees: Learn More" Link',
+                                url: GAS_FEES_LEARN_MORE_URL,
-                                  category: EVENT.CATEGORIES.SWAPS,
+                              });
-                                });
+                            }}
-                                global.platform.openTab({
+                            target="_blank"
-                                  url: GAS_FEES_LEARN_MORE_URL,
+                            rel="noopener noreferrer"
-                                });
+                          >
-                              }}
+                            {t('swapGasFeesLearnMore')}
-                              target="_blank"
+                          </a>
-                              rel="noopener noreferrer"
+                        </p>
-                            >
+                      </>
-                              {t('swapGasFeesLearnMore')}
+                    }
-                            </a>
+                    containerClassName="fee-card__info-tooltip-content-container"
-                          </p>
+                    wrapperClassName="fee-card__row-label fee-card__info-tooltip-container"
-                        </>
+                    wide
-                      }
+                  />
-                      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,
 };

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 {
+import { checkNetworkAndAccountSupports1559 } from '../../../selectors';
-  checkNetworkAndAccountSupports1559,
-  getEIP1559V2Enabled,
-  getPreferences,
-  getSelectedAccount,
-} 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(
-      <GasFeeContextProvider
-        transaction={{ txParams: {}, userFeeLevel: 'high' }}
-        editGasMode={EDIT_GAS_MODES.SWAPS}
-      >
-        <FeeCard {...props} />
-      </GasFeeContextProvider>,
-      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();
-  });
 });

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 {
+import { GAS_RECOMMENDATIONS } from '../../../../shared/constants/gas';
-  EDIT_GAS_MODES,
-  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 (
-    <GasFeeContextProvider
+    <div className="view-quote">
-      editGasMode={EDIT_GAS_MODES.SWAPS}
+      <div
-      minimumGasLimit={usedGasLimit}
+        className={classnames('view-quote__content', {
-      transaction={transaction}
+          'view-quote__content_modal': disableSubmissionDueToPriceWarning,
-    >
+        })}
-      <TransactionModalContextProvider>
+      >
-        <div className="view-quote">
+        {selectQuotePopoverShown && (
-          <div
+          <SelectQuotePopover
-            className={classnames('view-quote__content', {
+            quoteDataRows={renderablePopoverData}
-              'view-quote__content_modal': disableSubmissionDueToPriceWarning,
+            onClose={() => setSelectQuotePopoverShown(false)}
-            })}
+            onSubmit={(aggId) => dispatch(swapsQuoteSelected(aggId))}
-          >
+            swapToSymbol={destinationTokenSymbol}
-            {selectQuotePopoverShown && (
+            initialAggId={usedQuote.aggregator}
-              <SelectQuotePopover
+            onQuoteDetailsIsOpened={trackQuoteDetailsOpened}
-                quoteDataRows={renderablePopoverData}
+            hideEstimatedGasFee={
-                onClose={() => setSelectQuotePopoverShown(false)}
+              smartTransactionsEnabled && smartTransactionsOptInStatus
-                onSubmit={(aggId) => dispatch(swapsQuoteSelected(aggId))}
-                swapToSymbol={destinationTokenSymbol}
-                initialAggId={usedQuote.aggregator}
-                onQuoteDetailsIsOpened={trackQuoteDetailsOpened}
-                hideEstimatedGasFee={
-                  smartTransactionsEnabled && smartTransactionsOptInStatus
-                }
-              />
-            )}
-
-            <div
-              className={classnames('view-quote__warning-wrapper', {
-                'view-quote__warning-wrapper--thin': !isShowingWarning,
-              })}
-            >
-              {viewQuotePriceDifferenceComponent}
-              {(showInsufficientWarning || tokenBalanceUnavailable) && (
-                <ActionableMessage
-                  message={actionableBalanceErrorMessage}
-                  onClose={() => setWarningHidden(true)}
-                />
-              )}
-            </div>
-            <div className="view-quote__countdown-timer-container">
-              <CountdownTimer
-                timeStarted={quotesLastFetched}
-                warningTime="0:10"
-                labelKey="swapNewQuoteIn"
-              />
-            </div>
-            <MainQuoteSummary
-              sourceValue={calcTokenValue(
-                sourceTokenValue,
-                sourceTokenDecimals,
-              )}
-              sourceDecimals={sourceTokenDecimals}
-              sourceSymbol={sourceTokenSymbol}
-              destinationValue={calcTokenValue(
-                destinationTokenValue,
-                destinationTokenDecimals,
-              )}
-              destinationDecimals={destinationTokenDecimals}
-              destinationSymbol={destinationTokenSymbol}
-              sourceIconUrl={sourceTokenIconUrl}
-              destinationIconUrl={destinationIconUrl}
-            />
-            {currentSmartTransactionsEnabled &&
-              smartTransactionsOptInStatus &&
-              !smartTransactionFees?.tradeTxFees && (
-                <Box marginTop={0} marginBottom={10}>
-                  <PulseLoader />
-                </Box>
-              )}
-            {(!currentSmartTransactionsEnabled ||
-              !smartTransactionsOptInStatus ||
-              smartTransactionFees?.tradeTxFees) && (
-              <div
-                className={classnames('view-quote__fee-card-container', {
-                  'view-quote__fee-card-container--three-rows':
-                    approveTxParams && (!balanceError || warningHidden),
-                })}
-              >
-                <FeeCard
-                  primaryFee={{
-                    fee: feeInEth,
-                    maxFee: maxFeeInEth,
-                  }}
-                  secondaryFee={{
-                    fee: feeInFiat,
-                    maxFee: maxFeeInFiat,
-                  }}
-                  hideTokenApprovalRow={
-                    !approveTxParams || (balanceError && !warningHidden)
-                  }
-                  tokenApprovalSourceTokenSymbol={sourceTokenSymbol}
-                  onTokenApprovalClick={onFeeCardTokenApprovalClick}
-                  metaMaskFee={String(metaMaskFee)}
-                  numberOfQuotes={Object.values(quotes).length}
-                  onQuotesClick={() => {
-                    trackAllAvailableQuotesOpened();
-                    setSelectQuotePopoverShown(true);
-                  }}
-                  chainId={chainId}
-                  isBestQuote={isBestQuote}
-                  supportsEIP1559V2={supportsEIP1559V2}
-                  networkAndAccountSupports1559={networkAndAccountSupports1559}
-                  maxPriorityFeePerGasDecGWEI={hexWEIToDecGWEI(
-                    maxPriorityFeePerGas,
-                  )}
-                  maxFeePerGasDecGWEI={hexWEIToDecGWEI(maxFeePerGas)}
-                  smartTransactionsEnabled={currentSmartTransactionsEnabled}
-                  smartTransactionsOptInStatus={smartTransactionsOptInStatus}
-                />
-              </div>
-            )}
-          </div>
-          <SwapsFooter
-            onSubmit={() => {
-              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
+        <div
+          className={classnames('view-quote__warning-wrapper', {
+            'view-quote__warning-wrapper--thin': !isShowingWarning,
+          })}
+        >
+          {viewQuotePriceDifferenceComponent}
+          {(showInsufficientWarning || tokenBalanceUnavailable) && (
+            <ActionableMessage
+              message={actionableBalanceErrorMessage}
+              onClose={() => setWarningHidden(true)}
+            />
+          )}
+        </div>
+        <div className="view-quote__countdown-timer-container">
+          <CountdownTimer
+            timeStarted={quotesLastFetched}
+            warningTime="0:10"
+            labelKey="swapNewQuoteIn"
           />
         </div>
-      </TransactionModalContextProvider>
+        <MainQuoteSummary
-    </GasFeeContextProvider>
+          sourceValue={calcTokenValue(sourceTokenValue, sourceTokenDecimals)}
+          sourceDecimals={sourceTokenDecimals}
+          sourceSymbol={sourceTokenSymbol}
+          destinationValue={calcTokenValue(
+            destinationTokenValue,
+            destinationTokenDecimals,
+          )}
+          destinationDecimals={destinationTokenDecimals}
+          destinationSymbol={destinationTokenSymbol}
+          sourceIconUrl={sourceTokenIconUrl}
+          destinationIconUrl={destinationIconUrl}
+        />
+        {currentSmartTransactionsEnabled &&
+          smartTransactionsOptInStatus &&
+          !smartTransactionFees?.tradeTxFees && (
+            <Box marginTop={0} marginBottom={10}>
+              <PulseLoader />
+            </Box>
+          )}
+        {(!currentSmartTransactionsEnabled ||
+          !smartTransactionsOptInStatus ||
+          smartTransactionFees?.tradeTxFees) && (
+          <div
+            className={classnames('view-quote__fee-card-container', {
+              'view-quote__fee-card-container--three-rows':
+                approveTxParams && (!balanceError || warningHidden),
+            })}
+          >
+            <FeeCard
+              primaryFee={{
+                fee: feeInEth,
+                maxFee: maxFeeInEth,
+              }}
+              secondaryFee={{
+                fee: feeInFiat,
+                maxFee: maxFeeInFiat,
+              }}
+              hideTokenApprovalRow={
+                !approveTxParams || (balanceError && !warningHidden)
+              }
+              tokenApprovalSourceTokenSymbol={sourceTokenSymbol}
+              onTokenApprovalClick={onFeeCardTokenApprovalClick}
+              metaMaskFee={String(metaMaskFee)}
+              numberOfQuotes={Object.values(quotes).length}
+              onQuotesClick={() => {
+                trackAllAvailableQuotesOpened();
+                setSelectQuotePopoverShown(true);
+              }}
+              chainId={chainId}
+              isBestQuote={isBestQuote}
+              maxPriorityFeePerGasDecGWEI={hexWEIToDecGWEI(
+                maxPriorityFeePerGas,
+              )}
+              maxFeePerGasDecGWEI={hexWEIToDecGWEI(maxFeePerGas)}
+            />
+          </div>
+        )}
+      </div>
+      <SwapsFooter
+        onSubmit={() => {
+          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
+      />
+    </div>
   );
 }