Hide gasTiming on edit-gas-popover when form is in error (#11792)

* Hide gasTiming on edit-gas-popover when form is in error

* Show unknown processing error if maxFeePerGas is too low for network conditions

* remove unnecessary change

* remove unnecessary function wrapper

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

@@ -61,6 +61,7 @@ export default function EditGasDisplay({
   setDappSuggestedGasFeeAcknowledged,
   warning,
   gasErrors,
+  gasWarnings,
   onManualChange,
   minimumGasLimit,
   balanceError,
@@ -173,10 +174,13 @@ export default function EditGasDisplay({
             ])
           }
           timing={
-            <GasTiming
-              maxFeePerGas={maxFeePerGas}
-              maxPriorityFeePerGas={maxPriorityFeePerGas}
-            />
+            hasGasErrors === false && (
+              <GasTiming
+                maxFeePerGas={maxFeePerGas}
+                maxPriorityFeePerGas={maxPriorityFeePerGas}
+                gasWarnings={gasWarnings}
+              />
+            )
           }
         />
         {requireDappAcknowledgement && (
@@ -306,6 +310,7 @@ EditGasDisplay.propTypes = {
   warning: PropTypes.string,
   transaction: PropTypes.object,
   gasErrors: PropTypes.object,
+  gasWarnings: PropTypes.object,
   onManualChange: PropTypes.func,
   minimumGasLimit: PropTypes.number,
   balanceError: PropTypes.bool,

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

@@ -86,6 +86,7 @@ export default function EditGasPopover({
     estimatedMaximumFiat,
     hasGasErrors,
     gasErrors,
+    gasWarnings,
     onManualChange,
     balanceError,
     estimatesUnavailableWarning,
@@ -245,6 +246,7 @@ export default function EditGasPopover({
               mode={mode}
               transaction={transaction}
               gasErrors={gasErrors}
+              gasWarnings={gasWarnings}
               onManualChange={onManualChange}
               minimumGasLimit={minimumGasLimitDec}
               balanceError={balanceError}

ui/components/app/gas-timing/gas-timing.component.js

@@ -23,6 +23,7 @@ import {
 import InfoTooltip from '../../ui/info-tooltip/info-tooltip';
 
 import { getGasFeeTimeEstimate } from '../../../store/actions';
+import { GAS_FORM_ERRORS } from '../../../helpers/constants/gas';
 
 // Once we reach this second threshold, we switch to minutes as a unit
 const SECOND_CUTOFF = 90;
@@ -38,12 +39,14 @@ const toHumanReadableTime = (milliseconds = 1, t) => {
 export default function GasTiming({
   maxFeePerGas = 0,
   maxPriorityFeePerGas = 0,
+  gasWarnings,
 }) {
   const gasEstimateType = useSelector(getGasEstimateType);
   const gasFeeEstimates = useSelector(getGasFeeEstimates);
   const isGasEstimatesLoading = useSelector(getIsGasEstimatesLoading);
 
   const [customEstimatedTime, setCustomEstimatedTime] = useState(null);
+  const t = useContext(I18nContext);
 
   // If the user has chosen a value lower than the low gas fee estimate,
   // We'll need to use the useEffect hook below to make a call to calculate
@@ -89,7 +92,27 @@ export default function GasTiming({
     previousIsUnknownLow,
   ]);
 
-  const t = useContext(I18nContext);
+  const unknownProcessingTimeText = (
+    <>
+      {t('editGasTooLow')}{' '}
+      <InfoTooltip position="top" contentText={t('editGasTooLowTooltip')} />
+    </>
+  );
+
+  if (
+    gasWarnings?.maxPriorityFee === GAS_FORM_ERRORS.MAX_PRIORITY_FEE_TOO_LOW ||
+    gasWarnings?.maxFee === GAS_FORM_ERRORS.MAX_FEE_TOO_LOW
+  ) {
+    return (
+      <Typography
+        variant={TYPOGRAPHY.H7}
+        fontWeight={FONT_WEIGHT.BOLD}
+        className={classNames('gas-timing', 'gas-timing--negative')}
+      >
+        {unknownProcessingTimeText}
+      </Typography>
+    );
+  }
 
   // Don't show anything if we don't have enough information
   if (
@@ -137,15 +160,7 @@ export default function GasTiming({
         customEstimatedTime?.upperTimeBound === 'unknown'
       ) {
         fontWeight = FONT_WEIGHT.BOLD;
-        text = (
-          <>
-            {t('editGasTooLow')}{' '}
-            <InfoTooltip
-              position="top"
-              contentText={t('editGasTooLowTooltip')}
-            />
-          </>
-        );
+        text = unknownProcessingTimeText;
       } else {
         text = t('gasTimingNegative', [
           toHumanReadableTime(Number(customEstimatedTime?.upperTimeBound), t),
@@ -174,4 +189,5 @@ export default function GasTiming({
 GasTiming.propTypes = {
   maxPriorityFeePerGas: PropTypes.string,
   maxFeePerGas: PropTypes.string,
+  gasWarnings: PropTypes.object,
 };

ui/hooks/useGasFeeInputs.js

@@ -531,6 +531,7 @@ export function useGasFeeInputs(
     estimatedGasFeeTimeBounds,
     gasErrors: errorsAndWarnings,
     hasGasErrors: hasBlockingGasErrors,
+    gasWarnings,
     onManualChange: () => {
       setInternalEstimateToUse('custom');
       handleGasLimitOutOfBoundError();