fix: add eth_signTypedData and eth_signTypedData_v3 to methodsRequiringNetworkSwitch

shared/constants/methods-tags.ts

@@ -12,6 +12,8 @@ export const methodsRequiringNetworkSwitch = [
   'wallet_switchEthereumChain',
   'wallet_addEthereumChain',
   'wallet_watchAsset',
+  'eth_signTypedData',
+  'eth_signTypedData_v3',
   'eth_signTypedData_v4',
   'personal_sign',
 ] as const;

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

@@ -0,0 +1,141 @@
+const FixtureBuilder = require('../../fixture-builder');
+const {
+  withFixtures,
+  openDapp,
+  unlockWallet,
+  DAPP_URL,
+  DAPP_ONE_URL,
+  regularDelayMs,
+  defaultGanacheOptions,
+  switchToNotificationWindow,
+} = require('../../helpers');
+
+describe('Request Queuing Dapp 1, Switch Tx -> Dapp 2 Send Tx', function () {
+  it('should queue signTypedData tx after eth_sendTransaction confirmation and signTypedData confirmation should target the correct network after eth_sendTransaction is confirmed', async function () {
+    const port = 8546;
+    const chainId = 1338;
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder()
+          .withNetworkControllerTripleGanache()
+          .withPreferencesControllerUseRequestQueueEnabled()
+          .withSelectedNetworkControllerPerDomain()
+          .build(),
+        dappOptions: { numberOfDapps: 2 },
+        ganacheOptions: {
+          ...defaultGanacheOptions,
+          concurrent: [
+            {
+              port,
+              chainId,
+              ganacheOptions2: defaultGanacheOptions,
+            },
+            {
+              port: 7777,
+              chainId: 1000,
+              ganacheOptions2: defaultGanacheOptions,
+            },
+          ],
+        },
+        title: this.test.fullTitle(),
+      },
+      async ({ driver }) => {
+        await unlockWallet(driver);
+
+        // Open Dapp One
+        await openDapp(driver, undefined, DAPP_URL);
+
+        // Connect to dapp
+        await driver.findClickableElement({ text: 'Connect', tag: 'button' });
+        await driver.clickElement('#connectButton');
+
+        await driver.delay(regularDelayMs);
+
+        await switchToNotificationWindow(driver);
+
+        await driver.clickElement({
+          text: 'Next',
+          tag: 'button',
+          css: '[data-testid="page-container-footer-next"]',
+        });
+
+        await driver.clickElement({
+          text: 'Confirm',
+          tag: 'button',
+          css: '[data-testid="page-container-footer-next"]',
+        });
+
+        // Open Dapp Two
+        await openDapp(driver, undefined, DAPP_ONE_URL);
+
+        // Connect to dapp 2
+        await driver.findClickableElement({ text: 'Connect', tag: 'button' });
+        await driver.clickElement('#connectButton');
+
+        await driver.delay(regularDelayMs);
+
+        await switchToNotificationWindow(driver, 4);
+
+        await driver.clickElement({
+          text: 'Next',
+          tag: 'button',
+          css: '[data-testid="page-container-footer-next"]',
+        });
+
+        await driver.clickElement({
+          text: 'Confirm',
+          tag: 'button',
+          css: '[data-testid="page-container-footer-next"]',
+        });
+
+        await driver.switchToWindowWithUrl(DAPP_URL);
+
+        // need to switch chain with API
+        // switchEthereumChain request
+        const switchEthereumChainRequest = JSON.stringify({
+          jsonrpc: '2.0',
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: '0x3e8' }],
+        });
+
+        // Initiate switchEthereumChain on Dapp one
+        await driver.executeScript(
+          `window.ethereum.request(${switchEthereumChainRequest})`,
+        );
+
+        await switchToNotificationWindow(driver, 4);
+
+        await driver.clickElement({ text: 'Switch network', tag: 'button' });
+
+        await driver.switchToWindowWithUrl(DAPP_URL);
+
+        // eth_sendTransaction request
+        await driver.clickElement('#sendButton');
+
+        await driver.switchToWindowWithUrl(DAPP_ONE_URL);
+
+        // signTypedData request
+        await driver.clickElement('#signTypedData');
+
+        await switchToNotificationWindow(driver, 4);
+
+        // Check correct network on the send confirmation.
+        await driver.findElement({
+          css: '[data-testid="network-display"]',
+          text: 'Localhost 7777',
+        });
+
+        await driver.clickElement({ text: 'Confirm', tag: 'button' });
+
+        await switchToNotificationWindow(driver, 4);
+
+        // Check correct network on the signTypedData confirmation.
+        await driver.findElement({
+          css: '[data-testid="signature-request-network-display"]',
+          text: 'Localhost 8545',
+        });
+      },
+    );
+  });
+});

