refactor: Cherry pick asset-list-control-bar updates (#28575)

## **Description**

Cherry picks design updates for `AssetListControlBar` introduced from
#28386 separately in
it's own PR to help minimize diff in main feature branch.

Also includes unit test and e2e updates impacted from these changes.

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

## **Related issues**

Fixes:

## **Manual testing steps**

Run with feature flag and without feature flag:

`yarn webpack --watch`
`PORTFOLIO_VIEW=1 yarn webpack --watch`

Validate that sort works, validate that import works, validate that
refresh list works.

## **Screenshots/Recordings**

Without feature flag:


https://github.com/user-attachments/assets/445d4fd1-93d1-4cee-bd7b-bcc36518d7ca

With feature flag (network filter not yet integrated)



https://github.com/user-attachments/assets/d1aa8812-9787-49b5-9696-39e56d82ed56

## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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.

---------

Co-authored-by: Jonathan Bursztyn <[email protected]>

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,

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"]',