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>
2024-12-23 09:52:26 +01:00 · 2020-10-19 10:41:23 -02:30 · 2020-10-19 10:41:23 -02:30 · 7925a767b8
commit 7925a767b8
parent 397e3a2c7f
8 changed files with 36 additions and 12 deletions
--- a/app/_locales/en/messages.json
+++ b/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)"
  },
--- a/ui/app/components/app/gas-customization/advanced-gas-inputs/advanced-gas-inputs.component.js
+++ b/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 }
--- a/ui/app/components/app/gas-customization/advanced-gas-inputs/tests/advanced-gas-input-component.test.js
+++ b/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 () {
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/advanced-tab-content.component.js
+++ b/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
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
+++ b/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}
      />
    )
  }
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/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
    ),
  }
 }
--- a/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
+++ b/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 = [
--- a/ui/app/pages/swaps/view-quote/view-quote.js
+++ b/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 = (