feat (cherry-pick): added test network as selected network if globall…

…y selected for… (#28139)

… connection Request (#27980)

This PR is to select a test network in the default selected networks
list if its the globally selected network at the time of connection
request.

## **Related issues**

Fixes:
[#27891](#27891) ##
**Manual testing steps**

1. Run extension with yarn start
2. Switch to Sepolia
3. Go to test-dapp, click on connect. 
4. In the connections page, check Sepolia is the selected along with non
test networks
5. Click confirm, dapp should be connected to MM and user should be on
Sepolia network in MM.

## **Screenshots/Recordings**


### **Before**




https://github.com/user-attachments/assets/127fc7bb-2e68-411a-b407-7f6d5158e911


### **After**




https://github.com/user-attachments/assets/dd0b5aa6-404a-421f-93a4-67cab43d60c6


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


<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **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?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28139?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

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

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

test/e2e/api-specs/ConfirmationRejectionRule.ts

@@ -73,20 +73,6 @@ export class ConfirmationsRejectRule implements Rule {
                 tag: 'button',
               });
 
-              const editButtons = await this.driver.findElements(
-                '[data-testid="edit"]',
-              );
-              await editButtons[1].click();
-
-              await this.driver.clickElement({
-                text: 'Localhost 8545',
-                tag: 'p',
-              });
-
-              await this.driver.clickElement(
-                '[data-testid="connect-more-chains-button"]',
-              );
-
               const screenshotTwo = await this.driver.driver.takeScreenshot();
               call.attachments.push({
                 type: 'image',

test/e2e/helpers.js

@@ -783,16 +783,6 @@ const connectToDapp = async (driver) => {
 
   await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
-  const editButtons = await driver.findElements('[data-testid="edit"]');
-  await editButtons[1].click();
-
-  await driver.clickElement({
-    text: 'Localhost 8545',
-    tag: 'p',
-  });
-
-  await driver.clickElement('[data-testid="connect-more-chains-button"]');
-
   await driver.clickElementAndWaitForWindowToClose({
     text: 'Connect',
     tag: 'button',

test/e2e/json-rpc/switchEthereumChain.spec.js

@@ -157,8 +157,34 @@ describe('Switch Ethereum Chain for two dapps', function () {
           tag: 'button',
         });
 
-        await driver.switchToWindowWithUrl(DAPP_ONE_URL);
+        // Switch to Dapp One and connect it
+        await driver.switchToWindowWithUrl(DAPP_URL);
+        await driver.findClickableElement({
+          text: 'Connect',
+          tag: 'button',
+        });
+        await driver.clickElement('#connectButton');
 
+        await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        const editButtons = await driver.findElements('[data-testid="edit"]');
+
+        await editButtons[1].click();
+
+        // Disconnect Localhost 8545
+        await driver.clickElement({
+          text: 'Localhost 8545',
+          tag: 'p',
+        });
+
+        await driver.clickElement('[data-testid="connect-more-chains-button"]');
+
+        await driver.clickElementAndWaitForWindowToClose({
+          text: 'Connect',
+          tag: 'button',
+        });
+
+        // Switch to Dapp Two
+        await driver.switchToWindowWithUrl(DAPP_ONE_URL);
         // Initiate send transaction on Dapp two
         await driver.clickElement('#sendButton');
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
@@ -181,8 +207,6 @@ describe('Switch Ethereum Chain for two dapps', function () {
         await driver.executeScript(
           `window.ethereum.request(${switchEthereumChainRequest})`,
         );
-
-        // Switch to tx and confirm send tx.
         await switchToNotificationWindow(driver, 4);
         await driver.findClickableElements({
           text: 'Confirm',
@@ -192,7 +216,6 @@ describe('Switch Ethereum Chain for two dapps', function () {
           text: 'Confirm',
           tag: 'button',
         });
-
         // Delay here after notification for second notification popup for switchEthereumChain
         await driver.delay(1000);
 
@@ -203,7 +226,12 @@ describe('Switch Ethereum Chain for two dapps', function () {
           text: 'Confirm',
           tag: 'button',
         });
-        await driver.clickElement({ text: 'Confirm', tag: 'button' });
+        await driver.clickElementAndWaitForWindowToClose({
+          text: 'Confirm',
+          tag: 'button',
+        });
+        await driver.switchToWindowWithUrl(DAPP_URL);
+        await driver.findElement({ css: '#chainId', text: '0x539' });
       },
     );
   });
@@ -273,7 +301,18 @@ describe('Switch Ethereum Chain for two dapps', function () {
         await driver.clickElement('#connectButton');
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        const editButtons = await driver.findElements('[data-testid="edit"]');
+
+        // Click the edit button for networks
+        await editButtons[1].click();
+
+        // Disconnect Mainnet
+        await driver.clickElement({
+          text: 'Localhost 8545',
+          tag: 'p',
+        });
 
+        await driver.clickElement('[data-testid="connect-more-chains-button"]');
         await driver.clickElementAndWaitForWindowToClose({
           text: 'Connect',
           tag: 'button',
@@ -293,14 +332,11 @@ describe('Switch Ethereum Chain for two dapps', function () {
         await driver.executeScript(
           `window.ethereum.request(${switchEthereumChainRequest})`,
         );
-
-        // Switch to notification of switchEthereumChain
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
         await driver.findClickableElements({
           text: 'Confirm',
           tag: 'button',
         });
-
         // Switch back to dapp one
         await driver.switchToWindow(dappOne);
         assert.equal(await driver.getCurrentUrl(), `${DAPP_URL}/`);
@@ -397,11 +433,22 @@ describe('Switch Ethereum Chain for two dapps', function () {
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
+        const editButtons = await driver.findElements('[data-testid="edit"]');
+
+        // Click the edit button for networks
+        await editButtons[1].click();
+
+        // Disconnect Mainnet
+        await driver.clickElement({
+          text: 'Localhost 8545',
+          tag: 'p',
+        });
+
+        await driver.clickElement('[data-testid="connect-more-chains-button"]');
         await driver.clickElementAndWaitForWindowToClose({
           text: 'Connect',
           tag: 'button',
         });
-
         await driver.switchToWindow(dappTwo);
         assert.equal(await driver.getCurrentUrl(), `${DAPP_ONE_URL}/`);
 

test/e2e/page-objects/pages/test-dapp.ts

@@ -209,15 +209,6 @@ class TestDapp {
     await this.driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
     await this.driver.waitForSelector(this.connectMetaMaskMessage);
 
-    // TODO: Extra steps needed to preserve the current network.
-    // Following steps can be removed once the issue is fixed (#27891)
-    const editNetworkButton = await this.driver.findClickableElements(
-      this.editConnectButton,
-    );
-    await editNetworkButton[1].click();
-    await this.driver.clickElement(this.localhostCheckbox);
-    await this.driver.clickElement(this.updateNetworkButton);
-
     await this.driver.clickElementAndWaitForWindowToClose(
       this.confirmDialogButton,
     );

test/e2e/snaps/test-snap-txinsights-v2.spec.js

@@ -127,6 +127,11 @@ describe('Test Snap TxInsights-v2', function () {
           tag: 'button',
           text: 'Activity',
         });
+        // wait for transaction confirmation
+        await driver.waitForSelector({
+          css: '.transaction-status-label',
+          text: 'Confirmed',
+        });
       },
     );
   });

test/e2e/tests/connections/edit-networks-flow.spec.js

@@ -9,11 +9,6 @@ const {
 } = require('../../helpers');
 const FixtureBuilder = require('../../fixture-builder');
 
-async function switchToNetworkByName(driver, networkName) {
-  await driver.clickElement('.mm-picker-network');
-  await driver.clickElement(`[data-testid="${networkName}"]`);
-}
-
 describe('Edit Networks Flow', function () {
   it('should be able to edit networks', async function () {
     await withFixtures(
@@ -43,9 +38,6 @@ describe('Edit Networks Flow', function () {
         await driver.clickElement(
           '.mm-modal-content__dialog button[aria-label="Close"]',
         );
-
-        // Switch to first network, whose send transaction was just confirmed
-        await switchToNetworkByName(driver, 'Localhost 8545');
         await locateAccountBalanceDOM(driver);
         await driver.clickElement(
           '[data-testid ="account-options-menu-button"]',

test/e2e/tests/request-queuing/dapp1-switch-dapp2-send.spec.js

@@ -51,6 +51,17 @@ describe('Request Queuing Dapp 1, Switch Tx -> Dapp 2 Send Tx', function () {
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
+        const editButtons = await driver.findElements('[data-testid="edit"]');
+
+        await editButtons[1].click();
+
+        // Disconnect Localhost 8545
+        await driver.clickElement({
+          text: 'Localhost 8545',
+          tag: 'p',
+        });
+
+        await driver.clickElement('[data-testid="connect-more-chains-button"]');
         await driver.clickElementAndWaitForWindowToClose({
           text: 'Connect',
           tag: 'button',
@@ -93,7 +104,7 @@ describe('Request Queuing Dapp 1, Switch Tx -> Dapp 2 Send Tx', function () {
           params: [{ chainId: '0x539' }],
         });
 
-        // Initiate switchEthereumChain on Dapp Two
+        // Initiate switchEthereumChain on Dapp One
         await driver.executeScript(
           `window.ethereum.request(${switchEthereumChainRequest})`,
         );
@@ -192,7 +203,17 @@ describe('Request Queuing Dapp 1, Switch Tx -> Dapp 2 Send Tx', function () {
         await driver.clickElement('#connectButton');
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        const editButtons = await driver.findElements('[data-testid="edit"]');
+
+        await editButtons[1].click();
+
+        // Disconnect Localhost 8545
+        await driver.clickElement({
+          text: 'Localhost 8545',
+          tag: 'p',
+        });
 
+        await driver.clickElement('[data-testid="connect-more-chains-button"]');
         await driver.clickElementAndWaitForWindowToClose({
           text: 'Connect',
           tag: 'button',
@@ -235,17 +256,11 @@ describe('Request Queuing Dapp 1, Switch Tx -> Dapp 2 Send Tx', function () {
           params: [{ chainId: '0x539' }],
         });
 
-        // Initiate switchEthereumChain on Dapp Two
+        // Initiate switchEthereumChain on Dapp One
         await driver.executeScript(
           `window.ethereum.request(${switchEthereumChainRequest})`,
         );
 
-        await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
-        await driver.findElement({
-          text: 'Use your enabled networks',
-          tag: 'p',
-        });
-
         await driver.switchToWindowWithUrl(DAPP_ONE_URL);
 
         await driver.clickElement('#sendButton');
@@ -259,6 +274,7 @@ describe('Request Queuing Dapp 1, Switch Tx -> Dapp 2 Send Tx', function () {
         // There is an extra window appearing and disappearing
         // so we leave this delay until the issue is fixed (#27360)
         await driver.delay(5000);
+
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
         // Check correct network on the send confirmation.

test/e2e/tests/request-queuing/multi-dapp-sendTx-revokePermission.spec.js

@@ -88,7 +88,7 @@ describe('Request Queuing for Multiple Dapps and Txs on different networks revok
         await driver.switchToWindowWithUrl(DAPP_URL);
         await driver.findElement({
           css: '[id="chainId"]',
-          text: '0x1',
+          text: '0x539',
         });
         await driver.clickElement('#sendButton');
 
@@ -108,7 +108,7 @@ describe('Request Queuing for Multiple Dapps and Txs on different networks revok
         await driver.switchToWindowWithUrl(DAPP_URL);
         await driver.findElement({
           css: '[id="chainId"]',
-          text: '0x1',
+          text: '0x539',
         });
         await driver.assertElementNotPresent({
           css: '[id="chainId"]',

test/e2e/tests/request-queuing/switchChain-watchAsset.spec.js

@@ -3,9 +3,9 @@ const {
   defaultGanacheOptions,
   logInWithBalanceValidation,
   openDapp,
-  switchToNotificationWindow,
   WINDOW_TITLES,
   withFixtures,
+  switchToNotificationWindow,
 } = require('../../helpers');
 const { SMART_CONTRACTS } = require('../../seeder/smart-contracts');
 const { DAPP_URL } = require('../../constants');
@@ -48,7 +48,17 @@ describe('Request Queue SwitchChain -> WatchAsset', function () {
         await driver.clickElement('#connectButton');
 
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
+        const editButtons = await driver.findElements('[data-testid="edit"]');
+
+        await editButtons[1].click();
 
+        // Disconnect Localhost 8545. By Default, this was the globally selected network
+        await driver.clickElement({
+          text: 'Localhost 8545',
+          tag: 'p',
+        });
+
+        await driver.clickElement('[data-testid="connect-more-chains-button"]');
         await driver.clickElementAndWaitForWindowToClose({
           text: 'Connect',
           tag: 'button',
@@ -72,7 +82,6 @@ describe('Request Queue SwitchChain -> WatchAsset', function () {
           text: 'Use your enabled networks',
           tag: 'p',
         });
-
         // Switch back to test dapp
         await driver.switchToWindowWithTitle(WINDOW_TITLES.TestDApp);
 
@@ -81,7 +90,6 @@ describe('Request Queue SwitchChain -> WatchAsset', function () {
           text: 'Add Token(s) to Wallet',
           tag: 'button',
         });
-
         await switchToNotificationWindow(driver);
 
         // Confirm Switch Network

ui/pages/permissions-connect/connect-page/connect-page.tsx

@@ -39,6 +39,7 @@ import {
   EndowmentTypes,
   RestrictedMethods,
 } from '../../../../shared/constants/permissions';
+import { getMultichainNetwork } from '../../../selectors/multichain';
 
 export type ConnectPageRequest = {
   id: string;
@@ -92,10 +93,24 @@ export const ConnectPage: React.FC<ConnectPageProps> = ({
       ),
     [networkConfigurations],
   );
+
+  // By default, if a non test network is the globally selected network. We will only show non test networks as default selected.
+  const currentlySelectedNetwork = useSelector(getMultichainNetwork);
+  const currentlySelectedNetworkChainId =
+    currentlySelectedNetwork.network.chainId;
+  // If globally selected network is a test network, include that in the default selcted networks for connection request
+  const selectedTestNetwork = testNetworks.find(
+    (network: { chainId: string }) =>
+      network.chainId === currentlySelectedNetworkChainId,
+  );
+
+  const selectedNetworksList = selectedTestNetwork
+    ? [...nonTestNetworks, selectedTestNetwork]
+    : nonTestNetworks;
   const defaultSelectedChainIds =
     requestedChainIds.length > 0
       ? requestedChainIds
-      : nonTestNetworks.map(({ chainId }) => chainId);
+      : selectedNetworksList.map(({ chainId }) => chainId);
   const [selectedChainIds, setSelectedChainIds] = useState(
     defaultSelectedChainIds,
   );