Merge branch 'brian/network-controller-v20-merging-in-v21' of github.…

…com:MetaMask/metamask-extension into brian/network-controller-v20-merging-in-v21

app/scripts/migrations/129.test.ts

@@ -0,0 +1,55 @@
+import { migrate, version } from './124';
+
+const oldVersion = 128;
+
+describe('migration #129', () => {
+  it('updates the version metadata', async () => {
+    const oldStorage = {
+      meta: { version: oldVersion },
+      data: {},
+    };
+
+    const newStorage = await migrate(oldStorage);
+
+    expect(newStorage.meta).toStrictEqual({ version });
+  });
+
+  it('does nothing if no preferences controller state is set', async () => {
+    const oldState = {
+      OtherController: {},
+    };
+
+    const transformedState = await migrate({
+      meta: { version: oldVersion },
+      data: oldState,
+    });
+
+    expect(transformedState.data).toEqual(oldState);
+  });
+
+  it('adds property if migration runs', async () => {
+    const oldState = {
+      PreferencesController: {
+        preferences: {
+          showMultiRpcModal: true,
+        },
+      },
+    };
+
+    const expectedState = {
+      PreferencesController: {
+        preferences: {
+          redesignedTransactionsEnabled: false,
+          showMultiRpcModal: true,
+        },
+      },
+    };
+
+    const transformedState = await migrate({
+      meta: { version: oldVersion },
+      data: oldState,
+    });
+
+    expect(transformedState.data).toEqual(expectedState);
+  });
+});

app/scripts/migrations/129.ts

