chore: Rebase with develop

Author: gambinish

.storybook/test-data.js

@@ -487,6 +487,32 @@ const state = {
         },
       },
     },
+    allTokens: {
+      '0x1': {
+        '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4': [
+          {
+            address: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+            aggregators: [],
+            decimals: 6,
+            symbol: 'USDC',
+          },
+          {
+            address: '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e',
+            aggregators: [],
+            decimals: 18,
+            symbol: 'YFI',
+          },
+        ],
+      },
+    },
+    tokenBalances: {
+      '0x64a845a5b02460acf8a3d84503b0d68d028b4bb4': {
+        '0x1': {
+          '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48': '0xbdbd',
+          '0x0bc529c00C6401aEF6D220BE8C6Ea1667F6Ad93e': '0x501b4176a64d6',
+        },
+      },
+    },
     tokens: [
       {
         address: '0xaD6D458402F60fD3Bd25163575031ACDce07538A',
@@ -682,6 +708,7 @@ const state = {
         order: 'dsc',
         sortCallback: 'stringNumeric',
       },
+      tokenNetworkFilter: {},
     },
     incomingTransactionsPreferences: {
       [CHAIN_IDS.MAINNET]: true,

app/scripts/constants/sentry-state.ts

@@ -245,6 +245,7 @@ export const SENTRY_BACKGROUND_STATE = {
       showFiatInTestnets: true,
       showTestNetworks: true,
       smartTransactionsOptInStatus: true,
+      tokenNetworkFilter: {},
       showNativeTokenAsMainBalance: true,
       petnamesEnabled: true,
       showConfirmationAdvancedDetails: true,

app/scripts/metamask-controller.js

@@ -3209,7 +3209,7 @@ export default class MetamaskController extends EventEmitter {
     const { completedOnboarding } = this.onboardingController.state;
 
     let networkVersion = this.deprecatedNetworkVersions[networkClientId];
-    if (!networkVersion && completedOnboarding) {
+    if (networkVersion === undefined && completedOnboarding) {
       const ethQuery = new EthQuery(networkClient.provider);
       networkVersion = await new Promise((resolve) => {
         ethQuery.sendAsync({ method: 'net_version' }, (error, result) => {

shared/modules/network.utils.test.ts

@@ -3,6 +3,7 @@ import {
   isSafeChainId,
   isPrefixedFormattedHexString,
   isTokenDetectionEnabledForNetwork,
+  convertNetworkId,
 } from './network.utils';
 
 describe('network utils', () => {
@@ -83,4 +84,52 @@ describe('network utils', () => {
       expect(isTokenDetectionEnabledForNetwork(undefined)).toBe(false);
     });
   });
+
+  describe('convertNetworkId', () => {
+    it('returns decimal strings for postive integer number values', () => {
+      expect(convertNetworkId(0)).toStrictEqual('0');
+      expect(convertNetworkId(123)).toStrictEqual('123');
+      expect(convertNetworkId(1337)).toStrictEqual('1337');
+    });
+
+    it('returns null for negative numbers', () => {
+      expect(convertNetworkId(-1)).toStrictEqual(null);
+    });
+
+    it('returns null for non integer numbers', () => {
+      expect(convertNetworkId(0.1)).toStrictEqual(null);
+      expect(convertNetworkId(1.1)).toStrictEqual(null);
+    });
+
+    it('returns null for NaN', () => {
+      expect(convertNetworkId(Number.NaN)).toStrictEqual(null);
+    });
+
+    it('returns decimal strings for strict valid hex values', () => {
+      expect(convertNetworkId('0x0')).toStrictEqual('0');
+      expect(convertNetworkId('0x1')).toStrictEqual('1');
+      expect(convertNetworkId('0x539')).toStrictEqual('1337');
+    });
+
+    it('returns null for invalid hex values', () => {
+      expect(convertNetworkId('0xG')).toStrictEqual(null);
+      expect(convertNetworkId('0x@')).toStrictEqual(null);
+      expect(convertNetworkId('0xx1')).toStrictEqual(null);
+    });
+
+    it('returns the value as is if already a postive decimal string', () => {
+      expect(convertNetworkId('0')).toStrictEqual('0');
+      expect(convertNetworkId('1')).toStrictEqual('1');
+      expect(convertNetworkId('1337')).toStrictEqual('1337');
+    });
+
+    it('returns null for negative number strings', () => {
+      expect(convertNetworkId('-1')).toStrictEqual(null);
+    });
+
+    it('returns null for non integer number strings', () => {
+      expect(convertNetworkId('0.1')).toStrictEqual(null);
+      expect(convertNetworkId('1.1')).toStrictEqual(null);
+    });
+  });
 });

shared/modules/network.utils.ts

@@ -78,16 +78,16 @@ function isSafeInteger(value: unknown): value is number {
  * as either a number, a decimal string, or a 0x-prefixed hex string.
  *
  * @param value - The network ID to convert, in an unknown format.
- * @returns A valid network ID (as a decimal string)
- * @throws If the given value cannot be safely parsed.
+ * @returns A valid network ID (as a decimal string) or null if
+ * the given value cannot be parsed.
  */
-export function convertNetworkId(value: unknown): string {
-  if (typeof value === 'number' && !Number.isNaN(value)) {
+export function convertNetworkId(value: unknown): string | null {
+  if (typeof value === 'number' && Number.isInteger(value) && value >= 0) {
     return `${value}`;
   } else if (isStrictHexString(value)) {
     return `${convertHexToDecimal(value)}`;
   } else if (typeof value === 'string' && /^\d+$/u.test(value)) {
     return value;
   }
-  throw new Error(`Cannot parse as a valid network ID: '${value}'`);
+  return null;
 }

test/e2e/fixture-builder.js

@@ -89,6 +89,7 @@ function onboardingFixture() {
             order: 'dsc',
             sortCallback: 'stringNumeric',
           },
+          tokenNetworkFilter: {},
           shouldShowAggregatedBalancePopover: true,
         },
         useExternalServices: true,
@@ -126,6 +127,7 @@ function onboardingFixture() {
         },
         showTestNetworks: false,
         smartTransactionsOptInStatus: true,
+        tokenNetworkFilter: {},
       },
       QueuedRequestController: {
         queuedRequestCount: 0,
@@ -664,6 +666,7 @@ class FixtureBuilder {
     return this.withPreferencesController({
       preferences: {
         smartTransactionsOptInStatus: true,
+        tokenNetworkFilter: {},
       },
     });
   }

test/e2e/tests/confirmations/transactions/erc20-approve-redesign.spec.ts

@@ -118,6 +118,7 @@ async function mocks(server: MockttpServer) {
 export async function importTST(driver: Driver) {
   await driver.switchToWindowWithTitle(WINDOW_TITLES.ExtensionInFullScreenView);
   await driver.clickElement('[data-testid="import-token-button"]');
+  await driver.clickElement('[data-testid="importTokens"]');
 
   await driver.waitForSelector({
     css: '.import-tokens-modal__button-tab',

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

@@ -237,7 +237,13 @@
       "redesignedConfirmationsEnabled": true,
       "redesignedTransactionsEnabled": "boolean",
       "tokenSortConfig": "object",
-      "tokenNetworkFilter": "object",
+      "tokenNetworkFilter": {
+        "0x1": "boolean",
+        "0xaa36a7": "boolean",
+        "0xe705": "boolean",
+        "0xe708": "boolean",
+        "0x539": "boolean"
+      },
       "shouldShowAggregatedBalancePopover": "boolean"
     },
     "ipfsGateway": "string",

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

@@ -38,7 +38,13 @@
       "redesignedConfirmationsEnabled": true,
       "redesignedTransactionsEnabled": "boolean",
       "tokenSortConfig": "object",
-      "tokenNetworkFilter": "object",
+      "tokenNetworkFilter": {
+        "0x1": "boolean",
+        "0xaa36a7": "boolean",
+        "0xe705": "boolean",
+        "0xe708": "boolean",
+        "0x539": "boolean"
+      },
       "shouldShowAggregatedBalancePopover": "boolean"
     },
     "firstTimeFlowType": "import",

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

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

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

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

test/e2e/tests/privacy/basic-functionality.spec.js

@@ -102,7 +102,8 @@ describe('MetaMask onboarding @no-mmi', function () {
 
         // Wait until network is fully switched and refresh tokens before asserting to mitigate flakiness
         await driver.assertElementNotPresent('.loading-overlay');
-        await driver.clickElement('[data-testid="refresh-list-button"]');
+        await driver.clickElement(`[data-testid="import-token-button"]`);
+        await driver.clickElement('[data-testid="refreshList"]');
 
         for (let i = 0; i < mockedEndpoints.length; i += 1) {
           const requests = await mockedEndpoints[i].getSeenRequests();
@@ -157,7 +158,8 @@ describe('MetaMask onboarding @no-mmi', function () {
 
         // Wait until network is fully switched and refresh tokens before asserting to mitigate flakiness
         await driver.assertElementNotPresent('.loading-overlay');
-        await driver.clickElement('[data-testid="refresh-list-button"]');
+        await driver.clickElement(`[data-testid="import-token-button"]`);
+        await driver.clickElement('[data-testid="refreshList"]');
         // intended delay to allow for network requests to complete
         await driver.delay(1000);
         for (let i = 0; i < mockedEndpoints.length; i += 1) {

test/e2e/tests/tokens/add-hide-token.spec.js

@@ -130,6 +130,7 @@ describe('Add existing token using search', function () {
         await unlockWallet(driver);
 
         await driver.clickElement(`[data-testid="import-token-button"]`);
+        await driver.clickElement(`[data-testid="importTokens"]`);
         await driver.fill('input[placeholder="Search tokens"]', 'BAT');
         await driver.clickElement({
           text: 'BAT',

test/e2e/tests/tokens/custom-token-add-approve.spec.js

@@ -36,6 +36,7 @@ describe('Create token, approve token and approve token without gas', function (
         await clickNestedButton(driver, 'Tokens');
 
         await driver.clickElement(`[data-testid="import-token-button"]`);
+        await driver.clickElement(`[data-testid="importTokens"]`);
         await clickNestedButton(driver, 'Custom token');
         await driver.fill(
           '[data-testid="import-tokens-modal-custom-address"]',

test/e2e/tests/tokens/import-tokens.spec.js

@@ -69,6 +69,7 @@ describe('Import flow', function () {
         await driver.assertElementNotPresent('.loading-overlay');
 
         await driver.clickElement('[data-testid="import-token-button"]');
+        await driver.clickElement('[data-testid="importTokens"]');
 
         await driver.fill('input[placeholder="Search tokens"]', 'cha');
 

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

@@ -28,6 +28,7 @@ describe('Token Details', function () {
 
   const importToken = async (driver: Driver) => {
     await driver.clickElement(`[data-testid="import-token-button"]`);
+    await driver.clickElement(`[data-testid="importTokens"]`);
     await clickNestedButton(driver, 'Custom token');
     await driver.fill(
       '[data-testid="import-tokens-modal-custom-address"]',

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

@@ -28,6 +28,7 @@ describe('Token List', function () {
 
   const importToken = async (driver: Driver) => {
     await driver.clickElement(`[data-testid="import-token-button"]`);
+    await driver.clickElement(`[data-testid="importTokens"]`);
     await clickNestedButton(driver, 'Custom token');
     await driver.fill(
       '[data-testid="import-tokens-modal-custom-address"]',

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

@@ -26,6 +26,7 @@ describe('Token List', function () {
 
   const importToken = async (driver: Driver) => {
     await driver.clickElement(`[data-testid="import-token-button"]`);
+    await driver.clickElement(`[data-testid="importTokens"]`);
     await clickNestedButton(driver, 'Custom token');
     await driver.fill(
       '[data-testid="import-tokens-modal-custom-address"]',

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

@@ -10,7 +10,6 @@
     justify-content: space-between;
     width: auto;
     min-width: auto;
-    max-width: none;
     border-radius: 8px;
     padding: 0 8px !important;
     gap: 5px;

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

@@ -1,10 +1,13 @@
 import React from 'react';
 import { screen, act, waitFor } from '@testing-library/react';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
 import { renderWithProvider } from '../../../../../test/jest';
-import configureStore, { MetaMaskReduxState } from '../../../../store/store';
+import { MetaMaskReduxState } from '../../../../store/store';
 import mockState from '../../../../../test/data/mock-state.json';
 import { CHAIN_IDS } from '../../../../../shared/constants/network';
 import { useIsOriginalNativeTokenSymbol } from '../../../../hooks/useIsOriginalNativeTokenSymbol';
+import useMultiPolling from '../../../../hooks/useMultiPolling';
 import { getTokenSymbol } from '../../../../store/actions';
 import { getSelectedInternalAccountFromMockState } from '../../../../../test/jest/mocks';
 import { mockNetworkState } from '../../../../../test/stub/networks';
@@ -64,11 +67,19 @@ jest.mock('../../../../hooks/useIsOriginalNativeTokenSymbol', () => {
 jest.mock('../../../../store/actions', () => {
   return {
     getTokenSymbol: jest.fn(),
+    setTokenNetworkFilter: jest.fn(() => ({
+      type: 'TOKEN_NETWORK_FILTER',
+    })),
     tokenBalancesStartPolling: jest.fn().mockResolvedValue('pollingToken'),
     tokenBalancesStopPollingByPollingToken: jest.fn(),
   };
 });
 
+jest.mock('../../../../hooks/useMultiPolling', () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
 const mockSelectedInternalAccount = getSelectedInternalAccountFromMockState(
   mockState as unknown as MetaMaskReduxState,
 );
@@ -103,14 +114,30 @@ const render = (balance = ETH_BALANCE, chainId = CHAIN_IDS.MAINNET) => {
       },
     },
   };
-  const store = configureStore(state);
+  const store = configureMockStore([thunk])(state);
   return renderWithProvider(
     <AssetList onClickAsset={() => undefined} showTokensLinks />,
     store,
   );
 };
 
 describe('AssetList', () => {
+  (useMultiPolling as jest.Mock).mockClear();
+
+  // Mock implementation for useMultiPolling
+  (useMultiPolling as jest.Mock).mockImplementation(({ input }) => {
+    // Mock startPolling and stopPollingByPollingToken for each input
+    const startPolling = jest.fn().mockResolvedValue('mockPollingToken');
+    const stopPollingByPollingToken = jest.fn();
+
+    input.forEach((inputItem: string) => {
+      const key = JSON.stringify(inputItem);
+      // Simulate returning a unique token for each input
+      startPolling.mockResolvedValueOnce(`mockToken-${key}`);
+    });
+
+    return { startPolling, stopPollingByPollingToken };
+  });
   (useIsOriginalNativeTokenSymbol as jest.Mock).mockReturnValue(true);
 
   (getTokenSymbol as jest.Mock).mockImplementation(async (address) => {
@@ -126,13 +153,14 @@ describe('AssetList', () => {
     return null;
   });
 
-  it('renders AssetList component and shows Refresh List text', async () => {
+  it('renders AssetList component and shows AssetList control bar', async () => {
     await act(async () => {
       render();
     });
 
     await waitFor(() => {
-      expect(screen.getByText('Refresh list')).toBeInTheDocument();
+      expect(screen.getByTestId('sort-by-popover-toggle')).toBeInTheDocument();
+      expect(screen.getByTestId('import-token-button')).toBeInTheDocument();
     });
   });
 });