feat: Integrate new TokenListController polling pattern [Extension]

app/scripts/metamask-controller.js

@@ -645,9 +645,9 @@ export default class MetamaskController extends EventEmitter {
 
     this.tokenListController = new TokenListController({
       chainId: getCurrentChainId({ metamask: this.networkController.state }),
-      preventPollingOnNetworkRestart: !this.#isTokenListPollingRequired(
-        this.preferencesController.state,
-      ),
+      // preventPollingOnNetworkRestart: !this.#isTokenListPollingRequired(
+      //   this.preferencesController.state,
+      // ),
       messenger: tokenListMessenger,
       state: initState.TokenListController,
     });
@@ -2590,24 +2590,12 @@ export default class MetamaskController extends EventEmitter {
     this.accountTrackerController.start();
     this.txController.startIncomingTransactionPolling();
     this.tokenDetectionController.enable();
-
-    const preferencesControllerState = this.preferencesController.state;
-
-    if (this.#isTokenListPollingRequired(preferencesControllerState)) {
-      this.tokenListController.start();
-    }
   }
 
   stopNetworkRequests() {
     this.accountTrackerController.stop();
     this.txController.stopIncomingTransactionPolling();
     this.tokenDetectionController.disable();
-
-    const preferencesControllerState = this.preferencesController.state;
-
-    if (this.#isTokenListPollingRequired(preferencesControllerState)) {
-      this.tokenListController.stop();
-    }
   }
 
   resetStates(resetMethods) {
@@ -2855,7 +2843,7 @@ export default class MetamaskController extends EventEmitter {
     let lastSelectedAddress;
     this.controllerMessenger.subscribe(
       'PreferencesController:stateChange',
-      previousValueComparator(async (prevState, currState) => {
+      previousValueComparator(async (_, currState) => {
         const { currentLocale } = currState;
         const chainId = getCurrentChainId({
           metamask: this.networkController.state,
@@ -2867,8 +2855,6 @@ export default class MetamaskController extends EventEmitter {
         } else {
           this.txController.stopIncomingTransactionPolling();
         }
-
-        this.#checkTokenListPolling(currState, prevState);
       }, this.preferencesController.state),
     );
 
@@ -3242,6 +3228,7 @@ export default class MetamaskController extends EventEmitter {
       approvalController,
       phishingController,
       tokenRatesController,
+      tokenListController,
       // Notification Controllers
       authenticationController,
       userStorageController,
@@ -4019,6 +4006,12 @@ export default class MetamaskController extends EventEmitter {
           tokenRatesController,
         ),
 
+      // TokenListController
+      tokenListStartPolling:
+        tokenListController.startPolling.bind(tokenListController),
+      tokenListStopPollingByPollingToken:
+        tokenListController.stopPollingByPollingToken.bind(tokenListController),
+
       // GasFeeController
       gasFeeStartPollingByNetworkClientId:
         gasFeeController.startPollingByNetworkClientId.bind(gasFeeController),
@@ -7176,33 +7169,4 @@ export default class MetamaskController extends EventEmitter {
       metamask: this.getState(),
     };
   }
-
-  #checkTokenListPolling(currentState, previousState) {
-    const previousEnabled = this.#isTokenListPollingRequired(previousState);
-    const newEnabled = this.#isTokenListPollingRequired(currentState);
-
-    if (previousEnabled === newEnabled) {
-      return;
-    }
-
-    this.tokenListController.updatePreventPollingOnNetworkRestart(!newEnabled);
-
-    if (newEnabled) {
-      log.debug('Started token list controller polling');
-      this.tokenListController.start();
-    } else {
-      log.debug('Stopped token list controller polling');
-      this.tokenListController.clearingTokenListData();
-      this.tokenListController.stop();
-    }
-  }
-
-  #isTokenListPollingRequired(preferencesControllerState) {
-    const { useTokenDetection, useTransactionSimulations, preferences } =
-      preferencesControllerState ?? {};
-
-    const { petnamesEnabled } = preferences ?? {};
-
-    return useTokenDetection || petnamesEnabled || useTransactionSimulations;
-  }
 }

lavamoat/browserify/beta/policy.json

@@ -660,6 +660,7 @@
         "Headers": true,
         "URL": true,
         "URLSearchParams": true,
+        "__import__": true,
         "clearInterval": true,
         "clearTimeout": true,
         "console.error": true,
@@ -668,7 +669,6 @@
         "setTimeout": true
       },
       "packages": {
-        "@ensdomains/content-hash>multicodec>uint8arrays>multiformats": true,
         "@ethereumjs/tx>@ethereumjs/util": true,
         "@ethersproject/contracts": true,
         "@ethersproject/providers": true,

lavamoat/browserify/flask/policy.json

@@ -660,6 +660,7 @@
         "Headers": true,
         "URL": true,
         "URLSearchParams": true,
+        "__import__": true,
         "clearInterval": true,
         "clearTimeout": true,
         "console.error": true,
@@ -668,7 +669,6 @@
         "setTimeout": true
       },
       "packages": {
-        "@ensdomains/content-hash>multicodec>uint8arrays>multiformats": true,
         "@ethereumjs/tx>@ethereumjs/util": true,
         "@ethersproject/contracts": true,
         "@ethersproject/providers": true,

lavamoat/browserify/main/policy.json

@@ -660,6 +660,7 @@
         "Headers": true,
         "URL": true,
         "URLSearchParams": true,
+        "__import__": true,
         "clearInterval": true,
         "clearTimeout": true,
         "console.error": true,
@@ -668,7 +669,6 @@
         "setTimeout": true
       },
       "packages": {
-        "@ensdomains/content-hash>multicodec>uint8arrays>multiformats": true,
         "@ethereumjs/tx>@ethereumjs/util": true,
         "@ethersproject/contracts": true,
         "@ethersproject/providers": true,

lavamoat/browserify/mmi/policy.json

@@ -752,6 +752,7 @@
         "Headers": true,
         "URL": true,
         "URLSearchParams": true,
+        "__import__": true,
         "clearInterval": true,
         "clearTimeout": true,
         "console.error": true,
@@ -760,7 +761,6 @@
         "setTimeout": true
       },
       "packages": {
-        "@ensdomains/content-hash>multicodec>uint8arrays>multiformats": true,
         "@ethereumjs/tx>@ethereumjs/util": true,
         "@ethersproject/contracts": true,
         "@ethersproject/providers": true,

package.json

@@ -131,6 +131,7 @@
     "attributions:generate": "./development/generate-attributions.sh"
   },
   "resolutions": {
+    "@metamask/assets-controllers": "npm:@metamask-previews/[email protected]",
     "chokidar": "^3.6.0",
     "gridplus-sdk/elliptic": "^6.5.7",
     "gridplus-sdk/secp256k1": "^5.0.1",

test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json

@@ -311,7 +311,13 @@
   },
   "TokenListController": {
     "tokenList": "object",
-    "tokensChainsCache": {},
+    "tokensChainsCache": {
+      "0x1": "object",
+      "0x539": "object",
+      "0xaa36a7": "object",
+      "0xe705": "object",
+      "0xe708": "object"
+    },
     "preventPollingOnNetworkRestart": false
   },
   "TokenRatesController": { "marketData": "object" },

test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json

@@ -173,7 +173,13 @@
     "gasEstimateType": "none",
     "nonRPCGasFeeApisDisabled": "boolean",
     "tokenList": "object",
-    "tokensChainsCache": {},
+    "tokensChainsCache": {
+      "0x1": "object",
+      "0x539": "object",
+      "0xaa36a7": "object",
+      "0xe705": "object",
+      "0xe708": "object"
+    },
     "preventPollingOnNetworkRestart": false,
     "tokens": "object",
     "ignoredTokens": "object",

test/integration/data/onboarding-completion-route.json

@@ -435,7 +435,13 @@
   "theme": "os",
   "tokenList": {},
   "tokens": [],
-  "tokensChainsCache": {},
+  "tokensChainsCache": {
+    "0x1": "object",
+    "0x539": "object",
+    "0xaa36a7": "object",
+    "0xe705": "object",
+    "0xe708": "object"
+  },
   "traits": {},
   "transactions": [],
   "trezorModel": null,

ui/contexts/assetPolling.tsx

@@ -1,13 +1,15 @@
 import React, { ReactNode } from 'react';
 import useCurrencyRatePolling from '../hooks/useCurrencyRatePolling';
 import useTokenRatesPolling from '../hooks/useTokenRatesPolling';
+import useTokenListPolling from '../hooks/useTokenListPolling';
 
 // This provider is a step towards making controller polling fully UI based.
 // Eventually, individual UI components will call the use*Polling hooks to
 // poll and return particular data. This polls globally in the meantime.
 export const AssetPollingProvider = ({ children }: { children: ReactNode }) => {
   useCurrencyRatePolling();
   useTokenRatesPolling();
+  useTokenListPolling();
 
   return <>{children}</>;
 };

ui/contexts/tokenList.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import useTokenListPolling from '../hooks/useTokenListPolling';
+
+export const TokenListProvider = ({ children }) => {
+  useTokenListPolling();
+
+  return <>{children}</>;
+};
+TokenListProvider.propTypes = {
+  children: PropTypes.node,
+};

ui/contexts/tokenRates.tsx

@@ -0,0 +1,12 @@
+import React, { ReactElement } from 'react';
+import useTokenRatesPolling from '../hooks/useTokenRatesPolling';
+
+export const TokenRatesProvider = ({
+  children,
+}: {
+  children: ReactElement;
+}) => {
+  useTokenRatesPolling();
+
+  return <>{children}</>;
+};

ui/hooks/useTokenListPolling.ts

@@ -0,0 +1,37 @@
+import { useSelector } from 'react-redux';
+import { Hex } from '@metamask/utils';
+import {
+  getNetworkConfigurationsByChainId,
+  getPreferences,
+  selectERC20Tokens,
+  selectERC20TokensByChain,
+} from '../selectors';
+import {
+  tokenListStartPolling,
+  tokenListStopPollingByPollingToken,
+} from '../store/actions';
+import useMultiPolling from './useMultiPolling';
+
+const useTokenListPolling = () => {
+  const networkConfigurations = useSelector(getNetworkConfigurationsByChainId);
+  const { petnamesEnabled, useTokenDetection, useTransactionSimulations } =
+    useSelector(getPreferences);
+  const tokenList = useSelector(selectERC20Tokens);
+  const tokensChainsCache = useSelector(selectERC20TokensByChain);
+
+  const chainIds = Object.keys(networkConfigurations) as Hex[];
+
+  if (useTokenDetection || petnamesEnabled || useTransactionSimulations) {
+    useMultiPolling({
+      startPolling: tokenListStartPolling,
+      stopPollingByPollingToken: tokenListStopPollingByPollingToken,
+      input: chainIds,
+    });
+  }
+
+  return {
+    tokenList,
+    tokensChainsCache,
+  };
+};
+export default useTokenListPolling;

ui/store/actions.ts

@@ -4586,6 +4586,36 @@ export async function tokenRatesStopPollingByPollingToken(
   await removePollingTokenFromAppState(pollingToken);
 }
 
+/**
+ * Informs the TokenListController that the UI requires tokenlist polling
+ *
+ * @param chainId
+ * @returns polling token that can be used to stop polling
+ */
+export async function tokenListStartPolling(chainId: Hex): Promise<string> {
+  const pollingToken = await submitRequestToBackground(
+    'tokenListStartPolling',
+    [{ chainId }],
+  );
+  await addPollingTokenToAppState(pollingToken);
+  return pollingToken;
+}
+
+/**
+ * Informs the TokenListController that the UI requires tokenlist to stop polling given a specific polling token
+ *
+ * @param pollingToken
+ * @returns polling token that can be used to stop polling
+ */
+export async function tokenListStopPollingByPollingToken(
+  pollingToken: string,
+): Promise<string> {
+  await submitRequestToBackground('tokenListStopPollingByPollingToken', [
+    pollingToken,
+  ]);
+  await removePollingTokenFromAppState(pollingToken);
+}
+
 /**
  * Informs the GasFeeController that the UI requires gas fee polling
  *