Show advanced options, and hide radio buttons, for advanced gas settings users (#11751)

* Show advanced options, and hide radio buttons, for users with advanced gas settings turned on

* Improve naming and copy

* lint fix

* Lint fix

app/_locales/en/messages.json

@@ -1935,6 +1935,9 @@
   "showPrivateKeys": {
     "message": "Show Private Keys"
   },
+  "showRecommendations": {
+    "message": "Show Recommendations"
+  },
   "showSeedPhrase": {
     "message": "Show Secret Recovery Phrase"
   },

ui/components/app/edit-gas-display/edit-gas-display.component.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useState } from 'react';
 import { useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 
@@ -13,6 +13,7 @@ import Typography from '../../ui/typography/typography';
 import {
   getIsMainnet,
   checkNetworkAndAccountSupports1559,
+  getAdvancedInlineGasShown,
 } from '../../../selectors';
 
 import {
@@ -58,20 +59,29 @@ export default function EditGasDisplay({
   estimatedMaximumFiat,
   dappSuggestedGasFeeAcknowledged,
   setDappSuggestedGasFeeAcknowledged,
-  showAdvancedForm,
-  setShowAdvancedForm,
   warning,
   gasErrors,
   onManualChange,
   minimumGasLimit,
   balanceError,
   estimatesUnavailableWarning,
+  hasGasErrors,
 }) {
   const t = useContext(I18nContext);
   const isMainnet = useSelector(getIsMainnet);
   const networkAndAccountSupport1559 = useSelector(
     checkNetworkAndAccountSupports1559,
   );
+  const showAdvancedInlineGasIfPossible = useSelector(
+    getAdvancedInlineGasShown,
+  );
+
+  const [showAdvancedForm, setShowAdvancedForm] = useState(
+    !estimateToUse || hasGasErrors || !networkAndAccountSupport1559,
+  );
+  const [hideRadioButtons, setHideRadioButtons] = useState(
+    showAdvancedInlineGasIfPossible,
+  );
 
   const dappSuggestedAndTxParamGasFeesAreTheSame = areDappSuggestedAndTxParamGasFeesTheSame(
     transaction,
@@ -84,7 +94,7 @@ export default function EditGasDisplay({
   );
 
   const showTopError = balanceError || estimatesUnavailableWarning;
-  const showRadioButtons =
+  const radioButtonsEnabled =
     networkAndAccountSupport1559 &&
     gasEstimateType === GAS_ESTIMATE_TYPES.FEE_MARKET &&
     !requireDappAcknowledgement &&
@@ -175,7 +185,22 @@ export default function EditGasDisplay({
             {t('gasDisplayAcknowledgeDappButtonText')}
           </Button>
         )}
-        {showRadioButtons && (
+        {!requireDappAcknowledgement &&
+          radioButtonsEnabled &&
+          showAdvancedInlineGasIfPossible && (
+            <button
+              className="edit-gas-display__advanced-button"
+              onClick={() => setHideRadioButtons(!hideRadioButtons)}
+            >
+              {t('showRecommendations')}{' '}
+              {hideRadioButtons ? (
+                <i className="fa fa-caret-down"></i>
+              ) : (
+                <i className="fa fa-caret-up"></i>
+              )}
+            </button>
+          )}
+        {radioButtonsEnabled && !hideRadioButtons && (
           <RadioGroup
             name="gas-recommendation"
             options={[
@@ -200,7 +225,9 @@ export default function EditGasDisplay({
             onChange={setEstimateToUse}
           />
         )}
-        {!requireDappAcknowledgement && showRadioButtons && (
+        {!requireDappAcknowledgement &&
+          radioButtonsEnabled &&
+          !showAdvancedInlineGasIfPossible && (
             <button
               className="edit-gas-display__advanced-button"
               onClick={() => setShowAdvancedForm(!showAdvancedForm)}
@@ -213,7 +240,8 @@ export default function EditGasDisplay({
               )}
             </button>
           )}
-        {!requireDappAcknowledgement && showAdvancedForm && (
+        {!requireDappAcknowledgement &&
+          (showAdvancedForm || showAdvancedInlineGasIfPossible) && (
             <AdvancedGasControls
               gasEstimateType={gasEstimateType}
               isGasEstimatesLoading={isGasEstimatesLoading}
@@ -271,8 +299,6 @@ EditGasDisplay.propTypes = {
   estimatedMaximumFiat: PropTypes.string,
   dappSuggestedGasFeeAcknowledged: PropTypes.bool,
   setDappSuggestedGasFeeAcknowledged: PropTypes.func,
-  showAdvancedForm: PropTypes.bool,
-  setShowAdvancedForm: PropTypes.func,
   warning: PropTypes.string,
   transaction: PropTypes.object,
   gasErrors: PropTypes.object,
@@ -280,4 +306,5 @@ EditGasDisplay.propTypes = {
   minimumGasLimit: PropTypes.number,
   balanceError: PropTypes.bool,
   estimatesUnavailableWarning: PropTypes.bool,
+  hasGasErrors: PropTypes.bool,
 };

ui/components/app/edit-gas-popover/edit-gas-popover.component.js

@@ -87,10 +87,6 @@ export default function EditGasPopover({
     estimatesUnavailableWarning,
   } = useGasFeeInputs(defaultEstimateToUse, transaction, minimumGasLimit, mode);
 
-  const [showAdvancedForm, setShowAdvancedForm] = useState(
-    !estimateToUse || hasGasErrors || !networkAndAccountSupport1559,
-  );
-
   /**
    * Temporary placeholder, this should be managed by the parent component but
    * we will be extracting this component from the hard to maintain modal/
@@ -213,8 +209,6 @@ export default function EditGasPopover({
             <EditGasDisplay
               showEducationButton={showEducationButton}
               warning={warning}
-              showAdvancedForm={showAdvancedForm}
-              setShowAdvancedForm={setShowAdvancedForm}
               dappSuggestedGasFeeAcknowledged={dappSuggestedGasFeeAcknowledged}
               setDappSuggestedGasFeeAcknowledged={
                 setDappSuggestedGasFeeAcknowledged
@@ -245,6 +239,7 @@ export default function EditGasPopover({
               minimumGasLimit={minimumGasLimitDec}
               balanceError={balanceError}
               estimatesUnavailableWarning={estimatesUnavailableWarning}
+              hasGasErrors={hasGasErrors}
               {...editGasDisplayProps}
             />
           </>

ui/hooks/useGasFeeInputs.js

@@ -21,6 +21,7 @@ import {
   checkNetworkAndAccountSupports1559,
   getShouldShowFiat,
   getSelectedAccount,
+  getAdvancedInlineGasShown,
 } from '../selectors';
 
 import {
@@ -249,8 +250,18 @@ export function useGasFeeInputs(
     Number(hexToDecimal(transaction?.txParams?.gas ?? minimumGasLimit)),
   );
 
+  const userPrefersAdvancedGas = useSelector(getAdvancedInlineGasShown);
+  const dontDefaultToAnEstimateLevel =
+    userPrefersAdvancedGas &&
+    transaction?.txParams?.maxPriorityFeePerGas &&
+    transaction?.txParams?.gasPrice;
+
+  const initialEstimateToUse = transaction
+    ? initialMatchingEstimateLevel
+    : defaultEstimateToUse;
+
   const [estimateToUse, setInternalEstimateToUse] = useState(
-    transaction ? initialMatchingEstimateLevel : defaultEstimateToUse,
+    dontDefaultToAnEstimateLevel ? null : initialEstimateToUse,
   );
 
   // We specify whether to use the estimate value by checking if the state