Hide basic tab in advanced gas modal for speedup and cancel when on testnets (#11115)

ui/components/app/sidebars/sidebar.component.js

@@ -30,12 +30,16 @@ export default class Sidebar extends Component {
 
   renderSidebarContent() {
     const { type, sidebarProps = {} } = this.props;
-    const { transaction = {}, onSubmit } = sidebarProps;
+    const { transaction = {}, onSubmit, hideBasic } = sidebarProps;
     switch (type) {
       case 'customize-gas':
         return (
           <div className="sidebar-left">
-            <CustomizeGas transaction={transaction} onSubmit={onSubmit} />
+            <CustomizeGas
+              transaction={transaction}
+              onSubmit={onSubmit}
+              hideBasic={hideBasic}
+            />
           </div>
         );
       default:

ui/hooks/useCancelTransaction.js

@@ -7,7 +7,11 @@ import {
   getHexGasTotal,
   increaseLastGasPrice,
 } from '../helpers/utils/confirm-tx.util';
-import { getConversionRate, getSelectedAccount } from '../selectors';
+import {
+  getConversionRate,
+  getSelectedAccount,
+  getIsMainnet,
+} from '../selectors';
 import {
   setCustomGasLimit,
   setCustomGasPriceForRetry,
@@ -43,7 +47,8 @@ export function useCancelTransaction(transactionGroup) {
       multiplierBase: 10,
     }),
   );
-
+  const isMainnet = useSelector(getIsMainnet);
+  const hideBasic = !(isMainnet || process.env.IN_TEST);
   const cancelTransaction = useCallback(
     (event) => {
       event.stopPropagation();
@@ -62,6 +67,7 @@ export function useCancelTransaction(transactionGroup) {
           transitionName: 'sidebar-left',
           type: 'customize-gas',
           props: {
+            hideBasic,
             transaction: tx,
             onSubmit: (newGasLimit, newGasPrice) => {
               const userCustomizedGasTotal = getHexGasTotal({
@@ -82,7 +88,7 @@ export function useCancelTransaction(transactionGroup) {
         }),
       );
     },
-    [dispatch, transaction, defaultNewGasPrice],
+    [dispatch, transaction, defaultNewGasPrice, hideBasic],
   );
 
   const hasEnoughCancelGas =

ui/hooks/useRetryTransaction.js

@@ -1,4 +1,5 @@
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+
 import { useCallback } from 'react';
 import { showSidebar } from '../store/actions';
 import {
@@ -7,8 +8,8 @@ import {
   setCustomGasLimit,
 } from '../ducks/gas/gas.duck';
 import { increaseLastGasPrice } from '../helpers/utils/confirm-tx.util';
+import { getIsMainnet } from '../selectors';
 import { useMetricEvent } from './useMetricEvent';
-
 /**
  * Provides a reusable hook that, given a transactionGroup, will return
  * a method for beginning the retry process
@@ -17,6 +18,8 @@ import { useMetricEvent } from './useMetricEvent';
  */
 export function useRetryTransaction(transactionGroup) {
   const { primaryTransaction } = transactionGroup;
+  const isMainnet = useSelector(getIsMainnet);
+  const hideBasic = !(isMainnet || process.env.IN_TEST);
   // Signature requests do not have a txParams, but this hook is called indiscriminately
   const gasPrice = primaryTransaction.txParams?.gasPrice;
   const trackMetricsEvent = useMetricEvent({
@@ -46,11 +49,11 @@ export function useRetryTransaction(transactionGroup) {
         showSidebar({
           transitionName: 'sidebar-left',
           type: 'customize-gas',
-          props: { transaction },
+          props: { transaction, hideBasic },
         }),
       );
     },
-    [dispatch, trackMetricsEvent, gasPrice, primaryTransaction],
+    [dispatch, trackMetricsEvent, gasPrice, primaryTransaction, hideBasic],
   );
 
   return retryTransaction;

ui/hooks/useRetryTransaction.test.js

@@ -3,23 +3,31 @@ import { renderHook } from '@testing-library/react-hooks';
 import sinon from 'sinon';
 import transactions from '../../test/data/transaction-data.json';
 import { showSidebar } from '../store/actions';
+import { getIsMainnet } from '../selectors';
 import * as methodDataHook from './useMethodData';
 import * as metricEventHook from './useMetricEvent';
 import { useRetryTransaction } from './useRetryTransaction';
 
 describe('useRetryTransaction', () => {
   describe('when transaction meets retry enabled criteria', () => {
+    let useSelector;
     const dispatch = sinon.spy(() => Promise.resolve({ blockTime: 0 }));
     const trackEvent = sinon.spy();
     const event = {
       preventDefault: () => undefined,
       stopPropagation: () => undefined,
     };
-
     beforeAll(() => {
       sinon.stub(reactRedux, 'useDispatch').returns(dispatch);
       sinon.stub(methodDataHook, 'useMethodData').returns({});
       sinon.stub(metricEventHook, 'useMetricEvent').returns(trackEvent);
+      useSelector = sinon.stub(reactRedux, 'useSelector');
+      useSelector.callsFake((selector) => {
+        if (selector === getIsMainnet) {
+          return true;
+        }
+        return undefined;
+      });
     });
 
     afterEach(() => {
@@ -61,7 +69,10 @@ describe('useRetryTransaction', () => {
           showSidebar({
             transitionName: 'sidebar-left',
             type: 'customize-gas',
-            props: { transaction: retryEnabledTransaction.initialTransaction },
+            props: {
+              transaction: retryEnabledTransaction.initialTransaction,
+              hideBasic: false,
+            },
           }),
         ),
       ).toStrictEqual(true);
@@ -104,7 +115,10 @@ describe('useRetryTransaction', () => {
           showSidebar({
             transitionName: 'sidebar-left',
             type: 'customize-gas',
-            props: { transaction: cancelledTransaction.primaryTransaction },
+            props: {
+              transaction: cancelledTransaction.primaryTransaction,
+              hideBasic: false,
+            },
           }),
         ),
       ).toStrictEqual(true);