feat: upgrade transaction controller to get incoming transactions usi…

…ng accounts API (#12419)

## **Description**

Update `@metamask/transaction-controller` to retrieve incoming
transactions using the accounts API rather than Etherscan.

Add incoming transaction E2E tests.

## **Related issues**

## **Manual testing steps**

## **Screenshots/Recordings**

### **Before**

### **After**

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

.js.env.example

@@ -10,7 +10,6 @@
 export MM_PUBNUB_SUB_KEY=""
 export MM_PUBNUB_PUB_KEY=""
 export MM_OPENSEA_KEY=""
-export MM_ETHERSCAN_KEY=""
 export MM_FOX_CODE="EXAMPLE_FOX_CODE"
 
 # NOTE: Non-MetaMask only, will need to create an account and generate

app/components/Nav/Main/index.js

@@ -133,7 +133,7 @@ const Main = (props) => {
     stopIncomingTransactionPolling();
 
     if (showIncomingTransactionsNetworks[chainId]) {
-      startIncomingTransactionPolling([networkClientId]);
+      startIncomingTransactionPolling([chainId]);
     }
   }, [chainId, networkClientId, showIncomingTransactionsNetworks]);
 
@@ -178,11 +178,11 @@ const Main = (props) => {
         removeNotVisibleNotifications();
 
         BackgroundTimer.runBackgroundTimer(async () => {
-          await updateIncomingTransactions([props.networkClientId]);
+          await updateIncomingTransactions([props.chainId]);
         }, AppConstants.TX_CHECK_BACKGROUND_FREQUENCY);
       }
     },
-    [backgroundMode, removeNotVisibleNotifications, props.networkClientId],
+    [backgroundMode, removeNotVisibleNotifications, props.chainId],
   );
 
   const initForceReload = () => {

app/components/UI/NetworkCell/NetworkCell.tsx

@@ -1,23 +1,21 @@
 import React from 'react';
 import { Switch, ImageSourcePropType } from 'react-native';
-import { ETHERSCAN_SUPPORTED_NETWORKS } from '@metamask/transaction-controller';
 import { useStyles } from '../../../component-library/hooks';
 import Cell from '../../../component-library/components/Cells/Cell/Cell';
 import { CellVariant } from '../../../component-library/components/Cells/Cell';
 import { AvatarVariant } from '../../../component-library/components/Avatars/Avatar/Avatar.types';
 import { useTheme } from '../../../util/theme';
-import { EtherscanSupportedHexChainId } from '@metamask/preferences-controller';
 import styleSheet from './NetworkCell.styles';
+import { Hex } from '@metamask/utils';
 
-const supportedNetworks = ETHERSCAN_SUPPORTED_NETWORKS;
 interface NetworkCellProps {
   name: string;
-  chainId: EtherscanSupportedHexChainId | keyof typeof supportedNetworks;
+  chainId: Hex;
   imageSource: ImageSourcePropType;
-  secondaryText: string;
+  secondaryText?: string;
   showIncomingTransactionsNetworks: Record<string, boolean>;
   toggleEnableIncomingTransactions: (
-    chainId: EtherscanSupportedHexChainId,
+    chainId: Hex,
     value: boolean,
   ) => void;
   testID?: string;

app/components/UI/Notification/BaseNotification/index.js

@@ -154,7 +154,7 @@ const getTitle = (status, { nonce, amount, assetType }) => {
 };
 
 export const getDescription = (status, { amount = null, type = null }) => {
-  if (amount && typeof amount !== 'object') {
+  if (amount && typeof amount !== 'object' && type) {
     return strings(`notifications.${type}_${status}_message`, { amount });
   }
   return strings(`notifications.${status}_message`);

app/components/UI/Transactions/index.js

@@ -76,6 +76,7 @@ import {
 } from '../../../util/transaction-controller';
 import { selectGasFeeEstimates } from '../../../selectors/confirmTransaction';
 import { decGWEIToHexWEI } from '../../../util/conversions';
+import { ActivitiesViewSelectorsIDs } from '../../../../e2e/selectors/Transactions/ActivitiesView.selectors';
 
 const createStyles = (colors, typography) =>
   StyleSheet.create({
@@ -213,10 +214,6 @@ class Transactions extends PureComponent {
      */
     onScrollThroughContent: PropTypes.func,
     gasFeeEstimates: PropTypes.object,
-    /**
-     * ID of the global network client
-     */
-    networkClientId: PropTypes.string,
   };
 
   static defaultProps = {
@@ -352,11 +349,11 @@ class Transactions extends PureComponent {
   };
 
   onRefresh = async () => {
-    const { networkClientId } = this.props;
+    const { chainId } = this.props;
 
     this.setState({ refreshing: true });
 
-    await updateIncomingTransactions([networkClientId]);
+    await updateIncomingTransactions([chainId]);
 
     this.setState({ refreshing: false });
   };
@@ -791,6 +788,7 @@ class Transactions extends PureComponent {
         <PriceChartContext.Consumer>
           {({ isChartBeingTouched }) => (
             <FlatList
+              testID={ActivitiesViewSelectorsIDs.CONTAINER}
               ref={this.flatList}
               getItemLayout={this.getItemLayout}
               data={transactions}

app/components/Views/Asset/index.js

@@ -167,10 +167,6 @@ class Asset extends PureComponent {
      * Boolean that indicates if native token is supported to buy
      */
     isNetworkBuyNativeTokenSupported: PropTypes.bool,
-    /**
-     * ID of the global network client
-     */
-    networkClientId: PropTypes.string,
   };
 
   state = {
@@ -452,11 +448,11 @@ class Asset extends PureComponent {
   };
 
   onRefresh = async () => {
-    const { networkClientId } = this.props;
+    const { chainId } = this.props;
 
     this.setState({ refreshing: true });
 
-    await updateIncomingTransactions([networkClientId]);
+    await updateIncomingTransactions([chainId]);
 
     this.setState({ refreshing: false });
   };

app/components/Views/NetworkSelector/NetworkSelector.tsx

@@ -399,7 +399,7 @@ const NetworkSelector = () => {
       AccountTrackerController.refresh();
 
       setTimeout(async () => {
-        await updateIncomingTransactions([clientId]);
+        await updateIncomingTransactions([networkConfiguration.chainId]);
       }, 1000);
     }