Feat: add optimism arbitrum goerli deprecation warning (#23071)

## **Description**

This PR adds a deprecation warning when user switches to Arbitrum goerli
or OP goerli testnetwork

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to home page
2. Click Add network
3. Click Add network Manually
4. Fill in the input fields with Arbitrum goerli or OP goerli testnet
RPC and chainId (or use
[chainList](https://chainlist.org/?chain=421613&search=arbitrum&testnets=true))
5. Switch to the entered network
6. You should see a deprecation warning on the home page

## **Screenshots/Recordings**

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

### **Before**


https://github.com/MetaMask/metamask-extension/assets/10994169/e1a5630e-d80e-41ae-8fc6-8b47c9351837


### **After**


https://github.com/MetaMask/metamask-extension/assets/10994169/5b463cc3-a3ef-4f68-a551-5abdb3c652eb


## **Pre-merge author checklist**

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

@@ -145,6 +145,7 @@ export const CHAIN_IDS = {
   GNOSIS: '0x64',
   ZKSYNC_ERA: '0x144',
   TEST_ETH: '0x539',
+  ARBITRUM_GOERLI: '0x66eed',
 } as const;
 
 const CHAINLIST_CHAIN_IDS_MAP = {
@@ -203,7 +204,12 @@ const CHAINLIST_CHAIN_IDS_MAP = {
 // To add a deprecation warning to a network, add it to the array
 // `DEPRECATED_NETWORKS` and as a new case to `getDeprecationWarningCopy() in
 // `ui/components/ui/deprecated-networks/deprecated-networks.js`.
-export const DEPRECATED_NETWORKS = [CHAIN_IDS.AURORA, CHAIN_IDS.GOERLI];
+export const DEPRECATED_NETWORKS = [
+  CHAIN_IDS.AURORA,
+  CHAIN_IDS.GOERLI,
+  CHAIN_IDS.ARBITRUM_GOERLI,
+  CHAIN_IDS.OPTIMISM_TESTNET,
+];
 
 /**
  * The largest possible chain ID we can handle.
@@ -848,6 +854,7 @@ export const BUYABLE_CHAINS_MAP: {
     | typeof CHAIN_IDS.SEPOLIA
     | typeof CHAIN_IDS.GNOSIS
     | typeof CHAIN_IDS.AURORA
+    | typeof CHAIN_IDS.ARBITRUM_GOERLI
   >]: BuyableChainSettings;
 } = {
   [CHAIN_IDS.MAINNET]: {

test/e2e/tests/deprecated-networks.spec.js

@@ -1,6 +1,12 @@
 const { strict: assert } = require('assert');
 const FixtureBuilder = require('../fixture-builder');
-const { withFixtures, unlockWallet } = require('../helpers');
+const {
+  withFixtures,
+  unlockWallet,
+  openDapp,
+  WINDOW_TITLES,
+} = require('../helpers');
+const { CHAIN_IDS } = require('../../../shared/constants/network');
 
 describe('Deprecated networks', function () {
   it('When selecting the Goerli test network, the users should see a warning message', async function () {
@@ -31,4 +37,176 @@ describe('Deprecated networks', function () {
       },
     );
   });
+
+  it('Should show deprecation warning when switching to Arbitrum goerli testnet', async function () {
+    const TEST_CHAIN_ID = CHAIN_IDS.ARBITRUM_GOERLI;
+    async function mockRPCURLAndChainId(mockServer) {
+      return [
+        await mockServer
+          .forPost('https://responsive-rpc.url/')
+          .thenCallback(() => ({
+            statusCode: 200,
+            json: {
+              id: '1694444405781',
+              jsonrpc: '2.0',
+              result: TEST_CHAIN_ID,
+            },
+          })),
+      ];
+    }
+
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPermissionControllerConnectedToTestDapp()
+          .withPreferencesController({ useSafeChainsListValidation: false })
+          .build(),
+        title: this.test.fullTitle(),
+        testSpecificMock: mockRPCURLAndChainId,
+      },
+      async ({ driver }) => {
+        await unlockWallet(driver);
+
+        await openDapp(driver);
+        await driver.executeScript(`
+        var params = [{
+          chainId: "${TEST_CHAIN_ID}",
+          chainName: "Arbitrum Goerli",
+          nativeCurrency: {
+            name: "",
+            symbol: "ETH",
+            decimals: 18
+          },
+          rpcUrls: ["https://responsive-rpc.url/"],
+          blockExplorerUrls: [ "http://localhost:8080/api/customRPC" ]
+        }]
+        window.ethereum.request({
+          method: 'wallet_addEthereumChain',
+          params
+        })
+      `);
+        await driver.waitUntilXWindowHandles(3);
+        const windowHandles = await driver.getAllWindowHandles();
+        const [extension] = windowHandles;
+
+        await driver.switchToWindowWithTitle(
+          WINDOW_TITLES.Dialog,
+          windowHandles,
+        );
+
+        await driver.clickElement({
+          tag: 'button',
+          text: 'Approve',
+        });
+
+        const switchNetworkBtn = await driver.findElement({
+          tag: 'button',
+          text: 'Switch network',
+        });
+
+        await switchNetworkBtn.click();
+
+        await driver.waitUntilXWindowHandles(2);
+        await driver.switchToWindow(extension);
+        const deprecationWarningText =
+          'Because of updates to the Ethereum system, the Goerli test network will be phased out soon.';
+        const isDeprecationWarningDisplayed = await driver.isElementPresent({
+          text: deprecationWarningText,
+        });
+
+        assert.equal(
+          isDeprecationWarningDisplayed,
+          true,
+          'Goerli deprecation warning is not displayed',
+        );
+      },
+    );
+  });
+
+  it('Should show deprecation warning when switching to Optimism goerli testnet', async function () {
+    const TEST_CHAIN_ID = CHAIN_IDS.OPTIMISM_TESTNET;
+    async function mockRPCURLAndChainId(mockServer) {
+      return [
+        await mockServer
+          .forPost('https://responsive-rpc.url/')
+          .thenCallback(() => ({
+            statusCode: 200,
+            json: {
+              id: '1694444405781',
+              jsonrpc: '2.0',
+              result: TEST_CHAIN_ID,
+            },
+          })),
+      ];
+    }
+
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withPermissionControllerConnectedToTestDapp()
+          .withPreferencesController({ useSafeChainsListValidation: false })
+          .build(),
+        title: this.test.fullTitle(),
+        testSpecificMock: mockRPCURLAndChainId,
+      },
+      async ({ driver }) => {
+        await unlockWallet(driver);
+
+        await openDapp(driver);
+        await driver.executeScript(`
+        var params = [{
+          chainId: "${TEST_CHAIN_ID}",
+          chainName: "Optimism Goerli",
+          nativeCurrency: {
+            name: "",
+            symbol: "ETH",
+            decimals: 18
+          },
+          rpcUrls: ["https://responsive-rpc.url/"],
+          blockExplorerUrls: [ "http://localhost:8080/api/customRPC" ]
+        }]
+        window.ethereum.request({
+          method: 'wallet_addEthereumChain',
+          params
+        })
+      `);
+        await driver.waitUntilXWindowHandles(3);
+        const windowHandles = await driver.getAllWindowHandles();
+        const [extension] = windowHandles;
+
+        await driver.switchToWindowWithTitle(
+          WINDOW_TITLES.Dialog,
+          windowHandles,
+        );
+
+        await driver.clickElement({
+          tag: 'button',
+          text: 'Approve',
+        });
+
+        const switchNetworkBtn = await driver.findElement({
+          tag: 'button',
+          text: 'Switch network',
+        });
+
+        await switchNetworkBtn.click();
+
+        await driver.waitUntilXWindowHandles(2);
+        await driver.switchToWindow(extension);
+        const deprecationWarningText =
+          'Because of updates to the Ethereum system, the Goerli test network will be phased out soon.';
+        const isDeprecationWarningDisplayed = await driver.isElementPresent({
+          text: deprecationWarningText,
+        });
+
+        assert.equal(
+          isDeprecationWarningDisplayed,
+          true,
+          'Goerli deprecation warning is not displayed',
+        );
+      },
+    );
+  });
 });

ui/components/ui/deprecated-networks/deprecated-networks.js

@@ -61,7 +61,7 @@ function getDeprecationWarningCopy(t, currentChainID) {
   if (currentChainID === CHAIN_IDS.AURORA) {
     bannerAlertDescription = t('deprecatedAuroraNetworkMsg');
     actionBtnLinkURL = 'https://mainnet.aurora.dev/';
-  } else if (currentChainID === CHAIN_IDS.GOERLI) {
+  } else if (DEPRECATED_NETWORKS.includes(currentChainID)) {
     bannerAlertDescription = t('deprecatedGoerliNtwrkMsg');
     actionBtnLinkURL =
       'https://github.com/eth-clients/goerli#goerli-goerlitzer-testnet';