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

@@ -31,6 +31,11 @@
         "name": "Test Account 2"
       }
     },
+    "networkDetails": {
+      "EIPS": {
+        "1559": true
+      }
+    },
     "cachedBalances": {},
     "incomingTransactions": {},
     "unapprovedTxs": {

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;
 }

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);
+    });
+  });
 });

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()}
           <SendAssetRow />
           <SendAmountRow />
-          {!networkAndAccountSupports1559 && <SendGasRow />}
+          {networkOrAccountNotSupports1559 && <SendGasRow />}
           {this.props.showHexData && <SendHexDataRow />}
         </div>
       </PageContainerContent>

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,
+    ),
   };
 }
 

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

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([