feat: implement remote feature flag controller

.github/CODEOWNERS

@@ -7,19 +7,22 @@
 app/component-library/               @MetaMask/design-system-engineers
 
 # Platform Team
-.github/CODEOWNERS                   @MetaMask/mobile-platform
-patches/                             @MetaMask/mobile-platform
-app/core/Engine/Engine.ts            @MetaMask/mobile-platform
-app/core/Engine/Engine.test.ts       @MetaMask/mobile-platform
-app/core/Engine/index.ts             @MetaMask/mobile-platform
-app/core/Engine/types.ts             @MetaMask/mobile-platform
-app/core/Analytics/                  @MetaMask/mobile-platform
-app/util/metrics/                    @MetaMask/mobile-platform
-app/components/hooks/useMetrics/     @MetaMask/mobile-platform
-app/store/migrations/                @MetaMask/mobile-platform
-bitrise.yml                          @MetaMask/mobile-platform
-yarn.lock                            @MetaMask/mobile-platform
-ios/Podfile.lock                     @MetaMask/mobile-platform
+.github/CODEOWNERS                                          @MetaMask/mobile-platform
+patches/                                                    @MetaMask/mobile-platform
+app/core/Engine/Engine.ts                                   @MetaMask/mobile-platform
+app/core/Engine/Engine.test.ts                              @MetaMask/mobile-platform
+app/core/Engine/index.ts                                    @MetaMask/mobile-platform
+app/core/Engine/types.ts                                    @MetaMask/mobile-platform
+app/core/Engine/controllers/RemoteFeatureFlagController/    @MetaMask/mobile-platform
+app/core/Analytics/                                         @MetaMask/mobile-platform
+app/util/metrics/                                           @MetaMask/mobile-platform
+app/components/hooks/useMetrics/                            @MetaMask/mobile-platform
+app/selectors/featureFlagController/*                       @MetaMask/mobile-platform
+app/selectors/featureFlagController/minimumAppVersion/      @MetaMask/mobile-platform
+app/store/migrations/                                       @MetaMask/mobile-platform
+bitrise.yml                                                 @MetaMask/mobile-platform
+yarn.lock                                                   @MetaMask/mobile-platform
+ios/Podfile.lock                                            @MetaMask/mobile-platform
 
 # Ramps Team
 app/components/UI/Ramp/              @MetaMask/ramp
@@ -53,10 +56,10 @@ app/components/UI/Swaps              @MetaMask/swaps-engineers
 app/components/Views/Notifications @MetaMask/notifications
 app/components/Views/Settings/NotificationsSettings @MetaMask/notifications
 app/components/UI/Notifications @MetaMask/notifications
-app/reducers/notification  @MetaMask/notifications 
-app/actions/notification @MetaMask/notifications 
-app/selectors/notification @MetaMask/notifications 
-app/util/notifications  @MetaMask/notifications 
+app/reducers/notification  @MetaMask/notifications
+app/actions/notification @MetaMask/notifications
+app/selectors/notification @MetaMask/notifications
+app/util/notifications  @MetaMask/notifications
 app/store/util/notifications @MetaMask/notifications
 
 # LavaMoat Team

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 { SecurityState } from '../../../reducers/security';
+import { RootState } from '../../../reducers';
+import { selectAppMinimumBuild } from '../../../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/Engine.test.ts

@@ -37,6 +37,7 @@ describe('Engine', () => {
     expect(engine.context).toHaveProperty('NetworkController');
     expect(engine.context).toHaveProperty('PhishingController');
     expect(engine.context).toHaveProperty('PreferencesController');
+    expect(engine.context).toHaveProperty('RemoteFeatureFlagController');
     expect(engine.context).toHaveProperty('SignatureController');
     expect(engine.context).toHaveProperty('TokenBalancesController');
     expect(engine.context).toHaveProperty('TokenRatesController');

app/core/Engine/Engine.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-shadow */
 import Crypto from 'react-native-quick-crypto';
 import { scrypt } from 'react-native-fast-crypto';
+
 import {
   AccountTrackerController,
   AssetsContractController,
@@ -79,6 +80,7 @@
   LedgerMobileBridge,
   LedgerTransportMiddleware,
 } from '@metamask/eth-ledger-bridge-keyring';
