From b7e57b845fe3427be58b87e91b155b5487285f58 Mon Sep 17 00:00:00 2001
From: Brian Bergeron <brian.e.bergeron@gmail.com>
Date: Fri, 20 Sep 2024 09:49:48 -0700
Subject: [PATCH] unit tests for network menu

---
 .../network-list-menu.test.js.snap            | 1176 ++++++++++++++++-
 .../network-list-menu.test.js                 |   39 +-
 2 files changed, 1211 insertions(+), 4 deletions(-)
diff --git a/ui/components/multichain/network-list-menu/__snapshots__/network-list-menu.test.js.snap b/ui/components/multichain/network-list-menu/__snapshots__/network-list-menu.test.js.snap
index 1b2a8d056105..0bd083b01636 100644
--- a/ui/components/multichain/network-list-menu/__snapshots__/network-list-menu.test.js.snap
+++ b/ui/components/multichain/network-list-menu/__snapshots__/network-list-menu.test.js.snap
@@ -1,3 +1,1177 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`NetworkListMenu renders properly 1`] = `<div />`;
+exports[`NetworkListMenu renders properly 1`] = `
+<body>
+  <div
+    id="popover-content"
+  />
+  <div />
+  <div
+    class="mm-modal"
+  >
+    <div
+      aria-hidden="true"
+      class="mm-box mm-modal-overlay mm-box--width-full mm-box--height-full mm-box--background-color-overlay-default"
+    />
+    <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="mm-box mm-modal-content multichain-network-list-menu-content-wrapper mm-box--padding-0 mm-box--padding-top-4 mm-box--sm:padding-top-8 mm-box--md:padding-top-12 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--sm:padding-bottom-8 mm-box--md:padding-bottom-12 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
+      >
+        <section
+          aria-modal="true"
+          class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm multichain-network-list-menu-content-wrapper__dialog mm-box--padding-top-0 mm-box--padding-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
+          role="dialog"
+        >
+          <header
+            class="mm-box mm-header-base mm-modal-header mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between"
+          >
+            <div
+              class="mm-box mm-box--width-full"
+            >
+              <h4
+                class="mm-box mm-text mm-text--heading-sm mm-text--ellipsis mm-text--text-align-center mm-box--color-text-default"
+              >
+                Select a network
+              </h4>
+            </div>
+            <div
+              class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+              style="min-width: 0px;"
+            >
+              <button
+                aria-label="Close"
+                class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+              >
+                <span
+                  class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                  style="mask-image: url('./images/icons/close.svg');"
+                />
+              </button>
+            </div>
+          </header>
+          <div
+            class="mm-box multichain-network-list-menu"
+          >
+            <div
+              class="mm-box mm-box--padding-top-0 mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4"
+            >
+              <div
+                class="mm-box mm-text-field mm-text-field--size-lg mm-text-field--truncate mm-text-field-search mm-box--padding-right-0 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--align-items-center mm-box--width-full mm-box--background-color-background-default mm-box--rounded-md mm-box--border-width-1 box--border-style-solid"
+                data-testid="search-list"
+              >
+                <span
+                  class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                  style="mask-image: url('./images/icons/search.svg');"
+                />
+                <input
+                  autocomplete="off"
+                  class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--margin-right-6 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-2 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+                  data-testid="network-redesign-modal-search-input"
+                  focused="false"
+                  placeholder="Search"
+                  type="search"
+                  value=""
+                />
+              </div>
+            </div>
+            <div
+              class="mm-box"
+            >
+              <div
+                class="mm-box mm-box--padding-4 mm-box--display-flex mm-box--justify-content-space-between"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
+                >
+                  Enabled networks
+                </p>
+              </div>
+              <div
+                class="mm-box characters"
+                data-rbd-droppable-context-id="0"
+                data-rbd-droppable-id="characters"
+              >
+                <div
+                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                  class="mm-box"
+                  data-rbd-drag-handle-context-id="0"
+                  data-rbd-drag-handle-draggable-id="0x1"
+                  data-rbd-draggable-context-id="0"
+                  data-rbd-draggable-id="0x1"
+                  draggable="false"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="mm-box multichain-network-list-item multichain-network-list-item--selected mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-primary-muted"
+                  >
+                    <div
+                      class="mm-box multichain-network-list-item__selected-indicator mm-box--background-color-primary-default mm-box--rounded-pill"
+                    />
+                    <div
+                      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default box--border-style-solid box--border-width-1"
+                    >
+                      <img
+                        alt="Ethereum Mainnet logo"
+                        class="mm-avatar-network__network-image"
+                        src="./images/eth_logo.svg"
+                      />
+                    </div>
+                    <div
+                      class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-flex-start mm-box--align-items-flex-start mm-box--width-full"
+                      style="overflow: hidden;"
+                    >
+                      <div
+                        class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--width-full"
+                        data-testid="Ethereum Mainnet"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
+                          tabindex="0"
+                        >
+                          Ethereum Mainnet
+                        </p>
+                      </div>
+                    </div>
+                    <button
+                      aria-label="Network options"
+                      class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+                      data-testid="network-list-item-options-button-0x1"
+                    >
+                      <span
+                        class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                        style="mask-image: url('./images/icons/more-vertical.svg');"
+                      />
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                  class="mm-box"
+                  data-rbd-drag-handle-context-id="0"
+                  data-rbd-drag-handle-draggable-id="0xe708"
+                  data-rbd-draggable-context-id="0"
+                  data-rbd-draggable-id="0xe708"
+                  draggable="false"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="mm-box multichain-network-list-item mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
+                  >
+                    <div
+                      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default box--border-style-solid box--border-width-1"
+                    >
+                      <img
+                        alt="Linea Mainnet logo"
+                        class="mm-avatar-network__network-image"
+                        src="./images/linea-logo-mainnet.svg"
+                      />
+                    </div>
+                    <div
+                      class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-flex-start mm-box--align-items-flex-start mm-box--width-full"
+                      style="overflow: hidden;"
+                    >
+                      <div
+                        class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--width-full"
+                        data-testid="Linea Mainnet"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
+                          tabindex="0"
+                        >
+                          Linea Mainnet
+                        </p>
+                      </div>
+                    </div>
+                    <button
+                      aria-label="Network options"
+                      class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+                      data-testid="network-list-item-options-button-0xe708"
+                    >
+                      <span
+                        class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                        style="mask-image: url('./images/icons/more-vertical.svg');"
+                      />
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                  class="mm-box"
+                  data-rbd-drag-handle-context-id="0"
+                  data-rbd-drag-handle-draggable-id="0x38"
+                  data-rbd-draggable-context-id="0"
+                  data-rbd-draggable-id="0x38"
+                  draggable="false"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="mm-box multichain-network-list-item mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
+                  >
+                    <div
+                      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default box--border-style-solid box--border-width-1"
+                    >
+                      <img
+                        alt="BNB Chain logo"
+                        class="mm-avatar-network__network-image"
+                        src="./images/bnb.svg"
+                      />
+                    </div>
+                    <div
+                      class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-flex-start mm-box--align-items-flex-start mm-box--width-full"
+                      style="overflow: hidden;"
+                    >
+                      <div
+                        class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--width-full"
+                        data-testid="BNB Chain"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
+                          tabindex="0"
+                        >
+                          BNB Chain
+                        </p>
+                      </div>
+                    </div>
+                    <button
+                      aria-label="Network options"
+                      class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+                      data-testid="network-list-item-options-button-0x38"
+                    >
+                      <span
+                        class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                        style="mask-image: url('./images/icons/more-vertical.svg');"
+                      />
+                    </button>
+                  </div>
+                </div>
+                <div
+                  aria-describedby="rbd-hidden-text-0-hidden-text-0"
+                  class="mm-box"
+                  data-rbd-drag-handle-context-id="0"
+                  data-rbd-drag-handle-draggable-id="0x5"
+                  data-rbd-draggable-context-id="0"
+                  data-rbd-draggable-id="0x5"
+                  draggable="false"
+                  role="button"
+                  tabindex="0"
+                >
+                  <div
+                    class="mm-box multichain-network-list-item mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--gap-4 mm-box--justify-content-space-between mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
+                  >
+                    <div
+                      class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default box--border-style-solid box--border-width-1"
+                    >
+                      C
+                    </div>
+                    <div
+                      class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-flex-start mm-box--align-items-flex-start mm-box--width-full"
+                      style="overflow: hidden;"
+                    >
+                      <div
+                        class="mm-box mm-box--display-flex mm-box--align-items-center mm-box--width-full"
+                        data-testid="Chain 5"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
+                          tabindex="0"
+                        >
+                          Chain 5
+                        </p>
+                      </div>
+                    </div>
+                    <button
+                      aria-label="Network options"
+                      class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+                      data-testid="network-list-item-options-button-0x5"
+                    >
+                      <span
+                        class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                        style="mask-image: url('./images/icons/more-vertical.svg');"
+                      />
+                    </button>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="mm-box new-network-list__networks-container"
+              >
+                <div
+                  class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-1 mm-box--padding-right-4 mm-box--padding-left-4"
+                >
+                  <div
+                    class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--display-flex mm-box--justify-content-space-between"
+                  >
+                    <div
+                      class="mm-box mm-box--display-inline-flex"
+                    >
+                      <p
+                        class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
+                      >
+                        Additional networks
+                      </p>
+                      <div
+                        class="mm-box mm-box--margin-top-1"
+                      >
+                        <span
+                          class="mm-box add-network__warning-icon mm-icon mm-icon--size-sm mm-box--margin-left-2 mm-box--display-inline-block mm-box--color-icon-muted"
+                          style="mask-image: url('./images/icons/info.svg');"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    class="mm-box new-network-list__list-of-networks mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center"
+                    data-testid="popular-network-0xa4b1"
+                  >
+                    <div
+                      class="mm-box mm-box--display-flex mm-box--align-items-center"
+                    >
+                      <div
+                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default box--border-style-solid box--border-width-1"
+                      >
+                        <img
+                          alt="Arbitrum One logo"
+                          class="mm-avatar-network__network-image"
+                          src="./images/arbitrum.svg"
+                        />
+                      </div>
+                      <div
+                        class="mm-box mm-box--margin-left-4"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
+                        >
+                          Arbitrum One
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="mm-box mm-box--margin-left-1 mm-box--display-flex mm-box--align-items-center"
+                    >
+                      <button
+                        class="mm-box mm-text mm-button-base add-network__add-button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                        data-testid="test-add-button"
+                        type="link"
+                      >
+                        Add
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    class="mm-box new-network-list__list-of-networks mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center"
+                    data-testid="popular-network-0xa86a"
+                  >
+                    <div
+                      class="mm-box mm-box--display-flex mm-box--align-items-center"
+                    >
+                      <div
+                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default box--border-style-solid box--border-width-1"
+                      >
+                        <img
+                          alt="Avalanche Network C-Chain logo"
+                          class="mm-avatar-network__network-image"
+                          src="./images/avax-token.svg"
+                        />
+                      </div>
+                      <div
+                        class="mm-box mm-box--margin-left-4"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
+                        >
+                          Avalanche Network C-Chain
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="mm-box mm-box--margin-left-1 mm-box--display-flex mm-box--align-items-center"
+                    >
+                      <button
+                        class="mm-box mm-text mm-button-base add-network__add-button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                        data-testid="test-add-button"
+                        type="link"
+                      >
+                        Add
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    class="mm-box new-network-list__list-of-networks mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center"
+                    data-testid="popular-network-0x2105"
+                  >
+                    <div
+                      class="mm-box mm-box--display-flex mm-box--align-items-center"
+                    >
+                      <div
+                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default box--border-style-solid box--border-width-1"
+                      >
+                        <img
+                          alt="Base Mainnet logo"
+                          class="mm-avatar-network__network-image"
+                          src="./images/base.svg"
+                        />
+                      </div>
+                      <div
+                        class="mm-box mm-box--margin-left-4"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
+                        >
+                          Base Mainnet
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="mm-box mm-box--margin-left-1 mm-box--display-flex mm-box--align-items-center"
+                    >
+                      <button
+                        class="mm-box mm-text mm-button-base add-network__add-button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                        data-testid="test-add-button"
+                        type="link"
+                      >
+                        Add
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    class="mm-box new-network-list__list-of-networks mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center"
+                    data-testid="popular-network-0xa"
+                  >
+                    <div
+                      class="mm-box mm-box--display-flex mm-box--align-items-center"
+                    >
+                      <div
+                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default box--border-style-solid box--border-width-1"
+                      >
+                        <img
+                          alt="OP Mainnet logo"
+                          class="mm-avatar-network__network-image"
+                          src="./images/optimism.svg"
+                        />
+                      </div>
+                      <div
+                        class="mm-box mm-box--margin-left-4"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
+                        >
+                          OP Mainnet
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="mm-box mm-box--margin-left-1 mm-box--display-flex mm-box--align-items-center"
+                    >
+                      <button
+                        class="mm-box mm-text mm-button-base add-network__add-button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                        data-testid="test-add-button"
+                        type="link"
+                      >
+                        Add
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    class="mm-box new-network-list__list-of-networks mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center"
+                    data-testid="popular-network-0x89"
+                  >
+                    <div
+                      class="mm-box mm-box--display-flex mm-box--align-items-center"
+                    >
+                      <div
+                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default box--border-style-solid box--border-width-1"
+                      >
+                        <img
+                          alt="Polygon Mainnet logo"
+                          class="mm-avatar-network__network-image"
+                          src="./images/pol-token.svg"
+                        />
+                      </div>
+                      <div
+                        class="mm-box mm-box--margin-left-4"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
+                        >
+                          Polygon Mainnet
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="mm-box mm-box--margin-left-1 mm-box--display-flex mm-box--align-items-center"
+                    >
+                      <button
+                        class="mm-box mm-text mm-button-base add-network__add-button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                        data-testid="test-add-button"
+                        type="link"
+                      >
+                        Add
+                      </button>
+                    </div>
+                  </div>
+                  <div
+                    class="mm-box new-network-list__list-of-networks mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center"
+                    data-testid="popular-network-0x144"
+                  >
+                    <div
+                      class="mm-box mm-box--display-flex mm-box--align-items-center"
+                    >
+                      <div
+                        class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-background-default box--border-style-solid box--border-width-1"
+                      >
+                        <img
+                          alt="zkSync Era Mainnet logo"
+                          class="mm-avatar-network__network-image"
+                          src="./images/zk-sync.svg"
+                        />
+                      </div>
+                      <div
+                        class="mm-box mm-box--margin-left-4"
+                      >
+                        <p
+                          class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
+                        >
+                          zkSync Era Mainnet
+                        </p>
+                      </div>
+                    </div>
+                    <div
+                      class="mm-box mm-box--margin-left-1 mm-box--display-flex mm-box--align-items-center"
+                    >
+                      <button
+                        class="mm-box mm-text mm-button-base add-network__add-button mm-button-link mm-button-link--size-auto mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent"
+                        data-testid="test-add-button"
+                        type="link"
+                      >
+                        Add
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div
+                class="mm-box mm-box--padding-top-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between"
+              >
+                <p
+                  class="mm-box mm-text mm-text--body-md mm-box--color-text-alternative"
+                >
+                  Show test networks
+                </p>
+                <label
+                  class="toggle-button toggle-button--off"
+                  tabindex="0"
+                >
+                  <div
+                    style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+                  >
+                    <div
+                      style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(132, 140, 150);"
+                    >
+                      <div
+                        style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+                      />
+                      <div
+                        style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+                      />
+                    </div>
+                    <div
+                      style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+                    >
+                      <div
+                        style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); left: 3px;"
+                      />
+                    </div>
+                    <input
+                      style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                      type="checkbox"
+                      value="false"
+                    />
+                  </div>
+                  <div
+                    class="toggle-button__status"
+                  >
+                    <span
+                      class="toggle-button__label-off"
+                    />
+                    <span
+                      class="toggle-button__label-on"
+                    />
+                  </div>
+                </label>
+              </div>
+            </div>
+          </div>
+          <div
+            class="mm-box mm-box--padding-4"
+          >
+            <button
+              class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--block mm-button-secondary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-default mm-box--background-color-transparent mm-box--rounded-pill mm-box--border-color-primary-default box--border-style-solid box--border-width-1"
+            >
+              <span
+                class="mm-box mm-icon mm-icon--size-sm mm-box--margin-right-2 mm-box--margin-inline-end-1 mm-box--display-inline-block mm-box--color-inherit"
+                style="mask-image: url('./images/icons/add.svg');"
+              />
+              Add a custom network
+            </button>
+          </div>
+        </section>
+      </div>
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+  </div>
+  <div
+    aria-atomic="true"
+    aria-live="assertive"
+    id="rbd-announcement-0"
+    style="position: absolute; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%);"
+  />
+  <div
+    id="rbd-hidden-text-0-hidden-text-0"
+    style="display: none;"
+  >
+    
+  Press space bar to start a drag.
+  When dragging you can use the arrow keys to move the item around and escape to cancel.
+  Some screen readers may require you to be in focus mode or to use your pass through key
+
+  </div>
+</body>
+`;
+
+exports[`NetworkListMenu should match snapshot when adding a network 1`] = `
+<body>
+  <div
+    id="popover-content"
+  />
+  <div
+    aria-atomic="true"
+    aria-live="assertive"
+    id="rbd-announcement-0"
+    style="position: absolute; width: 1px; height: 1px; margin: -1px; border: 0px; padding: 0px; overflow: hidden; clip-path: inset(100%);"
+  />
+  <div />
+  <div
+    class="mm-modal"
+  >
+    <div
+      aria-hidden="true"
+      class="mm-box mm-modal-overlay mm-box--width-full mm-box--height-full mm-box--background-color-overlay-default"
+    />
+    <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="mm-box mm-modal-content multichain-network-list-menu-content-wrapper mm-box--padding-0 mm-box--padding-top-4 mm-box--sm:padding-top-8 mm-box--md:padding-top-12 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--sm:padding-bottom-8 mm-box--md:padding-bottom-12 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
+      >
+        <section
+          aria-modal="true"
+          class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm multichain-network-list-menu-content-wrapper__dialog mm-box--padding-top-0 mm-box--padding-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
+          role="dialog"
+        >
+          <header
+            class="mm-box mm-header-base mm-modal-header mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between"
+          >
+            <div
+              class="mm-box"
+              style="min-width: 0px;"
+            >
+              <button
+                aria-label="Back"
+                class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+              >
+                <span
+                  class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                  style="mask-image: url('./images/icons/arrow-left.svg');"
+                />
+              </button>
+            </div>
+            <div
+              class="mm-box mm-box--width-full"
+            >
+              <h4
+                class="mm-box mm-text mm-text--heading-sm mm-text--ellipsis mm-text--text-align-center mm-box--color-text-default"
+              >
+                Add a custom network
+              </h4>
+            </div>
+            <div
+              class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+              style="min-width: 0px;"
+            >
+              <button
+                aria-label="Close"
+                class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+              >
+                <span
+                  class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                  style="mask-image: url('./images/icons/close.svg');"
+                />
+              </button>
+            </div>
+          </header>
+          <div
+            class="mm-box networks-tab__scrollable mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-space-between mm-box--align-items-center mm-box--height-full"
+          >
+            <div
+              class="mm-box mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--width-full"
+            >
+              <div
+                class="mm-box mm-form-text-field mm-box--display-flex mm-box--flex-direction-column"
+                data-testid="network-form-name-input"
+              >
+                <label
+                  class="mm-box mm-text mm-label mm-label--html-for mm-form-text-field__label mm-text--body-md-medium mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
+                  for="networkName"
+                >
+                  Network name
+                </label>
+                <div
+                  class="mm-box mm-text-field mm-text-field--size-lg mm-text-field--focused mm-text-field--truncate mm-form-text-field__text-field mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-lg mm-box--border-width-1 box--border-style-solid"
+                >
+                  <input
+                    autocomplete="off"
+                    class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+                    data-testid="network-form-network-name"
+                    focused="true"
+                    id="networkName"
+                    placeholder="Enter network name"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="mm-box mm-box--padding-top-4"
+              >
+                <label
+                  class="mm-box mm-text mm-label mm-text--body-md-medium mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
+                >
+                  Default RPC URL
+                </label>
+                <div
+                  class="mm-box dropdown-editor__item-dropdown mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center mm-box--rounded-lg mm-box--border-color-border-default mm-box--border-width-1 box--border-style-solid"
+                >
+                  <input
+                    autocomplete="off"
+                    class="mm-box mm-text mm-input dropdown-editor__item-placeholder mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-top-3 mm-box--padding-bottom-3 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+                    placeholder="Add a URL"
+                    readonly=""
+                    tabindex="-1"
+                    type="text"
+                    value=""
+                  />
+                  <button
+                    aria-label="Default RPC URL"
+                    class="mm-box mm-button-icon mm-button-icon--size-md mm-box--margin-left-auto mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+                    data-testid="test-add-rpc-drop-down"
+                  >
+                    <span
+                      class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+                      style="mask-image: url('./images/icons/arrow-down.svg');"
+                    />
+                  </button>
+                </div>
+              </div>
+              <div
+                class="mm-box mm-form-text-field mm-box--padding-top-4 mm-box--display-flex mm-box--flex-direction-column"
+                data-testid="network-form-chain-id-input"
+              >
+                <label
+                  class="mm-box mm-text mm-label mm-label--html-for mm-form-text-field__label mm-text--body-md-medium mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
+                  for="chainId"
+                >
+                  Chain ID
+                </label>
+                <div
+                  class="mm-box mm-text-field mm-text-field--size-lg mm-text-field--truncate mm-form-text-field__text-field mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-lg mm-box--border-width-1 box--border-style-solid"
+                >
+                  <input
+                    autocomplete="off"
+                    class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+                    data-testid="network-form-chain-id"
+                    focused="false"
+                    id="chainId"
+                    placeholder="Enter Chain ID"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="mm-box mm-form-text-field mm-box--padding-top-4 mm-box--display-flex mm-box--flex-direction-column"
+                data-testid="network-form-ticker"
+              >
+                <label
+                  class="mm-box mm-text mm-label mm-label--html-for mm-form-text-field__label mm-text--body-md-medium mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
+                  for="nativeCurrency"
+                >
+                  Currency symbol
+                </label>
+                <div
+                  class="mm-box mm-text-field mm-text-field--size-lg mm-text-field--truncate mm-form-text-field__text-field mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-lg mm-box--border-width-1 box--border-style-solid"
+                >
+                  <input
+                    autocomplete="off"
+                    class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+                    data-testid="network-form-ticker-input"
+                    focused="false"
+                    id="nativeCurrency"
+                    placeholder="Enter symbol"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="mm-box mm-box--padding-top-4"
+              >
+                <label
+                  class="mm-box mm-text mm-label mm-text--body-md-medium mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
+                >
+                  Block explorer URL
+                </label>
+                <div
+                  class="mm-box dropdown-editor__item-dropdown mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center mm-box--rounded-lg mm-box--border-color-border-default mm-box--border-width-1 box--border-style-solid"
+                >
+                  <input
+                    autocomplete="off"
+                    class="mm-box mm-text mm-input dropdown-editor__item-placeholder mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-top-3 mm-box--padding-bottom-3 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+                    placeholder="Add a URL"
+                    readonly=""
+                    tabindex="-1"
+                    type="text"
+                    value=""
+                  />
+                  <button
+                    aria-label="Block explorer URL"
+                    class="mm-box mm-button-icon mm-button-icon--size-md mm-box--margin-left-auto mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+                    data-testid="test-explorer-drop-down"
+                  >
+                    <span
+                      class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+                      style="mask-image: url('./images/icons/arrow-down.svg');"
+                    />
+                  </button>
+                </div>
+                <div
+                  class="mm-box mm-box--margin-top-2 mm-box--display-none mm-box--rounded-lg mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+                >
+                  <div
+                    class="mm-box"
+                  >
+                    <div
+                      class="mm-box dropdown-editor__item mm-box--padding-4 mm-box--display-flex mm-box--align-items-center"
+                    >
+                      <span
+                        class="mm-box mm-icon mm-icon--size-sm mm-box--margin-right-2 mm-box--display-inline-block mm-box--color-primary-default"
+                        style="mask-image: url('./images/icons/add.svg');"
+                      />
+                      <button
+                        class="mm-box mm-text mm-text--body-sm-medium mm-box--color-primary-default mm-box--background-color-transparent"
+                      >
+                        Add a block explorer URL
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="mm-box networks-tab__network-form__footer mm-box--padding-4 mm-box--width-full mm-box--background-color-background-default"
+            >
+              <button
+                class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-base--disabled mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+                data-theme="light"
+                disabled=""
+              >
+                Save
+              </button>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
+
+exports[`NetworkListMenu should match snapshot when editing a network 1`] = `
+<body>
+  <div
+    id="popover-content"
+  />
+  <div />
+  <div
+    class="mm-modal"
+  >
+    <div
+      aria-hidden="true"
+      class="mm-box mm-modal-overlay mm-box--width-full mm-box--height-full mm-box--background-color-overlay-default"
+    />
+    <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="mm-box mm-modal-content multichain-network-list-menu-content-wrapper mm-box--padding-0 mm-box--padding-top-4 mm-box--sm:padding-top-8 mm-box--md:padding-top-12 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--sm:padding-bottom-8 mm-box--md:padding-bottom-12 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-center mm-box--align-items-flex-start mm-box--width-screen mm-box--height-screen"
+      >
+        <section
+          aria-modal="true"
+          class="mm-box mm-modal-content__dialog mm-modal-content__dialog--size-sm multichain-network-list-menu-content-wrapper__dialog mm-box--padding-top-0 mm-box--padding-bottom-0 mm-box--display-flex mm-box--flex-direction-column mm-box--width-full mm-box--background-color-background-default mm-box--rounded-lg"
+          role="dialog"
+        >
+          <header
+            class="mm-box mm-header-base mm-modal-header mm-box--padding-top-4 mm-box--padding-right-4 mm-box--padding-bottom-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between"
+          >
+            <div
+              class="mm-box"
+              style="min-width: 0px;"
+            >
+              <button
+                aria-label="Back"
+                class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+              >
+                <span
+                  class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                  style="mask-image: url('./images/icons/arrow-left.svg');"
+                />
+              </button>
+            </div>
+            <div
+              class="mm-box mm-box--width-full"
+            >
+              <h4
+                class="mm-box mm-text mm-text--heading-sm mm-text--ellipsis mm-text--text-align-center mm-box--color-text-default"
+              >
+                Ethereum Mainnet
+              </h4>
+            </div>
+            <div
+              class="mm-box mm-box--display-flex mm-box--justify-content-flex-end"
+              style="min-width: 0px;"
+            >
+              <button
+                aria-label="Close"
+                class="mm-box mm-button-icon mm-button-icon--size-sm mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+              >
+                <span
+                  class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
+                  style="mask-image: url('./images/icons/close.svg');"
+                />
+              </button>
+            </div>
+          </header>
+          <div
+            class="mm-box networks-tab__scrollable mm-box--display-flex mm-box--flex-direction-column mm-box--justify-content-space-between mm-box--align-items-center mm-box--height-full"
+          >
+            <div
+              class="mm-box mm-box--padding-right-4 mm-box--padding-bottom-2 mm-box--padding-left-4 mm-box--width-full"
+            >
+              <div
+                class="mm-box mm-form-text-field mm-box--display-flex mm-box--flex-direction-column"
+                data-testid="network-form-name-input"
+              >
+                <label
+                  class="mm-box mm-text mm-label mm-label--html-for mm-form-text-field__label mm-text--body-md-medium mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
+                  for="networkName"
+                >
+                  Network name
+                </label>
+                <div
+                  class="mm-box mm-text-field mm-text-field--size-lg mm-text-field--focused mm-text-field--truncate mm-form-text-field__text-field mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-lg mm-box--border-width-1 box--border-style-solid"
+                >
+                  <input
+                    autocomplete="off"
+                    class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+                    data-testid="network-form-network-name"
+                    focused="true"
+                    id="networkName"
+                    placeholder="Enter network name"
+                    type="text"
+                    value="Ethereum Mainnet"
+                  />
+                </div>
+              </div>
+              <div
+                class="mm-box mm-box--padding-top-4"
+              >
+                <label
+                  class="mm-box mm-text mm-label mm-text--body-md-medium mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
+                >
+                  Default RPC URL
+                </label>
+                <div
+                  class="mm-box dropdown-editor__item-dropdown mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center mm-box--rounded-lg mm-box--border-color-border-default mm-box--border-width-1 box--border-style-solid"
+                >
+                  <p
+                    class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--padding-top-3 mm-box--padding-bottom-3 mm-box--color-text-default"
+                  >
+                    localhost/rpc
+                  </p>
+                  <button
+                    aria-label="Default RPC URL"
+                    class="mm-box mm-button-icon mm-button-icon--size-md mm-box--margin-left-auto mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+                    data-testid="test-add-rpc-drop-down"
+                  >
+                    <span
+                      class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+                      style="mask-image: url('./images/icons/arrow-down.svg');"
+                    />
+                  </button>
+                </div>
+              </div>
+              <div
+                class="mm-box mm-form-text-field mm-form-text-field--disabled mm-box--padding-top-4 mm-box--display-flex mm-box--flex-direction-column"
+                data-testid="network-form-chain-id-input"
+              >
+                <label
+                  class="mm-box mm-text mm-label mm-label--html-for mm-form-text-field__label mm-text--body-md-medium mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
+                  for="chainId"
+                >
+                  Chain ID
+                </label>
+                <div
+                  class="mm-box mm-text-field mm-text-field--size-lg mm-text-field--disabled mm-text-field--truncate mm-form-text-field__text-field mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-lg mm-box--border-width-1 box--border-style-solid"
+                >
+                  <input
+                    autocomplete="off"
+                    class="mm-box mm-text mm-input mm-input--disable-state-styles mm-input--disabled mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+                    data-testid="network-form-chain-id"
+                    disabled=""
+                    focused="false"
+                    id="chainId"
+                    placeholder="Enter Chain ID"
+                    type="text"
+                    value="1"
+                  />
+                </div>
+              </div>
+              <div
+                class="mm-box mm-form-text-field mm-box--padding-top-4 mm-box--display-flex mm-box--flex-direction-column"
+                data-testid="network-form-ticker"
+              >
+                <label
+                  class="mm-box mm-text mm-label mm-label--html-for mm-form-text-field__label mm-text--body-md-medium mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
+                  for="nativeCurrency"
+                >
+                  Currency symbol
+                </label>
+                <div
+                  class="mm-box mm-text-field mm-text-field--size-lg mm-text-field--truncate mm-form-text-field__text-field mm-box--padding-right-0 mm-box--padding-left-0 mm-box--display-inline-flex mm-box--align-items-center mm-box--background-color-background-default mm-box--rounded-lg mm-box--border-width-1 box--border-style-solid"
+                >
+                  <input
+                    autocomplete="off"
+                    class="mm-box mm-text mm-input mm-input--disable-state-styles mm-text-field__input mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+                    data-testid="network-form-ticker-input"
+                    focused="false"
+                    id="nativeCurrency"
+                    placeholder="Enter symbol"
+                    type="text"
+                    value="ETH"
+                  />
+                </div>
+              </div>
+              <div
+                class="mm-box mm-box--padding-top-4"
+              >
+                <label
+                  class="mm-box mm-text mm-label mm-text--body-md-medium mm-text--font-weight-medium mm-box--display-inline-flex mm-box--align-items-center mm-box--color-text-default"
+                >
+                  Block explorer URL
+                </label>
+                <div
+                  class="mm-box dropdown-editor__item-dropdown mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-flex mm-box--justify-content-space-between mm-box--align-items-center mm-box--rounded-lg mm-box--border-color-border-default mm-box--border-width-1 box--border-style-solid"
+                >
+                  <input
+                    autocomplete="off"
+                    class="mm-box mm-text mm-input dropdown-editor__item-placeholder mm-text--body-md mm-box--margin-0 mm-box--padding-0 mm-box--padding-top-3 mm-box--padding-bottom-3 mm-box--color-text-default mm-box--background-color-transparent mm-box--border-style-none"
+                    placeholder="Add a URL"
+                    readonly=""
+                    tabindex="-1"
+                    type="text"
+                    value=""
+                  />
+                  <button
+                    aria-label="Block explorer URL"
+                    class="mm-box mm-button-icon mm-button-icon--size-md mm-box--margin-left-auto mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-icon-default mm-box--background-color-transparent mm-box--rounded-lg"
+                    data-testid="test-explorer-drop-down"
+                  >
+                    <span
+                      class="mm-box mm-icon mm-icon--size-md mm-box--display-inline-block mm-box--color-inherit"
+                      style="mask-image: url('./images/icons/arrow-down.svg');"
+                    />
+                  </button>
+                </div>
+                <div
+                  class="mm-box mm-box--margin-top-2 mm-box--display-none mm-box--rounded-lg mm-box--border-color-border-muted box--border-style-solid box--border-width-1"
+                >
+                  <div
+                    class="mm-box"
+                  >
+                    <div
+                      class="mm-box dropdown-editor__item mm-box--padding-4 mm-box--display-flex mm-box--align-items-center"
+                    >
+                      <span
+                        class="mm-box mm-icon mm-icon--size-sm mm-box--margin-right-2 mm-box--display-inline-block mm-box--color-primary-default"
+                        style="mask-image: url('./images/icons/add.svg');"
+                      />
+                      <button
+                        class="mm-box mm-text mm-text--body-sm-medium mm-box--color-primary-default mm-box--background-color-transparent"
+                      >
+                        Add a block explorer URL
+                      </button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="mm-box networks-tab__network-form__footer mm-box--padding-4 mm-box--width-full mm-box--background-color-background-default"
+            >
+              <button
+                class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--width-full mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
+                data-theme="light"
+              >
+                Save
+              </button>
+            </div>
+          </div>
+        </section>
+      </div>
+    </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="0"
+    />
+  </div>
+</body>
+`;
diff --git a/ui/components/multichain/network-list-menu/network-list-menu.test.js b/ui/components/multichain/network-list-menu/network-list-menu.test.js
index 702f5b00bf75..c6be491a1aaa 100644
--- a/ui/components/multichain/network-list-menu/network-list-menu.test.js
+++ b/ui/components/multichain/network-list-menu/network-list-menu.test.js
@@ -1,5 +1,6 @@
 /* eslint-disable jest/require-top-level-describe */
 import React from 'react';
+import { RpcEndpointType } from '@metamask/network-controller';
 import { fireEvent, renderWithProvider } from '../../../../test/jest';
 import configureStore from '../../../store/store';
 import mockState from '../../../../test/data/mock-state.json';
@@ -35,11 +36,16 @@ const render = ({
   isUnlocked = true,
   origin = MOCK_ORIGIN,
   selectedTabOriginInDomainsState = true,
+  isAddingNewNetwork = false,
+  editedNetwork = undefined,
 } = {}) => {
   const state = {
+    appState: {
+      isAddingNewNetwork,
+      editedNetwork,
+    },
     metamask: {
       ...mockState.metamask,
-      // this could use the network controllers default state instead
       networkConfigurationsByChainId: {
         '0x1': {
           nativeCurrency: 'ETH',
@@ -48,6 +54,8 @@ const render = ({
           defaultRpcEndpointIndex: 0,
           rpcEndpoints: [
             {
+              url: 'http://localhost/rpc',
+              type: RpcEndpointType.Custom,
               networkClientId: NETWORK_TYPES.MAINNET,
             },
           ],
@@ -59,6 +67,8 @@ const render = ({
           defaultRpcEndpointIndex: 0,
           rpcEndpoints: [
             {
+              url: 'http://localhost/rpc',
+              type: RpcEndpointType.Custom,
               networkClientId: 'linea-mainnet',
             },
           ],
@@ -70,6 +80,8 @@ const render = ({
           defaultRpcEndpointIndex: 0,
           rpcEndpoints: [
             {
+              url: 'http://localhost/rpc',
+              type: RpcEndpointType.Custom,
               networkClientId: 'bnb-network',
             },
           ],
@@ -81,6 +93,8 @@ const render = ({
           defaultRpcEndpointIndex: 0,
           rpcEndpoints: [
             {
+              url: 'http://localhost/rpc',
+              type: RpcEndpointType.Custom,
               networkClientId: 'goerli',
             },
           ],
@@ -92,6 +106,8 @@ const render = ({
           defaultRpcEndpointIndex: 0,
           rpcEndpoints: [
             {
+              url: 'http://localhost/rpc',
+              type: RpcEndpointType.Custom,
               networkClientId: 'sepolia',
             },
           ],
@@ -103,6 +119,8 @@ const render = ({
           defaultRpcEndpointIndex: 0,
           rpcEndpoints: [
             {
+              url: 'http://localhost/rpc',
+              type: RpcEndpointType.Custom,
               networkClientId: 'linea-sepolia',
             },
           ],
@@ -135,9 +153,24 @@ describe('NetworkListMenu', () => {
   });
 
   it('renders properly', () => {
-    const { container } = render();
-    expect(container).toMatchSnapshot();
+    const { baseElement } = render();
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('should match snapshot when adding a network', async () => {
+    const { baseElement } = render({
+      isAddingNewNetwork: true,
+    });
+    expect(baseElement).toMatchSnapshot();
   });
+
+  it('should match snapshot when editing a network', async () => {
+    const { baseElement } = render({
+      editedNetwork: { chainId: '0x1' },
+    });
+    expect(baseElement).toMatchSnapshot();
+  });
+
   it('displays important controls', () => {
     const { getByText, getByPlaceholderText } = render();
 
