fix: refactor useSmartTransactionsEnabled hook to use selectors ins…

…tead.

- Create new selectors file
- Update the SmartTransactionsMigrationBanner component to use these selectors directly
- Delete the hook file since its functionality would now be handled by selectors

app/components/Views/confirmations/components/SmartTransactionsMigrationBanner/SmartTransactionsMigrationBanner.test.tsx

@@ -1,53 +1,96 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
+import { Provider } from 'react-redux';
+import configureMockStore from 'redux-mock-store';
 import SmartTransactionsMigrationBanner from './SmartTransactionsMigrationBanner';
-import useSmartTransactionsEnabled from '../../../../hooks/useSmartTransactionsEnabled/useSmartTransactionsEnabled';
+import Engine from '../../../../../core/Engine';
+
+jest.mock('../../../../../core/Engine', () => ({
+  context: {
+    PreferencesController: {
+      setFeatureFlag: jest.fn(),
+    },
+  },
+}));
 
-jest.mock('../../../../hooks/useSmartTransactionsEnabled/useSmartTransactionsEnabled');
 jest.mock('../../../../../../locales/i18n', () => ({
   strings: jest.fn((key) => key),
 }));
 
 describe('SmartTransactionsMigrationBanner', () => {
-  const mockDismissBanner = jest.fn();
+  const mockStore = configureMockStore();
+  const mockSetFeatureFlag = jest.mocked(Engine.context.PreferencesController.setFeatureFlag);
+
+  const createMockState = (override = {}) => ({
+    engine: {
+      backgroundState: {
+        PreferencesController: {
+          smartTransactionsOptInStatus: true,
+          smartTransactionsMigrationApplied: true,
+          featureFlags: {
+            smartTransactionsBannerDismissed: false,
+          },
+          ...override,
+        },
+      },
+    },
+  });
 
   beforeEach(() => {
-    (useSmartTransactionsEnabled as jest.Mock).mockReturnValue({
-      shouldShowBanner: true,
-      dismissBanner: mockDismissBanner,
-    });
-    mockDismissBanner.mockClear();
+    jest.clearAllMocks();
   });
 
-  it('renders nothing when shouldShowBanner is false', () => {
-    (useSmartTransactionsEnabled as jest.Mock).mockReturnValue({
-      shouldShowBanner: false,
-      dismissBanner: mockDismissBanner,
-    });
+  it('renders nothing when banner should be hidden', () => {
+    const store = mockStore(createMockState({
+      featureFlags: { smartTransactionsBannerDismissed: true },
+    }));
 
-    const { queryByTestId } = render(<SmartTransactionsMigrationBanner />);
+    const { queryByTestId } = render(
+      <Provider store={store}>
+        <SmartTransactionsMigrationBanner />
+      </Provider>
+    );
     expect(queryByTestId('smart-transactions-enabled-banner')).toBeNull();
   });
 
-  it('renders banner when shouldShowBanner is true', () => {
-    const { getByTestId, getByText } = render(<SmartTransactionsMigrationBanner />);
+  it('renders banner when conditions are met', () => {
+    const store = mockStore(createMockState());
+
+    const { getByTestId, getByText } = render(
+      <Provider store={store}>
+        <SmartTransactionsMigrationBanner />
+      </Provider>
+    );
 
     expect(getByTestId('smart-transactions-enabled-banner')).toBeDefined();
     expect(getByText('smart_transactions_enabled.title')).toBeDefined();
     expect(getByText('smart_transactions_enabled.link')).toBeDefined();
   });
 
-  it('calls dismissBanner when close button is pressed', () => {
-    const { getByTestId } = render(<SmartTransactionsMigrationBanner />);
+  it('calls setFeatureFlag when close button is pressed', () => {
+    const store = mockStore(createMockState());
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <SmartTransactionsMigrationBanner />
+      </Provider>
+    );
 
     fireEvent.press(getByTestId('banner-close-button-icon'));
-    expect(mockDismissBanner).toHaveBeenCalled();
+    expect(mockSetFeatureFlag).toHaveBeenCalledWith(
+      'smartTransactionsBannerDismissed',
+      true,
+    );
   });
 
   it('accepts and applies custom styles', () => {
+    const store = mockStore(createMockState());
     const customStyle = { marginTop: 20 };
+
     const { getByTestId } = render(
-      <SmartTransactionsMigrationBanner style={customStyle} />,
+      <Provider store={store}>
+        <SmartTransactionsMigrationBanner style={customStyle} />
+      </Provider>
     );
 
     const banner = getByTestId('smart-transactions-enabled-banner');

app/components/Views/confirmations/components/SmartTransactionsMigrationBanner/SmartTransactionsMigrationBanner.tsx

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import { Linking } from 'react-native';
 import BannerAlert from '../../../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert';
 import { BannerAlertSeverity } from '../../../../../component-library/components/Banners/Banner/variants/BannerAlert/BannerAlert.types';
@@ -8,15 +9,37 @@ import Text from '../../../../../component-library/components/Texts/Text';
 import { useStyles } from '../../../../../component-library/hooks/useStyles';
 import styleSheet from './SmartTransactionsMigrationBanner.styles';
 import { SmartTransactionsMigrationBannerProps } from './SmartTransactionsMigrationBanner.types';
-import useSmartTransactionsEnabled from '../../../../hooks/useSmartTransactionsEnabled/useSmartTransactionsEnabled';
+import Engine from '../../../../../core/Engine';
+import Logger from '../../../../../util/Logger';
+import {
+  selectSmartTransactionsMigrationApplied,
+  selectSmartTransactionsBannerDismissed,
+  selectSmartTransactionsOptInStatus
+} from '../../../../../selectors/preferencesController';
 
 const SMART_TRANSACTIONS_LEARN_MORE = AppConstants.URLS.SMART_TXS;
 
 const SmartTransactionsMigrationBanner = ({
   style,
 }: SmartTransactionsMigrationBannerProps) => {
   const { styles } = useStyles(styleSheet, { style });
-  const { shouldShowBanner, dismissBanner } = useSmartTransactionsEnabled();
+  const isEnabled = useSelector(selectSmartTransactionsOptInStatus);
+  const isMigrationApplied = useSelector(selectSmartTransactionsMigrationApplied);
+  const isBannerDismissed = useSelector(selectSmartTransactionsBannerDismissed);
+
+  const shouldShowBanner = useMemo(
+    () => isEnabled && isMigrationApplied && !isBannerDismissed,
+    [isEnabled, isMigrationApplied, isBannerDismissed]
+  );
+
+  const dismissBanner = useCallback(async () => {
+    try {
+      const { PreferencesController } = Engine.context;
+      PreferencesController.setFeatureFlag('smartTransactionsBannerDismissed', true);
+    } catch (error) {
+      Logger.error(error as Error, 'Failed to dismiss banner:');
+    }
+  }, []);
 
   if (!shouldShowBanner) {
     return null;

app/selectors/preferencesController.ts

@@ -146,3 +146,15 @@ export const selectPrivacyMode = createSelector(
   (preferencesControllerState: PreferencesState) =>
     preferencesControllerState.privacyMode,
 );
+
+export const selectSmartTransactionsMigrationApplied = createSelector(
+  selectPreferencesControllerState,
+  (preferencesControllerState: PreferencesState) =>
+    preferencesControllerState.smartTransactionsMigrationApplied ?? false,
+);
+
+export const selectSmartTransactionsBannerDismissed = createSelector(
+  selectPreferencesControllerState,
+  (preferencesControllerState: PreferencesState) =>
+    preferencesControllerState.featureFlags?.smartTransactionsBannerDismissed ?? false,
+);