feat: Multichain AssetList

app/scripts/constants/sentry-state.ts

@@ -353,6 +353,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';
@@ -891,6 +892,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',
     });
@@ -2397,6 +2419,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,
@@ -2452,6 +2475,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,
@@ -3225,6 +3249,7 @@ export default class MetamaskController extends EventEmitter {
       nftController,
       nftDetectionController,
       currencyRateController,
+      tokenBalancesController,
       tokenDetectionController,
       ensController,
       gasFeeController,
@@ -4019,6 +4044,14 @@ export default class MetamaskController extends EventEmitter {
           tokenRatesController,
         ),
 
+      tokenBalancesStartPolling: tokenBalancesController.startPolling.bind(
+        tokenBalancesController,
+      ),
+      tokenBalancesStopPollingByPollingToken:
+        tokenBalancesController.stopPollingByPollingToken.bind(
+          tokenBalancesController,
+        ),
+
       // GasFeeController
       gasFeeStartPollingByNetworkClientId:
         gasFeeController.startPollingByNetworkClientId.bind(gasFeeController),
@@ -6652,6 +6685,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,8 +16,6 @@ import {
 import SortControl from '../sort-control';
 import {
   BackgroundColor,
-  BorderColor,
-  BorderStyle,
   Display,
   JustifyContent,
   TextColor,
@@ -28,21 +30,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 +88,16 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   return (
     <Box
       className="asset-list-control-bar"
-      marginLeft={4}
-      marginRight={4}
+      marginLeft={2}
+      marginRight={2}
       paddingTop={4}
       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"
+            className="asset-list-control-bar__button asset-list-control-bar__network_control"
             onClick={toggleNetworkFilterPopover}
             size={ButtonBaseSize.Sm}
             endIconName={IconName.ArrowDown}
@@ -90,8 +106,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 +116,28 @@ 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}
-        >
-          {t('sortBy')}
-        </ButtonBase>
+        <Box display={Display.Flex} justifyContent={JustifyContent.flexEnd}>
+          <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 +159,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

@@ -7,6 +7,11 @@
     max-width: 35%;
   }
 
+  &__network_control {
+    justify-content: space-between;
+    min-width: 180px;
+  }
+
   &__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;
@@ -115,7 +114,6 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         )}
       <AssetListControlBar showTokensLinks={showTokensLinks} />
       <TokenList
-        nativeToken={<NativeToken onClickAsset={onClickAsset} />}
         onTokenClick={(tokenAddress: string) => {
           onClickAsset(tokenAddress);
           trackEvent({

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

@@ -7,8 +7,6 @@ import {
 } from '../../../../component-library';
 import {
   BackgroundColor,
-  BorderColor,
-  BorderStyle,
   TextColor,
 } from '../../../../../helpers/constants/design-system';
 import { showImportTokensModal } from '../../../../../store/actions';
@@ -18,7 +16,6 @@ import {
   MetaMetricsEventName,
 } from '../../../../../../shared/constants/metametrics';
 import { getMultichainIsEvm } from '../../../../../selectors/multichain';
-import { useI18nContext } from '../../../../../hooks/useI18nContext';
 
 type AssetListControlBarProps = {
   showTokensLinks?: boolean;
@@ -27,7 +24,6 @@ type AssetListControlBarProps = {
 const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   const dispatch = useDispatch();
   const trackEvent = useContext(MetaMetricsContext);
-  const t = useI18nContext();
   const isEvm = useSelector(getMultichainIsEvm);
   // NOTE: Since we can parametrize it now, we keep the original behavior
   // for EVM assets
@@ -41,8 +37,6 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
       size={ButtonBaseSize.Sm}
       startIconName={IconName.Add}
       backgroundColor={BackgroundColor.backgroundDefault}
-      borderColor={BorderColor.borderMuted}
-      borderStyle={BorderStyle.solid}
       color={TextColor.textDefault}
       onClick={() => {
         dispatch(showImportTokensModal());
@@ -54,9 +48,7 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
           },
         });
       }}
-    >
-      {t('import')}
-    </ButtonBase>
+    />
   );
 };
 

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

@@ -43,8 +43,10 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
     getShouldHideZeroBalanceTokens,
   );
 
-  const { totalFiatBalance: selectedAccountBalance } =
-    useAccountTotalFiatBalance(selectedAccount, shouldHideZeroBalanceTokens);
+  // const { totalFiatBalance: selectedAccountBalance } =
+  //   useAccountTotalFiatBalance(selectedAccount, shouldHideZeroBalanceTokens);
+
+  const selectedAccountBalance = 100;
 
   // TODO: fetch balances across networks
   // const multiNetworkAccountBalance = useMultichainAccountBalance()
@@ -56,11 +58,19 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
     handleClose();
   };
 
+  const allOpts: Record<string, boolean> = {};
+  Object.keys(allNetworks).forEach((chainId) => {
+    allOpts[chainId] = true;
+  });
+
   return (
     <>
       <SelectableListItem
-        isSelected={!Object.keys(tokenNetworkFilter).length}
-        onClick={() => handleFilter({})}
+        isSelected={
+          Object.keys(tokenNetworkFilter).length ===
+          Object.keys(allNetworks).length
+        }
+        onClick={() => handleFilter(allOpts)}
       >
         <Box
           display={Display.Flex}
@@ -106,7 +116,10 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
         </Box>
       </SelectableListItem>
       <SelectableListItem
-        isSelected={tokenNetworkFilter[chainId]}
+        isSelected={
+          tokenNetworkFilter[chainId] &&
+          Object.keys(tokenNetworkFilter).length === 1
+        }
         onClick={() => handleFilter({ [chainId]: true })}
       >
         <Box