feat: updated delete networks flow (#43499)

This PR is to:
1. Change the text "delete" to disable for enabled networks and do not
show modal for these networks
2. For Custom, networks show the text "delete" and on Click show the
confirmation flow
3. Delete modal UI will be updated in a different PR

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
4. What is the improvement/solution?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: changed delete code for networks

## **Related issues**

Fixes:

## **Manual testing steps**

1. Run extension
2. Go to Manage Networks flow in global menu
3. Click kebab menu for enabled networks, check text is disable for
enabled networks and on click it does not show delete confirmation modal
for these networks
5. For Custom, networks show the text "delete" and on Click show the
confirmation flow

## **Screenshots/Recordings**

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

### **Before**

<!-- [screenshots/recordings] -->

### **After**



https://github.com/user-attachments/assets/e27f8ba9-7d11-4fa6-9e71-1512388a9d4c




https://github.com/user-attachments/assets/d6da5849-ba53-4dc6-a66e-9263ce0ef1d8



## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] 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/main/.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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes when networks are removed without confirmation (featured
defaults), which affects active-network edge cases; mainnet remains
protected but mistaken disable could surprise users.
> 
> **Overview**
> Network list menus now distinguish **featured default** chains from
**custom** ones: defaults (except Ethereum mainnet) show **Disable**,
call `removeNetwork` immediately, and skip the confirmation modal;
custom EVM networks still show **Delete** and open
`CONFIRM_DELETE_NETWORK`.
> 
> Logic is centralized via `isDisableableDefaultNetwork` and shared
through `useNetworkItemCallbacks` / `network-list-menu`, with a
`deleteMenuLabel` prop on list items and menus. A new **disable** locale
string was added.
> 
> The confirm-delete modal was rebuilt on
`@metamask/design-system-react` (danger icon,
`data-testid="confirm-delete-network-modal-delete-button"`). E2E helpers
add `disableNetwork` and target the new confirm button; unit tests cover
disable vs delete behavior.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
5afc20d. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: NidhiKJha

app/_locales/en/messages.json

