diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 5f4efe357..bf51a59ce 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -1935,6 +1935,9 @@
"showPrivateKeys": {
"message": "Show Private Keys"
},
+ "showRecommendations": {
+ "message": "Show Recommendations"
+ },
"showSeedPhrase": {
"message": "Show Secret Recovery Phrase"
},
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 aba45f521..22216a2a7 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,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')}
)}
- {showRadioButtons && (
+ {!requireDappAcknowledgement &&
+ radioButtonsEnabled &&
+ showAdvancedInlineGasIfPossible && (
+
+ )}
+ {radioButtonsEnabled && !hideRadioButtons && (
)}
- {!requireDappAcknowledgement && showRadioButtons && (
-
- )}
- {!requireDappAcknowledgement && showAdvancedForm && (
-
- )}
+ {!requireDappAcknowledgement &&
+ radioButtonsEnabled &&
+ !showAdvancedInlineGasIfPossible && (
+
+ )}
+ {!requireDappAcknowledgement &&
+ (showAdvancedForm || showAdvancedInlineGasIfPossible) && (
+
+ )}
{networkAndAccountSupport1559 &&
!requireDappAcknowledgement &&
@@ -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,
};
diff --git a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js b/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
index 68101a2ac..e77554d17 100644
--- a/ui/components/app/edit-gas-popover/edit-gas-popover.component.js
+++ b/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({
>
diff --git a/ui/hooks/useGasFeeInputs.js b/ui/hooks/useGasFeeInputs.js
index e2402ec10..d84af73b9 100644
--- a/ui/hooks/useGasFeeInputs.js
+++ b/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