add chainId to all new transaction metadata (#10528)

app/scripts/controllers/incoming-transactions.js

@@ -283,6 +283,7 @@ export default class IncomingTransactionsController {
     return {
       blockNumber: txMeta.blockNumber,
       id: createId(),
+      chainId,
       metamaskNetworkId: CHAIN_ID_TO_NETWORK_ID_MAP[chainId],
       status,
       time,

app/scripts/controllers/transactions/index.js

@@ -84,6 +84,7 @@ export default class TransactionController extends EventEmitter {
       initState: opts.initState,
       txHistoryLimit: opts.txHistoryLimit,
       getNetwork: this.getNetwork.bind(this),
+      getCurrentChainId: opts.getCurrentChainId,
     });
     this._onBootCleanUp();
 

app/scripts/controllers/transactions/tx-state-manager.js

@@ -4,6 +4,7 @@ import log from 'loglevel';
 import createId from '../../lib/random-id';
 import { TRANSACTION_STATUSES } from '../../../../shared/constants/transaction';
 import { METAMASK_CONTROLLER_EVENTS } from '../../metamask-controller';
+import { transactionMatchesNetwork } from '../../../../shared/modules/transaction.utils';
 import {
   generateHistoryEntry,
   replayHistory,
@@ -28,12 +29,13 @@ import { getFinalStates, normalizeTxParams } from './lib/util';
  * @class
  */
 export default class TransactionStateManager extends EventEmitter {
-  constructor({ initState, txHistoryLimit, getNetwork }) {
+  constructor({ initState, txHistoryLimit, getNetwork, getCurrentChainId }) {
     super();
 
     this.store = new ObservableStore({ transactions: [], ...initState });
     this.txHistoryLimit = txHistoryLimit;
     this.getNetwork = getNetwork;
+    this.getCurrentChainId = getCurrentChainId;
   }
 
   /**
@@ -42,6 +44,7 @@ export default class TransactionStateManager extends EventEmitter {
    */
   generateTxMeta(opts) {
     const netId = this.getNetwork();
+    const chainId = this.getCurrentChainId();
     if (netId === 'loading') {
       throw new Error('MetaMask is having trouble connecting to the network');
     }
@@ -50,6 +53,7 @@ export default class TransactionStateManager extends EventEmitter {
       time: new Date().getTime(),
       status: TRANSACTION_STATUSES.UNAPPROVED,
       metamaskNetworkId: netId,
+      chainId,
       loadingDefaults: true,
       ...opts,
     };
@@ -65,13 +69,14 @@ export default class TransactionStateManager extends EventEmitter {
    */
   getTxList(limit) {
     const network = this.getNetwork();
+    const chainId = this.getCurrentChainId();
     const fullTxList = this.getFullTxList();
 
     const nonces = new Set();
     const txs = [];
     for (let i = fullTxList.length - 1; i > -1; i--) {
       const txMeta = fullTxList[i];
-      if (txMeta.metamaskNetworkId !== network) {
+      if (transactionMatchesNetwork(txMeta, chainId, network) === false) {
         continue;
       }
 
@@ -452,13 +457,14 @@ export default class TransactionStateManager extends EventEmitter {
     // network only tx
     const txs = this.getFullTxList();
     const network = this.getNetwork();
+    const chainId = this.getCurrentChainId();
 
     // Filter out the ones from the current account and network
     const otherAccountTxs = txs.filter(
       (txMeta) =>
         !(
           txMeta.txParams.from === address &&
-          txMeta.metamaskNetworkId === network
+          transactionMatchesNetwork(txMeta, chainId, network)
         ),
     );
 

shared/modules/transaction.utils.js

@@ -0,0 +1,6 @@
+export function transactionMatchesNetwork(transaction, chainId, networkId) {
+  if (typeof transaction.chainId !== 'undefined') {
+    return transaction.chainId === chainId;
+  }
+  return transaction.metamaskNetworkId === networkId;
+}

test/unit/actions/tx_test.js

@@ -3,6 +3,7 @@ import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import * as actions from '../../../ui/app/store/actions';
 import * as actionConstants from '../../../ui/app/store/actionConstants';
+import { ROPSTEN_CHAIN_ID } from '../../../shared/constants/network';
 
 const middlewares = [thunk];
 const mockStore = configureMockStore(middlewares);
@@ -19,6 +20,9 @@ describe('tx confirmation screen', function () {
           time: 1457634084250,
         },
       },
+      provider: {
+        chainId: ROPSTEN_CHAIN_ID,
+      },
     },
   };
 

test/unit/app/controllers/incoming-transactions-test.js

@@ -272,7 +272,8 @@ describe('IncomingTransactionsController', function () {
             '0xfake': {
               blockNumber: '10',
               hash: '0xfake',
-              metamaskNetworkId: '3',
+              metamaskNetworkId: ROPSTEN_NETWORK_ID,
+              chainId: ROPSTEN_CHAIN_ID,
               status: TRANSACTION_STATUSES.CONFIRMED,
               time: 16000000000000000,
               transactionCategory: TRANSACTION_CATEGORIES.INCOMING,
@@ -615,7 +616,8 @@ describe('IncomingTransactionsController', function () {
             '0xfake': {
               blockNumber: '10',
               hash: '0xfake',
-              metamaskNetworkId: '3',
+              metamaskNetworkId: ROPSTEN_NETWORK_ID,
+              chainId: ROPSTEN_CHAIN_ID,
               status: TRANSACTION_STATUSES.CONFIRMED,
               time: 16000000000000000,
               transactionCategory: TRANSACTION_CATEGORIES.INCOMING,
@@ -769,7 +771,8 @@ describe('IncomingTransactionsController', function () {
             '0xfake': {
               blockNumber: '10',
               hash: '0xfake',
-              metamaskNetworkId: '3',
+              metamaskNetworkId: ROPSTEN_NETWORK_ID,
+              chainId: ROPSTEN_CHAIN_ID,
               status: TRANSACTION_STATUSES.CONFIRMED,
               time: 16000000000000000,
               transactionCategory: TRANSACTION_CATEGORIES.INCOMING,
@@ -1347,6 +1350,7 @@ describe('IncomingTransactionsController', function () {
         blockNumber: 333,
         id: 54321,
         metamaskNetworkId: ROPSTEN_NETWORK_ID,
+        chainId: ROPSTEN_CHAIN_ID,
         status: TRANSACTION_STATUSES.FAILED,
         time: 4444000,
         txParams: {
@@ -1392,6 +1396,7 @@ describe('IncomingTransactionsController', function () {
         blockNumber: 333,
         id: 54321,
         metamaskNetworkId: ROPSTEN_NETWORK_ID,
+        chainId: ROPSTEN_CHAIN_ID,
         status: TRANSACTION_STATUSES.CONFIRMED,
         time: 4444000,
         txParams: {

test/unit/app/controllers/transactions/tx-controller-test.js

@@ -864,6 +864,7 @@ describe('Transaction Controller', function () {
           return '0xee6b2800';
         },
         networkStore: new ObservableStore(currentNetworkId),
+        getCurrentChainId: () => currentChainId,
         txHistoryLimit: 10,
         blockTracker: _blockTrackerStub,
         signTransaction: (ethTx) =>
@@ -903,6 +904,7 @@ describe('Transaction Controller', function () {
           return '0xee6b2800';
         },
         networkStore: new ObservableStore(currentNetworkId),
+        getCurrentChainId: () => currentChainId,
         txHistoryLimit: 10,
         blockTracker: _blockTrackerStub,
         signTransaction: (ethTx) =>

test/unit/app/controllers/transactions/tx-helper-test.js

@@ -1,16 +1,21 @@
 import { strict as assert } from 'assert';
+import {
+  MAINNET_CHAIN_ID,
+  MAINNET_NETWORK_ID,
+} from '../../../../../shared/constants/network';
 import txHelper from '../../../../../ui/lib/tx-helper';
 
 describe('txHelper', function () {
   it('always shows the oldest tx first', function () {
-    const metamaskNetworkId = '1';
+    const metamaskNetworkId = MAINNET_NETWORK_ID;
+    const chainId = MAINNET_CHAIN_ID;
     const txs = {
       a: { metamaskNetworkId, time: 3 },
       b: { metamaskNetworkId, time: 1 },
       c: { metamaskNetworkId, time: 2 },
     };
 
-    const sorted = txHelper(txs, null, null, metamaskNetworkId);
+    const sorted = txHelper(txs, null, null, metamaskNetworkId, chainId);
     assert.equal(sorted[0].time, 1, 'oldest tx first');
     assert.equal(sorted[2].time, 3, 'newest tx last');
   });

test/unit/app/controllers/transactions/tx-state-manager-test.js

@@ -3,12 +3,17 @@ import sinon from 'sinon';
 import TxStateManager from '../../../../../app/scripts/controllers/transactions/tx-state-manager';
 import { snapshotFromTxMeta } from '../../../../../app/scripts/controllers/transactions/lib/tx-state-history-helpers';
 import { TRANSACTION_STATUSES } from '../../../../../shared/constants/transaction';
+import {
+  KOVAN_CHAIN_ID,
+  KOVAN_NETWORK_ID,
+} from '../../../../../shared/constants/network';
 
 const noop = () => true;
 
 describe('TransactionStateManager', function () {
   let txStateManager;
-  const currentNetworkId = '42';
+  const currentNetworkId = KOVAN_NETWORK_ID;
+  const currentChainId = KOVAN_CHAIN_ID;
   const otherNetworkId = '2';
 
   beforeEach(function () {
@@ -18,6 +23,7 @@ describe('TransactionStateManager', function () {
       },
       txHistoryLimit: 10,
       getNetwork: () => currentNetworkId,
+      getCurrentChainId: () => currentChainId,
     });
   });
 
@@ -137,6 +143,7 @@ describe('TransactionStateManager', function () {
           transactions: [submittedTx, confirmedTx],
         },
         getNetwork: () => currentNetworkId,
+        getCurrentChainId: () => currentChainId,
       });
 
       assert.deepEqual(txm.getTxList(), [submittedTx, confirmedTx]);
@@ -201,6 +208,7 @@ describe('TransactionStateManager', function () {
           ],
         },
         getNetwork: () => currentNetworkId,
+        getCurrentChainId: () => currentChainId,
       });
 
       assert.deepEqual(txm.getTxList(2), [approvedTx2, confirmedTx3]);
@@ -235,6 +243,7 @@ describe('TransactionStateManager', function () {
       const unapprovedTx1 = {
         id: 1,
         metamaskNetworkId: currentNetworkId,
+        chainId: currentChainId,
         time: 1,
         txParams: {
           from: '0xAddress',
@@ -259,6 +268,7 @@ describe('TransactionStateManager', function () {
         {
           id: 2,
           metamaskNetworkId: currentNetworkId,
+          chainId: currentChainId,
           time: 2,
           txParams: {
             from: '0xAddress',
@@ -284,6 +294,7 @@ describe('TransactionStateManager', function () {
         {
           id: 3,
           metamaskNetworkId: currentNetworkId,
+          chainId: currentChainId,
           time: 3,
           txParams: {
             from: '0xAddress',
@@ -304,6 +315,7 @@ describe('TransactionStateManager', function () {
           ],
         },
         getNetwork: () => currentNetworkId,
+        getCurrentChainId: () => currentChainId,
       });
 
       assert.deepEqual(txm.getTxList(2), [...approvedTx2s, ...failedTx3s]);

ui/app/ducks/confirm-transaction/confirm-transaction.duck.test.js

@@ -2,6 +2,10 @@ import assert from 'assert';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import sinon from 'sinon';
+import {
+  ROPSTEN_CHAIN_ID,
+  ROPSTEN_NETWORK_ID,
+} from '../../../../shared/constants/network';
 import { TRANSACTION_STATUSES } from '../../../../shared/constants/transaction';
 
 import ConfirmTransactionReducer, * as actions from './confirm-transaction.duck';
@@ -289,7 +293,7 @@ describe('Confirm Transaction Duck', function () {
         history: [],
         id: 2603411941761054,
         loadingDefaults: false,
-        metamaskNetworkId: '3',
+        metamaskNetworkId: ROPSTEN_NETWORK_ID,
         origin: 'faucet.metamask.io',
         status: TRANSACTION_STATUSES.UNAPPROVED,
         time: 1530838113716,
@@ -355,13 +359,16 @@ describe('Confirm Transaction Duck', function () {
         metamask: {
           conversionRate: 468.58,
           currentCurrency: 'usd',
-          network: '3',
+          network: ROPSTEN_NETWORK_ID,
+          provider: {
+            chainId: ROPSTEN_CHAIN_ID,
+          },
           unapprovedTxs: {
             2603411941761054: {
               history: [],
               id: 2603411941761054,
               loadingDefaults: false,
-              metamaskNetworkId: '3',
+              metamaskNetworkId: ROPSTEN_NETWORK_ID,
               origin: 'faucet.metamask.io',
               status: TRANSACTION_STATUSES.UNAPPROVED,
               time: 1530838113716,

ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js

@@ -39,6 +39,7 @@ import {
   transactionFeeSelector,
 } from '../../selectors';
 import { getMostRecentOverviewPage } from '../../ducks/history/history';
+import { transactionMatchesNetwork } from '../../../../shared/modules/transaction.utils';
 import ConfirmTransactionBase from './confirm-transaction-base.component';
 
 const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
@@ -77,6 +78,7 @@ const mapStateToProps = (state, ownProps) => {
     unapprovedTxs,
     metaMetricsSendCount,
     nextNonce,
+    provider: { chainId },
   } = metamask;
   const { tokenData, txData, tokenProps, nonce } = confirmTransaction;
   const {
@@ -127,7 +129,9 @@ const mapStateToProps = (state, ownProps) => {
   }
 
   const currentNetworkUnapprovedTxs = Object.keys(unapprovedTxs)
-    .filter((key) => unapprovedTxs[key].metamaskNetworkId === network)
+    .filter((key) =>
+      transactionMatchesNetwork(unapprovedTxs[key], chainId, network),
+    )
     .reduce((acc, key) => ({ ...acc, [key]: unapprovedTxs[key] }), {});
   const unapprovedTxCount = valuesFor(currentNetworkUnapprovedTxs).length;
 

ui/app/pages/confirm-transaction/conf-tx.js

@@ -32,6 +32,7 @@ function mapStateToProps(state) {
     index: txId,
     warning: state.appState.warning,
     network: state.metamask.network,
+    chainId: state.metamask.provider.chainId,
     currentCurrency: state.metamask.currentCurrency,
     blockGasLimit: state.metamask.currentBlockGasLimit,
     unapprovedMsgCount,
@@ -49,6 +50,7 @@ class ConfirmTxScreen extends Component {
     unapprovedPersonalMsgCount: PropTypes.number,
     unapprovedTypedMessagesCount: PropTypes.number,
     network: PropTypes.string,
+    chainId: PropTypes.string,
     index: PropTypes.number,
     unapprovedTxs: PropTypes.object,
     unapprovedMsgs: PropTypes.object,
@@ -94,6 +96,7 @@ class ConfirmTxScreen extends Component {
       unapprovedPersonalMsgs,
       unapprovedTypedMessages,
       match: { params: { id: transactionId } = {} },
+      chainId,
     } = this.props;
 
     const unconfTxList = txHelper(
@@ -102,6 +105,7 @@ class ConfirmTxScreen extends Component {
       unapprovedPersonalMsgs,
       unapprovedTypedMessages,
       network,
+      chainId,
     );
 
     log.info(`rendering a combined ${unconfTxList.length} unconf msgs & txs`);
@@ -177,9 +181,10 @@ class ConfirmTxScreen extends Component {
       history,
       mostRecentOverviewPage,
       network,
+      chainId,
       send,
     } = this.props;
-    const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network);
+    const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network, chainId);
 
     if (
       unconfTxList.length === 0 &&
@@ -194,6 +199,7 @@ class ConfirmTxScreen extends Component {
     const {
       unapprovedTxs = {},
       network,
+      chainId,
       currentNetworkTxList,
       send,
       history,
@@ -207,13 +213,20 @@ class ConfirmTxScreen extends Component {
       prevTx = currentNetworkTxList.find(({ id }) => `${id}` === transactionId);
     } else {
       const { index: prevIndex, unapprovedTxs: prevUnapprovedTxs } = prevProps;
-      const prevUnconfTxList = txHelper(prevUnapprovedTxs, {}, {}, {}, network);
+      const prevUnconfTxList = txHelper(
+        prevUnapprovedTxs,
+        {},
+        {},
+        {},
+        network,
+        chainId,
+      );
       const prevTxData = prevUnconfTxList[prevIndex] || {};
       prevTx =
         currentNetworkTxList.find(({ id }) => id === prevTxData.id) || {};
     }
 
-    const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network);
+    const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network, chainId);
 
     if (prevTx && prevTx.status === TRANSACTION_STATUSES.DROPPED) {
       this.props.dispatch(

ui/app/selectors/confirm-transaction.js

@@ -10,6 +10,8 @@ import {
   addEth,
 } from '../helpers/utils/confirm-tx.util';
 import { sumHexes } from '../helpers/utils/transactions.util';
+import { transactionMatchesNetwork } from '../../../shared/modules/transaction.utils';
+import { getCurrentChainId, getCurrentNetworkId } from './selectors';
 import { getNativeCurrency } from '.';
 
 const unapprovedTxsSelector = (state) => state.metamask.unapprovedTxs;
@@ -22,7 +24,6 @@ const unapprovedEncryptionPublicKeyMsgsSelector = (state) =>
   state.metamask.unapprovedEncryptionPublicKeyMsgs;
 const unapprovedTypedMessagesSelector = (state) =>
   state.metamask.unapprovedTypedMessages;
-const networkSelector = (state) => state.metamask.network;
 
 export const unconfirmedTransactionsListSelector = createSelector(
   unapprovedTxsSelector,
@@ -31,7 +32,8 @@ export const unconfirmedTransactionsListSelector = createSelector(
   unapprovedDecryptMsgsSelector,
   unapprovedEncryptionPublicKeyMsgsSelector,
   unapprovedTypedMessagesSelector,
-  networkSelector,
+  getCurrentNetworkId,
+  getCurrentChainId,
   (
     unapprovedTxs = {},
     unapprovedMsgs = {},
@@ -40,6 +42,7 @@ export const unconfirmedTransactionsListSelector = createSelector(
     unapprovedEncryptionPublicKeyMsgs = {},
     unapprovedTypedMessages = {},
     network,
+    chainId,
   ) =>
     txHelper(
       unapprovedTxs,
@@ -49,6 +52,7 @@ export const unconfirmedTransactionsListSelector = createSelector(
       unapprovedEncryptionPublicKeyMsgs,
       unapprovedTypedMessages,
       network,
+      chainId,
     ) || [],
 );
 
@@ -59,7 +63,8 @@ export const unconfirmedTransactionsHashSelector = createSelector(
   unapprovedDecryptMsgsSelector,
   unapprovedEncryptionPublicKeyMsgsSelector,
   unapprovedTypedMessagesSelector,
-  networkSelector,
+  getCurrentNetworkId,
+  getCurrentChainId,
   (
     unapprovedTxs = {},
     unapprovedMsgs = {},
@@ -68,13 +73,15 @@ export const unconfirmedTransactionsHashSelector = createSelector(
     unapprovedEncryptionPublicKeyMsgs = {},
     unapprovedTypedMessages = {},
     network,
+    chainId,
   ) => {
     const filteredUnapprovedTxs = Object.keys(unapprovedTxs).reduce(
       (acc, address) => {
-        const { metamaskNetworkId } = unapprovedTxs[address];
         const transactions = { ...acc };
 
-        if (metamaskNetworkId === network) {
+        if (
+          transactionMatchesNetwork(unapprovedTxs[address], chainId, network)
+        ) {
           transactions[address] = unapprovedTxs[address];
         }
 
@@ -111,7 +118,8 @@ export const unconfirmedTransactionsCountSelector = createSelector(
   unapprovedDecryptMsgCountSelector,
   unapprovedEncryptionPublicKeyMsgCountSelector,
   unapprovedTypedMessagesCountSelector,
-  networkSelector,
+  getCurrentNetworkId,
+  getCurrentChainId,
   (
     unapprovedTxs = {},
     unapprovedMsgCount = 0,
@@ -120,12 +128,10 @@ export const unconfirmedTransactionsCountSelector = createSelector(
     unapprovedEncryptionPublicKeyMsgCount = 0,
     unapprovedTypedMessagesCount = 0,
     network,
+    chainId,
   ) => {
-    const filteredUnapprovedTxIds = Object.keys(unapprovedTxs).filter(
+    const filteredUnapprovedTxIds = Object.keys(unapprovedTxs).filter((txId) =>
-      (txId) => {
+      transactionMatchesNetwork(unapprovedTxs[txId], chainId, network),
-        const { metamaskNetworkId } = unapprovedTxs[txId];
-        return metamaskNetworkId === network;
-      },
     );
 
     return (

ui/app/selectors/tests/confirm-transaction.test.js

@@ -1,4 +1,9 @@
 import assert from 'assert';
+import {
+  KOVAN_CHAIN_ID,
+  KOVAN_NETWORK_ID,
+  MAINNET_CHAIN_ID,
+} from '../../../../shared/constants/network';
 import { TRANSACTION_CATEGORIES } from '../../../../shared/constants/transaction';
 import {
   unconfirmedTransactionsCountSelector,
@@ -22,16 +27,19 @@ describe('Confirm Transaction Selector', function () {
       metamask: {
         unapprovedTxs: {
           1: {
-            metamaskNetworkId: 'test',
+            metamaskNetworkId: KOVAN_NETWORK_ID,
           },
           2: {
-            metmaskNetworkId: 'other network',
+            chainId: MAINNET_CHAIN_ID,
           },
         },
         unapprovedMsgCount: 1,
         unapprovedPersonalMsgCount: 1,
         unapprovedTypedMessagesCount: 1,
-        network: 'test',
+        network: KOVAN_NETWORK_ID,
+        provider: {
+          chainId: KOVAN_CHAIN_ID,
+        },
       },
     };
 

ui/app/selectors/tests/transactions.test.js

@@ -1,4 +1,8 @@
 import { strict as assert } from 'assert';
+import {
+  KOVAN_CHAIN_ID,
+  MAINNET_CHAIN_ID,
+} from '../../../../shared/constants/network';
 import { TRANSACTION_STATUSES } from '../../../../shared/constants/transaction';
 import {
   unapprovedMessagesSelector,
@@ -29,6 +33,9 @@ describe('Transaction Selectors', function () {
           unapprovedMsgs: {
             1: msg,
           },
+          provider: {
+            chainId: KOVAN_CHAIN_ID,
+          },
         },
       };
 
@@ -56,6 +63,9 @@ describe('Transaction Selectors', function () {
           unapprovedPersonalMsgs: {
             1: msg,
           },
+          provider: {
+            chainId: KOVAN_CHAIN_ID,
+          },
         },
       };
 
@@ -84,6 +94,9 @@ describe('Transaction Selectors', function () {
           unapprovedTypedMessages: {
             1: msg,
           },
+          provider: {
+            chainId: KOVAN_CHAIN_ID,
+          },
         },
       };
 
@@ -100,6 +113,7 @@ describe('Transaction Selectors', function () {
         metamask: {
           provider: {
             nickname: 'mainnet',
+            chainId: MAINNET_CHAIN_ID,
           },
           featureFlags: {
             showIncomingTransactions: false,
@@ -163,6 +177,7 @@ describe('Transaction Selectors', function () {
         metamask: {
           provider: {
             nickname: 'mainnet',
+            chainId: MAINNET_CHAIN_ID,
           },
           selectedAddress: '0xAddress',
           featureFlags: {
@@ -247,6 +262,7 @@ describe('Transaction Selectors', function () {
       metamask: {
         provider: {
           nickname: 'mainnet',
+          chainId: MAINNET_CHAIN_ID,
         },
         selectedAddress: '0xAddress',
         featureFlags: {

ui/app/selectors/transactions.js

@@ -10,6 +10,8 @@ import {
   TRANSACTION_STATUSES,
   TRANSACTION_TYPES,
 } from '../../../shared/constants/transaction';
+import { transactionMatchesNetwork } from '../../../shared/modules/transaction.utils';
+import { getCurrentChainId, getCurrentNetworkId } from './selectors';
 import { getSelectedAddress } from '.';
 
 export const incomingTxListSelector = (state) => {
@@ -18,11 +20,15 @@ export const incomingTxListSelector = (state) => {
     return [];
   }
 
-  const { network } = state.metamask;
+  const {
+    network,
+    provider: { chainId },
+  } = state.metamask;
   const selectedAddress = getSelectedAddress(state);
   return Object.values(state.metamask.incomingTransactions).filter(
-    ({ metamaskNetworkId, txParams }) =>
+    (tx) =>
-      txParams.to === selectedAddress && metamaskNetworkId === network,
+      tx.txParams.to === selectedAddress &&
+      transactionMatchesNetwork(tx, chainId, network),
   );
 };
 export const unapprovedMsgsSelector = (state) => state.metamask.unapprovedMsgs;
@@ -36,7 +42,6 @@ export const unapprovedEncryptionPublicKeyMsgsSelector = (state) =>
   state.metamask.unapprovedEncryptionPublicKeyMsgs;
 export const unapprovedTypedMessagesSelector = (state) =>
   state.metamask.unapprovedTypedMessages;
-export const networkSelector = (state) => state.metamask.network;
 
 export const selectedAddressTxListSelector = createSelector(
   getSelectedAddress,
@@ -54,7 +59,8 @@ export const unapprovedMessagesSelector = createSelector(
   unapprovedDecryptMsgsSelector,
   unapprovedEncryptionPublicKeyMsgsSelector,
   unapprovedTypedMessagesSelector,
-  networkSelector,
+  getCurrentNetworkId,
+  getCurrentChainId,
   (
     unapprovedMsgs = {},
     unapprovedPersonalMsgs = {},
@@ -62,6 +68,7 @@ export const unapprovedMessagesSelector = createSelector(
     unapprovedEncryptionPublicKeyMsgs = {},
     unapprovedTypedMessages = {},
     network,
+    chainId,
   ) =>
     txHelper(
       {},
@@ -71,6 +78,7 @@ export const unapprovedMessagesSelector = createSelector(
       unapprovedEncryptionPublicKeyMsgs,
       unapprovedTypedMessages,
       network,
+      chainId,
     ) || [],
 );
 

ui/app/store/actions.js

@@ -930,6 +930,7 @@ export function completedTx(id) {
       unapprovedPersonalMsgs,
       unapprovedTypedMessages,
       network,
+      provider: { chainId },
     } = state.metamask;
     const unconfirmedActions = txHelper(
       unapprovedTxs,
@@ -937,6 +938,7 @@ export function completedTx(id) {
       unapprovedPersonalMsgs,
       unapprovedTypedMessages,
       network,
+      chainId,
     );
     const otherUnconfirmedActions = unconfirmedActions.filter(
       (tx) => tx.id !== id,

ui/index.js

@@ -117,6 +117,7 @@ async function startApp(metamaskState, backgroundConnection, opts) {
     metamaskState.unapprovedEncryptionPublicKeyMsgs,
     metamaskState.unapprovedTypedMessages,
     metamaskState.network,
+    metamaskState.provider.chainId,
   );
   const numberOfUnapprovedTx = unapprovedTxsAll.length;
   if (numberOfUnapprovedTx > 0) {

ui/lib/tx-helper.js

@@ -1,4 +1,5 @@
 import log from 'loglevel';
+import { transactionMatchesNetwork } from '../../shared/modules/transaction.utils';
 import { valuesFor } from '../app/helpers/utils/util';
 
 export default function txHelper(
@@ -9,6 +10,7 @@ export default function txHelper(
   encryptionPublicKeyMsgs,
   typedMessages,
   network,
+  chainId,
 ) {
   log.debug('tx-helper called with params:');
   log.debug({
@@ -19,11 +21,12 @@ export default function txHelper(
     encryptionPublicKeyMsgs,
     typedMessages,
     network,
+    chainId,
   });
 
   const txValues = network
-    ? valuesFor(unapprovedTxs).filter(
+    ? valuesFor(unapprovedTxs).filter((txMeta) =>
-        (txMeta) => txMeta.metamaskNetworkId === network,
+        transactionMatchesNetwork(txMeta, chainId, network),
       )
     : valuesFor(unapprovedTxs);
   log.debug(`tx helper found ${txValues.length} unapproved txs`);