feat: upgrade assets controllers to version 44 (#28472)

## **Description** Upgrades the assets controllers to version 44. And starts replacing some instances of https://github.com/MetaMask/eth-token-tracker with reading state from the `TokenBalancesController` [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28472?quickstart=1) ## **Related issues** ## **Manual testing steps** No visual changes. Token balances should render correctly like before on the tokens page, and when switching accounts and chains. ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.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. --------- Co-authored-by: MetaMask Bot <[email protected]>
MetaMask · Nov 16, 2024 · 8b02ae4 · 8b02ae4
1 parent 8d60de9
commit 8b02ae4
Show file tree

Hide file tree

Showing 21 changed files with 256 additions and 67 deletions.
diff --git a/...s-controllers-npm-43.1.1-c223d56176.patch → ...s-controllers-npm-44.0.0-c223d56176.patch b/...s-controllers-npm-43.1.1-c223d56176.patch → ...s-controllers-npm-44.0.0-c223d56176.patch
diff --git a/app/scripts/constants/sentry-state.ts b/app/scripts/constants/sentry-state.ts
@@ -355,6 +355,9 @@ export const SENTRY_BACKGROUND_STATE = {
       [AllProperties]: false,
     },
   },
+  TokenBalancesController: {
+    tokenBalances: false,
+  },
   TokenRatesController: {
     marketData: false,
   },

diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
@@ -12,6 +12,7 @@ import {
   CodefiTokenPricesServiceV2,
   RatesController,
   fetchMultiExchangeRate,
+  TokenBalancesController,
 } from '@metamask/assets-controllers';
 import { JsonRpcEngine } from '@metamask/json-rpc-engine';
 import { createEngineStream } from '@metamask/json-rpc-middleware-stream';
