feat: new tx list filter

app/scripts/metamask-controller.js

@@ -2414,12 +2414,7 @@ export default class MetamaskController extends EventEmitter {
   }
 
   triggerNetworkrequests() {
-    this.txController.stopIncomingTransactionPolling();
-
-    this.txController.startIncomingTransactionPolling([
-      this.#getGlobalChainId(),
-    ]);
-
+    this.#restartSmartTransactionPoller();
     this.tokenDetectionController.enable();
     this.getInfuraFeatureFlags();
   }
@@ -2781,20 +2776,9 @@ export default class MetamaskController extends EventEmitter {
       'PreferencesController:stateChange',
       previousValueComparator(async (prevState, currState) => {
         const { currentLocale } = currState;
-        const chainId = this.#getGlobalChainId();
+        this.#restartSmartTransactionPoller();
 
         await updateCurrentLocale(currentLocale);
-
-        if (currState.incomingTransactionsPreferences?.[chainId]) {
-          this.txController.stopIncomingTransactionPolling();
-
-          this.txController.startIncomingTransactionPolling([
-            this.#getGlobalChainId(),
-          ]);
-        } else {
-          this.txController.stopIncomingTransactionPolling();
-        }
-
         this.#checkTokenListPolling(currState, prevState);
       }, this.preferencesController.state),
     );
@@ -2949,15 +2933,22 @@ export default class MetamaskController extends EventEmitter {
     this.controllerMessenger.subscribe(
       'NetworkController:networkDidChange',
       async () => {
-        await this.txController.stopIncomingTransactionPolling();
+        const filteredChainIds = this.#getAllAddedNetworks().filter(
+          (networkId) =>
+            this.preferencesController.state.incomingTransactionsPreferences[
+              networkId
+            ],
+        );
 
-        await this.txController.updateIncomingTransactions([
-          this.#getGlobalChainId(),
-        ]);
+        if (filteredChainIds.length > 0) {
+          await this.txController.stopIncomingTransactionPolling();
 
-        await this.txController.startIncomingTransactionPolling([
-          this.#getGlobalChainId(),
-        ]);
+          await this.txController.updateIncomingTransactions(filteredChainIds);
+
+          await this.txController.startIncomingTransactionPolling(
+            filteredChainIds,
+          );
+        }
       },
     );
 
@@ -8156,6 +8147,28 @@ export default class MetamaskController extends EventEmitter {
     return globalNetworkClient.configuration.chainId;
   }
 
