feat: sync V2 ramps orders from User Storage

app/scripts/messenger-client-init/__snapshots__/ramps-controller-api.test.ts.snap

@@ -16,5 +16,6 @@ exports[`getRampsControllerApi exposes ramps background methods 1`] = `
   "setRampsSelectedProvider",
   "setRampsSelectedToken",
   "setRampsUserRegion",
+  "syncRampsOrdersWithUserStorage",
 ]
 `;

app/scripts/messenger-client-init/__snapshots__/ramps-controller-init.test.ts.snap

@@ -18,5 +18,6 @@ exports[`RampsControllerInit exposes ramps background API methods 1`] = `
   "setRampsUserRegion",
   "startRampsLifecycle",
   "stopRampsLifecycle",
+  "syncRampsOrdersWithUserStorage",
 ]
 `;

app/scripts/messenger-client-init/messengers/ramps-controller-messenger.ts

@@ -37,7 +37,18 @@ export function getRampsControllerMessenger(
 
   messenger.delegate({
     messenger: controllerMessenger,
-    actions: [...RAMPS_CONTROLLER_REQUIRED_SERVICE_ACTIONS],
+    actions: [
+      ...RAMPS_CONTROLLER_REQUIRED_SERVICE_ACTIONS,
+      // The controller reads the `moneyHeadlessAllProviders` feature flag
+      // itself for quote widening.
+      'RemoteFeatureFlagController:getState',
+      'UserStorageController:getState',
+      'UserStorageController:performGetStorage',
+      'UserStorageController:performGetStorageAllFeatureEntries',
+      'UserStorageController:performSetStorage',
+      'UserStorageController:performBatchSetStorage',
+      'AuthenticationController:isSignedIn',
+    ],
     events: [],
   });
 

app/scripts/messenger-client-init/ramps-controller-api.test.ts

@@ -17,6 +17,7 @@ describe('getRampsControllerApi', () => {
       removeOrder: jest.fn(),
       getOrder: jest.fn(),
       getOrderFromCallback: jest.fn(),
+      syncOrdersWithUserStorage: jest.fn(),
     };
 
     const api = getRampsControllerApi(rampsController as never);

app/scripts/messenger-client-init/ramps-controller-api.ts

@@ -29,5 +29,7 @@ export function getRampsControllerApi(rampsController: RampsController) {
     refreshRampsOrder: rampsController.getOrder.bind(rampsController),
     getRampsOrderFromCallback:
       rampsController.getOrderFromCallback.bind(rampsController),
+    syncRampsOrdersWithUserStorage:
+      rampsController.syncOrdersWithUserStorage.bind(rampsController),
   };
 }

app/scripts/messenger-client-init/ramps-controller-init.test.ts

@@ -34,6 +34,7 @@ const mockRampsController = {
   removeOrder: jest.fn(),
   getOrder: jest.fn(),
   getOrderFromCallback: jest.fn(),
+  syncOrdersWithUserStorage: jest.fn(),
 };
 
 let mockInit: jest.Mock;

ui/components/app/identity/backup-and-sync-features-toggles/backup-and-sync-features-toggles.test.tsx

@@ -34,6 +34,7 @@ const initialStore = () => ({
     isBackupAndSyncEnabled: true,
     isAccountSyncingEnabled: false,
     isContactSyncingEnabled: false,
+    isRampsSyncingEnabled: false,
     completedMetaMetricsOnboarding: true,
     optedIn: false,
     isBackupAndSyncUpdateLoading: false,
@@ -186,11 +187,52 @@ describe('BackupAndSyncFeaturesToggles', () => {
     );
   });
 
+  it('enables ramps syncing', () => {
+    const store = initialStore();
+    store.metamask.isRampsSyncingEnabled = false;
+
+    const { setIsBackupAndSyncFeatureEnabledMock } = arrangeMocks();
+
+    const { getByTestId } = render(
+      <Redux.Provider store={mockStore(store)}>
+        <BackupAndSyncFeaturesToggles />
+      </Redux.Provider>,
+    );
+    fireEvent.click(
+      getByTestId(backupAndSyncFeaturesTogglesTestIds.rampsSyncingToggleButton),
+    );
+    expect(setIsBackupAndSyncFeatureEnabledMock).toHaveBeenCalledWith(
+      BACKUPANDSYNC_FEATURES.rampsSyncing,
+      true,
+    );
+  });
+
+  it('disables ramps syncing', () => {
+    const store = initialStore();
+    store.metamask.isRampsSyncingEnabled = true;
+
+    const { setIsBackupAndSyncFeatureEnabledMock } = arrangeMocks();
+
+    const { getByTestId } = render(
+      <Redux.Provider store={mockStore(store)}>
+        <BackupAndSyncFeaturesToggles />
+      </Redux.Provider>,
+    );
+    fireEvent.click(
+      getByTestId(backupAndSyncFeaturesTogglesTestIds.rampsSyncingToggleButton),
+    );
+    expect(setIsBackupAndSyncFeatureEnabledMock).toHaveBeenCalledWith(
+      BACKUPANDSYNC_FEATURES.rampsSyncing,
+      false,
+    );
+  });
+
   it('disables main backup and sync when all sub-features are manually turned off', async () => {
     const store = initialStore();
     store.metamask.isBackupAndSyncEnabled = true;
-    store.metamask.isAccountSyncingEnabled = false; // Already off
-    store.metamask.isContactSyncingEnabled = false; // Already off
+    store.metamask.isAccountSyncingEnabled = false;
+    store.metamask.isContactSyncingEnabled = false;
+    store.metamask.isRampsSyncingEnabled = false;
 
     const { setIsBackupAndSyncFeatureEnabledMock } = arrangeMocks();
 
@@ -212,8 +254,9 @@ describe('BackupAndSyncFeaturesToggles', () => {
   it('does not disable main backup and sync when at least one sub-feature is enabled', async () => {
     const store = initialStore();
     store.metamask.isBackupAndSyncEnabled = true;
-    store.metamask.isAccountSyncingEnabled = true; // One is ON
-    store.metamask.isContactSyncingEnabled = false; // One is OFF
+    store.metamask.isAccountSyncingEnabled = true;
+    store.metamask.isContactSyncingEnabled = false;
+    store.metamask.isRampsSyncingEnabled = false;
 
     const { setIsBackupAndSyncFeatureEnabledMock } = arrangeMocks();
 
@@ -233,6 +276,29 @@ describe('BackupAndSyncFeaturesToggles', () => {
     );
   });
 
+  it('does not disable main backup and sync when only ramps syncing is enabled', async () => {
+    const store = initialStore();
+    store.metamask.isBackupAndSyncEnabled = true;
+    store.metamask.isAccountSyncingEnabled = false;
+    store.metamask.isContactSyncingEnabled = false;
+    store.metamask.isRampsSyncingEnabled = true;
+
+    const { setIsBackupAndSyncFeatureEnabledMock } = arrangeMocks();
+
+    render(
+      <Redux.Provider store={mockStore(store)}>
+        <BackupAndSyncFeaturesToggles />
+      </Redux.Provider>,
+    );
+
+    await new Promise((resolve) => setTimeout(resolve, 100));
+
+    expect(setIsBackupAndSyncFeatureEnabledMock).not.toHaveBeenCalledWith(
+      BACKUPANDSYNC_FEATURES.main,
+      false,
+    );
+  });
+
   function arrangeMocks() {
     const setIsBackupAndSyncFeatureEnabledMock = jest.fn(() =>
       Promise.resolve(),

ui/components/app/identity/backup-and-sync-features-toggles/backup-and-sync-features-toggles.tsx

@@ -17,6 +17,7 @@ import { useI18nContext } from '../../../../hooks/useI18nContext';
 import {
   selectIsAccountSyncingEnabled,
   selectIsContactSyncingEnabled,
+  selectIsRampsSyncingEnabled,
   selectIsBackupAndSyncEnabled,
   selectIsBackupAndSyncUpdateLoading,
 } from '../../../../selectors/identity/backup-and-sync';
@@ -35,6 +36,8 @@ export const backupAndSyncFeaturesTogglesTestIds = {
   accountSyncingToggleButton: 'account-syncing-toggle-button',
   contactSyncingToggleContainer: 'contact-syncing-toggle-container',
   contactSyncingToggleButton: 'contact-syncing-toggle-button',
+  rampsSyncingToggleContainer: 'ramps-syncing-toggle-container',
+  rampsSyncingToggleButton: 'ramps-syncing-toggle-button',
 };
 
 export const backupAndSyncFeaturesTogglesSections = [
@@ -60,6 +63,17 @@ export const backupAndSyncFeaturesTogglesSections = [
     toggleButtonTestId:
       backupAndSyncFeaturesTogglesTestIds.contactSyncingToggleButton,
   },
+  {
+    id: 'ramps',
+    titleI18NKey: 'backupAndSyncFeatureRamps',
+    iconName: IconName.Card,
+    backupAndSyncfeatureKey: BACKUPANDSYNC_FEATURES.rampsSyncing,
+    featureReduxSelector: selectIsRampsSyncingEnabled,
+    toggleContainerTestId:
+      backupAndSyncFeaturesTogglesTestIds.rampsSyncingToggleContainer,
+    toggleButtonTestId:
+      backupAndSyncFeaturesTogglesTestIds.rampsSyncingToggleButton,
+  },
 ];
 
 const FeatureToggle = ({
@@ -154,14 +168,17 @@ export const BackupAndSyncFeaturesToggles = () => {
   );
   const isAccountSyncingEnabled = useSelector(selectIsAccountSyncingEnabled);
   const isContactSyncingEnabled = useSelector(selectIsContactSyncingEnabled);
+  const isRampsSyncingEnabled = useSelector(selectIsRampsSyncingEnabled);
 
   const { setIsBackupAndSyncFeatureEnabled } = useBackupAndSync();
 
   // Reverse cascading: if all sub-features are manually turned off, turn off main toggle
   // Guard against race conditions by not running while updates are in progress
   useEffect(() => {
     const allSubFeaturesDisabled =
-      !isAccountSyncingEnabled && !isContactSyncingEnabled;
+      !isAccountSyncingEnabled &&
+      !isContactSyncingEnabled &&
+      !isRampsSyncingEnabled;
 
     if (
       isBackupAndSyncEnabled &&
@@ -183,6 +200,7 @@ export const BackupAndSyncFeaturesToggles = () => {
     isBackupAndSyncEnabled,
     isAccountSyncingEnabled,
     isContactSyncingEnabled,
+    isRampsSyncingEnabled,
     isBackupAndSyncUpdateLoading,
     setIsBackupAndSyncFeatureEnabled,
   ]);

ui/contexts/identity/index.test.tsx

@@ -4,6 +4,7 @@ import '@testing-library/jest-dom';
 import * as redux from 'react-redux';
 import { useAccountSyncing } from '../../hooks/identity/useAccountSyncing';
 import { useContactSyncing } from '../../hooks/identity/useContactSyncing';
+import { useRampsOrderSyncing } from '../../hooks/identity/useRampsOrderSyncing/useRampsOrderSyncing';
 import {
   useAutoSignIn,
   useAutoSignOut,
@@ -17,13 +18,15 @@ jest.mock('react-redux', () => ({
 jest.mock('../../hooks/identity/useBackupAndSync');
 jest.mock('../../hooks/identity/useAccountSyncing');
 jest.mock('../../hooks/identity/useContactSyncing');
+jest.mock('../../hooks/identity/useRampsOrderSyncing/useRampsOrderSyncing');
 jest.mock('../../hooks/identity/useAuthentication');
 
 const mockUseSelector = jest.mocked(redux.useSelector);
 
 describe('MetamaskIdentityProvider', () => {
   const mockUseAccountSyncing = jest.mocked(useAccountSyncing);
   const mockUseContactSyncing = jest.mocked(useContactSyncing);
+  const mockUseRampsOrderSyncing = jest.mocked(useRampsOrderSyncing);
   const mockUseAutoSignIn = jest.mocked(useAutoSignIn);
   const mockUseAutoSignOut = jest.mocked(useAutoSignOut);
 
@@ -38,6 +41,11 @@ describe('MetamaskIdentityProvider', () => {
       shouldDispatchContactSyncing: false,
     });
 
+    mockUseRampsOrderSyncing.mockReturnValue({
+      dispatchRampsOrderSyncing: jest.fn(),
+      shouldDispatchRampsOrderSyncing: false,
+    });
+
     mockUseAutoSignIn.mockReturnValue({
       autoSignIn: jest.fn(),
       shouldAutoSignIn: false,
@@ -125,6 +133,38 @@ describe('MetamaskIdentityProvider', () => {
     expect(dispatchContactSyncing).not.toHaveBeenCalled();
   });
 
+  it('calls dispatchRampsOrderSyncing if shouldDispatchRampsOrderSyncing is true', () => {
+    const dispatchRampsOrderSyncing = jest.fn();
+    mockUseRampsOrderSyncing.mockReturnValue({
+      dispatchRampsOrderSyncing,
+      shouldDispatchRampsOrderSyncing: true,
+    });
+
+    render(
+      <MetamaskIdentityProvider>
+        <div>Child Component</div>
+      </MetamaskIdentityProvider>,
+    );
+
+    expect(dispatchRampsOrderSyncing).toHaveBeenCalled();
+  });
+
+  it('does not call dispatchRampsOrderSyncing if shouldDispatchRampsOrderSyncing is false', () => {
+    const dispatchRampsOrderSyncing = jest.fn();
+    mockUseRampsOrderSyncing.mockReturnValue({
+      dispatchRampsOrderSyncing,
+      shouldDispatchRampsOrderSyncing: false,
+    });
+
+    render(
+      <MetamaskIdentityProvider>
+        <div>Child Component</div>
+      </MetamaskIdentityProvider>,
+    );
+
+    expect(dispatchRampsOrderSyncing).not.toHaveBeenCalled();
+  });
+
   it('calls autoSignIn if shouldAutoSignIn returns true', () => {
     const autoSignIn = jest.fn();
     const shouldAutoSignIn = true;

ui/contexts/identity/index.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect } from 'react';
 import { useAccountSyncing } from '../../hooks/identity/useAccountSyncing';
 import { useContactSyncing } from '../../hooks/identity/useContactSyncing';
+import { useRampsOrderSyncing } from '../../hooks/identity/useRampsOrderSyncing/useRampsOrderSyncing';
 import {
   useAutoSignIn,
   useAutoSignOut,
@@ -13,6 +14,8 @@ export const MetamaskIdentityProvider = ({
     useAccountSyncing();
   const { dispatchContactSyncing, shouldDispatchContactSyncing } =
     useContactSyncing();
+  const { dispatchRampsOrderSyncing, shouldDispatchRampsOrderSyncing } =
+    useRampsOrderSyncing();
   const { autoSignIn, shouldAutoSignIn } = useAutoSignIn();
   const { autoSignOut, shouldAutoSignOut } = useAutoSignOut();
 
@@ -31,6 +34,12 @@ export const MetamaskIdentityProvider = ({
     }
   }, [shouldDispatchContactSyncing, dispatchContactSyncing]);
 
+  useEffect(() => {
+    if (shouldDispatchRampsOrderSyncing) {
+      dispatchRampsOrderSyncing();
+    }
+  }, [shouldDispatchRampsOrderSyncing, dispatchRampsOrderSyncing]);
+
   /**
    * Authentication effects
    *