fix (cherry-pick): incomplete transactions on startup (#26963)

.storybook/main.js

@@ -48,6 +48,7 @@ module.exports = {
     config.resolve.alias['../../../../../../store/actions'] = require.resolve(
       '../ui/__mocks__/actions.js',
     );
+    // Import within controller-utils crashes storybook.
     config.resolve.alias['@ethereumjs/util'] = require.resolve(
       '../ui/__mocks__/ethereumjs-util.js',
     );

app/scripts/metamask-controller.js

@@ -4845,11 +4845,11 @@ export default class MetamaskController extends EventEmitter {
    * by creating a new transaction.
    *
    * @param {number} originalTxId - the id of the txMeta that you want to
-   *  attempt to cancel
+   * attempt to cancel
    * @param {import(
    *  './controllers/transactions'
    * ).CustomGasSettings} [customGasSettings] - overrides to use for gas params
-   *  instead of allowing this method to generate them
+   * instead of allowing this method to generate them
    * @param options
    * @returns {object} MetaMask state
    */
@@ -4868,11 +4868,11 @@ export default class MetamaskController extends EventEmitter {
    * by creating a new transaction.
    *
    * @param {number} originalTxId - the id of the txMeta that you want to
-   *  attempt to speed up
+   * attempt to speed up
    * @param {import(
    *  './controllers/transactions'
    * ).CustomGasSettings} [customGasSettings] - overrides to use for gas params
-   *  instead of allowing this method to generate them
+   * instead of allowing this method to generate them
    * @param options
    * @returns {object} MetaMask state
    */

package.json

@@ -356,7 +356,7 @@
     "@metamask/snaps-rpc-methods": "^11.0.0",
     "@metamask/snaps-sdk": "6.3.0",
     "@metamask/snaps-utils": "^8.0.1",
-    "@metamask/transaction-controller": "^35.2.0",
+    "@metamask/transaction-controller": "^37.0.0",
     "@metamask/user-operation-controller": "^13.0.0",
     "@metamask/utils": "^8.2.1",
     "@ngraveio/bc-ur": "^1.1.12",

test/e2e/page-objects/flows/transaction.ts

@@ -0,0 +1,40 @@
+import { TransactionParams } from '@metamask/transaction-controller';
+import { DEFAULT_FIXTURE_ACCOUNT } from '../../constants';
+import { Driver } from '../../webdriver/driver';
+import HomePage from '../pages/homepage';
+import SendTokenPage from '../pages/send/send-token-page';
+import TestDapp from '../pages/test-dapp';
+
+export const createInternalTransaction = async (driver: Driver) => {
+  // Firefox has incorrect balance if send flow started too quickly.
+  await driver.delay(1000);
+
+  const homePage = new HomePage(driver);
+  await homePage.startSendFlow();
+
+  const sendToPage = new SendTokenPage(driver);
+  await sendToPage.check_pageIsLoaded();
+  await sendToPage.fillRecipient('0x2f318C334780961FB129D2a6c30D0763d9a5C970');
+  await sendToPage.fillAmount('1');
+  await sendToPage.goToNextScreen();
+};
+
+export const createDappTransaction = async (
+  driver: Driver,
+  override?: Partial<TransactionParams>,
+) => {
+  const testDapp = new TestDapp(driver);
+
+  await testDapp.request('eth_sendTransaction', [
+    {
+      data: '0x',
+      from: DEFAULT_FIXTURE_ACCOUNT,
+      maxFeePerGas: '0x0',
+      maxPriorityFeePerGas: '0x0',
+      to: '0x2f318C334780961FB129D2a6c30D0763d9a5C970',
+      value: '0x38d7ea4c68000',
+      type: '0x2',
+      ...override,
+    },
+  ]);
+};

test/e2e/page-objects/pages/confirmations/legacy/navigation.ts

@@ -0,0 +1,57 @@
+import { Driver } from '../../../../webdriver/driver';
+
+class ConfirmationNavigation {
+  private driver: Driver;
+
+  private nextPageButton: string;
+
+  private previousPageButton: string;
+
+  private firstPageButton: string;
+
+  private lastPageButton: string;
+
+  private navigationTitle: string;
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+    this.nextPageButton = '[data-testid="next-page"]';
+    this.previousPageButton = '[data-testid="previous-page"]';
+    this.firstPageButton = '[data-testid="first-page"]';
+    this.lastPageButton = '[data-testid="last-page"]';
+    this.navigationTitle = '.confirm-page-container-navigation';
+  }
+
+  async clickNextPage(): Promise<void> {
+    await this.driver.clickElement(this.nextPageButton);
+  }
+
+  async clickPreviousPage(): Promise<void> {
+    await this.driver.clickElement(this.previousPageButton);
+  }
+
+  async clickFirstPage(): Promise<void> {
+    await this.driver.clickElement(this.firstPageButton);
+  }
+
+  async clickLastPage(): Promise<void> {
+    await this.driver.clickElement(this.lastPageButton);
+  }
+
+  async check_pageNumbers(
+    currentPage: number,
+    totalPages: number,
+  ): Promise<void> {
+    try {
+      await this.driver.findElement({
+        css: this.navigationTitle,
+        text: `${currentPage} of ${totalPages}`,
+      });
+    } catch (e) {
+      console.log('Timeout while waiting for navigation page numbers', e);
+      throw e;
+    }
+  }
+}
+
+export default ConfirmationNavigation;

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

@@ -0,0 +1,37 @@
+import { Driver } from '../../webdriver/driver';
+
+const DAPP_HOST_ADDRESS = '127.0.0.1:8080';
+const DAPP_URL = `http://${DAPP_HOST_ADDRESS}`;
+
+class TestDapp {
+  private driver: Driver;
+
+  constructor(driver: Driver) {
+    this.driver = driver;
+  }
+
+  async open({
+    contractAddress,
+    url = DAPP_URL,
+  }: {
+    contractAddress?: string;
+    url?: string;
+  }) {
+    const dappUrl = contractAddress
+      ? `${url}/?contract=${contractAddress}`
+      : url;
+
+    return await this.driver.openNewPage(dappUrl);
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  async request(method: string, params: any[]) {
+    await this.open({
+      url: `${DAPP_URL}/request?method=${method}&params=${JSON.stringify(
+        params,
+      )}`,
+    });
+  }
+}
+
+export default TestDapp;

test/e2e/tests/confirmations/transactions/contract-interaction-redesign.spec.ts

@@ -1,9 +1,10 @@
 /* eslint-disable @typescript-eslint/no-require-imports, @typescript-eslint/no-var-requires */
 import { Mockttp } from 'mockttp';
-import { createDappTransaction, unlockWallet } from '../../../helpers';
+import { openDapp, unlockWallet } from '../../../helpers';
+import { createDappTransaction } from '../../../page-objects/flows/transaction';
+import GanacheContractAddressRegistry from '../../../seeder/ganache-contract-address-registry';
 import { Driver } from '../../../webdriver/driver';
 import { MockedEndpoint } from '../../../mock-e2e';
-import { DEFAULT_FIXTURE_ACCOUNT } from '../../../constants';
 import {
   assertAdvancedGasDetails,
   confirmDepositTransaction,
@@ -106,10 +107,16 @@ describe('Confirmation Redesign Contract Interaction Component', function () {
           title: this.test?.fullTitle(),
           testSpecificMock: mockOptimismOracle,
         },
-        async ({ driver }: TestSuiteArguments) => {
+        async ({ driver, contractRegistry }: TestSuiteArguments) => {
           await unlockWallet(driver);
           await createLayer2Transaction(driver);
 
+          const contractAddress = await (
+            contractRegistry as GanacheContractAddressRegistry
+          ).getContractAddress(smartContract);
+
+          await openDapp(driver, contractAddress);
+
           await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
           await toggleAdvancedDetails(driver);
@@ -281,11 +288,7 @@ describe('Confirmation Redesign Contract Interaction Component', function () {
 async function createLayer2Transaction(driver: Driver) {
   await createDappTransaction(driver, {
     data: '0x1234',
-    from: DEFAULT_FIXTURE_ACCOUNT,
     to: '0x581c3C1A2A4EBDE2A0Df29B5cf4c116E42945947',
-    gas: '0x31f10',
-    maxFeePerGas: '0x3b014b3',
-    maxPriorityFeePerGas: '0x3b014b3',
   });
 }
 

test/e2e/tests/transaction/edit-gas-fee.spec.js

@@ -1,11 +1,14 @@
 const { strict: assert } = require('assert');
+const {
+  createInternalTransaction,
+} = require('../../page-objects/flows/transaction');
+
 const {
   withFixtures,
   openDapp,
   unlockWallet,
   generateGanacheOptions,
   WINDOW_TITLES,
-  createInternalTransaction,
 } = require('../../helpers');
 const FixtureBuilder = require('../../fixture-builder');
 

test/e2e/tests/transaction/navigate-transactions.spec.js

@@ -1,11 +1,18 @@
+const {
+  createDappTransaction,
+} = require('../../page-objects/flows/transaction');
+
+const {
+  default: ConfirmationNavigation,
+} = require('../../page-objects/pages/confirmations/legacy/navigation');
+
 const {
   withFixtures,
   openDapp,
   locateAccountBalanceDOM,
   unlockWallet,
   generateGanacheOptions,
   WINDOW_TITLES,
-  createDappTransactionTypeTwo,
 } = require('../../helpers');
 const FixtureBuilder = require('../../fixture-builder');
 
@@ -27,26 +34,28 @@ describe('Navigate transactions', function () {
         await unlockWallet(driver);
         await createMultipleTransactions(driver, TRANSACTION_COUNT);
 
-        await clickNextPage(driver);
-        await expectPageNumber(driver, 2, 4);
+        const navigation = new ConfirmationNavigation(driver);
+
+        await navigation.clickNextPage();
+        await navigation.check_pageNumbers(2, 4);
 
-        await clickNextPage(driver);
-        await expectPageNumber(driver, 3, 4);
+        await navigation.clickNextPage();
+        await navigation.check_pageNumbers(3, 4);
 
-        await clickNextPage(driver);
-        await expectPageNumber(driver, 4, 4);
+        await navigation.clickNextPage();
+        await navigation.check_pageNumbers(4, 4);
 
-        await clickFirstPage(driver);
-        await expectPageNumber(driver, 1, 4);
+        await navigation.clickFirstPage();
+        await navigation.check_pageNumbers(1, 4);
 
-        await clickLastPage(driver);
-        await expectPageNumber(driver, 4, 4);
+        await navigation.clickLastPage();
+        await navigation.check_pageNumbers(4, 4);
 
-        await clickPreviousPage(driver);
-        await expectPageNumber(driver, 3, 4);
+        await navigation.clickPreviousPage();
+        await navigation.check_pageNumbers(3, 4);
 
-        await clickPreviousPage(driver);
-        await expectPageNumber(driver, 2, 4);
+        await navigation.clickPreviousPage();
+        await navigation.check_pageNumbers(2, 4);
       },
     );
   });
@@ -66,8 +75,10 @@ describe('Navigate transactions', function () {
         await unlockWallet(driver);
         await createMultipleTransactions(driver, TRANSACTION_COUNT);
 
-        await clickNextPage(driver);
-        await expectPageNumber(driver, 2, 4);
+        const navigation = new ConfirmationNavigation(driver);
+
+        await navigation.clickNextPage();
+        await navigation.check_pageNumbers(2, 4);
 
         await driver.switchToWindowWithTitle(
           WINDOW_TITLES.ExtensionInFullScreenView,
@@ -77,7 +88,7 @@ describe('Navigate transactions', function () {
         await driver.clickElement({ text: 'Send', tag: 'button' });
         await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
 
-        await expectPageNumber(driver, 2, 5);
+        await navigation.check_pageNumbers(2, 5);
       },
     );
   });
@@ -100,7 +111,8 @@ describe('Navigate transactions', function () {
         // reject transaction
         await driver.clickElement({ text: 'Reject', tag: 'button' });
 
-        await expectPageNumber(driver, 1, 3);
+        const navigation = new ConfirmationNavigation(driver);
+        await navigation.check_pageNumbers(1, 3);
       },
     );
   });
@@ -123,7 +135,8 @@ describe('Navigate transactions', function () {
         // confirm transaction
         await driver.clickElement({ text: 'Confirm', tag: 'button' });
 
-        await expectPageNumber(driver, 1, 3);
+        const navigation = new ConfirmationNavigation(driver);
+        await navigation.check_pageNumbers(1, 3);
       },
     );
   });
@@ -146,6 +159,7 @@ describe('Navigate transactions', function () {
         // reject transactions
         await driver.clickElement({ text: 'Reject 4', tag: 'a' });
         await driver.clickElement({ text: 'Reject all', tag: 'button' });
+
         await driver.switchToWindowWithTitle(
           WINDOW_TITLES.ExtensionInFullScreenView,
         );
@@ -157,7 +171,7 @@ describe('Navigate transactions', function () {
 
 async function createMultipleTransactions(driver, count) {
   for (let i = 0; i < count; i++) {
-    await createDappTransactionTypeTwo(driver);
+    await createDappTransaction(driver);
   }
 
   await driver.switchToWindowWithTitle(WINDOW_TITLES.Dialog);
@@ -168,26 +182,3 @@ async function createMultipleTransactions(driver, count) {
     text: '0.001',
   });
 }
-
-async function clickFirstPage(driver) {
-  await driver.clickElement('[data-testid="first-page"]');
-}
-
-async function clickLastPage(driver) {
-  await driver.clickElement('[data-testid="last-page"]');
-}
-
-async function clickNextPage(driver) {
-  await driver.clickElement('[data-testid="next-page"]');
-}
-
-async function clickPreviousPage(driver) {
-  await driver.clickElement('[data-testid="previous-page"]');
-}
-
-async function expectPageNumber(driver, current, total) {
-  await driver.findElement({
-    css: '.confirm-page-container-navigation',
-    text: `${current} of ${total}`,
-  });
-}

test/e2e/tests/transaction/send-edit.spec.js

@@ -1,4 +1,5 @@
 const { strict: assert } = require('assert');
+
 const {
   defaultGanacheOptions,
   withFixtures,