feat: enable STX by default with migration and notification

app/components/UI/Swaps/QuotesView.js

@@ -118,6 +118,7 @@ import { selectGasFeeControllerEstimateType } from '../../../selectors/gasFeeCon
 import { addSwapsTransaction } from '../../../util/swaps/swaps-transactions';
 import { getTransaction1559GasFeeEstimates } from './utils/gas';
 import { getGlobalEthQuery } from '../../../util/networks/global-network';
+import SmartTransactionsMigrationBanner from '../../Views/confirmations/components/SmartTransactionsMigrationBanner/SmartTransactionsMigrationBanner';
 
 const LOG_PREFIX = 'Swaps';
 const POLLING_INTERVAL = 30000;
@@ -148,6 +149,11 @@ const createStyles = (colors) =>
       marginVertical: 10,
       width: '100%',
     },
+    smartTransactionsMigrationBanner: {
+      paddingHorizontal: 20,
+      marginBottom: -8,
+      width: '100%',
+    },
     timerWrapper: {
       backgroundColor: colors.background.alternative,
       borderRadius: 20,
@@ -1788,7 +1794,11 @@ function SwapsQuotesView({
       keyboardShouldPersistTaps="handled"
     >
       <View style={styles.topBar}>
+        <View style={styles.smartTransactionsMigrationBanner}>
+          <SmartTransactionsMigrationBanner />
+        </View>
         {(!hasEnoughTokenBalance || !hasEnoughEthBalance) && (
+          <>
           <View style={styles.alertBar}>
             <Alert small type={AlertType.Info}>
               <Text reset bold>
@@ -1810,6 +1820,7 @@ function SwapsQuotesView({
                 )}
             </Alert>
           </View>
+          </>
         )}
         {!!selectedQuote &&
           hasEnoughTokenBalance &&

app/components/Views/confirmations/SendFlow/Confirm/index.js

@@ -137,6 +137,7 @@ import {
 } from './validation';
 import { buildTransactionParams } from '../../../../../util/confirmation/transactions';
 import { updateTransactionToMaxValue } from './utils';
+import SmartTransactionsMigrationBanner from '../../components/SmartTransactionsMigrationBanner/SmartTransactionsMigrationBanner';
 
 const EDIT = 'edit';
 const EDIT_NONCE = 'edit_nonce';
@@ -1413,11 +1414,14 @@ class Confirm extends PureComponent {
         />
         <ScrollView style={baseStyles.flexGrow} ref={this.setScrollViewRef}>
           {this.state.transactionMeta?.id && (
-            <TransactionBlockaidBanner
-              transactionId={this.state.transactionMeta.id}
-              style={styles.blockaidBanner}
-              onContactUsClicked={this.onContactUsClicked}
-            />
+            <>
+              <TransactionBlockaidBanner
+                transactionId={this.state.transactionMeta.id}
+                style={styles.blockaidBanner}
+                onContactUsClicked={this.onContactUsClicked}
+              />
+              <SmartTransactionsMigrationBanner style={styles.smartTransactionsMigrationBanner}/>
+            </>
           )}
           {!selectedAsset.tokenId ? (
             <View style={styles.amountWrapper}>

app/components/Views/confirmations/SendFlow/Confirm/styles.ts

@@ -153,6 +153,10 @@ const createStyles = (colors: any) =>
       marginRight: 24,
       marginBottom: 24,
     },
+    smartTransactionsMigrationBanner: {
+      marginBottom: -8,
+      marginHorizontal: 16,
+    },
   });
 
 export default createStyles;

app/components/Views/confirmations/components/ApproveTransactionReview/index.js

@@ -104,7 +104,7 @@ import SDKConnect from '../../../../../core/SDKConnect/SDKConnect';
 import DevLogger from '../../../../../core/SDKConnect/utils/DevLogger';
 import { WC2Manager } from '../../../../../core/WalletConnect/WalletConnectV2';
 import { WALLET_CONNECT_ORIGIN } from '../../../../../util/walletconnect';
-
+import SmartTransactionsMigrationBanner from '../SmartTransactionsMigrationBanner/SmartTransactionsMigrationBanner';
 const { ORIGIN_DEEPLINK, ORIGIN_QR_CODE } = AppConstants.DEEPLINKS;
 const POLLING_INTERVAL_ESTIMATED_L1_FEE = 30000;
 
@@ -922,6 +922,7 @@ class ApproveTransactionReview extends PureComponent {
                       style={styles.blockaidWarning}
                       onContactUsClicked={this.onContactUsClicked}
                     />
+                    <SmartTransactionsMigrationBanner style={styles.smartTransactionsMigrationBanner} />
                     <Text variant={TextVariant.HeadingMD} style={styles.title}>
                       {this.getTrustTitle(
                         originIsDeeplink,

app/components/Views/confirmations/components/ApproveTransactionReview/styles.ts

@@ -172,6 +172,10 @@ const createStyles = (colors: any) =>
       marginTop: 20,
       marginHorizontal: 10,
     },
+    SmartTransactionsMigrationBanner: {
+      marginHorizontal: 16,
+      marginBottom: -8,
+    },
   });
 
 export default createStyles;

app/components/Views/confirmations/components/SmartTransactionsMigrationBanner/SmartTransactionsMigrationBanner.styles.ts

@@ -0,0 +1,22 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+import { Theme } from '../../../../../util/theme/models';
+
+const styleSheet = (params: { theme: Theme; vars: { style?: ViewStyle } }) =>
+  StyleSheet.create({
+    banner: {
+      marginTop: 16,
+      marginBottom: 16,
+      ...params.vars.style,
+    },
+    textContainer: {
+      flexWrap: 'wrap',
+    },
+    link: {
+      color: params.theme.colors.primary.default,
+    },
+    description: {
+      color: params.theme.colors.text.default,
+    }
+  });
+
+export default styleSheet;

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

@@ -0,0 +1,99 @@
+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 Engine from '../../../../../core/Engine';
+
+jest.mock('../../../../../core/Engine', () => ({
+  context: {
+    PreferencesController: {
+      setFeatureFlag: jest.fn(),
+    },
+  },
+}));
+
+jest.mock('../../../../../../locales/i18n', () => ({
+  strings: jest.fn((key) => key),
+}));
+
+describe('SmartTransactionsMigrationBanner', () => {
+  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(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders nothing when banner should be hidden', () => {
+    const store = mockStore(createMockState({
+      featureFlags: { smartTransactionsBannerDismissed: true },
+    }));
+
+    const { queryByTestId } = render(
+      <Provider store={store}>
+        <SmartTransactionsMigrationBanner />
+      </Provider>
+    );
+    expect(queryByTestId('smart-transactions-enabled-banner')).toBeNull();
+  });
+
+  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 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(mockSetFeatureFlag).toHaveBeenCalledWith(
+      'smartTransactionsBannerDismissed',
+      true,
+    );
+  });
+
+  it('accepts and applies custom styles', () => {
+    const store = mockStore(createMockState());
+    const customStyle = { marginTop: 20 };
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <SmartTransactionsMigrationBanner style={customStyle} />
+      </Provider>
+    );
+
+    const banner = getByTestId('smart-transactions-enabled-banner');
+    expect(banner.props.style).toMatchObject(expect.objectContaining(customStyle));
+  });
+});

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

