feat: Migration #122 set redesignedConfirmationsEnabled to true (#25769)

<!--
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**

This migration sets redesignedConfirmationsEnabled to true. Some users
may have explicitly turned off the experimental setting, which this
migration will reset to true. This is intentional as we also plan to
remove the setting in an upcoming release.

I also added the redesigned confirmation prop to the Sentry state log.
Needed to add or not add it to support the setting in the tests. I went
with adding it.

---

Getting the tests to pass were a bit tricky. It turns out the migrations
run after the fixtures are set. The withPreferencesController fixture
method is no help here.

One way we discussed to set the desired test state is to set the
previous migration data to the state and setting the fixture migration
version to the current version:
```
meta: { version: 122 }
```

This would require opening a live version, extracting the latest
migration state, and adding the mock state to the tests.

Instead, we manually toggle the setting off for each test that requires
the old signature pages.

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

## **Related issues**

Fixes: #24614

## **Manual testing steps**

1. Turn off the Experimental > Improved signature redesign setting
2. Run newest version with migration
3. Observe setting has been turned on

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

Author: digiwand

app/scripts/lib/setupSentry.js

@@ -246,6 +246,7 @@ export const SENTRY_BACKGROUND_STATE = {
     preferences: {
       autoLockTimeLimit: true,
       hideZeroBalanceTokens: true,
+      redesignedConfirmationsEnabled: true,
       isRedesignedConfirmationsDeveloperEnabled: false,
       showExtensionInFullSizeView: true,
       showFiatInTestnets: true,

app/scripts/migrations/122.test.ts

@@ -0,0 +1,74 @@
+import { migrate, version } from './122';
+
+const oldVersion = 121;
+
+describe('migration #122', () => {
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('updates the version metadata', async () => {
+    const oldStorage = {
+      meta: {
+        version: oldVersion,
+      },
+      data: {},
+    };
+
+    const newStorage = await migrate(oldStorage);
+
+    expect(newStorage.meta).toStrictEqual({ version });
+  });
+
+  describe('set redesignedConfirmationsEnabled to true in PreferencesController', () => {
+    it('sets redesignedConfirmationsEnabled to true', async () => {
+      const oldStorage = {
+        PreferencesController: {
+          preferences: {
+            redesignedConfirmationsEnabled: false,
+          },
+        },
+      };
+
+      const expectedState = {
+        PreferencesController: {
+          preferences: {
+            redesignedConfirmationsEnabled: true,
+          },
+        },
+      };
+
+      const transformedState = await migrate({
+        meta: { version: oldVersion },
+        data: oldStorage,
+      });
+
+      expect(transformedState.data).toEqual(expectedState);
+    });
+
+    it(
+      'sets redesignedConfirmationsEnabled to true even with original preferences object in the' +
+        'state',
+      async () => {
+        const oldStorage = {
+          PreferencesController: {},
+        };
+
+        const expectedState = {
+          PreferencesController: {
+            preferences: {
+              redesignedConfirmationsEnabled: true,
+            },
+          },
+        };
+
+        const transformedState = await migrate({
+          meta: { version: oldVersion },
+          data: oldStorage,
+        });
+
+        expect(transformedState.data).toEqual(expectedState);
+      },
+    );
+  });
+});

app/scripts/migrations/122.ts

@@ -0,0 +1,50 @@
+import { cloneDeep } from 'lodash';
+import { hasProperty, isObject } from '@metamask/utils';
+
+type VersionedData = {
+  meta: { version: number };
+  data: Record<string, unknown>;
+};
+
+export const version = 122;
+
+/**
+ * This migration sets preference redesignedConfirmationsEnabled to true
+ *
+ * @param originalVersionedData - Versioned MetaMask extension state, exactly what we persist to dist.
+ * @param originalVersionedData.meta - State metadata.
+ * @param originalVersionedData.meta.version - The current state version.
+ * @param originalVersionedData.data - The persisted MetaMask state, keyed by controller.
+ * @returns Updated versioned MetaMask extension state.
+ */
+export async function migrate(
+  originalVersionedData: VersionedData,
+): Promise<VersionedData> {
+  const versionedData = cloneDeep(originalVersionedData);
+  versionedData.meta.version = version;
+  transformState(versionedData.data);
+  return versionedData;
+}
+
+// TODO: Replace `any` with specific type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function transformState(state: Record<string, any>) {
+  if (!hasProperty(state, 'PreferencesController')) {
+    return;
+  }
+
+  if (!isObject(state.PreferencesController)) {
+    const controllerType = typeof state.PreferencesController;
+    global.sentry?.captureException?.(
+      new Error(`state.PreferencesController is type: ${controllerType}`),
+    );
+  }
+
+  if (!isObject(state.PreferencesController?.preferences)) {
+    state.PreferencesController = {
+      preferences: {},
+    };
+  }
+
+  state.PreferencesController.preferences.redesignedConfirmationsEnabled = true;
+}

app/scripts/migrations/index.js

@@ -133,7 +133,7 @@ const migrations = [
   require('./120'),
   require('./120.1'),
   require('./121'),
-
+  require('./122'),
   require('./123'),
 ];
 

test/e2e/accounts/snap-account-signatures-and-disconnects.spec.ts

@@ -1,6 +1,10 @@
 import { Suite } from 'mocha';
 import FixtureBuilder from '../fixture-builder';
-import { withFixtures, multipleGanacheOptions } from '../helpers';
+import {
+  withFixtures,
+  multipleGanacheOptions,
+  tempToggleSettingRedesignedConfirmations,
+} from '../helpers';
 import { Driver } from '../webdriver/driver';
 import {
   installSnapSimpleKeyring,
@@ -27,6 +31,8 @@ describe('Snap Account Signatures and Disconnects', function (this: Suite) {
 
         const newPublicKey = await makeNewAccountAndSwitch(driver);
 
+        await tempToggleSettingRedesignedConfirmations(driver);
+
         // open the Test Dapp and connect Account 2 to it
         await connectAccountToTestDapp(driver);
 

test/e2e/accounts/snap-account-signatures.spec.ts

@@ -1,5 +1,9 @@
 import { Suite } from 'mocha';
-import { openDapp, withFixtures } from '../helpers';
+import {
+  openDapp,
+  tempToggleSettingRedesignedConfirmations,
+  withFixtures,
+} from '../helpers';
 import { Driver } from '../webdriver/driver';
 import {
   accountSnapFixtures,
@@ -27,6 +31,8 @@ describe('Snap Account Signatures', function (this: Suite) {
 
           const newPublicKey = await makeNewAccountAndSwitch(driver);
 
+          await tempToggleSettingRedesignedConfirmations(driver);
+
           await openDapp(driver);
 
           // Run all 6 signature types

test/e2e/helpers.js

@@ -1160,6 +1160,39 @@ async function getSelectedAccountAddress(driver) {
   return accountAddress;
 }
 
+/**
+ * Rather than using the FixtureBuilder#withPreferencesController to set the setting
+ * we need to manually set the setting because the migration #122 overrides this.
+ * We should be able to remove this when we delete the redesignedConfirmationsEnabled setting.
+ *
+ * @param driver
+ */
+async function tempToggleSettingRedesignedConfirmations(driver) {
+  // Ensure we are on the extension window
+  await driver.switchToWindowWithTitle(WINDOW_TITLES.ExtensionInFullScreenView);
+
+  // Open settings menu button
+  const accountOptionsMenuSelector =
+    '[data-testid="account-options-menu-button"]';
+  await driver.waitForSelector(accountOptionsMenuSelector);
+  await driver.clickElement(accountOptionsMenuSelector);
+
+  // Click settings from dropdown menu
+  await driver.clickElement('[data-testid="global-menu-settings"]');
+
+  // Click Experimental tab
+  const experimentalTabRawLocator = {
+    text: 'Experimental',
+    tag: 'div',
+  };
+  await driver.clickElement(experimentalTabRawLocator);
+
+  // Click redesignedConfirmationsEnabled toggle
+  await driver.clickElement(
+    '[data-testid="toggle-redesigned-confirmations-container"]',
+  );
+}
+
 module.exports = {
   DAPP_HOST_ADDRESS,
   DAPP_URL,
@@ -1229,4 +1262,5 @@ module.exports = {
   defaultGanacheOptionsForType2Transactions,
   removeSelectedAccount,
   getSelectedAccountAddress,
+  tempToggleSettingRedesignedConfirmations,
 };

test/e2e/snaps/test-snap-siginsights.spec.js

@@ -5,6 +5,7 @@ const {
   openDapp,
   unlockWallet,
   switchToNotificationWindow,
+  tempToggleSettingRedesignedConfirmations,
   WINDOW_TITLES,
 } = require('../helpers');
 const FixtureBuilder = require('../fixture-builder');
@@ -29,6 +30,7 @@ describe('Test Snap Signature Insights', function () {
       },
       async ({ driver }) => {
         await unlockWallet(driver);
+        await tempToggleSettingRedesignedConfirmations(driver);
 
         // navigate to test snaps page and connect
         await driver.openNewPage(TEST_SNAPS_WEBSITE_URL);

test/e2e/tests/dapp-interactions/signin-with-ethereum.spec.js

@@ -4,6 +4,7 @@ const {
   withFixtures,
   openDapp,
   DAPP_URL,
+  tempToggleSettingRedesignedConfirmations,
   unlockWallet,
   WINDOW_TITLES,
 } = require('../../helpers');
@@ -28,6 +29,7 @@ describe('Sign in with ethereum', function () {
       },
       async ({ driver }) => {
         await unlockWallet(driver);
+        await tempToggleSettingRedesignedConfirmations(driver);
 
         // Create a signin with ethereum request in test dapp
         await openDapp(driver);

test/e2e/tests/metrics/signature-approved.spec.js

@@ -8,6 +8,7 @@ const {
   unlockWallet,
   getEventPayloads,
   clickSignOnSignatureConfirmation,
+  tempToggleSettingRedesignedConfirmations,
   validateContractDetails,
 } = require('../../helpers');
 const FixtureBuilder = require('../../fixture-builder');
@@ -65,6 +66,7 @@ describe('Signature Approved Event @no-mmi', function () {
       },
       async ({ driver, mockedEndpoint: mockedEndpoints }) => {
         await unlockWallet(driver);
+        await tempToggleSettingRedesignedConfirmations(driver);
         await openDapp(driver);
 
         // creates a sign typed data signature request
@@ -116,6 +118,7 @@ describe('Signature Approved Event @no-mmi', function () {
       },
       async ({ driver, mockedEndpoint: mockedEndpoints }) => {
         await unlockWallet(driver);
+        await tempToggleSettingRedesignedConfirmations(driver);
         await openDapp(driver);
 
         // creates a sign typed data signature request
@@ -163,6 +166,7 @@ describe('Signature Approved Event @no-mmi', function () {
       },
       async ({ driver, mockedEndpoint: mockedEndpoints }) => {
         await unlockWallet(driver);
+        await tempToggleSettingRedesignedConfirmations(driver);
         await openDapp(driver);
 
         // creates a sign typed data signature request
@@ -209,6 +213,7 @@ describe('Signature Approved Event @no-mmi', function () {
       },
       async ({ driver, mockedEndpoint: mockedEndpoints }) => {
         await unlockWallet(driver);
+        await tempToggleSettingRedesignedConfirmations(driver);
         await openDapp(driver);
 
         // creates a sign typed data signature request
@@ -260,6 +265,7 @@ describe('Signature Approved Event @no-mmi', function () {
       },
       async ({ driver, mockedEndpoint: mockedEndpoints }) => {
         await unlockWallet(driver);
+        await tempToggleSettingRedesignedConfirmations(driver);
         await openDapp(driver);
 
         // creates a sign typed data signature request