+import RemoteFeatureFlagController from './controllers/RemoteFeatureFlagController';
 import { Encryptor, LEGACY_DERIVATION_OPTIONS } from '../Encryptor';
 import {
   isMainnetByChainId,
@@ -266,6 +268,10 @@
   ) {
     this.controllerMessenger = new ExtendedControllerMessenger();
 
+    // Basic Functionality toggle defaults to true
+    const getBasicFunctionalityToggleState = () =>
+      store.getState().settings?.basicFunctionalityEnabled ?? true;
+
     const approvalController = new ApprovalController({
       messenger: this.controllerMessenger.getRestricted({
         name: 'ApprovalController',
@@ -478,6 +484,13 @@
         'https://gas.api.cx.metamask.io/networks/<chain_id>/suggestedGasFees',
     });
 
+    const remoteFeatureFlagController = RemoteFeatureFlagController.init({
+      initialState,
+      controllerMessenger: this.controllerMessenger,
+      fetchFunction,
+      disabled: getBasicFunctionalityToggleState() === false
+    });
+
     const phishingController = new PhishingController({
       messenger: this.controllerMessenger.getRestricted({
         name: 'PhishingController',
@@ -933,8 +946,7 @@
       encryptor,
       getMnemonic: getPrimaryKeyringMnemonic.bind(this),
       getFeatureFlags: () => ({
-        disableSnaps:
-          store.getState().settings.basicFunctionalityEnabled === false,
+        disableSnaps: getBasicFunctionalityToggleState() === false,
       }),
     });
 
@@ -1135,7 +1147,7 @@
 
           return Boolean(
             hasProperty(showIncomingTransactions, currentChainId) &&
-              showIncomingTransactions?.[currentHexChainId],
+            showIncomingTransactions?.[currentHexChainId],
           );
         },
         updateTransactions: true,
@@ -1387,6 +1399,7 @@
       GasFeeController: gasFeeController,
       ApprovalController: approvalController,
       PermissionController: permissionController,
+      RemoteFeatureFlagController: remoteFeatureFlagController,
       SelectedNetworkController: selectedNetworkController,
       SignatureController: new SignatureController({
         messenger: this.controllerMessenger.getRestricted({
@@ -1466,9 +1479,9 @@
 
     this.datamodel = new ComposableController(
       // @ts-expect-error TODO: Filter out non-controller instances
       controllers,
       this.controllerMessenger,
     );
 
     const { NftController: nfts } = this.context;
 
@@ -1488,7 +1501,7 @@
       (state: NetworkState) => {
         if (
           state.networksMetadata[state.selectedNetworkClientId].status ===
-            NetworkStatus.Available &&
+          NetworkStatus.Available &&
           networkController.getNetworkClientById(
             networkController?.state.selectedNetworkClientId,
           ).configuration.chainId !== currentChainId
@@ -1513,10 +1526,9 @@
         } 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
             }`,
           );
         }
@@ -1718,7 +1730,7 @@
       const decimalsToShow = (currentCurrency === 'usd' && 2) || undefined;
       if (
         accountsByChainId?.[toHexadecimal(chainId)]?.[
-          selectSelectedInternalAccountChecksummedAddress
+        selectSelectedInternalAccountChecksummedAddress
         ]
       ) {
         const balanceBN = hexToBN(
@@ -1755,7 +1767,7 @@
 
         const tokenBalances =
           allTokenBalances?.[selectedInternalAccount.address as Hex]?.[
-            chainId
+          chainId
           ] ?? {};
         tokens.forEach(
           (item: { address: string; balance?: string; decimals: number }) => {
@@ -1766,9 +1778,9 @@
               item.balance ||
               (item.address in tokenBalances
                 ? renderFromTokenMinimalUnit(
-                    tokenBalances[item.address as Hex],
-                    item.decimals,
-                  )
+                  tokenBalances[item.address as Hex],
+                  item.decimals,
+                )
                 : undefined);
             const tokenBalanceFiat = balanceToFiatNumber(
               // TODO: Fix this by handling or eliminating the undefined case
@@ -2061,6 +2073,7 @@
       NetworkController,
       PreferencesController,
       PhishingController,
+      RemoteFeatureFlagController,
       PPOMController,
       TokenBalancesController,
       TokenRatesController,
@@ -2106,6 +2119,7 @@
       KeyringController,
       NetworkController,
       PhishingController,
+      RemoteFeatureFlagController,
       PPOMController,
       PreferencesController,
       TokenBalancesController,

app/core/Engine/controllers/RemoteFeatureFlagController/index.ts

@@ -0,0 +1,54 @@
+import {
+  RemoteFeatureFlagController,
+  ClientConfigApiService,
+  ClientType,
+} from '@metamask/remote-feature-flag-controller';
+import Logger from '../../../../util/Logger';
+import { RemoteFeatureFlagInitParamTypes } from './types';
+import {
+  getFeatureFlagAppEnvironment,
+  getFeatureFlagAppDistribution
+} from './utils';
+
+
+const init = ({
+  initialState,
+  controllerMessenger,
+  fetchFunction,
+  disabled,
+}: RemoteFeatureFlagInitParamTypes) => {
+
+  const remoteFeatureFlagController = new RemoteFeatureFlagController({
+    messenger: controllerMessenger.getRestricted({
+      name: 'RemoteFeatureFlagController',
+      allowedActions: [],
+      allowedEvents: [],
+    }),
+    state: {
+      ...initialState.RemoteFeatureFlagController
+    },
+    disabled,
+    clientConfigApiService: new ClientConfigApiService({
+      fetch: fetchFunction,
+      config: {
+        client: ClientType.Mobile,
+        environment: getFeatureFlagAppEnvironment(),
+        distribution: getFeatureFlagAppDistribution(),
+      },
+    }),
+  });
+
+  if (disabled) {
+    Logger.log('Feature Flags Controller disabled');
+  } else {
+    remoteFeatureFlagController.getRemoteFeatureFlags().then((featFlags) => {
+      Logger.log(`Received feature flags ${JSON.stringify(featFlags)}`);
+    });
+  }
+
+  return remoteFeatureFlagController;
+}
+
+export default {
+  init
+}

app/core/Engine/controllers/RemoteFeatureFlagController/types.ts

@@ -0,0 +1,9 @@
+import { ControllerMessenger, EngineState } from '../../types';
+
+export interface RemoteFeatureFlagInitParamTypes {
+  initialState: Partial<EngineState>;
+  controllerMessenger: ControllerMessenger,
+  fetchFunction: typeof fetch,
+  disabled: boolean
+}
+

app/core/Engine/controllers/RemoteFeatureFlagController/utils.ts

@@ -0,0 +1,24 @@
+import {
+  DistributionType,
+  EnvironmentType,
+} from '@metamask/remote-feature-flag-controller';
+
+export 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;
+  }
+};
+
+export 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;
+  }
+};
+

app/core/Engine/types.ts

@@ -153,6 +153,10 @@
 } from '@metamask/accounts-controller';
 import { BaseState } from '@metamask/base-controller';
 import { getPermissionSpecifications } from '../Permissions/specifications.js';
+import {
+  RemoteFeatureFlagController,
+  RemoteFeatureFlagControllerState
+} from '@metamask/remote-feature-flag-controller';
 
 /**
  * Controllers that area always instantiated
@@ -282,6 +286,7 @@
   SelectedNetworkController: SelectedNetworkController;
   PhishingController: PhishingController;
   PreferencesController: PreferencesController;
+  RemoteFeatureFlagController: RemoteFeatureFlagController;
   PPOMController: PPOMController;
   TokenBalancesController: TokenBalancesController;
   TokenListController: TokenListController;
@@ -320,6 +325,7 @@
   KeyringController: KeyringControllerState;
   NetworkController: NetworkState;
   PreferencesController: PreferencesState;
+  RemoteFeatureFlagController: RemoteFeatureFlagControllerState;
   PhishingController: PhishingControllerState;
   TokenBalancesController: TokenBalancesControllerState;
   TokenRatesController: TokenRatesControllerState;

app/core/EngineService/EngineService.test.ts

@@ -51,6 +51,7 @@ jest.mock('../Engine', () => {
           NetworkController: { subscribe: jest.fn() },
           PhishingController: { subscribe: jest.fn() },
           PreferencesController: { subscribe: jest.fn() },
+          RemoteFeatureFlagController: { subscribe: jest.fn() },
           TokenBalancesController: { subscribe: jest.fn() },
           TokenRatesController: { subscribe: jest.fn() },
           TransactionController: { subscribe: jest.fn() },

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`,