feat: Multichain AssetList

app/scripts/constants/sentry-state.ts

@@ -355,6 +355,9 @@ export const SENTRY_BACKGROUND_STATE = {
       [AllProperties]: false,
     },
   },
+  TokenBalancesController: {
+    tokenBalances: false,
+  },
   TokenRatesController: {
     marketData: false,
   },

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';
@@ -893,6 +894,27 @@ 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',
+      ],
+    });
+
+    this.tokenBalancesController = new TokenBalancesController({
+      messenger: tokenBalancesMessenger,
+      state: initState.TokenBalancesController,
+      interval: 30000,
+    });
+
     const phishingControllerMessenger = this.controllerMessenger.getRestricted({
       name: 'PhishingController',
     });
@@ -2408,6 +2430,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,
@@ -2463,6 +2486,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,
@@ -3236,6 +3260,7 @@ export default class MetamaskController extends EventEmitter {
       nftController,
       nftDetectionController,
       currencyRateController,
+      tokenBalancesController,
       tokenDetectionController,
       ensController,
       gasFeeController,
@@ -4040,6 +4065,14 @@ export default class MetamaskController extends EventEmitter {
           tokenRatesController,
         ),
 
+      tokenBalancesStartPolling: tokenBalancesController.startPolling.bind(
+        tokenBalancesController,
+      ),
+      tokenBalancesStopPollingByPollingToken:
+        tokenBalancesController.stopPollingByPollingToken.bind(
+          tokenBalancesController,
+        ),
+
       // GasFeeController
       gasFeeStartPollingByNetworkClientId:
         gasFeeController.startPollingByNetworkClientId.bind(gasFeeController),
@@ -6670,6 +6703,7 @@ export default class MetamaskController extends EventEmitter {
       this.currencyRateController.stopAllPolling();
       this.tokenRatesController.stopAllPolling();
       this.appStateController.clearPollingTokens();
+      this.tokenBalancesController.stopAllPolling();
     } catch (error) {
       console.error(error);
     }

package.json

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

ui/components/app/assets/asset-list/asset-list-control-bar/asset-list-control-bar.tsx

@@ -1,6 +1,10 @@
-import React, { useRef, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { getCurrentNetwork, getPreferences } from '../../../../../selectors';
+import React, { useEffect, useRef, useState } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import {
+  getCurrentNetwork,
+  getNetworkConfigurationsByChainId,
+  getPreferences,
+} from '../../../../../selectors';
 import {
   Box,
   ButtonBase,
@@ -12,11 +16,10 @@ import {
 import SortControl from '../sort-control';
 import {
   BackgroundColor,
-  BorderColor,
-  BorderStyle,
   Display,
   JustifyContent,
   TextColor,
+  TextVariant,
 } from '../../../../../helpers/constants/design-system';
 import ImportControl from '../import-control';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
@@ -28,21 +31,40 @@ import {
   ENVIRONMENT_TYPE_POPUP,
 } from '../../../../../../shared/constants/app';
 import NetworkFilter from '../network-filter';
+import { setTokenNetworkFilter } from '../../../../../store/actions';
+import Tooltip from '../../../../ui/tooltip';
 
 type AssetListControlBarProps = {
   showTokensLinks?: boolean;
 };
 
 const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   const t = useI18nContext();
+  const dispatch = useDispatch();
   const popoverRef = useRef<HTMLDivElement>(null);
   const currentNetwork = useSelector(getCurrentNetwork);
+  const allNetworks = useSelector(getNetworkConfigurationsByChainId);
   const { tokenNetworkFilter } = useSelector(getPreferences);
   const [isTokenSortPopoverOpen, setIsTokenSortPopoverOpen] = useState(false);
   const [isNetworkFilterPopoverOpen, setIsNetworkFilterPopoverOpen] =
     useState(false);
 
-  const allNetworksFilterShown = Object.keys(tokenNetworkFilter ?? {}).length;
+  const allOpts: Record<string, boolean> = {};
+  Object.keys(allNetworks).forEach((chainId) => {
+    allOpts[chainId] = true;
+  });
+
+  const allNetworksFilterShown =
+    Object.keys(tokenNetworkFilter).length !== Object.keys(allOpts).length;
+
+  // TODO: This useEffect should be a migration
+  // We need to set the default filter for all users to be all included networks, rather than defaulting to empty object
+  // This effect is to unblock and derisk in the short-term
+  useEffect(() => {
+    if (Object.keys(tokenNetworkFilter).length === 0) {
+      dispatch(setTokenNetworkFilter(allOpts));
+    }
+  }, []);
 
   const windowType = getEnvironmentType();
   const isFullScreen =
@@ -67,21 +89,16 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   return (
     <Box
       className="asset-list-control-bar"
-      marginLeft={4}
-      marginRight={4}
-      paddingTop={4}
+      marginLeft={2}
+      marginRight={2}
       ref={popoverRef}
     >
-      <Box
-        display={Display.Flex}
-        justifyContent={
-          isFullScreen ? JustifyContent.flexStart : JustifyContent.spaceBetween
-        }
-      >
+      <Box display={Display.Flex} justifyContent={JustifyContent.spaceBetween}>
         {process.env.FILTER_TOKENS_TOGGLE && (
           <ButtonBase
             data-testid="sort-by-popover-toggle"
-            className="asset-list-control-bar__button"
+            variant={TextVariant.bodyMdMedium}
+            className="asset-list-control-bar__button asset-list-control-bar__network_control"
             onClick={toggleNetworkFilterPopover}
             size={ButtonBaseSize.Sm}
             endIconName={IconName.ArrowDown}
@@ -90,8 +107,6 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
                 ? BackgroundColor.backgroundPressed
                 : BackgroundColor.backgroundDefault
             }
-            borderColor={BorderColor.borderMuted}
-            borderStyle={BorderStyle.solid}
             color={TextColor.textDefault}
             marginRight={isFullScreen ? 2 : null}
             ellipsis
@@ -102,26 +117,32 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
           </ButtonBase>
         )}
 
-        <ButtonBase
-          data-testid="sort-by-popover-toggle"
-          className="asset-list-control-bar__button"
-          onClick={toggleTokenSortPopover}
-          size={ButtonBaseSize.Sm}
-          endIconName={IconName.ArrowDown}
-          backgroundColor={
-            isTokenSortPopoverOpen
-              ? BackgroundColor.backgroundPressed
-              : BackgroundColor.backgroundDefault
-          }
-          borderColor={BorderColor.borderMuted}
-          borderStyle={BorderStyle.solid}
-          color={TextColor.textDefault}
-          marginRight={isFullScreen ? 2 : null}
+        <Box
+          className="asset-list-control-bar__buttons"
+          display={Display.Flex}
+          justifyContent={JustifyContent.flexEnd}
         >
-          {t('sortBy')}
-        </ButtonBase>
+          <Tooltip title={t('sortBy')} position="bottom" distance={20}>
+            <ButtonBase
+              data-testid="sort-by-popover-toggle"
+              className="asset-list-control-bar__button"
+              onClick={toggleTokenSortPopover}
+              size={ButtonBaseSize.Sm}
+              endIconName={IconName.SwapVertical}
+              backgroundColor={
+                isTokenSortPopoverOpen
+                  ? BackgroundColor.backgroundPressed
+                  : BackgroundColor.backgroundDefault
+              }
+              color={TextColor.textDefault}
+              marginRight={isFullScreen ? 2 : null}
+            />
+          </Tooltip>
 
-        <ImportControl showTokensLinks={showTokensLinks} />
+          <Tooltip title={t('importTokens')} position="bottom" distance={20}>
+            <ImportControl showTokensLinks={showTokensLinks} />
+          </Tooltip>
+        </Box>
       </Box>
 
       <Popover
@@ -143,7 +164,7 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
       <Popover
         onClickOutside={closePopover}
         isOpen={isTokenSortPopoverOpen}
-        position={PopoverPosition.BottomStart}
+        position={PopoverPosition.BottomEnd}
         referenceElement={popoverRef.current}
         matchWidth={!isFullScreen}
         style={{

ui/components/app/assets/asset-list/asset-list-control-bar/index.scss

@@ -1,12 +1,37 @@
 .asset-list-control-bar {
-  padding-top: 8px;
-  padding-bottom: 8px;
+  padding-top: 4px;
+  padding-bottom: 4px;
 
   &__button {
-    // using percentage here to allow for full network name to show when full screen, but ellipsize on extension view
     max-width: 35%;
   }
 
+  &__network_control {
+    justify-content: space-between;
+    min-width: 185px;
+    border-radius: 8px;
+    padding: 0 8px !important;
+    gap: 5px;
+    text-transform: lowercase;
+
+    span::first-letter {
+      text-transform: uppercase;
+    }
+  }
+
+  &__buttons {
+    display: flex;
+    justify-content: flex-end;
+
+    & .asset-list-control-bar__button {
+      width: 32px;
+      min-width: 32px;
+      margin: 0;
+      border-radius: 8px;
+      padding: 0;
+    }
+  }
+
   &__button:hover {
     background-color: var(--color-background-hover);
   }

ui/components/app/assets/asset-list/asset-list.tsx

@@ -38,7 +38,6 @@ import {
 import { getIsNativeTokenBuyable } from '../../../../ducks/ramps';
 ///: END:ONLY_INCLUDE_IF
 import AssetListControlBar from './asset-list-control-bar';
-import NativeToken from './native-token';
 
 export type TokenWithBalance = {
   address: string;
@@ -51,7 +50,7 @@ export type TokenWithBalance = {
 };
 
 export type AssetListProps = {
-  onClickAsset: (arg: string) => void;
+  onClickAsset: (chainId: string, address: string) => void;
   showTokensLinks?: boolean;
 };
 
@@ -115,9 +114,8 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         )}
       <AssetListControlBar showTokensLinks={showTokensLinks} />
       <TokenList
-        nativeToken={<NativeToken onClickAsset={onClickAsset} />}
-        onTokenClick={(tokenAddress: string) => {
-          onClickAsset(tokenAddress);
+        onTokenClick={(chainId: string, tokenAddress: string) => {
+          onClickAsset(chainId, tokenAddress);
           trackEvent({
             event: MetaMetricsEventName.TokenScreenOpened,
             category: MetaMetricsEventCategory.Navigation,