From b919884c6e8ca337dc4b793265258d557d2ab3eb Mon Sep 17 00:00:00 2001
From: Dan J Miller <danjm.com@gmail.com>
Date: Mon, 16 Aug 2021 20:15:55 -0230
Subject: [PATCH] Allow editing custom gas while estimate is loading (#11853)

---
 .../advanced-gas-controls.component.js            |  5 ++++-
 .../edit-gas-display.component.js                 |  1 +
 .../edit-gas-popover.component.js                 |  4 ++--
 .../transaction-detail.component.js               | 15 +--------------
 .../confirm-transaction-base.component.js         |  7 +++++--
 .../confirm-transaction-base.container.js         |  2 ++
 6 files changed, 15 insertions(+), 19 deletions(-)

diff --git a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js b/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
index 667fa5e8a..b265c3109 100644
--- a/ui/components/app/advanced-gas-controls/advanced-gas-controls.component.js
+++ b/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.string,
+  estimateToUse: PropTypes.bool,
 };
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 d0552b2a2..9be26cd20 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
@@ -269,6 +269,7 @@ export default function EditGasDisplay({
               gasErrors={gasErrors}
               onManualChange={onManualChange}
               minimumGasLimit={minimumGasLimit}
+              estimateToUse={estimateToUse}
             />
           )}
       </div>
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 c3768b6ea..22f9c9bb9 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
@@ -210,9 +210,9 @@ export default function EditGasPopover({
               onClick={onSubmit}
               disabled={
                 hasGasErrors ||
-                isGasEstimatesLoading ||
                 balanceError ||
-                gasLoadingAnimationIsShowing
+                ((isGasEstimatesLoading || gasLoadingAnimationIsShowing) &&
+                  !estimateToUse === 'custom')
               }
             >
               {footerButtonText}
diff --git a/ui/components/app/transaction-detail/transaction-detail.component.js b/ui/components/app/transaction-detail/transaction-detail.component.js
index 2f12d89da..43b17074f 100644
--- a/ui/components/app/transaction-detail/transaction-detail.component.js
+++ b/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
-            onClick={onEdit}
-            disabled={isGasEstimatesLoading || gasLoadingAnimationIsShowing}
-          >
-            {t('edit')}
-          </button>
+          <button onClick={onEdit}>{t('edit')}</button>
         </div>
       )}
       <div className="transaction-detail-rows">{rows}</div>
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 1fc3a8d26..fecf4174f 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -113,6 +113,7 @@ export default class ConfirmTransactionBase extends Component {
     maxPriorityFeePerGas: PropTypes.string,
     baseFeePerGas: PropTypes.string,
     isMainnet: PropTypes.bool,
+    gasFeeIsCustom: PropTypes.bool,
   };
 
   state = {
@@ -197,6 +198,7 @@ export default class ConfirmTransactionBase extends Component {
       txData: { simulationFails, txParams: { value: amount } = {} } = {},
       customGas,
       noGasPrice,
+      gasFeeIsCustom,
     } = this.props;
 
     const insufficientBalance =
@@ -231,7 +233,7 @@ export default class ConfirmTransactionBase extends Component {
       };
     }
 
-    if (noGasPrice) {
+    if (noGasPrice && !gasFeeIsCustom) {
       return {
         valid: false,
         errorKey: GAS_PRICE_FETCH_FAILURE_ERROR_KEY,
@@ -838,6 +840,7 @@ export default class ConfirmTransactionBase extends Component {
       showAccountInHeader,
       txData,
       gasIsLoading,
+      gasFeeIsCustom,
     } = this.props;
     const {
       submitting,
@@ -904,7 +907,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()}
diff --git a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
index f10330399..9afaf35b4 100644
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/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,
   };
 };