Add a minimumGasLimit to the original gas customization modal (#9623)

* Add a minimumGasLimit to the gas customization modal in swaps

* Update app/_locales/en/messages.json

Co-authored-by: Mark Stacey <markjstacey@gmail.com>

* Set default for minimum gas limit in gas-modal-page-container.container and make required in sub components

* Update unit tests

* Default value for minimumGasLimit in advanced-gas-inputs.component.js

* Preserve existing gasLimitTooLow message key by creating new gasLimitTooLowWithDynamicFee

* Fix failing unit test

Co-authored-by: Mark Stacey <markjstacey@gmail.com>
Co-authored-by: Erik Marks <rekmarks@protonmail.com>

app/_locales/en/messages.json

@@ -708,6 +708,10 @@
   "gasLimitTooLow": {
     "message": "Gas limit must be at least 21000"
   },
+  "gasLimitTooLowWithDynamicFee": {
+    "message": "Gas limit must be at least $1",
+    "description": "$1 is the custom gas limit, in decimal."
+  },
   "gasPrice": {
     "message": "Gas Price (GWEI)"
   },

ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import { debounce } from 'lodash'
 import Tooltip from '../../../ui/tooltip'
+import { MIN_GAS_LIMIT_DEC } from '../../../../pages/send/send.constants'
 
 export default class AdvancedGasInputs extends Component {
   static contextTypes = {
@@ -18,6 +19,11 @@ export default class AdvancedGasInputs extends Component {
     customPriceIsSafe: PropTypes.bool,
     isSpeedUp: PropTypes.bool,
     customGasLimitMessage: PropTypes.string,
+    minimumGasLimit: PropTypes.number,
+  }
+
+  static defaultProps = {
+    minimumGasLimit: MIN_GAS_LIMIT_DEC,
   }
 
   constructor (props) {
@@ -84,7 +90,7 @@ export default class AdvancedGasInputs extends Component {
     return {}
   }
 
-  gasLimitError ({ insufficientBalance, gasLimit }) {
+  gasLimitError ({ insufficientBalance, gasLimit, minimumGasLimit }) {
     const { t } = this.context
 
     if (insufficientBalance) {
@@ -92,9 +98,9 @@ export default class AdvancedGasInputs extends Component {
         errorText: t('insufficientBalance'),
         errorType: 'error',
       }
-    } else if (gasLimit < 21000) {
+    } else if (gasLimit < minimumGasLimit) {
       return {
-        errorText: t('gasLimitTooLow'),
+        errorText: t('gasLimitTooLowWithDynamicFee', [minimumGasLimit]),
         errorType: 'error',
       }
     }
@@ -153,6 +159,7 @@ export default class AdvancedGasInputs extends Component {
       customPriceIsSafe,
       isSpeedUp,
       customGasLimitMessage,
+      minimumGasLimit,
     } = this.props
     const {
       gasPrice,
@@ -172,7 +179,7 @@ export default class AdvancedGasInputs extends Component {
     const {
       errorText: gasLimitErrorText,
       errorType: gasLimitErrorType,
-    } = this.gasLimitError({ insufficientBalance, gasLimit })
+    } = this.gasLimitError({ insufficientBalance, gasLimit, minimumGasLimit })
     const gasLimitErrorComponent = gasLimitErrorType ? (
       <div className={`advanced-gas-inputs__gas-edit-row__${gasLimitErrorType}-text`}>
         { gasLimitErrorText }

ui/app/components/app/gas-customization/advanced-gas-inputs/tests/advanced-gas-input-component.test.js

@@ -17,6 +17,7 @@ describe('Advanced Gas Inputs', function () {
     insufficientBalance: false,
     customPriceIsSafe: true,
     isSpeedUp: false,
+    minimumGasLimit: 21000,
   }
 
   beforeEach(function () {
@@ -91,7 +92,7 @@ describe('Advanced Gas Inputs', function () {
     assert.equal(renderError.length, 2)
 
     assert.equal(renderError.at(0).text(), 'zeroGasPriceOnSpeedUpError')
-    assert.equal(renderError.at(1).text(), 'gasLimitTooLow')
+    assert.equal(renderError.at(1).text(), 'gasLimitTooLowWithDynamicFee')
   })
 
   it('warns when custom gas price is too low', function () {

ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js

@@ -27,6 +27,7 @@ export default class AdvancedTabContent extends Component {
     isSpeedUp: PropTypes.bool,
     isEthereumNetwork: PropTypes.bool,
     customGasLimitMessage: PropTypes.string,
+    minimumGasLimit: PropTypes.number.isRequired,
   }
 
   renderDataSummary (transactionFee, timeRemaining) {
@@ -67,6 +68,7 @@ export default class AdvancedTabContent extends Component {
       transactionFee,
       isEthereumNetwork,
       customGasLimitMessage,
+      minimumGasLimit,
     } = this.props
 
     return (
@@ -83,6 +85,7 @@ export default class AdvancedTabContent extends Component {
               customPriceIsSafe={customPriceIsSafe}
               isSpeedUp={isSpeedUp}
               customGasLimitMessage={customGasLimitMessage}
+              minimumGasLimit={minimumGasLimit}
             />
           </div>
           { isEthereumNetwork

ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js

@@ -53,7 +53,8 @@ export default class GasModalPageContainer extends Component {
     customTotalSupplement: PropTypes.string,
     isSwap: PropTypes.bool,
     value: PropTypes.string,
-    conversionRate: PropTypes.number,
+    conversionRate: PropTypes.string,
+    minimumGasLimit: PropTypes.number.isRequired,
   }
 
   state = {
@@ -98,6 +99,7 @@ export default class GasModalPageContainer extends Component {
       },
       isEthereumNetwork,
       customGasLimitMessage,
+      minimumGasLimit,
     } = this.props
 
     return (
@@ -116,6 +118,7 @@ export default class GasModalPageContainer extends Component {
         isSpeedUp={isSpeedUp}
         isRetry={isRetry}
         isEthereumNetwork={isEthereumNetwork}
+        minimumGasLimit={minimumGasLimit}
       />
     )
   }

ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js

@@ -62,6 +62,7 @@ import {
   calcGasTotal,
   isBalanceSufficient,
 } from '../../../../pages/send/send.utils'
+import { MIN_GAS_LIMIT_DEC } from '../../../../pages/send/send.constants'
 import { calcMaxAmount } from '../../../../pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.utils'
 import GasModalPageContainer from './gas-modal-page-container.component'
 
@@ -75,6 +76,7 @@ const mapStateToProps = (state, ownProps) => {
     customTotalSupplement = '',
     extraInfoRow = null,
     useFastestButtons = false,
+    minimumGasLimit = MIN_GAS_LIMIT_DEC,
   } = modalProps || {}
   const { transaction = {} } = ownProps
   const selectedTransaction = isSwap
@@ -202,6 +204,7 @@ const mapStateToProps = (state, ownProps) => {
     conversionRate,
     value,
     customTotalSupplement,
+    minimumGasLimit,
   }
 }
 
@@ -264,6 +267,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     tokenBalance,
     customGasLimit,
     transaction,
+    minimumGasLimit,
   } = stateProps
   const {
     hideGasButtonGroup: dispatchHideGasButtonGroup,
@@ -333,7 +337,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     disableSave: (
       insufficientBalance ||
       (isSpeedUp && customGasPrice === 0) ||
-      customGasLimit < 21000
+      customGasLimit < minimumGasLimit
     ),
   }
 }

ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js

@@ -63,6 +63,7 @@ describe('gas-modal-page-container container', function () {
                   id: 34,
                 },
                 extraInfoRow: { label: 'mockLabel', value: 'mockValue' },
+                minimumGasLimit: 21000,
               },
             },
           },
@@ -170,6 +171,7 @@ describe('gas-modal-page-container container', function () {
           id: 34,
         },
         value: '0x640000000000000',
+        minimumGasLimit: 21000,
       }
       const baseMockOwnProps = { transaction: { id: 34 } }
       const tests = [

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

@@ -131,12 +131,11 @@ export default function ViewQuote () {
     .round(0)
     .toString(16)
 
-  const maxGasLimit = (customMaxGas ||
-    hexMax(
-      (`0x${decimalToHex(usedQuote?.maxGas || 0)}`),
-      usedGasLimitWithMultiplier,
-    )
+  const nonCustomMaxGasLimit = hexMax(
+    (`0x${decimalToHex(usedQuote?.maxGas || 0)}`),
+    usedGasLimitWithMultiplier,
   )
+  const maxGasLimit = customMaxGas || nonCustomMaxGasLimit
 
   const gasTotalInWeiHex = calcGasTotal(maxGasLimit, gasPrice)
 
@@ -394,6 +393,7 @@ export default function ViewQuote () {
         : null
     ),
     useFastestButtons: true,
+    minimumGasLimit: Number(hexToDecimal(nonCustomMaxGasLimit)),
   }))
 
   const tokenApprovalTextComponent = (