fix: Network filter must respect PORTFOLIO_VIEW feature flag (#28626)

## **Description**

When feature flag is omitted, we should not show tokens across all
chains, only the `currentNetwork.chainId`

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28626?quickstart=1)

## **Related issues**

Fixes: Multichain tokens being rendered when `PORTFOLIO_VIEW` feature is
off (unexpected)

## **Manual testing steps**

With feature flag off:

`yarn webpack --watch`

When running the app, the tokens displayed should always belong to the
globally selected network.

With feature flag on:

`PORTFOLIO_VIEW=1 yarn webpack --watch`

When running the app, you should see all tokens from all added networks,
when "All Networks" filter is selected. When "Current filter" is
selected, you should see only tokens for the globally selected network.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

![Screenshot 2024-11-21 at 8 18
08 PM](https://github.com/user-attachments/assets/91305b19-8614-4bf1-a5c4-ec6a37633369)

### **After**


https://github.com/user-attachments/assets/40fc641b-e8df-4eb8-beb9-9d907fd9888b

## **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.

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

@@ -238,10 +238,6 @@
       "redesignedTransactionsEnabled": "boolean",
       "tokenSortConfig": "object",
       "tokenNetworkFilter": {
-        "0x1": "boolean",
-        "0xaa36a7": "boolean",
-        "0xe705": "boolean",
-        "0xe708": "boolean",
         "0x539": "boolean"
       },
       "shouldShowAggregatedBalancePopover": "boolean"

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

@@ -39,10 +39,6 @@
       "redesignedTransactionsEnabled": "boolean",
       "tokenSortConfig": "object",
       "tokenNetworkFilter": {
-        "0x1": "boolean",
-        "0xaa36a7": "boolean",
-        "0xe705": "boolean",
-        "0xe708": "boolean",
         "0x539": "boolean"
       },
       "shouldShowAggregatedBalancePopover": "boolean"

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

@@ -120,8 +120,7 @@
         "tokenSortConfig": "object",
         "tokenNetworkFilter": {},
         "showMultiRpcModal": "boolean",
-        "shouldShowAggregatedBalancePopover": "boolean",
-        "tokenNetworkFilter": {}
+        "shouldShowAggregatedBalancePopover": "boolean"
       },
       "selectedAddress": "string",
       "theme": "light",

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

@@ -87,8 +87,13 @@ 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 (
+      process.env.PORTFOLIO_VIEW &&
+      Object.keys(tokenNetworkFilter || {}).length === 0
+    ) {
       dispatch(setTokenNetworkFilter(allOpts));
+    } else {
+      dispatch(setTokenNetworkFilter({ [currentNetwork.chainId]: true }));
     }
   }, []);
 

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

@@ -112,12 +112,14 @@ export default function TokenList({
 
   // Ensure newly added networks are included in the tokenNetworkFilter
   useEffect(() => {
-    const allNetworkFilters = Object.fromEntries(
-      Object.keys(allNetworks).map((chainId) => [chainId, true]),
-    );
-
-    if (Object.keys(tokenNetworkFilter).length > 1) {
-      dispatch(setTokenNetworkFilter(allNetworkFilters));
+    if (process.env.PORTFOLIO_VIEW) {
+      const allNetworkFilters = Object.fromEntries(
+        Object.keys(allNetworks).map((chainId) => [chainId, true]),
+      );
+
+      if (Object.keys(tokenNetworkFilter).length > 1) {
+        dispatch(setTokenNetworkFilter(allNetworkFilters));
+      }
     }
   }, [Object.keys(allNetworks).length]);
 

ui/components/multichain/network-list-menu/network-list-menu.tsx

@@ -292,7 +292,7 @@ export const NetworkListMenu = ({ onClose }: { onClose: () => void }) => {
           // however, if I am already filtered on "Current Network", we'll want to filter by the selected network when the network changes
           if (Object.keys(tokenNetworkFilter).length <= 1) {
             dispatch(setTokenNetworkFilter({ [network.chainId]: true }));
-          } else {
+          } else if (process.env.PORTFOLIO_VIEW) {
             dispatch(setTokenNetworkFilter(allOpts));
           }