Allow editing custom gas while estimate is loading (#11853)

ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js

@@ -25,6 +25,7 @@ export default function AdvancedGasControls({
   maxFeeFiat,
   gasErrors,
   minimumGasLimit,
+  estimateToUse,
 }) {
   const t = useContext(I18nContext);
   const networkAndAccountSupport1559 = useSelector(
@@ -35,7 +36,8 @@ export default function AdvancedGasControls({
     getGasLoadingAnimationIsShowing,
   );
   const disableFormFields =
-    isGasEstimatesLoading || isGasLoadingAnimationIsShowing;
+    estimateToUse !== 'custom' &&
+    (isGasEstimatesLoading || isGasLoadingAnimationIsShowing);
 
   const showFeeMarketFields =
     networkAndAccountSupport1559 &&
@@ -141,4 +143,5 @@ AdvancedGasControls.propTypes = {
   maxFeeFiat: PropTypes.string,
   gasErrors: PropTypes.object,
   minimumGasLimit: PropTypes.number,
+  estimateToUse: PropTypes.bool,
 };

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

@@ -265,6 +265,7 @@ export default function EditGasDisplay({
               gasErrors={gasErrors}
               onManualChange={onManualChange}
               minimumGasLimit={minimumGasLimit}
+              estimateToUse={estimateToUse}
             />
           )}
       </div>

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

@@ -210,9 +210,9 @@ export default function EditGasPopover({
               onClick={onSubmit}
               disabled={
                 hasGasErrors ||
-                isGasEstimatesLoading ||
                 balanceError ||
-                gasLoadingAnimationIsShowing
+                ((isGasEstimatesLoading || gasLoadingAnimationIsShowing) &&
+                  !estimateToUse === 'custom')
               }
             >
               {footerButtonText}

ui/components/app/transaction-detail/transaction-detail.component.js

@@ -1,9 +1,5 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
-
-import { getIsGasEstimatesLoading } from '../../../ducks/metamask/metamask';
-import { getGasLoadingAnimationIsShowing } from '../../../ducks/app/app';
 
 import { I18nContext } from '../../../contexts/i18n';
 
@@ -12,22 +8,13 @@ import LoadingHeartBeat from '../../ui/loading-heartbeat';
 
 export default function TransactionDetail({ rows = [], onEdit }) {
   const t = useContext(I18nContext);
-  const isGasEstimatesLoading = useSelector(getIsGasEstimatesLoading);
-  const gasLoadingAnimationIsShowing = useSelector(
-    getGasLoadingAnimationIsShowing,
-  );
 
   return (
     <div className="transaction-detail">
       {process.env.IN_TEST === 'true' ? null : <LoadingHeartBeat />}
       {onEdit && (
         <div className="transaction-detail-edit">
-          <button
+          <button onClick={onEdit}>{t('edit')}</button>
-            onClick={onEdit}
-            disabled={isGasEstimatesLoading || gasLoadingAnimationIsShowing}
-          >
-            {t('edit')}
-          </button>
         </div>
       )}
       <div className="transaction-detail-rows">{rows}</div>

ui/pages/confirm-transaction-base/confirm-transaction-base.component.js

@@ -112,6 +112,7 @@ export default class ConfirmTransactionBase extends Component {
     maxFeePerGas: PropTypes.string,
     maxPriorityFeePerGas: PropTypes.string,
     baseFeePerGas: PropTypes.string,
+    gasFeeIsCustom: PropTypes.bool,
   };
 
   state = {
@@ -196,6 +197,7 @@ export default class ConfirmTransactionBase extends Component {
       txData: { simulationFails, txParams: { value: amount } = {} } = {},
       customGas,
       noGasPrice,
+      gasFeeIsCustom,
     } = this.props;
 
     const insufficientBalance =
@@ -230,7 +232,7 @@ export default class ConfirmTransactionBase extends Component {
       };
     }
 
-    if (noGasPrice) {
+    if (noGasPrice && !gasFeeIsCustom) {
       return {
         valid: false,
         errorKey: GAS_PRICE_FETCH_FAILURE_ERROR_KEY,
@@ -829,6 +831,7 @@ export default class ConfirmTransactionBase extends Component {
       showAccountInHeader,
       txData,
       gasIsLoading,
+      gasFeeIsCustom,
     } = this.props;
     const {
       submitting,
@@ -895,7 +898,7 @@ export default class ConfirmTransactionBase extends Component {
         lastTx={lastTx}
         ofText={ofText}
         requestsWaitingText={requestsWaitingText}
-        disabled={!valid || submitting || gasIsLoading}
+        disabled={!valid || submitting || (gasIsLoading && !gasFeeIsCustom)}
         onEdit={() => this.handleEdit()}
         onCancelAll={() => this.handleCancelAll()}
         onCancel={() => this.handleCancel()}

ui/pages/confirm-transaction-base/confirm-transaction-base.container.js

@@ -155,6 +155,7 @@ const mapStateToProps = (state, ownProps) => {
   const isEthGasPrice = getIsEthGasPriceFetched(state);
   const noGasPrice = !supportsEIP1599 && getNoGasPriceFetched(state);
   const { useNativeCurrencyAsPrimaryCurrency } = getPreferences(state);
+  const gasFeeIsCustom = fullTxData.userFeeLevel === 'custom';
 
   return {
     balance,
@@ -201,6 +202,7 @@ const mapStateToProps = (state, ownProps) => {
     maxFeePerGas: gasEstimationObject.maxFeePerGas,
     maxPriorityFeePerGas: gasEstimationObject.maxPriorityFeePerGas,
     baseFeePerGas: gasEstimationObject.baseFeePerGas,
+    gasFeeIsCustom,
   };
 };