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