From 7925a767b8f78a27f2370d29e6f5b5c00e2b74d3 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Mon, 19 Oct 2020 10:41:23 -0230 Subject: [PATCH] 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 * 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 Co-authored-by: Erik Marks --- app/_locales/en/messages.json | 4 ++++ .../advanced-gas-inputs.component.js | 15 +++++++++++---- .../tests/advanced-gas-input-component.test.js | 3 ++- .../advanced-tab-content.component.js | 3 +++ .../gas-modal-page-container.component.js | 5 ++++- .../gas-modal-page-container.container.js | 6 +++++- .../gas-modal-page-container-container.test.js | 2 ++ ui/app/pages/swaps/view-quote/view-quote.js | 10 +++++----- 8 files changed, 36 insertions(+), 12 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index edac431a5..9987defdf 100644 --- 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)" }, diff --git 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 index 75319090d..6f299cbaa 100644 --- 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 ? (
{ gasLimitErrorText } diff --git 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 index a18e0e114..b47a224a6 100644 --- 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 () { diff --git 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 index 255012392..176fd9b12 100644 --- 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} />
{ isEthereumNetwork diff --git 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 index 061f43a95..249b29ca7 100644 --- 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} /> ) } diff --git 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 index 52aaf5162..c2275c247 100644 --- 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 ), } } diff --git 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 index 57514e5fa..00e15f943 100644 --- 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 = [ diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js index a94b2319b..371e75666 100644 --- 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 = (