@@ -0,0 +1,44 @@
+import { cloneDeep } from 'lodash';
+
+type VersionedData = {
+  meta: { version: number };
+  data: Record<string, unknown>;
+};
+
+export const version = 129;
+
+/**
+ * This migration sets the preference `redesignedTransactionsEnabled` if the
+ * user has existing data.
+ *
+ * @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;
+}
+
+function transformState(state: Record<string, unknown>): void {
+  const preferencesControllerState = state?.PreferencesController as
+    | Record<string, unknown>
+    | undefined;
+
+  const preferences = preferencesControllerState?.preferences as
+    | Record<string, unknown>
+    | undefined;
+
+  if (preferences) {
+    // Existing MetaMask users will have the option null by default
+    preferences.showMultiRpcModal = null;
+  }
+}

app/scripts/migrations/index.js

@@ -143,8 +143,8 @@ const migrations = [
   require('./124'),
   require('./125'),
   require('./126'),
-  require('./127'),
   require('./128'),
+  require('./129'),
 ];
 
 export default migrations;

shared/modules/selectors/multi-rpc-edit.ts

@@ -2,7 +2,6 @@ type MultiRpcEditMetaMaskState = {
   metamask: {
     preferences: {
       showMultiRpcModal: boolean | null;
-      showMultiRpcModalUpgrade: boolean | null;
     };
   };
 };

test/e2e/default-fixture.js

@@ -203,7 +203,7 @@ function defaultFixture(inputChainId = CHAIN_IDS.LOCALHOST) {
           smartTransactionsOptInStatus: false,
           useNativeCurrencyAsPrimaryCurrency: true,
           petnamesEnabled: true,
-          showMultiRpcModal: false,
+          showMultiRpcModal: true,
           isRedesignedConfirmationsDeveloperEnabled: false,
           showConfirmationAdvancedDetails: false,
         },

test/e2e/fixture-builder.js

@@ -70,7 +70,7 @@ function onboardingFixture() {
           smartTransactionsOptInStatus: false,
           useNativeCurrencyAsPrimaryCurrency: true,
           petnamesEnabled: true,
-          showMultiRpcModal: false,
+          showMultiRpcModal: true,
           isRedesignedConfirmationsDeveloperEnabled: false,
           showConfirmationAdvancedDetails: false,
         },

test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json

@@ -18,8 +18,7 @@
     "currentAppVersion": "string",
     "previousAppVersion": "",
     "previousMigrationVersion": 0,
-    "currentMigrationVersion": "number",
-    "showMultiRpcModalUpgrade": "object"
+    "currentMigrationVersion": "number"
   },
   "AppStateController": {
     "connectedStatusPopoverHasBeenShown": true,

test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-ui-state.json

@@ -86,7 +86,6 @@
     "previousAppVersion": "",
     "previousMigrationVersion": 0,
     "currentMigrationVersion": "number",
-    "showMultiRpcModalUpgrade": "object",
     "balances": "object",
     "selectedNetworkClientId": "string",
     "networksMetadata": {

ui/components/app/multi-rpc-edit-modal/multi-rpc-edit-modal.tsx

@@ -28,10 +28,9 @@ import NetworkListItem from './network-list-item/network-list-item';
 
 type MultiRpcEditModalProps = {
   isOpen: boolean;
-  onClose: (arg: boolean) => void;
 };
 
-function MultiRpcEditModal({ isOpen, onClose }: MultiRpcEditModalProps) {
+function MultiRpcEditModal({ isOpen }: MultiRpcEditModalProps) {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const isPopUp = getEnvironmentType() === ENVIRONMENT_TYPE_POPUP;
@@ -43,7 +42,7 @@ function MultiRpcEditModal({ isOpen, onClose }: MultiRpcEditModalProps) {
   return (
     <Modal
       isOpen={isOpen}
-      onClose={() => onClose(true)}
+      onClose={() => dispatch(setShowMultiRpcModal(true))}
       isClosedOnOutsideClick={false}
       isClosedOnEscapeKey={false}
       className="mm-modal__custom-scrollbar auto-detect-in-modal"

ui/pages/home/home.component.js

@@ -50,6 +50,7 @@ import {
   ModalHeader,
   ModalOverlay,
 } from '../../components/component-library';
+import MultiRpcEditModal from '../../components/app/multi-rpc-edit-modal/multi-rpc-edit-modal';
 import {
   RESTORE_VAULT_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
@@ -154,6 +155,7 @@ export default class Home extends PureComponent {
     announcementsToShow: PropTypes.bool.isRequired,
     onboardedInThisUISession: PropTypes.bool,
     isSmartTransactionsOptInModalAvailable: PropTypes.bool.isRequired,
+    showMultiRpcModal: PropTypes.bool.isRequired,
     ///: END:ONLY_INCLUDE_IF
     newNetworkAddedConfigurationId: PropTypes.string,
     isNotification: PropTypes.bool.isRequired,
@@ -934,6 +936,7 @@ export default class Home extends PureComponent {
       firstTimeFlowType,
       newNetworkAddedConfigurationId,
       isSmartTransactionsOptInModalAvailable,
+      showMultiRpcModal,
       ///: END:ONLY_INCLUDE_IF
     } = this.props;
 
@@ -960,6 +963,12 @@ export default class Home extends PureComponent {
       showWhatsNewPopup &&
       !showSmartTransactionsOptInModal;
 
+    const showMultiRpcEditModal =
+      canSeeModals &&
+      showMultiRpcModal &&
+      !showSmartTransactionsOptInModal &&
+      !showWhatsNew;
+
     const showTermsOfUse =
       completedOnboarding && !onboardedInThisUISession && showTermsOfUsePopup;
     ///: END:ONLY_INCLUDE_IF
@@ -985,6 +994,8 @@ export default class Home extends PureComponent {
             hideWhatsNewPopup={hideWhatsNewPopup}
           />
 
+          <MultiRpcEditModal isOpen={showMultiRpcEditModal} />
+
           {showWhatsNew ? <WhatsNewPopup onClose={hideWhatsNewPopup} /> : null}
           {!showWhatsNew && showRecoveryPhraseReminder ? (
             <RecoveryPhraseReminder