feat: Add useMMPayFiatConfig hook and feature flag selector

app/components/Views/confirmations/hooks/pay/useMMPayFiatConfig.test.ts

@@ -0,0 +1,18 @@
+import { cloneDeep } from 'lodash';
+import { renderHookWithProvider } from '../../../../../util/test/renderWithProvider';
+import { useMMPayFiatConfig } from './useMMPayFiatConfig';
+import { mockedEmptyFlagsState } from '../../../../../selectors/featureFlagController/mocks';
+
+describe('useMMPayFiatConfig', () => {
+  it('returns selector value from store', () => {
+    const state = cloneDeep(mockedEmptyFlagsState);
+    state.engine.backgroundState.RemoteFeatureFlagController.remoteFeatureFlags =
+      {
+        confirmations_pay_fiat: { enabled: true },
+      };
+
+    const { result } = renderHookWithProvider(useMMPayFiatConfig, { state });
+
+    expect(result.current).toEqual({ enabled: true });
+  });
+});

app/components/Views/confirmations/hooks/pay/useMMPayFiatConfig.ts

@@ -0,0 +1,9 @@
+import { useSelector } from 'react-redux';
+import {
+  MetaMaskPayFiatFlags,
+  selectMetaMaskPayFiatFlags,
+} from '../../../../../selectors/featureFlagController/confirmations';
+
+export function useMMPayFiatConfig(): MetaMaskPayFiatFlags {
+  return useSelector(selectMetaMaskPayFiatFlags);
+}

app/selectors/featureFlagController/confirmations/index.test.ts

@@ -11,6 +11,8 @@ import {
   selectGasFeeTokenFlags,
   GasFeeTokenFlags,
   selectPayQuoteConfig,
+  selectMetaMaskPayFiatFlags,
+  PAY_FIAT_ENABLED_DEFAULT,
   PreferredToken,
   getPreferredTokensForTransactionType,
 } from '.';
@@ -445,3 +447,21 @@ describe('getPreferredTokensForTransactionType', () => {
     );
   });
 });
+
+describe('selectMetaMaskPayFiatFlags', () => {
+  it('returns default when flag is absent', () => {
+    expect(selectMetaMaskPayFiatFlags(mockedEmptyFlagsState)).toEqual({
+      enabled: PAY_FIAT_ENABLED_DEFAULT,
+    });
+  });
+
+  it('returns enabled from flag value', () => {
+    const state = cloneDeep(mockedEmptyFlagsState);
+    state.engine.backgroundState.RemoteFeatureFlagController.remoteFeatureFlags =
+      {
+        confirmations_pay_fiat: { enabled: true },
+      };
+
+    expect(selectMetaMaskPayFiatFlags(state)).toEqual({ enabled: true });
+  });
+});

app/selectors/featureFlagController/confirmations/index.ts

@@ -7,6 +7,7 @@ export const ATTEMPTS_MAX_DEFAULT = 2;
 export const BUFFER_INITIAL_DEFAULT = 0.025;
 export const BUFFER_STEP_DEFAULT = 0.025;
 export const BUFFER_SUBSEQUENT_DEFAULT = 0.05;
+export const PAY_FIAT_ENABLED_DEFAULT = false;
 export const SLIPPAGE_DEFAULT = 0.005;
 
 export interface PreferredToken {
@@ -55,6 +56,10 @@ export interface GasFeeTokenFlags {
   };
 }
 
+export interface MetaMaskPayFiatFlags {
+  enabled: boolean;
+}
+
 export const selectMetaMaskPayFlags = createSelector(
   selectRemoteFeatureFlags,
   (featureFlags): MetaMaskPayFlags => {
@@ -199,3 +204,16 @@ export const selectGasFeeTokenFlags = createSelector(
     };
   },
 );
+
+export const selectMetaMaskPayFiatFlags = createSelector(
+  selectRemoteFeatureFlags,
+  (featureFlags): MetaMaskPayFiatFlags => {
+    const raw = featureFlags?.confirmations_pay_fiat as
+      | Record<string, Json>
+      | undefined;
+
+    return {
+      enabled: (raw?.enabled as boolean) ?? PAY_FIAT_ENABLED_DEFAULT,
+    };
+  },
+);