@@ -10,10 +10,8 @@ class SelectNetwork {
 
   private readonly closeButton = '[data-testid="settings-header-back-button"]';
 
-  private readonly confirmDeleteNetworkButton = {
-    text: 'Delete',
-    tag: 'button',
-  };
+  private readonly confirmDeleteNetworkButton =
+    '[data-testid="confirm-delete-network-modal-delete-button"]';
 
   private readonly confirmDeleteNetworkModal = {
     testId: 'confirm-delete-network-modal',
@@ -121,7 +119,22 @@ class SelectNetwork {
   }
 
   /**
-   * Delete a network from the network list.
+   * Disable a featured default network from the network list.
+   * Default networks are removed immediately without a confirmation modal.
+   *
+   * @param chainId - The chain ID of the network to disable.
+   */
+  async disableNetwork(chainId: string): Promise<void> {
+    console.log(`Disable network ${chainId} from network list`);
+    await this.openNetworkListOptions(chainId);
+    await this.driver.clickElement(this.deleteNetworkButton);
+    await this.driver.assertElementNotPresent(this.confirmDeleteNetworkModal, {
+      waitAtLeastGuard: 200,
+    });
+  }
+
+  /**
+   * Delete a custom network from the network list.
    *
    * @param chainId - The chain ID of the network to delete.
    */

app/_locales/en_GB/messages.json

@@ -52,10 +52,8 @@ class NetworkManager {
 
   private readonly networkManagerToggle = '[data-testid="sort-by-networks"]';
 
-  private readonly networkPopupDeleteButton = {
-    text: 'Delete',
-    tag: 'button',
-  };
+  private readonly networkPopupDeleteButton =
+    '[data-testid="confirm-delete-network-modal-delete-button"]';
 
   private readonly selectedNetworkListItem = (selector: string) =>
     `:is(${selector}.multichain-network-list-item--selected, ${selector} .multichain-network-list-item--selected)`;

test/e2e/page-objects/pages/dialog/select-network.ts

@@ -96,7 +96,7 @@ describe('Popular Networks', function (this: Suite) {
     );
   });
 
-  it('delete the Arbitrum network', async function () {
+  it('disable the Arbitrum network', async function () {
     await withFixtures(
       {
         fixtures: new FixtureBuilderV2().build(),
@@ -110,7 +110,7 @@ describe('Popular Networks', function (this: Suite) {
 
         const selectNetworkDialog = new SelectNetwork(driver);
         await selectNetworkDialog.checkPageIsLoaded();
-        await selectNetworkDialog.deleteNetwork('eip155:42161');
+        await selectNetworkDialog.disableNetwork('eip155:42161');
         await selectNetworkDialog.clickCloseButton();
         await headerNavbar.clickDrawerBackButton();
 

test/e2e/page-objects/pages/network-manager.ts

@@ -256,10 +256,6 @@
       "React: componentWill* lifecycle deprecations": 1,
       "error: Error: MetaMetrics context trackEvent was": 3
     },
-    "ui/components/app/modals/confirm-delete-network/confirm-delete-network.test.js": {
-      "React: PropTypes validation failures": 1,
-      "error: Error: Insufficient number of substitutions": 1
-    },
     "ui/components/app/modals/customize-nonce/customize-nonce.test.js": {
       "React: PropTypes validation failures": 1
     },

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

@@ -1,43 +1,123 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Confirm Delete Network should match snapshot 1`] = `
-<div>
+<body>
   <div
-    class="modal-container"
+    id="popover-content"
+  />
+  <div />
+  <div
+    class=""
     data-testid="confirm-delete-network-modal"
   >
     <div
-      class="modal-container__content"
+      aria-hidden="true"
+      class="bg-overlay-default fixed inset-0 z-[1050] motion-safe:animate-fade-in"
+    />
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+    <div
+      data-focus-lock-disabled="false"
     >
       <div
-        class="modal-content"
+        class="fixed inset-0 z-[1050] flex justify-center [@media(max-height:475px)]:p-2 items-center p-4 sm:py-6 md:py-6"
       >
-        <div
-          class="modal-content__title"
-        >
-          Delete Goerli network?
-        </div>
-        <div
-          class="modal-content__description"
+        <section
+          aria-modal="true"
+          class="flex-col items-stretch justify-start bg-default flex max-h-full w-full rounded-lg motion-safe:animate-slide-up max-w-[360px] overflow-hidden p-4 shadow-lg"
+          role="dialog"
         >
-          If you delete this network, you will need to add it again to view your assets in this network
-        </div>
+          <header
+            class="grid grid-cols-[1fr_auto_1fr] items-center px-0 pb-4"
+          >
+            <div
+              class="col-start-2 col-end-3 w-full"
+            >
+              <div
+                class="flex flex-col gap-2 items-center min-w-0"
+              >
+                <svg
+                  class="inline-block w-8 h-8 text-error-default"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M1 21 12 2l11 19zm3.45-2h15.1L12 6zM12 18q.424 0 .713-.287c.289-.288.287-.43.287-.713s-.096-.52-.287-.712S12.283 16 12 16s-.52.096-.712.288S11 16.717 11 17s.096.52.288.713.429.287.712.287m-1-3h2v-5h-2z"
+                  />
+                </svg>
+                <h2
+                  class="text-default text-s-heading-sm leading-s-heading-sm tracking-s-heading-sm md:text-l-heading-sm md:leading-l-heading-sm md:tracking-l-heading-sm font-bold font-default text-center"
+                >
+                  Delete Goerli network?
+                </h2>
+              </div>
+            </div>
+            <div
+              class="col-start-3 justify-self-end"
+            >
+              <button
+                aria-label="Close"
+                class="inline-flex items-center justify-center p-0 h-8 w-8 rounded-lg bg-transparent hover:bg-hover active:bg-pressed text-icon-default"
+              >
+                <svg
+                  class="inline-block w-6 h-6 text-inherit"
+                  fill="currentColor"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M6.4 19 5 17.6l5.6-5.6L5 6.4 6.4 5l5.6 5.6L17.6 5 19 6.4 13.4 12l5.6 5.6-1.4 1.4-5.6-5.6z"
+                  />
+                </svg>
+              </button>
+            </div>
+          </header>
+          <p
+            class="text-default text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-regular font-default w-full"
+          >
+            If you delete this network, you will need to add it again to view your assets in this network
+          </p>
+          <footer
+            class="px-0 pt-6"
+          >
+            <div
+              class="flex flex-row gap-4"
+            >
+              <button
+                class="inline-flex items-center justify-center rounded-xl px-4 font-medium overflow-hidden relative h-12 transition-all duration-100 ease-linear active:scale-[0.97] active:ease-[cubic-bezier(0.3,0.8,0.3,1)] bg-muted text-default hover:bg-muted-hover active:bg-muted-pressed focus-visible:ring-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default flex-1"
+                role="button"
+              >
+                <span
+                  class="text-inherit text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-medium font-default"
+                >
+                  Cancel
+                </span>
+              </button>
+              <button
+                class="inline-flex items-center justify-center rounded-xl px-4 font-medium overflow-hidden relative h-12 transition-all duration-100 ease-linear active:scale-[0.97] active:ease-[cubic-bezier(0.3,0.8,0.3,1)] bg-error-default text-error-inverse hover:bg-error-default-hover active:bg-error-default-pressed focus-visible:ring-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-default flex-1"
+                data-testid="confirm-delete-network-modal-delete-button"
+                role="button"
+              >
+                <span
+                  class="text-inherit text-s-body-md leading-s-body-md tracking-s-body-md md:text-l-body-md md:leading-l-body-md md:tracking-l-body-md font-medium font-default"
+                >
+                  Delete
+                </span>
+              </button>
+            </div>
+          </footer>
+        </section>
       </div>
     </div>
     <div
-      class="modal-container__footer"
-    >
-      <button
-        class="button btn-secondary modal-container__footer-button"
-      >
-        Cancel
-      </button>
-      <button
-        class="button btn-danger-primary modal-container__footer-button"
-      >
-        Delete
-      </button>
-    </div>
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
   </div>
-</div>
+</body>
 `;

test/jest/console-baseline-unit.json

@@ -1,10 +1,28 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { toEvmCaipChainId } from '@metamask/multichain-network-controller';
+import {
+  Box,
+  BoxAlignItems,
+  BoxFlexDirection,
+  ButtonIconSize,
+  ButtonSize,
+  ButtonVariant,
+  Icon,
+  IconColor,
+  IconName,
+  IconSize,
+  Modal,
+  ModalFooter,
+  ModalHeader,
+  ModalContent,
+  ModalOverlay,
+  Text,
+  TextAlign,
+  TextVariant,
+} from '@metamask/design-system-react';
 import { I18nContext } from '../../../../contexts/i18n';
 
-import Modal, { ModalContent } from '../../modal';
-
 export default class ConfirmDeleteNetwork extends PureComponent {
   static propTypes = {
     hideModal: PropTypes.func.isRequired,
@@ -48,17 +66,67 @@ export default class ConfirmDeleteNetwork extends PureComponent {
 
     return (
       <Modal
-        onSubmit={this.handleDelete}
-        onCancel={() => this.props.hideModal()}
-        submitText={t('delete')}
-        cancelText={t('cancel')}
-        submitType="danger-primary"
-        testId="confirm-delete-network-modal"
+        isOpen
+        onClose={() => this.props.hideModal()}
+        isClosedOnOutsideClick={false}
+        data-testid="confirm-delete-network-modal"
       >
+        <ModalOverlay />
         <ModalContent
-          title={t('deleteNetworkTitle', [networkNickname])}
-          description={t('deleteNetworkIntro')}
-        />
+          modalDialogProps={{
+            className: 'overflow-hidden p-4 shadow-lg',
+          }}
+          className="items-center p-4 sm:py-6 md:py-6"
+        >
+          <ModalHeader
+            className="px-0 pb-4"
+            onClose={() => this.props.hideModal()}
+            closeButtonProps={{
+              ariaLabel: t('close'),
+              size: ButtonIconSize.Md,
+            }}
+          >
+            <Box
+              flexDirection={BoxFlexDirection.Column}
+              alignItems={BoxAlignItems.Center}
+              gap={2}
+              className="min-w-0"
+            >
+              <Icon
+                name={IconName.Danger}
+                size={IconSize.Xl}
+                color={IconColor.ErrorDefault}
+              />
+              <Text
+                asChild
+                variant={TextVariant.HeadingSm}
+                textAlign={TextAlign.Center}
+              >
+                <h2>{t('deleteNetworkTitle', [networkNickname])}</h2>
+              </Text>
+            </Box>
+          </ModalHeader>
+          <Text className="w-full" variant={TextVariant.BodyMd}>
+            {t('deleteNetworkIntro')}
+          </Text>
+          <ModalFooter
+            className="px-0 pt-6"
+            secondaryButtonProps={{
+              children: t('cancel'),
+              onClick: () => this.props.hideModal(),
+              size: ButtonSize.Lg,
+              variant: ButtonVariant.Secondary,
+            }}
+            primaryButtonProps={{
+              children: t('delete'),
+              'data-testid': 'confirm-delete-network-modal-delete-button',
+              isDanger: true,
+              onClick: this.handleDelete,
+              size: ButtonSize.Lg,
+              variant: ButtonVariant.Primary,
+            }}
+          />
+        </ModalContent>
       </Modal>
     );
   }

ui/components/app/modals/confirm-delete-network/__snapshots__/confirm-delete-network.test.js.snap

@@ -11,20 +11,21 @@ describe('Confirm Delete Network', () => {
     hideModal: jest.fn(),
     onConfirm: jest.fn(),
     removeNetwork: jest.fn().mockResolvedValue(),
-    switchEvmNetwork: jest.fn(),
+    switchToEthereumNetwork: jest.fn(),
+    networkNickname: 'Goerli',
     target: '0x5',
     chainId: '0xe708',
     ethereumMainnetClientId: '0x1',
   };
 
   it('should match snapshot', () => {
     const mockStore = configureMockStore()(mockState);
-    const { container } = renderWithProvider(
+    const { baseElement } = renderWithProvider(
       <ConfirmDeleteNetwork {...props} />,
       mockStore,
     );
 
-    expect(container).toMatchSnapshot();
+    expect(baseElement).toMatchSnapshot();
   });
 
   it('should mention network name in modal', () => {