feat: (cherry-pick)(Version v12.2.0) Migration #122 set redesignedConfirmationsEnabled to true (#26139)

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

Cherry-pick #25769
for Version v12.2.0

<!--
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/26043?quickstart=1)

## **Related issues**

Fixes: #24614

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

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

@@ -132,6 +132,7 @@ const migrations = [
   require('./119'),
   require('./120'),
   require('./121'),
+  require('./122'),
 ];
 
 export default migrations;

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

@@ -1140,6 +1140,39 @@ async function initBundler(bundlerServer, ganacheServer, usePaymaster) {
   }
 }
 
+/**
+ * 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,
@@ -1207,4 +1240,5 @@ module.exports = {
   editGasFeeForm,
   clickNestedButton,
   defaultGanacheOptionsForType2Transactions,
+  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