@@ -0,0 +1,74 @@
+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';
+import { strings } from '../../../../../../locales/i18n';
+import AppConstants from '../../../../../core/AppConstants';
+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 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 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;
+  }
+
+  const handleLearnMore = () => {
+    Linking.openURL(SMART_TRANSACTIONS_LEARN_MORE);
+    dismissBanner();
+  };
+
+  return (
+    <BannerAlert
+      severity={BannerAlertSeverity.Info}
+      title={strings('smart_transactions_enabled.title')}
+      description={
+        <Text style={styles.textContainer}>
+          <Text onPress={handleLearnMore} style={styles.link}>
+            {strings('smart_transactions_enabled.link')}
+          </Text>
+          <Text style={styles.description}>
+            {' '}{strings('smart_transactions_enabled.description')}
+          </Text>
+        </Text>
+      }
+      onClose={dismissBanner}
+      style={styles.banner}
+      testID="smart-transactions-enabled-banner"
+    />
+  );
+};
+
+export default SmartTransactionsMigrationBanner;

app/components/Views/confirmations/components/SmartTransactionsMigrationBanner/SmartTransactionsMigrationBanner.types.ts

@@ -0,0 +1,10 @@
+import { ViewStyle } from 'react-native';
+
+export interface SmartTransactionsMigrationBannerProps {
+  style?: ViewStyle;
+}
+
+export type SmartTransactionsMigrationBannerStyleSheetVars = Pick<
+  SmartTransactionsMigrationBannerProps,
+  'style'
+>;

app/components/Views/confirmations/components/TransactionReview/index.js

@@ -62,7 +62,7 @@ import TransactionReviewData from './TransactionReviewData';
 import TransactionReviewInformation from './TransactionReviewInformation';
 import TransactionReviewSummary from './TransactionReviewSummary';
 import DevLogger from '../../../../../core/SDKConnect/utils/DevLogger';
-
+import SmartTransactionsMigrationBanner from '../SmartTransactionsMigrationBanner/SmartTransactionsMigrationBanner';
 const POLLING_INTERVAL_ESTIMATED_L1_FEE = 30000;
 
 let intervalIdForEstimatedL1Fee;
@@ -120,6 +120,10 @@ const createStyles = (colors) =>
       marginHorizontal: 16,
       marginBottom: -8,
     },
+    SmartTransactionsMigrationBanner: {
+      marginHorizontal: 16,
+      marginBottom: -8,
+    },
   });
 
 /**
@@ -496,6 +500,7 @@ class TransactionReview extends PureComponent {
   }
 
   renderTransactionReview = () => {
+    Logger.log('TransactionReview RENDER TEST');
     const {
       transactionConfirmed,
       primaryCurrency,
@@ -597,6 +602,9 @@ class TransactionReview extends PureComponent {
                         onContactUsClicked={this.onContactUsClicked}
                       />
                     </View>
+                    <View style={styles.SmartTransactionsMigrationBanner}>
+                      <SmartTransactionsMigrationBanner />
+                    </View>
                     {to && (
                       <View style={styles.accountWrapper}>
                         <AccountFromToInfoCard

app/selectors/preferencesController.ts

@@ -146,3 +146,15 @@
   (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,
+);