From 990a278177193d6b616d03533cec262260ed6ae1 Mon Sep 17 00:00:00 2001
From: David Walsh <davidwalsh83@gmail.com>
Date: Thu, 29 Jul 2021 13:13:14 -0500
Subject: [PATCH] EIP-1559 - Only show radio group and gas timing when network
 supports 1559 (#11659)

---
 .../edit-gas-display.component.js             | 24 ++++++++++++-------
 .../app/gas-timing/gas-timing.component.js    | 13 ++++++++--
 .../gas-timing/gas-timing.component.test.js   | 10 +++++---
 3 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js
index 0de705a02..f9417ae4c 100644
--- a/ui/components/app/edit-gas-display/edit-gas-display.component.js
+++ b/ui/components/app/edit-gas-display/edit-gas-display.component.js
@@ -1,4 +1,5 @@
 import React, { useContext } from 'react';
+import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
 import {
@@ -6,6 +7,8 @@ import {
   EDIT_GAS_MODES,
 } from '../../../../shared/constants/gas';
 
+import { isEIP1559Network } from '../../../ducks/metamask/metamask';
+
 import Button from '../../ui/button';
 import Typography from '../../ui/typography/typography';
 import {
@@ -70,6 +73,8 @@ export default function EditGasDisplay({
       dappSuggestedAndTxParamGasFeesAreTheSame,
   );
 
+  const networkSupports1559 = useSelector(isEIP1559Network);
+
   return (
     <div className="edit-gas-display">
       <div className="edit-gas-display__content">
@@ -149,7 +154,8 @@ export default function EditGasDisplay({
             </Typography>
           </div>
         )}
-        {!requireDappAcknowledgement &&
+        {networkSupports1559 &&
+          !requireDappAcknowledgement &&
           ![EDIT_GAS_MODES.SPEED_UP, EDIT_GAS_MODES.CANCEL].includes(mode) && (
             <RadioGroup
               name="gas-recommendation"
@@ -210,13 +216,15 @@ export default function EditGasDisplay({
           />
         )}
       </div>
-      {!requireDappAcknowledgement && showEducationButton && (
-        <div className="edit-gas-display__education">
-          <button onClick={onEducationClick}>
-            {t('editGasEducationButtonText')}
-          </button>
-        </div>
-      )}
+      {networkSupports1559 &&
+        !requireDappAcknowledgement &&
+        showEducationButton && (
+          <div className="edit-gas-display__education">
+            <button onClick={onEducationClick}>
+              {t('editGasEducationButtonText')}
+            </button>
+          </div>
+        )}
     </div>
   );
 }
diff --git a/ui/components/app/gas-timing/gas-timing.component.js b/ui/components/app/gas-timing/gas-timing.component.js
index 788a6262a..b3680da1b 100644
--- a/ui/components/app/gas-timing/gas-timing.component.js
+++ b/ui/components/app/gas-timing/gas-timing.component.js
@@ -2,6 +2,8 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import { GAS_ESTIMATE_TYPES } from '../../../../shared/constants/gas';
+
 import { useGasFeeEstimates } from '../../../hooks/useGasFeeEstimates';
 import { I18nContext } from '../../../contexts/i18n';
 
@@ -12,7 +14,11 @@ import { TYPOGRAPHY } from '../../../helpers/constants/design-system';
 const SECOND_CUTOFF = 90;
 
 export default function GasTiming({ maxPriorityFeePerGas }) {
-  const { gasFeeEstimates, isGasEstimatesLoading } = useGasFeeEstimates();
+  const {
+    gasFeeEstimates,
+    isGasEstimatesLoading,
+    gasEstimateType,
+  } = useGasFeeEstimates();
 
   const t = useContext(I18nContext);
 
@@ -26,7 +32,10 @@ export default function GasTiming({ maxPriorityFeePerGas }) {
   };
 
   // Don't show anything if we don't have enough information
-  if (isGasEstimatesLoading) {
+  if (
+    isGasEstimatesLoading ||
+    gasEstimateType !== GAS_ESTIMATE_TYPES.FEE_MARKET
+  ) {
     return null;
   }
 
diff --git a/ui/components/app/gas-timing/gas-timing.component.test.js b/ui/components/app/gas-timing/gas-timing.component.test.js
index 38c4c5d60..c892fda66 100644
--- a/ui/components/app/gas-timing/gas-timing.component.test.js
+++ b/ui/components/app/gas-timing/gas-timing.component.test.js
@@ -2,6 +2,8 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 
+import { GAS_ESTIMATE_TYPES } from '../../../../shared/constants/gas';
+
 import messages from '../../../../app/_locales/en/messages.json';
 
 import { getMessage } from '../../../helpers/utils/i18n-helper';
@@ -34,10 +36,8 @@ const MOCK_FEE_ESTIMATE = {
 };
 
 describe('Gas timing', () => {
-  let useI18nContext;
-
   beforeEach(() => {
-    useI18nContext = sinon.stub(i18nhooks, 'useI18nContext');
+    const useI18nContext = sinon.stub(i18nhooks, 'useI18nContext');
     useI18nContext.returns((key, variables) =>
       getMessage('en', messages, key, variables),
     );
@@ -50,6 +50,7 @@ describe('Gas timing', () => {
     sinon.stub(useGasFeeEstimatesExport, 'useGasFeeEstimates').returns({
       isGasEstimatesLoading: true,
       gasFeeEstimates: null,
+      gasEstimateType: GAS_ESTIMATE_TYPES.FEE_MARKET,
     });
 
     const wrapper = shallow(<GasTiming />);
@@ -60,6 +61,7 @@ describe('Gas timing', () => {
     sinon.stub(useGasFeeEstimatesExport, 'useGasFeeEstimates').returns({
       isGasEstimatesLoading: false,
       gasFeeEstimates: MOCK_FEE_ESTIMATE,
+      gasEstimateType: GAS_ESTIMATE_TYPES.FEE_MARKET,
     });
 
     const wrapper = shallow(<GasTiming maxPriorityFeePerGas={10} />);
@@ -70,6 +72,7 @@ describe('Gas timing', () => {
     sinon.stub(useGasFeeEstimatesExport, 'useGasFeeEstimates').returns({
       isGasEstimatesLoading: false,
       gasFeeEstimates: MOCK_FEE_ESTIMATE,
+      gasEstimateType: GAS_ESTIMATE_TYPES.FEE_MARKET,
     });
 
     const wrapper = shallow(<GasTiming maxPriorityFeePerGas={8} />);
@@ -80,6 +83,7 @@ describe('Gas timing', () => {
     sinon.stub(useGasFeeEstimatesExport, 'useGasFeeEstimates').returns({
       isGasEstimatesLoading: false,
       gasFeeEstimates: MOCK_FEE_ESTIMATE,
+      gasEstimateType: GAS_ESTIMATE_TYPES.FEE_MARKET,
     });
 
     const wrapper = shallow(<GasTiming maxPriorityFeePerGas={3} />);