chore: migrate off of useFeatureFlag (MetaMask#24125)

## **Description**

This PR migrates feature flag checks from the custom `useFeatureFlag`
hook to Redux selectors, aligning with the codebase's feature flag
architecture guidelines.

### Reason for change:
- The existing `useFeatureFlag` hook was creating an inconsistent
pattern for accessing feature flags
- Redux selectors provide better memoization, testability, and
integration with the existing state management architecture
- Centralizes feature flag access patterns for better maintainability

### Solution:
- Added new Redux selectors for OTA Updates, Full Page Account List, and
Rewards feature flags
- Each selector includes both a "raw" version (direct flag value) and a
combined version that respects the `basicFunctionalityEnabled` setting
- Updated all consuming components to use `useSelector` with the new
selectors
- Added comprehensive test coverage for all new selectors
- Removed the deprecated `useFeatureFlag` hook

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

Feature: Feature Flag Selectors

  Scenario: OTA Updates flag respects basic functionality setting
    Given the app has basic functionality enabled
    And the remote feature flag for OTA updates is enabled

    When the app checks if OTA updates are enabled
    Then the selector returns true

Scenario: Full Page Account List flag is disabled when basic
functionality is off
    Given the app has basic functionality disabled
    And the remote feature flag for full page account list is enabled

    When the AccountSelector component renders
    Then it uses the non-full-page account list UI

  Scenario: Rewards flags work correctly
    Given the app has basic functionality enabled
    And the rewards feature flags are enabled remotely

    When the WaysToEarn component checks mUSD holding flag
Then the appropriate rewards options are displayed##
**Screenshots/Recordings**

### **Before**

N/A - Internal refactoring with no visual changes

### **After**

N/A - Internal refactoring with no visual changes

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.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: asalsys

app/components/UI/Rewards/components/Tabs/OverviewTab/WaysToEarn/WaysToEarn.test.tsx

@@ -11,6 +11,7 @@ import {
   selectRewardsCardSpendFeatureFlags,
   selectRewardsMusdDepositEnabledFlag,
 } from '../../../../../../../selectors/featureFlagController/rewards';
+import { selectMusdHoldingEnabledFlag } from '../../../../../../../selectors/featureFlagController/rewards/rewardsEnabled';
 import { selectPredictEnabledFlag } from '../../../../../Predict/selectors/featureFlags';
 import { MetaMetricsEvents } from '../../../../../../hooks/useMetrics';
 import { RewardsMetricsButtons } from '../../../../utils';
@@ -80,20 +81,13 @@ jest.mock('react-redux', () => ({
   useSelector: jest.fn(),
 }));
 
-// Mock useFeatureFlag hook
-jest.mock('../../../../../../../components/hooks/useFeatureFlag', () => ({
-  useFeatureFlag: jest.fn((key: string) => {
-    if (key === 'rewardsEnableMusdHolding') {
-      return mockIsMusdHoldingEnabled;
-    }
-    return false;
+// Mock selectMusdHoldingEnabledFlag selector
+jest.mock(
+  '../../../../../../../selectors/featureFlagController/rewards/rewardsEnabled',
+  () => ({
+    selectMusdHoldingEnabledFlag: jest.fn(),
   }),
-  FeatureFlagNames: {
-    rewardsEnabled: 'rewardsEnabled',
-    otaUpdatesEnabled: 'otaUpdatesEnabled',
-    rewardsEnableMusdHolding: 'rewardsEnableMusdHolding',
-  },
-}));
+);
 
 // Mock useMetrics hook
 jest.mock('../../../../../../hooks/useMetrics', () => ({
@@ -283,6 +277,9 @@ describe('WaysToEarn', () => {
       if (selector === selectRewardsMusdDepositEnabledFlag) {
         return mockIsMusdDepositEnabled;
       }
+      if (selector === selectMusdHoldingEnabledFlag) {
+        return mockIsMusdHoldingEnabled;
+      }
       return undefined;
     });
 

app/components/UI/Rewards/components/Tabs/OverviewTab/WaysToEarn/WaysToEarn.tsx

@@ -33,11 +33,8 @@ import {
   selectRewardsCardSpendFeatureFlags,
   selectRewardsMusdDepositEnabledFlag,
 } from '../../../../../../../selectors/featureFlagController/rewards';
+import { selectMusdHoldingEnabledFlag } from '../../../../../../../selectors/featureFlagController/rewards/rewardsEnabled';
 import { selectPredictEnabledFlag } from '../../../../../Predict/selectors/featureFlags';
-import {
-  useFeatureFlag,
-  FeatureFlagNames,
-} from '../../../../../../hooks/useFeatureFlag';
 import { PredictEventValues } from '../../../../../Predict/constants/eventNames';
 import {
   MetaMetricsEvents,
@@ -263,9 +260,7 @@ export const WaysToEarn = () => {
   const isCardSpendEnabled = useSelector(selectRewardsCardSpendFeatureFlags);
   const isPredictEnabled = useSelector(selectPredictEnabledFlag);
   const isMusdDepositEnabled = useSelector(selectRewardsMusdDepositEnabledFlag);
-  const isMusdHoldingEnabled = useFeatureFlag(
-    FeatureFlagNames.rewardsEnableMusdHolding,
-  );
+  const isMusdHoldingEnabled = useSelector(selectMusdHoldingEnabledFlag);
   const { trackEvent, createEventBuilder } = useMetrics();
 
   // Use the swap/bridge navigation hook

app/components/Views/AccountSelector/AccountSelector.test.tsx

@@ -20,14 +20,14 @@ import {
   internalSolanaAccount1,
 } from '../../../util/test/accountsControllerTestUtils';
 
-jest.mock('../../hooks/useFeatureFlag', () => ({
-  useFeatureFlag: jest.fn(() => false), // Default to BottomSheet version for tests
-  FeatureFlagNames: {
-    rewardsEnabled: 'rewardsEnabled',
-    otaUpdatesEnabled: 'otaUpdatesEnabled',
-    fullPageAccountList: 'fullPageAccountList',
-  },
-}));
+const mockSelectFullPageAccountListEnabledFlag = jest.fn(() => false);
+jest.mock(
+  '../../../selectors/featureFlagController/fullPageAccountList',
+  () => ({
+    selectFullPageAccountListEnabledFlag: () =>
+      mockSelectFullPageAccountListEnabledFlag(),
+  }),
+);
 
 const mockAvatarAccountType = 'Maskicon' as const;
 
@@ -670,17 +670,13 @@ describe('AccountSelector', () => {
   });
 
   describe('Feature Flag: Full-Page Account List', () => {
-    let mockUseFeatureFlag: jest.Mock;
-
     beforeEach(() => {
       jest.clearAllMocks();
-      mockUseFeatureFlag = jest.requireMock(
-        '../../hooks/useFeatureFlag',
-      ).useFeatureFlag;
+      mockSelectFullPageAccountListEnabledFlag.mockReturnValue(false);
     });
 
     it('renders BottomSheet when feature flag is disabled', () => {
-      mockUseFeatureFlag.mockReturnValue(false);
+      mockSelectFullPageAccountListEnabledFlag.mockReturnValue(false);
 
       renderScreen(
         AccountSelectorWrapper,
@@ -702,7 +698,7 @@ describe('AccountSelector', () => {
     });
 
     it('renders full-page modal when feature flag is enabled', () => {
-      mockUseFeatureFlag.mockReturnValue(true);
+      mockSelectFullPageAccountListEnabledFlag.mockReturnValue(true);
 
       renderScreen(
         AccountSelectorWrapper,
@@ -725,7 +721,7 @@ describe('AccountSelector', () => {
 
     it('renders add button in both modes', () => {
       // Arrange: BottomSheet mode
-      mockUseFeatureFlag.mockReturnValue(false);
+      mockSelectFullPageAccountListEnabledFlag.mockReturnValue(false);
 
       // Act: Render in BottomSheet mode
       const { unmount } = renderScreen(
@@ -750,7 +746,7 @@ describe('AccountSelector', () => {
 
       // Arrange: Full-page mode
       jest.useRealTimers();
-      mockUseFeatureFlag.mockReturnValue(true);
+      mockSelectFullPageAccountListEnabledFlag.mockReturnValue(true);
 
       // Act: Render in full-page mode
       renderScreen(
@@ -777,7 +773,7 @@ describe('AccountSelector', () => {
     it('switches between multichain screens in full-page mode', () => {
       // Arrange
       jest.useRealTimers();
-      mockUseFeatureFlag.mockReturnValue(true);
+      mockSelectFullPageAccountListEnabledFlag.mockReturnValue(true);
       mockSelectMultichainAccountsState2Enabled.mockReturnValue(true);
 
       renderScreen(
@@ -806,7 +802,7 @@ describe('AccountSelector', () => {
 
     it('closes BottomSheet when account is selected with feature flag disabled', async () => {
       // Arrange
-      mockUseFeatureFlag.mockReturnValue(false);
+      mockSelectFullPageAccountListEnabledFlag.mockReturnValue(false);
 
       const { getAllByTestId } = renderScreen(
         AccountSelectorWrapper,
@@ -840,7 +836,7 @@ describe('AccountSelector', () => {
 
     it('renders SheetHeader with title in full-page mode', () => {
       // Arrange
-      mockUseFeatureFlag.mockReturnValue(true);
+      mockSelectFullPageAccountListEnabledFlag.mockReturnValue(true);
 
       renderScreen(
         AccountSelectorWrapper,
@@ -864,7 +860,7 @@ describe('AccountSelector', () => {
     it('closes full-page modal when account is selected with feature flag enabled', async () => {
       // Arrange
       jest.useRealTimers();
-      mockUseFeatureFlag.mockReturnValue(true);
+      mockSelectFullPageAccountListEnabledFlag.mockReturnValue(true);
 
       // Mock the useNavigation hook to prevent navigation warnings
       const mockGoBack = jest.fn();

app/components/Views/AccountSelector/AccountSelector.tsx

@@ -36,7 +36,7 @@ import BottomSheet, {
 import BottomSheetHeader from '../../../component-library/components/BottomSheets/BottomSheetHeader';
 import SheetHeader from '../../../component-library/components/Sheet/SheetHeader';
 import Engine from '../../../core/Engine';
-import { useFeatureFlag, FeatureFlagNames } from '../../hooks/useFeatureFlag';
+import { selectFullPageAccountListEnabledFlag } from '../../../selectors/featureFlagController/fullPageAccountList';
 import { store } from '../../../store';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import { strings } from '../../../../locales/i18n';
@@ -95,8 +95,8 @@ const AccountSelector = ({ route }: AccountSelectorProps) => {
   const routeParams = useMemo(() => route?.params, [route?.params]);
 
   // Feature flag for full-page account list
-  const isFullPageAccountList = useFeatureFlag(
-    FeatureFlagNames.fullPageAccountList,
+  const isFullPageAccountList = useSelector(
+    selectFullPageAccountListEnabledFlag,
   );
   const sheetRef = useRef<BottomSheetRef>(null);
 

app/components/Views/FeatureFlagOverride/FeatureFlagOverride.test.tsx

@@ -10,7 +10,7 @@ import {
   FeatureFlagInfo,
   isMinimumRequiredVersionSupported,
 } from '../../../util/feature-flags';
-import { FeatureFlagNames } from '../../hooks/useFeatureFlag';
+import { FeatureFlagNames } from '../../../constants/featureFlags';
 
 // Mock all dependencies
 jest.mock('@react-navigation/native', () => ({

app/components/Views/FeatureFlagOverride/FeatureFlagOverride.tsx

@@ -23,7 +23,7 @@ import {
 } from '../../../util/feature-flags';
 import { useFeatureFlagOverride } from '../../../contexts/FeatureFlagOverrideContext';
 import { useFeatureFlagStats } from '../../../hooks/useFeatureFlagStats';
-import { FeatureFlagNames } from '../../hooks/useFeatureFlag';
+import { FeatureFlagNames } from '../../../constants/featureFlags';
 
 interface FeatureFlagRowProps {
   flag: FeatureFlagInfo;