add chainId to all new transaction metadata (#10528)

4 years ago · 616b71271a
parent 0f7e2dbf20
commit 616b71271a
19 changed files with 147 additions and 37 deletions
--- a/app/scripts/controllers/incoming-transactions.js
+++ b/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,
--- a/app/scripts/controllers/transactions/index.js
+++ b/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();

--- a/app/scripts/controllers/transactions/tx-state-manager.js
+++ b/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)
        ),
    );

--- a/shared/modules/transaction.utils.js
+++ b/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;
+}
--- a/test/unit/actions/tx_test.js
+++ b/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,
+      },
    },
  };

--- a/test/unit/app/controllers/incoming-transactions-test.js
+++ b/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: {
--- a/test/unit/app/controllers/transactions/tx-controller-test.js
+++ b/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) =>
--- a/test/unit/app/controllers/transactions/tx-helper-test.js
+++ b/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');
  });
--- a/test/unit/app/controllers/transactions/tx-state-manager-test.js
+++ b/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]);
--- a/ui/app/ducks/confirm-transaction/confirm-transaction.duck.test.js
+++ b/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,
--- a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/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;

--- a/ui/app/pages/confirm-transaction/conf-tx.js
+++ b/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(
--- a/ui/app/selectors/confirm-transaction.js
+++ b/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(
-      (txId) => {
-        const { metamaskNetworkId } = unapprovedTxs[txId];
-        return metamaskNetworkId === network;
-      },
+    const filteredUnapprovedTxIds = Object.keys(unapprovedTxs).filter((txId) =>
+      transactionMatchesNetwork(unapprovedTxs[txId], chainId, network),
    );

    return (
--- a/ui/app/selectors/tests/confirm-transaction.test.js
+++ b/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,
+        },
      },
    };

--- a/ui/app/selectors/tests/transactions.test.js
+++ b/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: {
--- a/ui/app/selectors/transactions.js
+++ b/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 }) =>
-      txParams.to === selectedAddress && metamaskNetworkId === network,
+    (tx) =>
+      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,
    ) || [],
 );

--- a/ui/app/store/actions.js
+++ b/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,
--- a/ui/index.js
+++ b/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) {
--- a/ui/lib/tx-helper.js
+++ b/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(
-        (txMeta) => txMeta.metamaskNetworkId === network,
+    ? valuesFor(unapprovedTxs).filter((txMeta) =>
+        transactionMatchesNetwork(txMeta, chainId, network),
      )
    : valuesFor(unapprovedTxs);
  log.debug(`tx helper found ${txValues.length} unapproved txs`);