From 6187ab9b01ea757366a42d22b7292413c0f2b119 Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Thu, 30 Sep 2021 17:27:59 +0530 Subject: [PATCH] Fix gas control flicker on send screen when switching between EIP-1559 networks (#12230) Fix gas control flicker on send screen when switching between EIP-1559 networks --- test/data/mock-state.json | 5 ++ ui/ducks/metamask/metamask.js | 10 ++++ ui/ducks/metamask/metamask.test.js | 36 +++++++++++ .../send-content/send-content.component.js | 6 +- .../send-content/send-content.container.js | 6 +- ui/selectors/selectors.js | 16 +++++ ui/selectors/selectors.test.js | 59 +++++++++++++++++++ 7 files changed, 133 insertions(+), 5 deletions(-) diff --git a/test/data/mock-state.json b/test/data/mock-state.json index 8b6171339..e8c979fd1 100644 --- a/test/data/mock-state.json +++ b/test/data/mock-state.json @@ -31,6 +31,11 @@ "name": "Test Account 2" } }, + "networkDetails": { + "EIPS": { + "1559": true + } + }, "cachedBalances": {}, "incomingTransactions": {}, "unapprovedTxs": { diff --git a/ui/ducks/metamask/metamask.js b/ui/ducks/metamask/metamask.js index d78726a6a..b5867a1ff 100644 --- a/ui/ducks/metamask/metamask.js +++ b/ui/ducks/metamask/metamask.js @@ -279,6 +279,16 @@ export function getUnapprovedTxs(state) { return state.metamask.unapprovedTxs; } +/** + * Function returns true if network details are fetched and it is found to not support EIP-1559 + */ +export function isNotEIP1559Network(state) { + return state.metamask.networkDetails?.EIPS[1559] === false; +} + +/** + * Function returns true if network details are fetched and it is found to support EIP-1559 + */ export function isEIP1559Network(state) { return state.metamask.networkDetails?.EIPS[1559] === true; } diff --git a/ui/ducks/metamask/metamask.test.js b/ui/ducks/metamask/metamask.test.js index 51c88033d..0c75e7f47 100644 --- a/ui/ducks/metamask/metamask.test.js +++ b/ui/ducks/metamask/metamask.test.js @@ -7,6 +7,7 @@ import reduceMetamask, { getSendHexDataFeatureFlagState, getSendToAccounts, getUnapprovedTxs, + isNotEIP1559Network, } from './metamask'; describe('MetaMask Reducers', () => { @@ -99,6 +100,9 @@ describe('MetaMask Reducers', () => { gasPrice: '4a817c800', }, }, + networkDetails: { + EIPS: { 1559: true }, + }, }, {}, ), @@ -378,4 +382,36 @@ describe('MetaMask Reducers', () => { }); }); }); + + describe('isNotEIP1559Network()', () => { + it('should return true if network does not supports EIP-1559', () => { + expect( + isNotEIP1559Network({ + ...mockState, + metamask: { + ...mockState.metamask, + networkDetails: { + EIPS: { 1559: false }, + }, + }, + }), + ).toStrictEqual(true); + }); + + it('should return false if networkDetails.EIPS.1559 is not false', () => { + expect(isNotEIP1559Network(mockState)).toStrictEqual(false); + + expect( + isNotEIP1559Network({ + ...mockState, + metamask: { + ...mockState.metamask, + networkDetails: { + EIPS: { 1559: undefined }, + }, + }, + }), + ).toStrictEqual(false); + }); + }); }); diff --git a/ui/pages/send/send-content/send-content.component.js b/ui/pages/send/send-content/send-content.component.js index 9ae57736d..0e80abbc0 100644 --- a/ui/pages/send/send-content/send-content.component.js +++ b/ui/pages/send/send-content/send-content.component.js @@ -29,7 +29,7 @@ export default class SendContent extends Component { gasIsExcessive: PropTypes.bool.isRequired, isEthGasPrice: PropTypes.bool, noGasPrice: PropTypes.bool, - networkAndAccountSupports1559: PropTypes.bool, + networkOrAccountNotSupports1559: PropTypes.bool, }; render() { @@ -40,7 +40,7 @@ export default class SendContent extends Component { isEthGasPrice, noGasPrice, isAssetSendable, - networkAndAccountSupports1559, + networkOrAccountNotSupports1559, } = this.props; let gasError; @@ -59,7 +59,7 @@ export default class SendContent extends Component { {this.maybeRenderAddContact()} - {!networkAndAccountSupports1559 && } + {networkOrAccountNotSupports1559 && } {this.props.showHexData && } diff --git a/ui/pages/send/send-content/send-content.container.js b/ui/pages/send/send-content/send-content.container.js index a1f4daf46..83b38dfeb 100644 --- a/ui/pages/send/send-content/send-content.container.js +++ b/ui/pages/send/send-content/send-content.container.js @@ -4,7 +4,7 @@ import { getAddressBookEntry, getIsEthGasPriceFetched, getNoGasPriceFetched, - checkNetworkAndAccountSupports1559, + checkNetworkOrAccountNotSupports1559, } from '../../../selectors'; import { getIsAssetSendable, getSendTo } from '../../../ducks/send'; @@ -25,7 +25,9 @@ function mapStateToProps(state) { isEthGasPrice: getIsEthGasPriceFetched(state), noGasPrice: getNoGasPriceFetched(state), to, - networkAndAccountSupports1559: checkNetworkAndAccountSupports1559(state), + networkOrAccountNotSupports1559: checkNetworkOrAccountNotSupports1559( + state, + ), }; } diff --git a/ui/selectors/selectors.js b/ui/selectors/selectors.js index 124e39bc4..eae899294 100644 --- a/ui/selectors/selectors.js +++ b/ui/selectors/selectors.js @@ -32,6 +32,7 @@ import { DAY } from '../../shared/constants/time'; import { getNativeCurrency, getConversionRate, + isNotEIP1559Network, isEIP1559Network, } from '../ducks/metamask/metamask'; @@ -92,6 +93,10 @@ export function isEIP1559Account(state) { return currentKeyring && currentKeyring.type !== KEYRING_TYPES.TREZOR; } +/** + * The function returns true if network and account details are fetched and + * both of them support EIP-1559. + */ export function checkNetworkAndAccountSupports1559(state) { const networkSupports1559 = isEIP1559Network(state); const accountSupports1559 = isEIP1559Account(state); @@ -99,6 +104,17 @@ export function checkNetworkAndAccountSupports1559(state) { return networkSupports1559 && accountSupports1559; } +/** + * The function returns true if network and account details are fetched and + * either of them do not support EIP-1559. + */ +export function checkNetworkOrAccountNotSupports1559(state) { + const networkNotSupports1559 = isNotEIP1559Network(state); + const accountSupports1559 = isEIP1559Account(state); + + return networkNotSupports1559 || accountSupports1559 === false; +} + /** * Checks if the current wallet is a hardware wallet. * @param {Object} state diff --git a/ui/selectors/selectors.test.js b/ui/selectors/selectors.test.js index 75a43ea49..edc572f26 100644 --- a/ui/selectors/selectors.test.js +++ b/ui/selectors/selectors.test.js @@ -78,6 +78,65 @@ describe('Selectors', () => { }); }); + describe('#checkNetworkOrAccountNotSupports1559', () => { + it('returns false if network and account supports EIP-1559', () => { + const not1559Network = selectors.checkNetworkOrAccountNotSupports1559({ + ...mockState, + metamask: { + ...mockState.metamask, + keyrings: [ + { + type: 'Ledger Hardware', + accounts: ['0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'], + }, + ], + }, + }); + expect(not1559Network).toStrictEqual(false); + }); + + it('returns true if network does not support EIP-1559', () => { + let not1559Network = selectors.checkNetworkOrAccountNotSupports1559({ + ...mockState, + metamask: { + ...mockState.metamask, + networkDetails: { + EIPS: { 1559: undefined }, + }, + }, + }); + expect(not1559Network).toStrictEqual(true); + not1559Network = selectors.checkNetworkOrAccountNotSupports1559({ + ...mockState, + metamask: { + ...mockState.metamask, + networkDetails: { + EIPS: { 1559: false }, + }, + }, + }); + expect(not1559Network).toStrictEqual(true); + }); + + it('returns true if account does not support EIP-1559', () => { + const networkOrAccountNotSupports1559 = selectors.checkNetworkOrAccountNotSupports1559( + { + ...mockState, + metamask: { + ...mockState.metamask, + keyrings: [ + { + type: 'Trezor Hardware', + accounts: ['0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc'], + }, + ], + }, + }, + ); + expect(networkOrAccountNotSupports1559).toStrictEqual(true); + }); + }); + describe('#getAddressBook', () => { it('should return the address book', () => { expect(selectors.getAddressBook(mockState)).toStrictEqual([