feat: implement remote feature flag controller

app/components/hooks/MinimumVersions/useMinimumVersions.tsx

@@ -4,22 +4,20 @@ import { createUpdateNeededNavDetails } from '../../UI/UpdateNeeded/UpdateNeeded
 import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import { InteractionManager } from 'react-native';
-import { FeatureFlagsState } from '../../../core/redux/slices/featureFlags';
 import { SecurityState } from '../../../../app/reducers/security';
 import { RootState } from '../../../../app/reducers';
+import { selectAppMinimumBuild } from '../../../../app/selectors/featureFlagController/minimumAppVersion';
 
 const useMinimumVersions = () => {
   const { automaticSecurityChecksEnabled }: SecurityState = useSelector(
     (state: RootState) => state.security,
   );
-  const { featureFlags }: FeatureFlagsState = useSelector(
-    (state: RootState) => state.featureFlags,
-  );
+
+  const appMinimumBuild = useSelector((state: RootState) => selectAppMinimumBuild(state));
   const currentBuildNumber = Number(getBuildNumber());
   const navigation = useNavigation();
   const shouldTriggerUpdateFlow =
-    automaticSecurityChecksEnabled &&
-    featureFlags?.mobileMinimumVersions?.appMinimumBuild > currentBuildNumber;
+    automaticSecurityChecksEnabled && appMinimumBuild > currentBuildNumber;
 
   useEffect(() => {
     if (shouldTriggerUpdateFlow) {

app/core/Engine.ts

@@ -1,6 +1,17 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 import Crypto from 'react-native-quick-crypto';
 import { scrypt } from 'react-native-fast-crypto';
+import {
+  RemoteFeatureFlagController,
+  RemoteFeatureFlagControllerState,
+  RemoteFeatureFlagControllerGetStateAction,
+  ClientConfigApiService,
+  ClientType,
+  DistributionType,
+  EnvironmentType,
+
+} from '@metamask/remote-feature-flag-controller';
+
 import {
   AccountTrackerController,
   AccountTrackerControllerState,
@@ -309,6 +320,7 @@ type GlobalActions =
   | NetworkControllerActions
   | PermissionControllerActions
   | SignatureControllerActions
+  | RemoteFeatureFlagControllerGetStateAction
   | LoggingControllerActions
   ///: BEGIN:ONLY_INCLUDE_IF(preinstalled-snaps,external-snaps)
   | SnapsGlobalActions
@@ -370,6 +382,7 @@ export interface EngineState {
   NetworkController: NetworkState;
   PreferencesController: PreferencesState;
   PhishingController: PhishingControllerState;
+  RemoteFeatureFlagController: RemoteFeatureFlagControllerState;
   TokenBalancesController: TokenBalancesControllerState;
   TokenRatesController: TokenRatesControllerState;
   TransactionController: TransactionControllerState;
@@ -420,6 +433,7 @@ interface Controllers {
   PhishingController: PhishingController;
   PreferencesController: PreferencesController;
   PPOMController: PPOMController;
+  RemoteFeatureFlagController: RemoteFeatureFlagController;
   TokenBalancesController: TokenBalancesController;
   TokenListController: TokenListController;
   TokenDetectionController: TokenDetectionController;
@@ -744,6 +758,48 @@ export class Engine {
         'https://gas.api.cx.metamask.io/networks/<chain_id>/suggestedGasFees',
     });
 
+    const getFeatureFlagAppEnvironment = () => {
+      const env = process.env.METAMASK_ENVIRONMENT;
+      switch(env) {
+        case 'local': return EnvironmentType.Development;
+        case 'pre-release': return EnvironmentType.ReleaseCandidate;
+        case 'production': return EnvironmentType.Production;
+        default: return EnvironmentType.Development;
+      }
+    };
+    const getFeatureFlagAppDistribution = () => {
+      const dist = process.env.METAMASK_BUILD_TYPE;
+      switch(dist) {
+        case 'main': return DistributionType.Main;
+        case 'flask': return DistributionType.Flask;
+        default: return DistributionType.Main;
+      }
+
+    };
+
+    const featureFlagController = new RemoteFeatureFlagController({
+      messenger: this.controllerMessenger.getRestricted({
+        name: 'RemoteFeatureFlagController',
+        allowedActions: [],
+        allowedEvents: [],
+      }),
+      state: {
+        ...initialState.RemoteFeatureFlagController
+      },
+      disabled:
+          store.getState().settings.basicFunctionalityEnabled === false,
+      clientConfigApiService: new ClientConfigApiService({
+        fetch: fetchFunction,
+        config: {
+          client: ClientType.Mobile,
+          environment: getFeatureFlagAppEnvironment(),
+          distribution: getFeatureFlagAppDistribution(),
+        },
+      }),
+    });
+
+    featureFlagController.getRemoteFeatureFlags();
+
     const phishingController = new PhishingController({
       messenger: this.controllerMessenger.getRestricted({
         name: 'PhishingController',
@@ -1401,7 +1457,7 @@ export class Engine {
 
           return Boolean(
             hasProperty(showIncomingTransactions, currentChainId) &&
-              showIncomingTransactions?.[currentHexChainId],
+            showIncomingTransactions?.[currentHexChainId],
           );
         },
         updateTransactions: true,
@@ -1648,6 +1704,7 @@ export class Engine {
       gasFeeController,
       approvalController,
       permissionController,
+      featureFlagController,
       selectedNetworkController,
       new SignatureController({
         messenger: this.controllerMessenger.getRestricted({
@@ -1762,7 +1819,7 @@ export class Engine {
       (state: NetworkState) => {
         if (
           state.networksMetadata[state.selectedNetworkClientId].status ===
-            NetworkStatus.Available &&
+          NetworkStatus.Available &&
           networkController.getNetworkClientById(
             networkController?.state.selectedNetworkClientId,
           ).configuration.chainId !== currentChainId
@@ -1787,10 +1844,9 @@ export class Engine {
         } catch (error) {
           console.error(
             error,
-            `Network ID not changed, current chainId: ${
-              networkController.getNetworkClientById(
-                networkController?.state.selectedNetworkClientId,
-              ).configuration.chainId
+            `Network ID not changed, current chainId: ${networkController.getNetworkClientById(
+              networkController?.state.selectedNetworkClientId,
+            ).configuration.chainId
             }`,
           );
         }
@@ -1993,7 +2049,7 @@ export class Engine {
       const decimalsToShow = (currentCurrency === 'usd' && 2) || undefined;
       if (
         accountsByChainId?.[toHexadecimal(chainId)]?.[
-          selectSelectedInternalAccountChecksummedAddress
+        selectSelectedInternalAccountChecksummedAddress
         ]
       ) {
         const balanceBN = hexToBN(
@@ -2036,9 +2092,9 @@ export class Engine {
               item.balance ||
               (item.address in tokenBalances
                 ? renderFromTokenMinimalUnit(
-                    tokenBalances[item.address],
-                    item.decimals,
-                  )
+                  tokenBalances[item.address],
+                  item.decimals,
+                )
                 : undefined);
             const tokenBalanceFiat = balanceToFiatNumber(
               // TODO: Fix this by handling or eliminating the undefined case
@@ -2330,6 +2386,7 @@ export default {
       NetworkController,
       PreferencesController,
       PhishingController,
+      RemoteFeatureFlagController,
       PPOMController,
       TokenBalancesController,
       TokenRatesController,
@@ -2375,6 +2432,7 @@ export default {
       KeyringController,
       NetworkController,
       PhishingController,
+      RemoteFeatureFlagController,
       PPOMController,
       PreferencesController,
       TokenBalancesController,

app/core/EngineService/EngineService.ts

@@ -96,6 +96,10 @@ class EngineService {
         name: 'PreferencesController',
         key: `${engine.context.PreferencesController.name}:stateChange`,
       },
+      {
+        name: 'RemoteFeatureFlagController',
+        key: `${engine.context.RemoteFeatureFlagController.name}:stateChange`,
+      },
       {
         name: 'SelectedNetworkController',
         key: `${engine.context.SelectedNetworkController.name}:stateChange`,

app/reducers/index.ts

@@ -1,9 +1,6 @@
 import bookmarksReducer from './bookmarks';
 import browserReducer from './browser';
 import engineReducer from '../core/redux/slices/engine';
-import featureFlagsReducer, {
-  FeatureFlagsState,
-} from '../core/redux/slices/featureFlags';
 import privacyReducer from './privacy';
 import modalsReducer from './modals';
 import settingsReducer from './settings';
@@ -57,7 +54,6 @@ export interface RootState {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   collectibles: any;
   engine: { backgroundState: EngineState };
-  featureFlags: FeatureFlagsState;
   // TODO: Replace "any" with type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   privacy: any;
@@ -135,7 +131,6 @@ const rootReducer = combineReducers<RootState, any>({
   // TODO: Replace "any" with type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   engine: engineReducer as any,
-  featureFlags: featureFlagsReducer,
   privacy: privacyReducer,
   bookmarks: bookmarksReducer,
   browser: browserReducer,

app/selectors/featureFlagController/index.test.ts

@@ -0,0 +1,21 @@
+import { RootState } from '../../reducers';
+import mockedEngine from '../../core/__mocks__/MockedEngine';
+import { selectRemoteFeatureFlagControllerState } from '.';
+import { mockedState } from './mocks'
+
+jest.mock('../../core/Engine', () => ({
+  init: () => mockedEngine.init(),
+}));
+
+describe('featureFlagController', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+
+  it('should return feature flag initial state', () => {
+    const result = selectRemoteFeatureFlagControllerState(mockedState as RootState);
+    expect(result).toBeDefined();
+  });
+});
+