@@ -685,6 +686,7 @@ export default class MetamaskController extends EventEmitter {
         'AccountsController:selectedEvmAccountChange',
         'PreferencesController:stateChange',
         'TokenListController:stateChange',
+        'NetworkController:stateChange',
       ],
     });
     this.tokensController = new TokensController({
@@ -893,6 +895,28 @@ export default class MetamaskController extends EventEmitter {
       };
     };
 
+    const tokenBalancesMessenger = this.controllerMessenger.getRestricted({
+      name: 'TokenBalancesController',
+      allowedActions: [
+        'NetworkController:getState',
+        'NetworkController:getNetworkClientById',
+        'TokensController:getState',
+        'PreferencesController:getState',
+        'AccountsController:getSelectedAccount',
+      ],
+      allowedEvents: [
+        'PreferencesController:stateChange',
+        'TokensController:stateChange',
+        'NetworkController:stateChange',
+      ],
+    });
+
+    this.tokenBalancesController = new TokenBalancesController({
+      messenger: tokenBalancesMessenger,
+      state: initState.TokenBalancesController,
+      interval: 30000,
+    });
+
     const phishingControllerMessenger = this.controllerMessenger.getRestricted({
       name: 'PhishingController',
     });
@@ -2413,6 +2437,7 @@ export default class MetamaskController extends EventEmitter {
       GasFeeController: this.gasFeeController,
       TokenListController: this.tokenListController,
       TokensController: this.tokensController,
+      TokenBalancesController: this.tokenBalancesController,
       SmartTransactionsController: this.smartTransactionsController,
       NftController: this.nftController,
       PhishingController: this.phishingController,
@@ -2468,6 +2493,7 @@ export default class MetamaskController extends EventEmitter {
         GasFeeController: this.gasFeeController,
         TokenListController: this.tokenListController,
         TokensController: this.tokensController,
+        TokenBalancesController: this.tokenBalancesController,
         SmartTransactionsController: this.smartTransactionsController,
         NftController: this.nftController,
         SelectedNetworkController: this.selectedNetworkController,
@@ -3229,6 +3255,7 @@ export default class MetamaskController extends EventEmitter {
       nftController,
       nftDetectionController,
       currencyRateController,
+      tokenBalancesController,
       tokenDetectionController,
       ensController,
       tokenListController,
@@ -4047,6 +4074,14 @@ export default class MetamaskController extends EventEmitter {
       tokenListStopPollingByPollingToken:
         tokenListController.stopPollingByPollingToken.bind(tokenListController),
 
+      tokenBalancesStartPolling: tokenBalancesController.startPolling.bind(
+        tokenBalancesController,
+      ),
+      tokenBalancesStopPollingByPollingToken:
+        tokenBalancesController.stopPollingByPollingToken.bind(
+          tokenBalancesController,
+        ),
+
       // GasFeeController
       gasFeeStartPollingByNetworkClientId:
         gasFeeController.startPollingByNetworkClientId.bind(gasFeeController),
@@ -6681,6 +6716,7 @@ export default class MetamaskController extends EventEmitter {
       this.tokenRatesController.stopAllPolling();
       this.tokenDetectionController.stopAllPolling();
       this.tokenListController.stopAllPolling();
+      this.tokenBalancesController.stopAllPolling();
       this.appStateController.clearPollingTokens();
     } catch (error) {
       console.error(error);
@@ -6921,6 +6957,9 @@ export default class MetamaskController extends EventEmitter {
     await this._createTransactionNotifcation(transactionMeta);
     await this._updateNFTOwnership(transactionMeta);
     this._trackTransactionFailure(transactionMeta);
+    await this.tokenBalancesController.updateBalancesByChainId({
+      chainId: transactionMeta.chainId,
+    });
   }
 
   async _createTransactionNotifcation(transactionMeta) {

diff --git a/package.json b/package.json
@@ -292,7 +292,7 @@
     "@metamask/address-book-controller": "^6.0.0",
     "@metamask/announcement-controller": "^7.0.0",
     "@metamask/approval-controller": "^7.0.0",
-    "@metamask/assets-controllers": "patch:@metamask/assets-controllers@patch%3A@metamask/assets-controllers@npm%253A43.1.1%23~/.yarn/patches/@metamask-assets-controllers-npm-43.1.1-c223d56176.patch%3A%3Aversion=43.1.1&hash=5a94c2#~/.yarn/patches/@metamask-assets-controllers-patch-9e00573eb4.patch",
+    "@metamask/assets-controllers": "patch:@metamask/assets-controllers@patch%3A@metamask/assets-controllers@npm%253A44.0.0%23~/.yarn/patches/@metamask-assets-controllers-npm-44.0.0-c223d56176.patch%3A%3Aversion=44.0.0&hash=5a94c2#~/.yarn/patches/@metamask-assets-controllers-patch-9e00573eb4.patch",
     "@metamask/base-controller": "^7.0.0",
     "@metamask/bitcoin-wallet-snap": "^0.8.2",
     "@metamask/browser-passworder": "^4.3.0",

diff --git a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json
@@ -314,6 +314,9 @@
       "swapsFeatureFlags": {}
     }
   },
+  "TokenBalancesController": {
+    "tokenBalances": "object"
+  },
   "TokenListController": {
     "tokenList": "object",
     "tokensChainsCache": {

diff --git a/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json b/test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json
@@ -181,6 +181,7 @@
       "0xe705": "object",
       "0xe708": "object"
     },
+    "tokenBalances": "object",
     "preventPollingOnNetworkRestart": false,
     "tokens": "object",
     "ignoredTokens": "object",

diff --git a/ui/components/app/assets/asset-list/asset-list.test.tsx b/ui/components/app/assets/asset-list/asset-list.test.tsx
@@ -64,6 +64,8 @@ jest.mock('../../../../hooks/useIsOriginalNativeTokenSymbol', () => {
 jest.mock('../../../../store/actions', () => {
   return {
     getTokenSymbol: jest.fn(),
+    tokenBalancesStartPolling: jest.fn().mockResolvedValue('pollingToken'),
+    tokenBalancesStopPollingByPollingToken: jest.fn(),
   };
 });
 

diff --git a/ui/components/app/wallet-overview/btc-overview.test.tsx b/ui/components/app/wallet-overview/btc-overview.test.tsx
@@ -29,6 +29,8 @@ jest.mock('../../../store/actions', () => ({
   handleSnapRequest: jest.fn(),
   sendMultichainTransaction: jest.fn(),
   setDefaultHomeActiveTabName: jest.fn(),
+  tokenBalancesStartPolling: jest.fn().mockResolvedValue('pollingToken'),
+  tokenBalancesStopPollingByPollingToken: jest.fn(),
 }));
 
 const PORTOFOLIO_URL = 'https://portfolio.test';

diff --git a/ui/components/app/wallet-overview/eth-overview.test.js b/ui/components/app/wallet-overview/eth-overview.test.js
@@ -38,6 +38,8 @@ jest.mock('../../../ducks/locale/locale', () => ({
 
 jest.mock('../../../store/actions', () => ({
   startNewDraftTransaction: jest.fn(),
+  tokenBalancesStartPolling: jest.fn().mockResolvedValue('pollingToken'),
+  tokenBalancesStopPollingByPollingToken: jest.fn(),
 }));
 
 const mockGetIntlLocale = getIntlLocale;

diff --git a/ui/components/multichain/account-overview/account-overview-btc.test.tsx b/ui/components/multichain/account-overview/account-overview-btc.test.tsx
@@ -8,6 +8,11 @@ import {
   AccountOverviewBtcProps,
 } from './account-overview-btc';
 
+jest.mock('../../../store/actions', () => ({
+  tokenBalancesStartPolling: jest.fn().mockResolvedValue('pollingToken'),
+  tokenBalancesStopPollingByPollingToken: jest.fn(),
+}));
+
 const defaultProps: AccountOverviewBtcProps = {
   defaultHomeActiveTabName: null,
   onTabClick: jest.fn(),

diff --git a/ui/components/multichain/account-overview/account-overview-eth.test.tsx b/ui/components/multichain/account-overview/account-overview-eth.test.tsx
@@ -8,6 +8,11 @@ import {
   AccountOverviewEthProps,
 } from './account-overview-eth';
 
+jest.mock('../../../store/actions', () => ({
+  tokenBalancesStartPolling: jest.fn().mockResolvedValue('pollingToken'),
+  tokenBalancesStopPollingByPollingToken: jest.fn(),
+}));
+
 const render = (props: AccountOverviewEthProps) => {
   const store = configureStore({
     metamask: mockState.metamask,

diff --git a/ui/ducks/metamask/metamask.js b/ui/ducks/metamask/metamask.js
@@ -457,6 +457,16 @@ export const getGasEstimateTypeByChainId = createSelector(
   },
 );
 
+/**
+ * Returns the balances of imported and detected tokens across all accounts and chains.
+ *
+ * @param {*} state
+ * @returns { import('@metamask/assets-controllers').TokenBalancesControllerState['tokenBalances']}
+ */
+export function getTokenBalances(state) {
+  return state.metamask.tokenBalances;
+}
+
 export const getGasFeeEstimatesByChainId = createSelector(
   getGasFeeControllerEstimatesByChainId,
   getTransactionGasFeeEstimatesByChainId,

diff --git a/ui/hooks/useAccountTotalFiatBalance.js b/ui/hooks/useAccountTotalFiatBalance.js
@@ -22,7 +22,7 @@ import {
 import { formatCurrency } from '../helpers/utils/confirm-tx.util';
 import { getTokenFiatAmount } from '../helpers/utils/token-util';
 import { roundToDecimalPlacesRemovingExtraZeroes } from '../helpers/utils/util';
-import { useTokenTracker } from './useTokenTracker';
+import { useTokenTracker } from './useTokenBalances';
 
 export const useAccountTotalFiatBalance = (
   account,
@@ -54,10 +54,11 @@ export const useAccountTotalFiatBalance = (
   const primaryTokenImage = useSelector(getNativeCurrencyImage);
   const nativeCurrency = useSelector(getNativeCurrency);
 
-  const { loading, tokensWithBalances } = useTokenTracker({
+  const loading = false;
+  const { tokensWithBalances } = useTokenTracker({
+    chainId: currentChainId,
     tokens,
     address: account?.address,
-    includeFailedTokens: true,
     hideZeroBalanceTokens: shouldHideZeroBalanceTokens,
   });
 

diff --git a/ui/hooks/useAccountTotalFiatBalance.test.js b/ui/hooks/useAccountTotalFiatBalance.test.js
@@ -14,35 +14,6 @@ const mockAccount = createMockInternalAccount({
   address: '0x0836f5ed6b62baf60706fe3adc0ff0fd1df833da',
 });
 
-jest.mock('./useTokenTracker', () => {
-  return {
-    useTokenTracker: () => ({
-      loading: false,
-      tokensWithBalances: [
-        {
-          address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
-          balance: '48573',
-          balanceError: null,
-          decimals: 6,
-          image: undefined,
-          isERC721: undefined,
-          string: '0.04857',
-          symbol: 'USDC',
-        },
-        {
-          address: '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e',
-          symbol: 'YFI',
-          balance: '1409247882142934',
-          decimals: 18,
-          string: '0.001409247882142934',
-          balanceError: null,
-        },
-      ],
-      error: null,
-    }),
-  };
-});
-
 const renderUseAccountTotalFiatBalance = (address) => {
   const state = {
     ...mockState,
@@ -78,7 +49,7 @@ const renderUseAccountTotalFiatBalance = (address) => {
       },
       ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
 
-      detectedTokens: {
+      allTokens: {
         '0x1': {
           '0x0836f5ed6b62baf60706fe3adc0ff0fd1df833da': [
             {
@@ -96,6 +67,14 @@ const renderUseAccountTotalFiatBalance = (address) => {
           ],
         },
       },
+      tokenBalances: {
+        [mockAccount.address]: {
+          [CHAIN_IDS.MAINNET]: {
+            '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48': '0xBDBD',
+            '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e': '0x501B4176A64D6',
+          },
+        },
+      },
     },
   };
 
@@ -122,8 +101,6 @@ describe('useAccountTotalFiatBalance', () => {
           address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
           symbol: 'USDC',
           balance: '48573',
-          image: undefined,
-          isERC721: undefined,
           decimals: 6,
           string: 0.04857,
           balanceError: null,

diff --git a/ui/hooks/useMultichainAccountTotalFiatBalance.test.tsx b/ui/hooks/useMultichainAccountTotalFiatBalance.test.tsx
@@ -15,31 +15,21 @@ const mockTokenBalances = [
     balance: '48573',
     balanceError: null,
     decimals: 6,
-    image: undefined,
-    isERC721: undefined,
-    string: '0.04857',
+    string: 0.04857,
     symbol: 'USDC',
+    tokenFiatAmount: '0.05',
   },
   {
     address: '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e',
     symbol: 'YFI',
     balance: '1409247882142934',
     decimals: 18,
-    string: '0.001409247882142934',
+    string: 0.00141,
     balanceError: null,
+    tokenFiatAmount: '7.52',
   },
 ];
 
-jest.mock('./useTokenTracker', () => {
-  return {
-    useTokenTracker: () => ({
-      loading: false,
-      tokensWithBalances: mockTokenBalances,
-      error: null,
-    }),
-  };
-});
-
 const mockAccount = createMockInternalAccount({
   name: 'Account 1',
   address: '0x0836f5ed6b62baf60706fe3adc0ff0fd1df833da',
@@ -104,7 +94,7 @@ const renderUseMultichainAccountTotalFiatBalance = (
       },
       ...mockNetworkState({ chainId: CHAIN_IDS.MAINNET }),
 
-      detectedTokens: {
+      allTokens: {
         '0x1': {
           '0x0836f5ed6b62baf60706fe3adc0ff0fd1df833da': [
             {
@@ -122,6 +112,14 @@ const renderUseMultichainAccountTotalFiatBalance = (
           ],
         },
       },
+      tokenBalances: {
+        [mockAccount.address]: {
+          [CHAIN_IDS.MAINNET]: {
+            '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48': '0xBDBD',
+            '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e': '0x501B4176A64D6',
+          },
+        },
+      },
     },
   };
 

diff --git a/ui/hooks/useMultichainAccountTotalFiatBalance.ts b/ui/hooks/useMultichainAccountTotalFiatBalance.ts
@@ -31,9 +31,9 @@ export const useMultichainAccountTotalFiatBalance = (
   tokensWithBalances: {
     address: string;
     symbol: string;
-    decimals: string;
-    isERC721: boolean;
-    image: string;
+    decimals: number;
+    isERC721?: boolean;
+    image?: string;
   }[];
   totalWeiBalance?: string;
   totalBalance?: string;