+  #getAllAddedNetworks() {
+    const networksConfig =
+      this.networkController.state.networkConfigurationsByChainId;
+    const chainIds = Object.keys(networksConfig);
+
+    return chainIds;
+  }
+
+  #restartSmartTransactionPoller() {
+    const filteredChainIds = this.#getAllAddedNetworks().filter(
+      (networkId) =>
+        this.preferencesController.state.incomingTransactionsPreferences[
+          networkId
+        ],
+    );
+
+    if (filteredChainIds.length > 0) {
+      this.txController.stopIncomingTransactionPolling();
+      this.txController.startIncomingTransactionPolling(filteredChainIds);
+    }
+  }
+
   /**
    * @deprecated Avoid new references to the global network.
    * Will be removed once multi-chain support is fully implemented.

package.json

@@ -318,7 +318,7 @@
     "@metamask/scure-bip39": "^2.0.3",
     "@metamask/selected-network-controller": "^19.0.0",
     "@metamask/signature-controller": "^26.0.0",
-    "@metamask/smart-transactions-controller": "^16.1.0",
+    "@metamask/smart-transactions-controller": "^16.2.0",
     "@metamask/snaps-controllers": "^11.0.0",
     "@metamask/snaps-execution-environments": "^7.0.0",
     "@metamask/snaps-rpc-methods": "^12.0.0",

test/data/transaction-data.json

@@ -751,7 +751,7 @@
       "status": "confirmed",
       "originalGasEstimate": "0x118e0",
       "userEditedGasLimit": false,
-      "chainId": "0x5",
+      "chainId": "0x1",
       "loadingDefaults": false,
       "dappSuggestedGasFees": {
         "maxPriorityFeePerGas": "0x3B9ACA00",

ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js

@@ -24,6 +24,7 @@ import { MetaMetricsEventCategory } from '../../../../shared/constants/metametri
 import { getURLHostName } from '../../../helpers/utils/util';
 import { NETWORKS_ROUTE } from '../../../helpers/constants/routes';
 import { COPY_OPTIONS } from '../../../../shared/constants/copy';
+import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../shared/constants/network';
 
 export default class TransactionListItemDetails extends PureComponent {
   static contextTypes = {
@@ -50,7 +51,6 @@ export default class TransactionListItemDetails extends PureComponent {
     recipientAddress: PropTypes.string,
     recipientName: PropTypes.string,
     recipientMetadataName: PropTypes.string,
-    rpcPrefs: PropTypes.object,
     senderAddress: PropTypes.string.isRequired,
     tryReverseResolveAddress: PropTypes.func.isRequired,
     senderNickname: PropTypes.string.isRequired,
@@ -60,6 +60,8 @@ export default class TransactionListItemDetails extends PureComponent {
     showErrorBanner: PropTypes.bool,
     history: PropTypes.object,
     blockExplorerLinkText: PropTypes.object,
+    chainId: PropTypes.string,
+    networkConfiguration: PropTypes.object,
   };
 
   state = {
@@ -69,11 +71,22 @@ export default class TransactionListItemDetails extends PureComponent {
   handleBlockExplorerClick = () => {
     const {
       transactionGroup: { primaryTransaction },
-      rpcPrefs,
+      networkConfiguration,
       isCustomNetwork,
       history,
       onClose,
+      chainId,
     } = this.props;
+    const blockExplorerUrl =
+      networkConfiguration?.[chainId]?.blockExplorerUrls[
+        networkConfiguration?.[chainId]?.defaultBlockExplorerUrlIndex
+      ];
+
+    const rpcPrefs = {
+      blockExplorerUrl,
+      imageUrl: CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[chainId],
+    };
+
     const blockExplorerLink = getBlockExplorerLink(
       primaryTransaction,
       rpcPrefs,
@@ -300,6 +313,7 @@ export default class TransactionListItemDetails extends PureComponent {
                 transaction={transaction}
                 primaryCurrency={primaryCurrency}
                 className="transaction-list-item-details__transaction-breakdown"
+                chainId={chainId}
               />
               {transactionGroup.initialTransaction.type !==
                 TransactionType.incoming && (

ui/components/app/transaction-list-item-details/transaction-list-item-details.container.js

@@ -13,6 +13,7 @@ import {
   getMetadataContractName,
   getInternalAccounts,
 } from '../../../selectors';
+import { getNetworkConfigurationsByChainId } from '../../../../shared/modules/selectors/networks';
 import { toChecksumHexAddress } from '../../../../shared/modules/hexstring-utils';
 import TransactionListItemDetails from './transaction-list-item-details.component';
 
@@ -39,10 +40,12 @@ const mapStateToProps = (state, ownProps) => {
   };
   const rpcPrefs = getRpcPrefsForCurrentProvider(state);
 
+  const networkConfiguration = getNetworkConfigurationsByChainId(state);
   const isCustomNetwork = getIsCustomNetwork(state);
 
   return {
     rpcPrefs,
+    networkConfiguration,
     recipientEns,
     senderNickname: getNickName(senderAddress),
     recipientNickname: recipientAddress ? getNickName(recipientAddress) : null,

ui/components/app/transaction-list-item/smart-transaction-list-item.component.js

@@ -31,6 +31,7 @@ export default function SmartTransactionListItem({
   smartTransaction,
   transactionGroup,
   isEarliestNonce = false,
+  chainId,
 }) {
   const dispatch = useDispatch();
   const [cancelSwapLinkClicked, setCancelSwapLinkClicked] = useState(false);
@@ -128,6 +129,7 @@ export default function SmartTransactionListItem({
               shouldShowTooltip={false}
             />
           )}
+          chainId={chainId}
         />
       )}
     </>
@@ -138,4 +140,5 @@ SmartTransactionListItem.propTypes = {
   smartTransaction: PropTypes.object.isRequired,
   isEarliestNonce: PropTypes.bool,
   transactionGroup: PropTypes.object,
+  chainId: PropTypes.string,
 };

ui/components/app/transaction-list-item/transaction-list-item.component.js

@@ -6,6 +6,7 @@ import { useHistory } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 
 import {
+  CHAIN_IDS,
   TransactionStatus,
   TransactionType,
 } from '@metamask/transaction-controller';
@@ -48,11 +49,7 @@ import {
   TransactionModalContextProvider,
   useTransactionModalContext,
 } from '../../../contexts/transaction-modal';
-import {
-  checkNetworkAndAccountSupports1559,
-  getCurrentNetwork,
-  getTestNetworkBackgroundColor,
-} from '../../../selectors';
+import { checkNetworkAndAccountSupports1559 } from '../../../selectors';
 import { isLegacyTransaction } from '../../../helpers/utils/transactions.util';
 import { formatDateWithYearContext } from '../../../helpers/utils/util';
 import Button from '../../ui/button';
@@ -69,11 +66,16 @@ import {
   FINAL_NON_CONFIRMED_STATUSES,
 } from '../../../hooks/bridge/useBridgeTxHistoryData';
 import BridgeActivityItemTxSegments from '../../../pages/bridge/transaction-details/bridge-activity-item-tx-segments';
+import {
+  CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
+  NETWORK_TO_NAME_MAP,
+} from '../../../../shared/constants/network';
 
 function TransactionListItemInner({
   transactionGroup,
   setEditGasMode,
   isEarliestNonce = false,
+  chainId,
 }) {
   const t = useI18nContext();
   const history = useHistory();
@@ -84,7 +86,6 @@ function TransactionListItemInner({
   const [showRetryEditGasPopover, setShowRetryEditGasPopover] = useState(false);
   const { supportsEIP1559 } = useGasFeeContext();
   const { openModal } = useTransactionModalContext();
-  const testNetworkBackgroundColor = useSelector(getTestNetworkBackgroundColor);
   const isSmartTransaction = useSelector(getIsSmartTransaction);
   const dispatch = useDispatch();
 
@@ -97,6 +98,17 @@ function TransactionListItemInner({
       isEarliestNonce,
     });
 
+  const getTestNetworkBackgroundColor = (networkId) => {
+    switch (true) {
+      case networkId === CHAIN_IDS.GOERLI:
+        return BackgroundColor.goerli;
+      case networkId === CHAIN_IDS.SEPOLIA:
+        return BackgroundColor.sepolia;
+      default:
+        return undefined;
+    }
+  };
+
   const {
     initialTransaction: { id },
     primaryTransaction: { error, status },
@@ -247,7 +259,6 @@ function TransactionListItemInner({
     retryTransaction,
     cancelTransaction,
   ]);
-  const currentChain = useSelector(getCurrentNetwork);
   const showCancelButton =
     !hasCancelled && isPending && !isUnapproved && !isSubmitting && !isBridgeTx;
 
@@ -271,10 +282,10 @@ function TransactionListItemInner({
                 className="activity-tx__network-badge"
                 data-testid="activity-tx-network-badge"
                 size={AvatarNetworkSize.Xs}
-                name={currentChain?.nickname}
-                src={currentChain?.rpcPrefs?.imageUrl}
+                name={NETWORK_TO_NAME_MAP[chainId]}
+                src={CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[chainId]}
                 borderColor={BackgroundColor.backgroundDefault}
-                backgroundColor={testNetworkBackgroundColor}
+                backgroundColor={getTestNetworkBackgroundColor(chainId)}
               />
             }
           >
@@ -374,6 +385,7 @@ function TransactionListItemInner({
               shouldShowTooltip={false}
             />
           )}
+          chainId={chainId}
         />
       )}
       {!supportsEIP1559 && showRetryEditGasPopover && (
@@ -398,6 +410,7 @@ TransactionListItemInner.propTypes = {
   transactionGroup: PropTypes.object.isRequired,
   isEarliestNonce: PropTypes.bool,
   setEditGasMode: PropTypes.func,
+  chainId: PropTypes.string,
 };
 
 const TransactionListItem = (props) => {

ui/components/app/transaction-list/__snapshots__/transaction-list.test.js.snap

@@ -0,0 +1,52 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TransactionList renders TransactionList component correctly 1`] = `
+<div>
+  <div
+    class="mm-box transaction-list"
+  >
+    <div
+      class="mm-box mm-box--margin-right-2 mm-box--margin-left-2 mm-box--justify-content-flex-start"
+    >
+      <button
+        class="mm-box mm-text mm-button-base mm-button-base--size-sm mm-button-base--disabled mm-button-base--ellipsis asset-list-control-bar__button asset-list-control-bar__network_control mm-text--body-md-medium mm-text--ellipsis mm-box--margin-right-2 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-default mm-box--rounded-pill"
+        data-testid="sort-by-popover-toggle"
+        disabled=""
+      >
+        <span
+          class="mm-box mm-text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
+        >
+          Goerli
+        </span>
+        <span
+          class="mm-box mm-icon mm-icon--size-sm mm-box--margin-inline-start-1 mm-box--display-inline-block mm-box--color-inherit"
+          style="mask-image: url('./images/icons/arrow-down.svg');"
+        />
+      </button>
+    </div>
+    <div
+      class="mm-box transaction-list__transactions"
+    >
+      <div
+        class="mm-box transaction-list__completed-transactions"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`TransactionList renders TransactionList component with props hideNetworkFilter correctly 1`] = `
+<div>
+  <div
+    class="mm-box transaction-list"
+  >
+    <div
+      class="mm-box transaction-list__transactions"
+    >
+      <div
+        class="mm-box transaction-list__completed-transactions"
+      />
+    </div>
+  </div>
+</div>
+`;