chore: enable multiselect in asset-picker network modal

shared/constants/bridge.ts

@@ -1,4 +1,4 @@
-import { CHAIN_IDS } from './network';
+import { CHAIN_IDS, NETWORK_TO_NAME_MAP } from './network';
 
 // TODO read from feature flags
 export const ALLOWED_BRIDGE_CHAIN_IDS = [
@@ -31,3 +31,18 @@ export const BRIDGE_QUOTE_MAX_RETURN_DIFFERENCE_PERCENTAGE = 0.8; // if a quote
 
 export const BRIDGE_PREFERRED_GAS_ESTIMATE = 'medium';
 export const BRIDGE_DEFAULT_SLIPPAGE = 0.5;
+
+export const NETWORK_TO_SHORT_NETWORK_NAME_MAP: Record<
+  AllowedBridgeChainIds,
+  string
+> = {
+  [CHAIN_IDS.MAINNET]: 'Ethereum',
+  [CHAIN_IDS.LINEA_MAINNET]: 'Linea',
+  [CHAIN_IDS.POLYGON]: NETWORK_TO_NAME_MAP[CHAIN_IDS.POLYGON],
+  [CHAIN_IDS.AVALANCHE]: 'Avalanche',
+  [CHAIN_IDS.BSC]: NETWORK_TO_NAME_MAP[CHAIN_IDS.BSC],
+  [CHAIN_IDS.ARBITRUM]: NETWORK_TO_NAME_MAP[CHAIN_IDS.ARBITRUM],
+  [CHAIN_IDS.OPTIMISM]: NETWORK_TO_NAME_MAP[CHAIN_IDS.OPTIMISM],
+  [CHAIN_IDS.ZKSYNC_ERA]: 'ZkSync Era',
+  [CHAIN_IDS.BASE]: 'Base',
+};

test/data/mock-send-state.json

@@ -64,6 +64,11 @@
   },
   "metamask": {
     "accountsByChainId": {},
+    "tokenBalances": {
+      "0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc": {
+        "0x5": {}
+      }
+    },
     "ipfsGateway": "",
     "dismissSeedBackUpReminder": false,
     "usePhishDetect": true,

test/e2e/page-objects/pages/home/asset-list.ts

@@ -119,7 +119,7 @@ class AssetListPage {
    */
   async hideToken(tokenName: string): Promise<void> {
     console.log(`Hide token ${tokenName} on homepage`);
-    await this.driver.clickElement({ text: tokenName, tag: 'span' });
+    await this.driver.clickElement({ text: tokenName, tag: 'p' });
     await this.driver.clickElement(this.assetOptionsButton);
     await this.driver.clickElement(this.hideTokenButton);
     await this.driver.waitForSelector(this.hideTokenConfirmationModalTitle);

test/e2e/tests/dapp-interactions/block-explorer.spec.js

@@ -82,7 +82,7 @@ describe('Block Explorer', function () {
 
         await driver.clickElement({
           text: 'TST',
-          tag: 'span',
+          tag: 'p',
         });
 
         await driver.clickElement('[data-testid="asset-options__button"]');

test/e2e/tests/multichain/asset-picker-send.spec.ts

@@ -88,7 +88,7 @@ describe('AssetPickerSendFlow @no-mmi', function () {
         await searchInputField.sendKeys('CHZ');
 
         // check that CHZ is disabled
-        const [, tkn] = await driver.findElements(
+        const [tkn] = await driver.findElements(
           '[data-testid="multichain-token-list-button"]',
         );
 

test/e2e/tests/network/custom-rpc-history.spec.js

@@ -264,6 +264,7 @@ describe('Custom RPC history', function () {
         const customRpcs = await driver.findElements({
           text: 'Localhost 8545',
           tag: 'p',
+          css: '.multichain-network-list-item__tooltip',
         });
 
         // click Mainnet to dismiss network dropdown

test/e2e/tests/network/update-network.spec.ts

@@ -23,7 +23,7 @@ const selectors = {
   deleteButton: { text: 'Delete', tag: 'button' },
   cancelButton: { text: 'Cancel', tag: 'button' },
   saveButton: { text: 'Save', tag: 'button' },
-  updatedNetworkDropDown: { tag: 'span', text: 'Update Network' },
+  updatedNetworkDropDown: { tag: 'p', text: 'Update Network' },
   errorMessageInvalidUrl: {
     text: 'URLs require the appropriate HTTP/HTTPS prefix.',
   },

test/e2e/tests/responsive-ui/metamask-responsive-ui.spec.js

@@ -163,7 +163,7 @@ describe('MetaMask Responsive UI', function () {
 
           // Import Secret Recovery Phrase
           await driver.waitForSelector({
-            tag: 'span',
+            tag: 'p',
             text: 'Localhost 8545',
           });
           await driver.clickElement({

test/e2e/tests/tokens/add-multiple-tokens.spec.js

@@ -104,7 +104,7 @@ describe('Multiple ERC20 Watch Asset', function () {
 
         // Check all three tokens have been added to the token list.
         const addedTokens = await driver.findElements({
-          tag: 'span',
+          tag: 'p',
           text: 'TST',
         });
         assert.equal(addedTokens.length, 3);

test/e2e/tests/transaction/change-assets.spec.js

@@ -111,7 +111,7 @@ describe('Change assets', function () {
 
           // Click the Send button
           await driver.clickElement({
-            css: '[data-testid="multichain-token-list-button"] span',
+            css: '[data-testid="multichain-token-list-button"] p',
             text: 'TST',
           });
 
@@ -471,7 +471,7 @@ describe('Change assets', function () {
 
           // Click the Send button
           await driver.clickElement({
-            css: '[data-testid="multichain-token-list-button"] span',
+            css: '[data-testid="multichain-token-list-button"] p',
             text: 'TST',
           });
 

test/jest/mock-store.js

@@ -740,6 +740,113 @@ export const createBridgeMockStore = (
       },
       currencyRates: {
         ETH: { conversionRate: 2524.25 },
+        usd: { conversionRate: 1 },
+      },
+      marketData: {
+        '0x1': {
+          '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984': {
+            currency: 'usd',
+            price: 2.3,
+          },
+        },
+      },
+      allTokens: {
+        [CHAIN_IDS.MAINNET]: {
+          '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': [
+            {
+              address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
+              balance: 'a',
+              decimals: 6,
+            },
+            {
+              address: '0x514910771af9ca656af840dff83e8264ecf986ca',
+              balance: 'e',
+            },
+          ],
+          '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b': [
+            {
+              address: '0x6b3595068778dd592e39a122f4f5a5cf09c90fe2',
+              balance: 'e',
+            },
+          ],
+        },
+        [CHAIN_IDS.LINEA_MAINNET]: {
+          '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': [
+            {
+              address: '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984',
+              balance: 'e',
+            },
+          ],
+          '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b': [
+            {
+              address: '0x6b3595068778dd592e39a122f4f5a5cf09c90fe2',
+              balance: 'e',
+            },
+          ],
+        },
+      },
+      accountsByChainId: {
+        [CHAIN_IDS.MAINNET]: {
+          '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': {
+            address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+            balance: '0xa',
+          },
+          '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b': {
+            address: '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b',
+            balance: '0xe',
+          },
+        },
+        [CHAIN_IDS.LINEA_MAINNET]: {
+          '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': {
+            address: '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc',
+            balance: '0xe',
+          },
+          '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b': {
+            address: '0xec1adf982415d2ef5ec55899b9bfb8bc0f29251b',
+            balance: '0xe',
+          },
+        },
+      },
+      tokensChainsCache: {
+        [CHAIN_IDS.MAINNET]: {
+          timestamp: 111111,
+          data: [
+            {
+              address: '0x514910771af9ca656af840dff83e8264ecf986ca',
+              symbol: 'LINK',
+              decimals: 18,
+            },
+            {
+              address: '0xc00e94cb662c3520282e6f5717214004a7f26888',
+              symbol: 'COMP',
+              decimals: 18,
+            },
+          ],
+        },
+        [CHAIN_IDS.LINEA_MAINNET]: {
+          timestamp: 111111,
+          data: {
+            '0x514910771af9ca656af840dff83e8264ecf986ca': {
+              address: '0x514910771af9ca656af840dff83e8264ecf986ca',
+              symbol: 'LINK',
+              decimals: 18,
+            },
+            '0xc00e94cb662c3520282e6f5717214004a7f26888': {
+              address: '0xc00e94cb662c3520282e6f5717214004a7f26888',
+              symbol: 'COMP',
+              decimals: 18,
+            },
+          },
+        },
+      },
+      tokenBalances: {
+        '0x0dcd5d886577d5081b0c52e242ef29e70be3e7bc': {
+          '0x5': {},
+          '0x1': {
+            '0x514910771af9ca656af840dff83e8264ecf986ca': '0x1',
+            '0x1f9840a85d5af5bf1d1762f925bdaddc4201f984': '0x738',
+          },
+        },
       },
       ...metamaskStateOverrides,
       bridgeState: {

ui/components/app/assets/token-cell/__snapshots__/token-cell.test.tsx.snap

@@ -3,13 +3,14 @@
 exports[`Token Cell should match snapshot 1`] = `
 <div>
   <div
-    class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
+    class="mm-box multichain-token-list-item mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--width-full mm-box--height-full"
     data-testid="multichain-token-list-item"
   >
     <a
-      class="mm-box multichain-token-list-item__container-cell multichain-token-list-item__container-cell--clickable mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row"
+      class="mm-box multichain-token-list-item__container-cell multichain-token-list-item__container-cell--clickable mm-box--padding-top-2 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--display-flex mm-box--flex-direction-row mm-box--width-full"
       data-testid="multichain-token-list-button"
       href="#"
+      style="height: 62px;"
     >
       <div
         class="mm-box mm-badge-wrapper multichain-token-list-item__badge mm-box--margin-right-4 mm-box--display-inline-block"
@@ -38,51 +39,44 @@ exports[`Token Cell should match snapshot 1`] = `
         </div>
       </div>
       <div
-        class="mm-box multichain-token-list-item__container-cell--text-container mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
+        class="mm-box multichain-token-list-item__container-cell--text-container mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-center mm-box--width-full"
         style="flex-grow: 1; overflow: hidden;"
       >
         <div
-          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
+          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
         >
-          <div
-            class="mm-box mm-box--display-inline-block mm-box--width-1/3"
+          <p
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
           >
-            <span
-              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--ellipsis mm-box--color-text-default"
-            >
-              TEST
-            </span>
-            <div
-              class="mm-box mm-box--display-flex"
-            >
-              <p
-                class="mm-box mm-text mm-text--body-sm-medium mm-text--ellipsis mm-box--color-text-default"
-                data-testid="token-increase-decrease-percentage-0xAnotherToken"
-              />
-            </div>
-          </div>
+            TEST
+          </p>
+          <p
+            class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--color-text-default"
+            data-testid="multichain-token-list-item-secondary-value"
+          >
+            $5.00
+          </p>
+        </div>
+        <div
+          class="mm-box mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
+        >
           <div
-            class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--align-items-flex-end mm-box--width-2/3"
+            class="mm-box mm-box--display-flex"
           >
             <p
-              class="mm-box mm-text mm-text--body-md mm-text--font-weight-medium mm-text--text-align-end mm-box--width-2/3 mm-box--color-text-default"
-              data-testid="multichain-token-list-item-secondary-value"
-            >
-              $5.00
-            </p>
-            <p
-              class="mm-box mm-text mm-text--body-sm-medium mm-text--text-align-end mm-box--color-text-alternative"
-              data-testid="multichain-token-list-item-value"
-            >
-              5
-
-              TEST
-            </p>
+              class="mm-box mm-text mm-text--body-sm-medium mm-text--ellipsis mm-box--color-text-default"
+              data-testid="token-increase-decrease-percentage-0xAnotherToken"
+            />
           </div>
+          <p
+            class="mm-box mm-text mm-text--body-sm-medium mm-text--text-align-end mm-box--color-text-alternative"
+            data-testid="multichain-token-list-item-value"
+          >
+            5
+
+            TEST
+          </p>
         </div>
-        <div
-          class="mm-box mm-box--display-flex mm-box--gap-1 mm-box--flex-direction-row mm-box--justify-content-space-between"
-        />
       </div>
     </a>
   </div>