feat: PortfolioView

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,

test/data/mock-state.json

@@ -55,6 +55,8 @@
     }
   },
   "metamask": {
+    "allTokens": {},
+    "tokenBalances": {},
     "use4ByteResolution": true,
     "ipfsGateway": "dweb.link",
     "dismissSeedBackUpReminder": false,
@@ -384,7 +386,8 @@
         "key": "tokenFiatAmount",
         "order": "dsc",
         "sortCallback": "stringNumeric"
-      }
+      },
+      "tokenNetworkFilter": {}
     },
     "ensResolutionsByAddress": {},
     "isAccountMenuOpen": false,

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

@@ -342,7 +342,6 @@
   },
   "TxController": {
     "methodData": "object",
-    "submitHistory": "object",
     "transactions": "object",
     "lastFetchedBlockNumbers": "object",
     "submitHistory": "object"

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

@@ -118,6 +118,7 @@
         "isRedesignedConfirmationsDeveloperEnabled": "boolean",
         "showConfirmationAdvancedDetails": false,
         "tokenSortConfig": "object",
+        "tokenNetworkFilter": {},
         "showMultiRpcModal": "boolean",
         "shouldShowAggregatedBalancePopover": "boolean",
         "tokenNetworkFilter": {}

test/e2e/tests/privacy-mode/privacy-mode.spec.js

@@ -18,7 +18,7 @@ describe('Privacy Mode', function () {
       async ({ driver }) => {
         async function checkForHeaderValue(value) {
           const balanceElement = await driver.findElement(
-            '[data-testid="eth-overview__primary-currency"] .currency-display-component__text',
+            '[data-testid="account-value-and-suffix"]',
           );
           const surveyText = await balanceElement.getText();
           assert.equal(
@@ -30,15 +30,15 @@ describe('Privacy Mode', function () {
 
         async function checkForTokenValue(value) {
           const balanceElement = await driver.findElement(
-            '[data-testid="multichain-token-list-item-secondary-value"]',
+            '[data-testid="multichain-token-list-item-value"]',
           );
           const surveyText = await balanceElement.getText();
           assert.equal(surveyText, value, `Token balance should be "${value}"`);
         }
 
         async function checkForPrivacy() {
           await checkForHeaderValue('••••••');
-          await checkForTokenValue('•••••••••');
+          await checkForTokenValue('••••••');
         }
 
         async function checkForNoPrivacy() {
@@ -48,7 +48,7 @@ describe('Privacy Mode', function () {
 
         async function togglePrivacy() {
           const balanceElement = await driver.findElement(
-            '[data-testid="eth-overview__primary-currency"] .currency-display-component__text',
+            '[data-testid="account-value-and-suffix"]',
           );
           const initialText = await balanceElement.getText();
 
@@ -81,7 +81,7 @@ describe('Privacy Mode', function () {
 
         async function togglePrivacy() {
           const balanceElement = await driver.findElement(
-            '[data-testid="eth-overview__primary-currency"] .currency-display-component__text',
+            '[data-testid="account-value-and-suffix"]',
           );
           const initialText = await balanceElement.getText();
 

test/e2e/tests/tokens/token-sort.spec.ts

@@ -66,10 +66,8 @@ describe('Token List', function () {
 
         assert.ok(tokenSymbolsBeforeSorting[0].includes('Ethereum'));
 
-        await await driver.clickElement(
-          '[data-testid="sort-by-popover-toggle"]',
-        );
-        await await driver.clickElement('[data-testid="sortByAlphabetically"]');
+        await driver.clickElement('[data-testid="sort-by-popover-toggle"]');
+        await driver.clickElement('[data-testid="sortByAlphabetically"]');
 
         await driver.delay(regularDelayMs);
         const tokenListAfterSortingAlphabetically = await driver.findElements(
@@ -85,12 +83,8 @@ describe('Token List', function () {
           tokenListSymbolsAfterSortingAlphabetically[0].includes('ABC'),
         );
 
-        await await driver.clickElement(
-          '[data-testid="sort-by-popover-toggle"]',
-        );
-        await await driver.clickElement(
-          '[data-testid="sortByDecliningBalance"]',
-        );
+        await driver.clickElement('[data-testid="sort-by-popover-toggle"]');
+        await driver.clickElement('[data-testid="sortByDecliningBalance"]');
 
         await driver.delay(regularDelayMs);
         const tokenListBeforeSortingByDecliningBalance =

test/jest/mock-store.js

@@ -139,6 +139,7 @@ export const createSwapsMockStore = () => {
       preferences: {
         showFiatInTestnets: true,
         smartTransactionsOptInStatus: true,
+        tokenNetworkFilter: {},
         showMultiRpcModal: false,
       },
       transactions: [

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

@@ -68,12 +68,13 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   }, [currentNetwork.chainId, TEST_CHAINS]);
 
   const allOpts: Record<string, boolean> = {};
-  Object.keys(allNetworks).forEach((chainId) => {
+  Object.keys(allNetworks || {}).forEach((chainId) => {
     allOpts[chainId] = true;
   });
 
   const allNetworksFilterShown =
-    Object.keys(tokenNetworkFilter).length !== Object.keys(allOpts).length;
+    Object.keys(tokenNetworkFilter || {}).length !==
+    Object.keys(allOpts || {}).length;
 
   useEffect(() => {
     if (isTestNetwork) {
@@ -86,7 +87,7 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
   // 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) {
+    if (Object.keys(tokenNetworkFilter || {}).length === 0) {
       dispatch(setTokenNetworkFilter(allOpts));
     }
   }, []);
@@ -162,7 +163,7 @@ const AssetListControlBar = ({ showTokensLinks }: AssetListControlBarProps) => {
       >
         {process.env.PORTFOLIO_VIEW && (
           <ButtonBase
-            data-testid="network-filter"
+            data-testid="sort-by-networks"
             variant={TextVariant.bodyMdMedium}
             className="asset-list-control-bar__button asset-list-control-bar__network_control"
             onClick={toggleNetworkFilterPopover}

ui/components/app/assets/asset-list/asset-list.ramps-card.test.js

@@ -35,6 +35,16 @@ const render = (
           [selectedInternalAccount.address]: { balance },
         },
       },
+      preferences: {
+        tokenNetworkFilter: {},
+        tokenSortConfig: {
+          key: 'token-sort-key',
+          order: 'dsc',
+          sortCallback: 'stringNumeric',
+        },
+      },
+      allTokens: {},
+      tokenBalances: {},
     },
   };
   const store = configureStore(state);

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