From a0d7c71011ed34fa654152f5753028cb5edf2cf9 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Wed, 4 Nov 2020 12:44:08 -0330 Subject: [PATCH] Switch gas price estimation in swaps to metaswap-api /gasPrices (#9599) Adds swaps-gas-customization-modal and utilize in swaps Remove swaps specific code from gas-modal-page-container/ Remove slow estimate data from swaps-gas-customization-modal.container Use average as lower safe price limit in swaps-gas-customization-modal Lint fix Fix up unit tests Update ui/app/ducks/swaps/swaps.js Co-authored-by: Mark Stacey Remove stale properties from gas-modal-page-container.component.js Replace use of isCustomPrice safe with isCustomSwapsGasPriceSafe, in swaps-gas-customization-modal Remove use of averageIsSafe in isCustomPriceSafe function Stop calling resetCustomGasState in swaps Refactor 'setter' type actions and creators to 'event based', for swaps slice custom gas logic Replace use of advanced-tab-content.component with advanceGasInputs in swaps gas customization component Add validation for the gasPrices endpoint swaps custom gas price should be considered safe if >= to average Update renderDataSummary unit test Lint fix Remove customOnHideOpts for swapsGasCustomizationModal in modal.js Better handling for swaps gas price loading and failure states Improve semantics: isCustomSwapsGasPriceSafe renamed to isCustomSwapsGasPriceUnSafe Mutate state directly in swaps gas slice reducer Remove unused params More reliable tracking of speed setting for Gas Fees Changed metrics event Lint fix Throw error when fetchSwapsGasPrices response is invalid add disableSave and customTotalSupplement to swaps-gas-customization container return Update ui/app/ducks/swaps/swaps.js Co-authored-by: Mark Stacey Improve error handling in fetchMetaSwapsGasPriceEstimates Remove metricsEvent from swaps-gas-customization-modal context Base check of gas speed type in swaps-gas-customization-modal on gasEstimateType Improve naming of variable and functions use to set customPriceIsSafe prop of AdvancedGasInputs in swaps-gas-customization-modal Simplify sinon spy/stub code in gas-price-button-group-component.test.js Remove unnecessary getSwapsFallbackGasPrice call in swaps-gas-customization-modal Remove use of getSwapsTradeTxParams and clean up related gas price logic in swaps Improve validator of SWAP_GAS_PRICE_VALIDATOR Ensure default tradeValue --- .../advanced-tab-content.component.js | 2 +- .../advanced-tab-content-component.test.js | 2 +- .../gas-modal-page-container.component.js | 89 +----- .../gas-modal-page-container.container.js | 56 +--- ...gas-modal-page-container-component.test.js | 2 - ...gas-modal-page-container-container.test.js | 7 - .../gas-price-button-group.component.js | 7 +- .../gas-price-button-group-component.test.js | 21 +- ui/app/components/app/modals/modal.js | 26 ++ ui/app/ducks/swaps/swaps.js | 205 +++++++++++-- .../swaps/awaiting-swap/awaiting-swap.js | 11 +- ui/app/pages/swaps/index.js | 12 +- .../swaps-gas-customization-modal/index.js | 1 + ...swaps-gas-customization-modal.component.js | 269 ++++++++++++++++++ ...swaps-gas-customization-modal.container.js | 159 +++++++++++ ui/app/pages/swaps/swaps.util.js | 53 ++++ ui/app/pages/swaps/view-quote/view-quote.js | 17 +- ui/app/selectors/custom-gas.js | 92 +++--- ui/app/selectors/tests/custom-gas.test.js | 47 --- ui/app/store/actions.js | 2 +- 20 files changed, 788 insertions(+), 292 deletions(-) create mode 100644 ui/app/pages/swaps/swaps-gas-customization-modal/index.js create mode 100644 ui/app/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.js create mode 100644 ui/app/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.js 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 2af146562..c79122aa2 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 @@ -25,7 +25,7 @@ export default class AdvancedTabContent extends Component { isSpeedUp: PropTypes.bool, isEthereumNetwork: PropTypes.bool, customGasLimitMessage: PropTypes.string, - minimumGasLimit: PropTypes.number.isRequired, + minimumGasLimit: PropTypes.number, } renderDataSummary(transactionFee, timeRemaining) { diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js index 26ba4813e..283240cef 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/advanced-tab-content/tests/advanced-tab-content-component.test.js @@ -103,7 +103,7 @@ describe('AdvancedTabContent Component', function () { const renderDataSummaryArgs = AdvancedTabContent.prototype.renderDataSummary.getCall( 0, ).args - assert.deepEqual(renderDataSummaryArgs, ['$0.25', 21500]) + assert.deepEqual(renderDataSummaryArgs, ['$0.25', '21500']) }) }) 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 13e77bb90..4fe7ad979 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 @@ -2,8 +2,6 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import PageContainer from '../../../ui/page-container' import { Tabs, Tab } from '../../../ui/tabs' -import { calcGasTotal } from '../../../../pages/send/send.utils' -import { sumHexWEIsToRenderableFiat } from '../../../../helpers/utils/conversions.util' import AdvancedTabContent from './advanced-tab-content' import BasicTabContent from './basic-tab-content' @@ -32,10 +30,6 @@ export default class GasModalPageContainer extends Component { newTotalEth: PropTypes.string, sendAmount: PropTypes.string, transactionFee: PropTypes.string, - extraInfoRow: PropTypes.shape({ - label: PropTypes.string, - value: PropTypes.string, - }), }), onSubmit: PropTypes.func, customModalGasPriceInHex: PropTypes.string, @@ -47,16 +41,6 @@ export default class GasModalPageContainer extends Component { isRetry: PropTypes.bool, disableSave: PropTypes.bool, isEthereumNetwork: PropTypes.bool, - customGasLimitMessage: PropTypes.string, - customTotalSupplement: PropTypes.string, - isSwap: PropTypes.bool, - value: PropTypes.string, - conversionRate: PropTypes.number, - minimumGasLimit: PropTypes.number.isRequired, - } - - state = { - selectedTab: 'Basic', } componentDidMount() { @@ -92,8 +76,6 @@ export default class GasModalPageContainer extends Component { isRetry, infoRowProps: { transactionFee }, isEthereumNetwork, - customGasLimitMessage, - minimumGasLimit, } = this.props return ( @@ -102,7 +84,6 @@ export default class GasModalPageContainer extends Component { updateCustomGasLimit={updateCustomGasLimit} customModalGasPriceInHex={customModalGasPriceInHex} customModalGasLimitInHex={customModalGasLimitInHex} - customGasLimitMessage={customGasLimitMessage} timeRemaining={currentTimeEstimate} transactionFee={transactionFee} gasChartProps={gasChartProps} @@ -112,18 +93,11 @@ export default class GasModalPageContainer extends Component { isSpeedUp={isSpeedUp} isRetry={isRetry} isEthereumNetwork={isEthereumNetwork} - minimumGasLimit={minimumGasLimit} /> ) } - renderInfoRows( - newTotalFiat, - newTotalEth, - sendAmount, - transactionFee, - extraInfoRow, - ) { + renderInfoRows(newTotalFiat, newTotalEth, sendAmount, transactionFee) { return (
@@ -143,16 +117,6 @@ export default class GasModalPageContainer extends Component { {transactionFee}
- {extraInfoRow && ( -
- - {extraInfoRow.label} - - - {extraInfoRow.value} - -
- )}
{this.context.t('newTotal')} @@ -175,13 +139,7 @@ export default class GasModalPageContainer extends Component { const { gasPriceButtonGroupProps, hideBasic, - infoRowProps: { - newTotalFiat, - newTotalEth, - sendAmount, - transactionFee, - extraInfoRow, - }, + infoRowProps: { newTotalFiat, newTotalEth, sendAmount, transactionFee }, } = this.props let tabsToRender = [ @@ -200,7 +158,7 @@ export default class GasModalPageContainer extends Component { } return ( - this.setState({ selectedTab: tabName })}> + {tabsToRender.map(({ name, content }, i) => (
@@ -210,7 +168,6 @@ export default class GasModalPageContainer extends Component { newTotalEth, sendAmount, transactionFee, - extraInfoRow, )}
@@ -248,45 +205,7 @@ export default class GasModalPageContainer extends Component { }, }) } - if (this.props.isSwap) { - const newSwapGasTotal = calcGasTotal( - customModalGasLimitInHex, - customModalGasPriceInHex, - ) - let speedSet = '' - if (this.state.selectedTab === 'Basic') { - const { gasButtonInfo } = this.props.gasPriceButtonGroupProps - const selectedGasButtonInfo = gasButtonInfo.find( - ({ priceInHexWei }) => - priceInHexWei === customModalGasPriceInHex, - ) - speedSet = selectedGasButtonInfo?.gasEstimateType || '' - } - - this.context.trackEvent({ - event: 'Gas Fees Changed', - category: 'swaps', - properties: { - speed_set: speedSet, - gas_mode: this.state.selectedTab, - gas_fees: sumHexWEIsToRenderableFiat( - [ - this.props.value, - newSwapGasTotal, - this.props.customTotalSupplement, - ], - 'usd', - this.props.conversionRate, - )?.slice(1), - }, - }) - } - onSubmit( - customModalGasLimitInHex, - customModalGasPriceInHex, - this.state.selectedTab, - this.context.mixPanelTrack, - ) + onSubmit(customModalGasLimitInHex, customModalGasPriceInHex) }} submitText={this.context.t('save')} headerCloseText={this.context.t('close')} 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 7b8fd9d33..7cb918a97 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 @@ -11,7 +11,6 @@ import { updateSendAmount, setGasTotal, updateTransaction, - setSwapsTxGasParams, } from '../../../../store/actions' import { setCustomGasPrice, @@ -67,21 +66,11 @@ import GasModalPageContainer from './gas-modal-page-container.component' const mapStateToProps = (state, ownProps) => { const { currentNetworkTxList, send } = state.metamask const { modalState: { props: modalProps } = {} } = state.appState.modal || {} - const { - txData = {}, - isSwap = false, - customGasLimitMessage = '', - customTotalSupplement = '', - extraInfoRow = null, - useFastestButtons = false, - minimumGasLimit = Number(MIN_GAS_LIMIT_DEC), - } = modalProps || {} + const { txData = {} } = modalProps || {} const { transaction = {} } = ownProps - const selectedTransaction = isSwap - ? txData - : currentNetworkTxList.find( - ({ id }) => id === (transaction.id || txData.id), - ) + const selectedTransaction = currentNetworkTxList.find( + ({ id }) => id === (transaction.id || txData.id), + ) const buttonDataLoading = getBasicGasEstimateLoadingStatus(state) const gasEstimatesLoading = getGasEstimatesLoadingStatus(state) const sendToken = getSendToken(state) @@ -107,13 +96,12 @@ const mapStateToProps = (state, ownProps) => { const gasButtonInfo = getRenderableBasicEstimateData( state, customModalGasLimitInHex, - useFastestButtons, ) const currentCurrency = getCurrentCurrency(state) const conversionRate = getConversionRate(state) const newTotalFiat = sumHexWEIsToRenderableFiat( - [value, customGasTotal, customTotalSupplement], + [value, customGasTotal], currentCurrency, conversionRate, ) @@ -137,11 +125,7 @@ const mapStateToProps = (state, ownProps) => { const newTotalEth = maxModeOn && !isSendTokenSet ? sumHexWEIsToRenderableEth([balance, '0x0']) - : sumHexWEIsToRenderableEth([ - value, - customGasTotal, - customTotalSupplement, - ]) + : sumHexWEIsToRenderableEth([value, customGasTotal]) const sendAmount = maxModeOn && !isSendTokenSet @@ -171,7 +155,6 @@ const mapStateToProps = (state, ownProps) => { return { hideBasic, isConfirm: isConfirm(state), - isSwap, customModalGasPriceInHex, customModalGasLimitInHex, customGasPrice, @@ -180,7 +163,7 @@ const mapStateToProps = (state, ownProps) => { newTotalFiat, currentTimeEstimate, blockTime: getBasicGasEstimateBlockTime(state), - customPriceIsSafe: isCustomPriceSafe(state, isSwap), + customPriceIsSafe: isCustomPriceSafe(state), maxModeOn, gasPriceButtonGroupProps: { buttonDataLoading, @@ -199,20 +182,15 @@ const mapStateToProps = (state, ownProps) => { }, infoRowProps: { originalTotalFiat: sumHexWEIsToRenderableFiat( - [value, customGasTotal, customTotalSupplement], + [value, customGasTotal], currentCurrency, conversionRate, ), - originalTotalEth: sumHexWEIsToRenderableEth([ - value, - customGasTotal, - customTotalSupplement, - ]), + originalTotalEth: sumHexWEIsToRenderableEth([value, customGasTotal]), newTotalFiat: showFiat ? newTotalFiat : '', newTotalEth, transactionFee: sumHexWEIsToRenderableEth(['0x0', customGasTotal]), sendAmount, - extraInfoRow, }, transaction: txData || transaction, isSpeedUp: transaction.status === 'submitted', @@ -225,11 +203,8 @@ const mapStateToProps = (state, ownProps) => { sendToken, balance, tokenBalance: getTokenBalance(state), - customGasLimitMessage, conversionRate, value, - customTotalSupplement, - minimumGasLimit, } } @@ -271,9 +246,6 @@ const mapDispatchToProps = (dispatch) => { dispatch(updateSendErrors({ amount: null })) dispatch(updateSendAmount(calcMaxAmount(maxAmountDataObject))) }, - updateSwapTxGas: (gasLimit, gasPrice) => { - dispatch(setSwapsTxGasParams(gasLimit, gasPrice)) - }, } } @@ -282,7 +254,6 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { gasPriceButtonGroupProps, // eslint-disable-next-line no-shadow isConfirm, - isSwap, txId, isSpeedUp, isRetry, @@ -295,7 +266,6 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { tokenBalance, customGasLimit, transaction, - minimumGasLimit, } = stateProps const { hideGasButtonGroup: dispatchHideGasButtonGroup, @@ -307,7 +277,6 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { cancelAndClose: dispatchCancelAndClose, hideModal: dispatchHideModal, setAmountToMax: dispatchSetAmountToMax, - updateSwapTxGas: dispatchUpdateSwapTxGas, ...otherDispatchProps } = dispatchProps @@ -316,10 +285,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { ...otherDispatchProps, ...ownProps, onSubmit: (gasLimit, gasPrice) => { - if (isSwap) { - dispatchUpdateSwapTxGas(gasLimit, gasPrice) - dispatchHideModal() - } else if (isConfirm) { + if (isConfirm) { const updatedTx = { ...transaction, txParams: { @@ -365,7 +331,7 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { disableSave: insufficientBalance || (isSpeedUp && customGasPrice === 0) || - customGasLimit < minimumGasLimit, + customGasLimit < Number(MIN_GAS_LIMIT_DEC), } } diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js b/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js index efcb53768..b3c9f98f5 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js +++ b/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-component.test.js @@ -194,14 +194,12 @@ describe('GasModalPageContainer Component', function () { 'mockNewTotalEth', 'mockSendAmount', 'mockTransactionFee', - { label: 'mockLabel', value: 'mockValue' }, ]) assert.deepEqual(GP.renderInfoRows.getCall(1).args, [ 'mockNewTotalFiat', 'mockNewTotalEth', 'mockSendAmount', 'mockTransactionFee', - { label: 'mockLabel', value: 'mockValue' }, ]) }) 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 d591d2f12..0016a3212 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,8 +63,6 @@ describe('gas-modal-page-container container', function () { txData: { id: 34, }, - extraInfoRow: { label: 'mockLabel', value: 'mockValue' }, - minimumGasLimit: 21000, }, }, }, @@ -131,8 +129,6 @@ describe('gas-modal-page-container container', function () { newTotalFiat: '637.41', blockTime: 12, conversionRate: 50, - customGasLimitMessage: '', - customTotalSupplement: '', customModalGasLimitInHex: 'aaaaaaaa', customModalGasPriceInHex: 'ffffffff', customGasTotal: 'aaaaaaa955555556', @@ -152,7 +148,6 @@ describe('gas-modal-page-container container', function () { gasEstimatesLoading: false, hideBasic: true, infoRowProps: { - extraInfoRow: { label: 'mockLabel', value: 'mockValue' }, originalTotalFiat: '637.41', originalTotalEth: '12.748189 ETH', newTotalFiat: '637.41', @@ -163,7 +158,6 @@ describe('gas-modal-page-container container', function () { insufficientBalance: true, isSpeedUp: false, isRetry: false, - isSwap: false, txId: 34, isEthereumNetwork: true, isMainnet: true, @@ -174,7 +168,6 @@ 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/components/app/gas-customization/gas-price-button-group/gas-price-button-group.component.js b/ui/app/components/app/gas-customization/gas-price-button-group/gas-price-button-group.component.js index 6630844bb..95252f408 100644 --- a/ui/app/components/app/gas-customization/gas-price-button-group/gas-price-button-group.component.js +++ b/ui/app/components/app/gas-customization/gas-price-button-group/gas-price-button-group.component.js @@ -93,7 +93,12 @@ export default class GasPriceButtonGroup extends Component { ) { return (