ui/components/app/network-account-balance-header/network-account-balance-header.js

@@ -68,6 +68,7 @@ export default function NetworkAccountBalanceHeader({
             variant={TextVariant.bodySm}
             as="h6"
             color={TextColor.textAlternative}
+            data-testid="signature-request-network-display"
           >
             {networkName}
           </Text>

ui/pages/confirm-add-suggested-nft/__snapshots__/confirm-add-suggested-nft.test.js.snap

@@ -83,6 +83,7 @@ exports[`ConfirmAddSuggestedNFT Component should match snapshot 1`] = `
               >
                 <h6
                   class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
+                  data-testid="signature-request-network-display"
                 >
                   Ethereum Mainnet
                 </h6>
@@ -295,6 +296,7 @@ exports[`ConfirmAddSuggestedNFT Component should match snapshot 1`] = `
             >
               <h6
                 class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
+                data-testid="signature-request-network-display"
               >
                 Ethereum Mainnet
               </h6>

ui/pages/confirmations/components/signature-request-header/__snapshots__/signature-request-header.test.js.snap

@@ -71,6 +71,7 @@ exports[`SignatureRequestHeader should match snapshot 1`] = `
       >
         <h6
           class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
+          data-testid="signature-request-network-display"
         >
           goerli
         </h6>

ui/pages/confirmations/components/signature-request-original/__snapshots__/signature-request-original.test.js.snap

@@ -147,6 +147,7 @@ exports[`SignatureRequestOriginal should match snapshot 1`] = `
           >
             <h6
               class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
+              data-testid="signature-request-network-display"
             >
               goerli
             </h6>

ui/pages/confirmations/components/signature-request-siwe/__snapshots__/signature-request-siwe.test.js.snap

@@ -144,6 +144,7 @@ exports[`SignatureRequestSIWE (Sign in with Ethereum) should match snapshot 1`]
         >
           <h6
             class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
+            data-testid="signature-request-network-display"
           >
             goerli
           </h6>

ui/pages/confirmations/components/signature-request/__snapshots__/signature-request.test.js.snap

@@ -144,6 +144,7 @@ exports[`Signature Request Component render should match snapshot when we are us
           >
             <h6
               class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
+              data-testid="signature-request-network-display"
             >
               Localhost 8545
             </h6>
@@ -916,6 +917,7 @@ exports[`Signature Request Component render should match snapshot when we want t
           >
             <h6
               class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
+              data-testid="signature-request-network-display"
             >
               Localhost 8545
             </h6>

ui/pages/confirmations/confirm-signature-request/__snapshots__/index.test.js.snap

@@ -144,6 +144,7 @@ exports[`Confirm Signature Request Component render should match snapshot 1`] =
           >
             <h6
               class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
+              data-testid="signature-request-network-display"
             >
               Goerli test network
             </h6>

ui/pages/confirmations/token-allowance/__snapshots__/token-allowance.test.js.snap

@@ -163,6 +163,7 @@ exports[`TokenAllowancePage when mounted should match snapshot 1`] = `
         >
           <h6
             class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
+            data-testid="signature-request-network-display"
           >
             mainnet
           </h6>