feat: Multichain AssetList

shared/constants/network.ts

@@ -816,6 +816,9 @@ export const CHAIN_ID_TO_ETHERS_NETWORK_NAME_MAP = {
 export const CHAIN_ID_TOKEN_IMAGE_MAP = {
   [CHAIN_IDS.MAINNET]: ETH_TOKEN_IMAGE_URL,
   [CHAIN_IDS.TEST_ETH]: TEST_ETH_TOKEN_IMAGE_URL,
+  [CHAIN_IDS.ARBITRUM]: ETH_TOKEN_IMAGE_URL,
+  [CHAIN_IDS.BASE]: ETH_TOKEN_IMAGE_URL,
+  [CHAIN_IDS.LINEA_MAINNET]: ETH_TOKEN_IMAGE_URL,
   [CHAIN_IDS.BSC]: BNB_TOKEN_IMAGE_URL,
   [CHAIN_IDS.POLYGON]: POL_TOKEN_IMAGE_URL,
   [CHAIN_IDS.AVALANCHE]: AVAX_TOKEN_IMAGE_URL,

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

@@ -110,7 +110,9 @@ const AssetList = ({ onClickAsset, showTokensLinks }: AssetListProps) => {
         )}
       <AssetListControlBar showTokensLinks={shouldShowTokensLinks} />
       <TokenList
-        nativeToken={<NativeToken onClickAsset={onClickAsset} />}
+        // nativeToken is still needed to avoid breaking flask build's support for bitcoin
+        // TODO: refactor this to no longer be needed for non-evm chains
+        nativeToken={!isEvm && <NativeToken onClickAsset={onClickAsset} />}
         onTokenClick={(chainId: string, tokenAddress: string) => {
           onClickAsset(chainId, tokenAddress);
           trackEvent({

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

@@ -10,23 +10,14 @@ import {
 } from '../../../../../selectors/multichain';
 import { getPreferences } from '../../../../../selectors';
 import { TokenListItem } from '../../../../multichain';
-import { useIsOriginalNativeTokenSymbol } from '../../../../../hooks/useIsOriginalNativeTokenSymbol';
 import { AssetListProps } from '../asset-list';
 import { useNativeTokenBalance } from './use-native-token-balance';
 
 const NativeToken = ({ onClickAsset }: AssetListProps) => {
   const nativeCurrency = useSelector(getMultichainNativeCurrency);
   const isMainnet = useSelector(getMultichainIsMainnet);
-  const { chainId, ticker, type, rpcUrl } = useSelector(
-    getMultichainCurrentNetwork,
-  );
+  const { chainId } = useSelector(getMultichainCurrentNetwork);
   const { privacyMode } = useSelector(getPreferences);
-  const isOriginalNativeSymbol = useIsOriginalNativeTokenSymbol(
-    chainId,
-    ticker,
-    type,
-    rpcUrl,
-  );
   const balance = useSelector(getMultichainSelectedAccountCachedBalance);
   const balanceIsLoading = !balance;
 
@@ -50,7 +41,6 @@ const NativeToken = ({ onClickAsset }: AssetListProps) => {
       tokenSymbol={symbol}
       secondary={secondary}
       tokenImage={balanceIsLoading ? null : primaryTokenImage}
-      isOriginalTokenSymbol={isOriginalNativeSymbol}
       isNativeCurrency
       isStakeable={isStakeable}
       showPercentage

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

@@ -1,28 +1,35 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { setTokenNetworkFilter } from '../../../../../store/actions';
 import {
   getCurrentChainId,
   getCurrentNetwork,
   getPreferences,
-  getSelectedInternalAccount,
-  getShouldHideZeroBalanceTokens,
   getNetworkConfigurationsByChainId,
   getChainIdsToPoll,
+  getShouldHideZeroBalanceTokens,
+  getSelectedAccount,
 } from '../../../../../selectors';
 import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { SelectableListItem } from '../sort-control/sort-control';
 import { Text } from '../../../../component-library/text/text';
 import {
+  AlignItems,
   Display,
   JustifyContent,
   TextColor,
   TextVariant,
 } from '../../../../../helpers/constants/design-system';
 import { Box } from '../../../../component-library/box/box';
-import { AvatarNetwork } from '../../../../component-library';
+import {
+  AvatarNetwork,
+  AvatarNetworkSize,
+} from '../../../../component-library';
 import UserPreferencedCurrencyDisplay from '../../../user-preferenced-currency-display';
-import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../../shared/constants/network';
+import {
+  CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
+  TEST_CHAINS,
+} from '../../../../../../shared/constants/network';
 import { useGetFormattedTokensPerChain } from '../../../../../hooks/useGetFormattedTokensPerChain';
 import { useAccountTotalCrossChainFiatBalance } from '../../../../../hooks/useAccountTotalCrossChainFiatBalance';
 
@@ -34,9 +41,10 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const chainId = useSelector(getCurrentChainId);
-  const selectedAccount = useSelector(getSelectedInternalAccount);
   const currentNetwork = useSelector(getCurrentNetwork);
+  const selectedAccount = useSelector(getSelectedAccount);
   const allNetworks = useSelector(getNetworkConfigurationsByChainId);
+  const [chainsToShow, setChainsToShow] = useState<string[]>([]);
   const { tokenNetworkFilter } = useSelector(getPreferences);
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
@@ -67,21 +75,34 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
       formattedTokensForAllNetworks,
     );
 
-  // TODO: fetch balances across networks
-  // const multiNetworkAccountBalance = useMultichainAccountBalance()
-
   const handleFilter = (chainFilters: Record<string, boolean>) => {
     dispatch(setTokenNetworkFilter(chainFilters));
 
     // TODO Add metrics
     handleClose();
   };
 
+  useEffect(() => {
+    const testnetChains: string[] = TEST_CHAINS;
+    const mainnetChainIds = Object.keys(allNetworks).filter(
+      (chain) => !testnetChains.includes(chain),
+    );
+    setChainsToShow(mainnetChainIds);
+  }, []);
+
+  const allOpts: Record<string, boolean> = {};
+  Object.keys(allNetworks).forEach((chain) => {
+    allOpts[chain] = 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}
@@ -95,8 +116,8 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
               {t('allNetworks')}
             </Text>
             <Text
-              variant={TextVariant.bodyMdMedium}
-              color={TextColor.textDefault}
+              variant={TextVariant.bodySmMedium}
+              color={TextColor.textAlternative}
             >
               {/* TODO: Should query cross chain account balance */}
 
@@ -110,19 +131,20 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
               />
             </Text>
           </Box>
-          <Box display={Display.Flex}>
-            {Object.values(allNetworks)
+          <Box display={Display.Flex} alignItems={AlignItems.center}>
+            {chainsToShow
               .slice(0, 5) // only show a max of 5 icons overlapping
-              .map((network, index) => {
+              .map((chain, index) => {
                 const networkImageUrl =
                   CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP[
-                    network.chainId as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
+                    chain as keyof typeof CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP
                   ];
                 return (
                   <AvatarNetwork
-                    key={network.chainId}
+                    key={chainId}
                     name="All"
                     src={networkImageUrl ?? undefined}
+                    size={AvatarNetworkSize.Sm}
                     // overlap the icons
                     style={{
                       marginLeft: index === 0 ? 0 : '-20px',
@@ -135,12 +157,16 @@ const NetworkFilter = ({ handleClose }: SortControlProps) => {
         </Box>
       </SelectableListItem>
       <SelectableListItem
-        isSelected={tokenNetworkFilter[chainId]}
+        isSelected={
+          tokenNetworkFilter[chainId] &&
+          Object.keys(tokenNetworkFilter).length === 1
+        }
         onClick={() => handleFilter({ [chainId]: true })}
       >
         <Box
           display={Display.Flex}
           justifyContent={JustifyContent.spaceBetween}
+          alignItems={AlignItems.center}
         >
           <Box>
             <Text

ui/components/app/assets/nfts/nfts-items/nfts-items.js

@@ -279,7 +279,9 @@ export default function NftsItems({
                 if (isModal) {
                   return onSendNft(nft);
                 }
-                return history.push(`${ASSET_ROUTE}/${address}/${tokenId}`);
+                return history.push(
+                  `${ASSET_ROUTE}/${currentChain.chainId}/${address}/${tokenId}`,
+                );
               };
               return (
                 <Box