Support token detection on Arbitrum, Optimism, Base, and zkSync (#21841)

## **Description**

Supports token detection on Arbitrum, Optimism, Base, and zkSync

Accompanying PRs to core:
- MetaMask/core#2035
- MetaMask/core#3584

## **Related issues**

- #17697
- #16496

## **Manual testing steps**

1. Load an account on arbitrum, optimism, base, or zkSync that contains
ERC20 tokens
2. Enable token autodetection in settings
3. It should detect tokens to be added ("N" new tokens found in this
account")
4. Click "Import tokens" to manually import
5. There should be a search box that suggests tokens as you type their
symbols

## **Screenshots/Recordings**

### **Before**


https://github.com/MetaMask/metamask-extension/assets/3500406/0e81e4a7-331f-4712-9481-317411b158c3

### **After**


https://github.com/MetaMask/metamask-extension/assets/3500406/7721eab9-de55-49a6-a71e-f5124ef6dbc5

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've clearly explained what problem this PR is solving and how it
is solved.
- [x] I've linked related issues
- [x] I've included manual testing steps
- [x] I've included screenshots/recordings if applicable
- [ ] I’ve included tests if applicable
- [ ] 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.
- [x] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [x] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

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

shared/modules/network.utils.ts

@@ -43,6 +43,10 @@ export function isTokenDetectionEnabledForNetwork(chainId: string | undefined) {
     case CHAIN_IDS.AVALANCHE:
     case CHAIN_IDS.LINEA_GOERLI:
     case CHAIN_IDS.LINEA_MAINNET:
+    case CHAIN_IDS.ARBITRUM:
+    case CHAIN_IDS.OPTIMISM:
+    case CHAIN_IDS.BASE:
+    case CHAIN_IDS.ZKSYNC_ERA:
       return true;
     default:
       return false;

ui/selectors/selectors.js

@@ -32,6 +32,10 @@ import {
   LINEA_MAINNET_DISPLAY_NAME,
   LINEA_MAINNET_TOKEN_IMAGE_URL,
   CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP,
+  ARBITRUM_DISPLAY_NAME,
+  OPTIMISM_DISPLAY_NAME,
+  BASE_DISPLAY_NAME,
+  ZK_SYNC_ERA_DISPLAY_NAME,
   CHAIN_ID_TOKEN_IMAGE_MAP,
 } from '../../shared/constants/network';
 import {
@@ -1628,13 +1632,22 @@ export const getTokenDetectionSupportNetworkByChainId = (state) => {
       return LINEA_GOERLI_DISPLAY_NAME;
     case CHAIN_IDS.LINEA_MAINNET:
       return LINEA_MAINNET_DISPLAY_NAME;
+    case CHAIN_IDS.ARBITRUM:
+      return ARBITRUM_DISPLAY_NAME;
+    case CHAIN_IDS.OPTIMISM:
+      return OPTIMISM_DISPLAY_NAME;
+    case CHAIN_IDS.BASE:
+      return BASE_DISPLAY_NAME;
+    case CHAIN_IDS.ZKSYNC_ERA:
+      return ZK_SYNC_ERA_DISPLAY_NAME;
     default:
       return '';
   }
 };
 /**
  * To check if the chainId supports token detection,
- * currently it returns true for Ethereum Mainnet, BSC, Polygon, Avalanche, and Linea
+ * currently it returns true for Ethereum Mainnet, BSC, Polygon,
+ * Avalanche, Linea, Arbitrum, Optimism, Base, and zkSync
  *
  * @param {*} state
  * @returns Boolean
@@ -1648,6 +1661,10 @@ export function getIsDynamicTokenListAvailable(state) {
     CHAIN_IDS.AVALANCHE,
     CHAIN_IDS.LINEA_GOERLI,
     CHAIN_IDS.LINEA_MAINNET,
+    CHAIN_IDS.ARBITRUM,
+    CHAIN_IDS.OPTIMISM,
+    CHAIN_IDS.BASE,
+    CHAIN_IDS.ZKSYNC_ERA,
   ].includes(chainId);
 }