Fixes related to swaps custom gas limit (#9858)

* Fixes related to swaps custom gas limit

* Update ui/app/pages/swaps/view-quote/view-quote.js

Co-authored-by: Erik Marks <25517051+rekmarks@users.noreply.github.com>

* Move selectQuotePopover onSubmit dispatches to a single action creator

* Correct type of minimumGasLimit in view-quote.js

Co-authored-by: Erik Marks <25517051+rekmarks@users.noreply.github.com>

ui/app/ducks/swaps/swaps.js

@@ -23,6 +23,8 @@ import {
   updateTransaction,
   resetBackgroundSwapsState,
   setSwapsLiveness,
+  setSelectedQuoteAggId,
+  setSwapsTxGasLimit,
 } from '../../store/actions'
 import {
   AWAITING_SWAP_ROUTE,
@@ -95,6 +97,8 @@ const slice = createSlice({
       state.approveTxId = null
       state.balanceError = false
       state.fetchingQuotes = false
+      state.customGas.limit = null
+      state.customGas.price = null
     },
     retriedGetQuotes: (state) => {
       state.approveTxId = null
@@ -122,6 +126,10 @@ const slice = createSlice({
     setToToken: (state, action) => {
       state.toToken = action.payload
     },
+    swapCustomGasModalClosed: (state) => {
+      state.customGas.price = null
+      state.customGas.limit = null
+    },
     swapCustomGasModalPriceEdited: (state, action) => {
       state.customGas.price = action.payload
     },
@@ -299,6 +307,7 @@ const {
   swapCustomGasModalPriceEdited,
   swapCustomGasModalLimitEdited,
   retrievedFallbackSwapsGasPrice,
+  swapCustomGasModalClosed,
 } = actions
 
 export {
@@ -312,6 +321,7 @@ export {
   setToToken as setSwapToToken,
   swapCustomGasModalPriceEdited,
   swapCustomGasModalLimitEdited,
+  swapCustomGasModalClosed,
 }
 
 export const navigateBackToBuildQuote = (history) => {
@@ -339,6 +349,14 @@ export const prepareToLeaveSwaps = () => {
   }
 }
 
+export const swapsQuoteSelected = (aggId) => {
+  return (dispatch) => {
+    dispatch(swapCustomGasModalLimitEdited(null))
+    dispatch(setSelectedQuoteAggId(aggId))
+    dispatch(setSwapsTxGasLimit(''))
+  }
+}
+
 export const fetchAndSetSwapsGasPriceInfo = () => {
   return async (dispatch) => {
     const basicEstimates = await dispatch(fetchMetaSwapsGasPriceEstimates())

ui/app/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.js

@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import BigNumber from 'bignumber.js'
 import { hideModal, customSwapsGasParamsUpdated } from '../../../store/actions'
 import {
   conversionRateSelector as getConversionRate,
@@ -18,6 +19,7 @@ import {
   swapCustomGasModalPriceEdited,
   swapCustomGasModalLimitEdited,
   shouldShowCustomPriceTooLowWarning,
+  swapCustomGasModalClosed,
 } from '../../../ducks/swaps/swaps'
 
 import {
@@ -87,6 +89,11 @@ const mapStateToProps = (state) => {
     conversionRate,
   })
 
+  const customGasLimitTooLow = new BigNumber(customGasLimit, 16).lt(
+    minimumGasLimit,
+    10,
+  )
+
   return {
     customGasPrice,
     customGasLimit,
@@ -121,7 +128,7 @@ const mapStateToProps = (state) => {
     customGasLimitMessage,
     customTotalSupplement,
     usdConversionRate: getUSDConversionRate(state),
-    disableSave: insufficientBalance || customGasLimit < minimumGasLimit,
+    disableSave: insufficientBalance || customGasLimitTooLow,
     minimumGasLimit,
   }
 }
@@ -129,10 +136,12 @@ const mapStateToProps = (state) => {
 const mapDispatchToProps = (dispatch) => {
   return {
     cancelAndClose: () => {
+      dispatch(swapCustomGasModalClosed())
       dispatch(hideModal())
     },
-    onSubmit: (gasLimit, gasPrice) => {
+    onSubmit: async (gasLimit, gasPrice) => {
-      dispatch(customSwapsGasParamsUpdated(gasLimit, gasPrice))
+      await dispatch(customSwapsGasParamsUpdated(gasLimit, gasPrice))
+      dispatch(swapCustomGasModalClosed())
       dispatch(hideModal())
     },
     setSwapsCustomizationModalPrice: (newPrice) => {

ui/app/pages/swaps/view-quote/view-quote.js

@@ -11,7 +11,6 @@ import { useNewMetricEvent } from '../../../hooks/useMetricEvent'
 import { useSwapsEthToken } from '../../../hooks/useSwapsEthToken'
 import { MetaMetricsContext } from '../../../contexts/metametrics.new'
 import FeeCard from '../fee-card'
-import { setCustomGasLimit } from '../../../ducks/gas/gas.duck'
 import {
   getQuotes,
   getSelectedQuote,
@@ -27,6 +26,7 @@ import {
   navigateBackToBuildQuote,
   signAndSendTransactions,
   getBackgroundSwapRouteState,
+  swapsQuoteSelected,
 } from '../../../ducks/swaps/swaps'
 import {
   conversionRateSelector,
@@ -39,8 +39,6 @@ import { getTokens } from '../../../ducks/metamask/metamask'
 import {
   safeRefetchQuotes,
   setCustomApproveTxData,
-  setSwapsTxGasLimit,
-  setSelectedQuoteAggId,
   setSwapsErrorKey,
   showModal,
 } from '../../../store/actions'
@@ -445,7 +443,7 @@ export default function ViewQuote() {
           : null,
         initialGasPrice: gasPrice,
         initialGasLimit: maxGasLimit,
-        minimumGasLimit: nonCustomMaxGasLimit,
+        minimumGasLimit: new BigNumber(nonCustomMaxGasLimit, 16).toNumber(),
       }),
     )
 
@@ -471,11 +469,7 @@ export default function ViewQuote() {
           <SelectQuotePopover
             quoteDataRows={renderablePopoverData}
             onClose={() => setSelectQuotePopoverShown(false)}
-            onSubmit={(aggId) => {
+            onSubmit={(aggId) => dispatch(swapsQuoteSelected(aggId))}
-              dispatch(setSelectedQuoteAggId(aggId))
-              dispatch(setCustomGasLimit(null))
-              dispatch(setSwapsTxGasLimit(''))
-            }}
             swapToSymbol={destinationTokenSymbol}
             initialAggId={usedQuote.aggregator}
             onQuoteDetailsIsOpened={quoteDetailsOpened}