MetaMask · httpJunkie · Jan 7, 2025 · Jan 7, 2025 · Jan 7, 2025 · Jan 7, 2025
@@ -124,6 +124,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';
 import { getTradeTxTokenFee } from '../../../util/smart-transactions';
 
 const LOG_PREFIX = 'Swaps';
@@ -155,6 +156,10 @@ const createStyles = (colors) =>
       marginVertical: 10,
       width: '100%',
     },
+    smartTransactionsMigrationBanner: {
+      paddingHorizontal: 20,
+      width: '100%',
+    },
     timerWrapper: {
       backgroundColor: colors.background.alternative,
       borderRadius: 20,
@@ -1888,6 +1893,11 @@ function SwapsQuotesView({
       keyboardShouldPersistTaps="handled"
     >
       <View style={styles.topBar}>
+        {shouldUseSmartTransaction && (
+          <View style={styles.smartTransactionsMigrationBanner}>
+            <SmartTransactionsMigrationBanner />
+          </View>
+        )}
         {(!hasEnoughTokenBalance || !hasEnoughEthBalance) && (
           <View style={styles.alertBar}>
             <Alert small type={AlertType.Info}>

@@ -12,7 +12,15 @@ import initialRootState from '../../../../util/test/initial-root-state';
 
 const TRANSACTION_ID_MOCK = '123';
 jest.mock('../../../../selectors/smartTransactionsController', () => ({
-  selectShouldUseSmartTransaction: jest.fn().mockReturnValue(false),
+  selectSmartTransactionsEnabled: () => false,
+  selectShouldUseSmartTransaction: () => false
+}));
+
+jest.mock('../../../../selectors/preferencesController', () => ({
+  selectSmartTransactionsBannerDismissed: () => false,
+  selectSmartTransactionsMigrationApplied: () => false,
+  selectSmartTransactionsOptInStatus: () => false,
+  selectUseTransactionSimulations: () => false
 }));
 
 jest.mock('../../../../util/dappTransactions', () => ({
@@ -38,6 +46,16 @@ jest.mock('../../../../core/Engine', () => ({
   },
 }));
 
+jest.mock('../../../../selectors/confirmTransaction', () => ({
+  selectCurrentTransactionSecurityAlertResponse: () => null,
+  selectCurrentTransactionMetadata: () => null,
+  selectGasFeeEstimates: () => ({})
+}));
+
+jest.mock('../../../../selectors/tokenListController', () => ({
+  selectTokenList: () => ({})
+}));
+
 const Stack = createStackNavigator();
 const mockStore = configureMockStore();
 const navigationPropMock = {

@@ -13,7 +13,14 @@ import Routes from '../../../../../constants/navigation/Routes';
 
 const TRANSACTION_ID_MOCK = '123';
 jest.mock('../../../../../selectors/smartTransactionsController', () => ({
-  selectShouldUseSmartTransaction: jest.fn().mockReturnValue(false),
+  selectSmartTransactionsEnabled: () => false,
+  selectShouldUseSmartTransaction: () => false,
+}));
+
+jest.mock('../../../../../selectors/preferencesController', () => ({
+  selectSmartTransactionsBannerDismissed: () => false,
+  selectSmartTransactionsMigrationApplied: () => false,
+  selectSmartTransactionsOptInStatus: () => false,
 }));
 
 jest.mock('../../../../../core/GasPolling/GasPolling', () => ({

@@ -138,6 +138,7 @@ import {
 } from '../../../../../selectors/networkController';
 import { selectContractExchangeRatesByChainId } from '../../../../../selectors/tokenRatesController';
 import { updateTransactionToMaxValue } from './utils';
+import SmartTransactionsMigrationBanner from '../../components/SmartTransactionsMigrationBanner/SmartTransactionsMigrationBanner';
 import { isNativeToken } from '../../utils/generic';
 
 const EDIT = 'edit';
@@ -1422,11 +1423,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}>

@@ -185,6 +185,24 @@ jest.mock('../../../../../core/redux/slices/transactionMetrics', () => ({
   selectTransactionMetrics: jest.fn().mockReturnValue({}),
 }));
 
+jest.mock('../../../../../reducers/swaps', () => ({
+  swapsStateSelector: () => ({
+    featureFlags: {
+      smart_transactions: {
+        mobile_active: false
+      }
+    }
+  }),
+  swapsSmartTxFlagEnabled: () => false
+}));
+
+jest.mock('../../../../../selectors/preferencesController', () => ({
+  selectSmartTransactionsBannerDismissed: () => false,
+  selectSmartTransactionsMigrationApplied: () => false,
+  selectSmartTransactionsOptInStatus: () => false,
+  selectUseTransactionSimulations: () => false,
+}));
+
 function render(
   // TODO: Replace "any" with type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

@@ -153,6 +153,9 @@ const createStyles = (colors: any) =>
       marginRight: 24,
       marginBottom: 24,
     },
+    smartTransactionsMigrationBanner: {
+      marginHorizontal: 16,
+    },
   });
 
 export default createStyles;
@@ -103,7 +103,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;
 
@@ -919,6 +919,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,

@@ -172,6 +172,9 @@ const createStyles = (colors: any) =>
       marginTop: 20,
       marginHorizontal: 10,
     },
+    SmartTransactionsMigrationBanner: {
+      marginHorizontal: 16,
+    },
   });
 
 export default createStyles;
@@ -0,0 +1,21 @@
+import { StyleSheet, ViewStyle } from 'react-native';
+import { Theme } from '../../../../../util/theme/models';
+
+const styleSheet = (params: { theme: Theme; vars: { style?: ViewStyle } }) =>
+  StyleSheet.create({
+    banner: {
+      marginVertical: 16,
+      ...params.vars.style,
+    },
+    textContainer: {
+      flexWrap: 'wrap',
+    },
+    link: {
+      color: params.theme.colors.primary.default,
+    },
+    description: {
+      color: params.theme.colors.text.default,
+    }
+  });
+
+export default styleSheet;
@@ -0,0 +1,134 @@
+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),
+}));
+
+// Mock the selectors
+jest.mock('../../../../../selectors/preferencesController', () => ({
+ selectSmartTransactionsMigrationApplied: jest.fn(() => true),
+ selectSmartTransactionsBannerDismissed: jest.fn(() => false),
+}));
+
+jest.mock('../../../../../selectors/smartTransactionsController', () => ({
+ selectShouldUseSmartTransaction: jest.fn(() => true),
+}));
+
+describe('SmartTransactionsMigrationBanner', () => {
+ const mockStore = configureMockStore();
+ const mockSetFeatureFlag = jest.mocked(Engine.context.PreferencesController.setFeatureFlag);
+ const mockedPreferences = jest.requireMock('../../../../../selectors/preferencesController');
+ const mockedSmartTransactions = jest.requireMock('../../../../../selectors/smartTransactionsController');
+
+ beforeEach(() => {
+   jest.clearAllMocks();
+   // Reset only the selectors we're actually using
+   mockedPreferences.selectSmartTransactionsMigrationApplied.mockReturnValue(true);
+   mockedPreferences.selectSmartTransactionsBannerDismissed.mockReturnValue(false);
+   mockedSmartTransactions.selectShouldUseSmartTransaction.mockReturnValue(true);
+ });
+
+ describe('banner visibility', () => {
+   it('renders nothing when banner is dismissed', () => {
+     mockedPreferences.selectSmartTransactionsBannerDismissed.mockReturnValue(true);
+
+     const store = mockStore({});
+     const { queryByTestId } = render(
+       <Provider store={store}>
+         <SmartTransactionsMigrationBanner />
+       </Provider>
+     );
+     expect(queryByTestId('smart-transactions-migration-banner')).toBeNull();
+   });
+
+   it('renders nothing when smart transactions are not enabled', () => {
+     mockedSmartTransactions.selectShouldUseSmartTransaction.mockReturnValue(false);
+     const store = mockStore({});
+     const { queryByTestId } = render(
+       <Provider store={store}>
+         <SmartTransactionsMigrationBanner />
+       </Provider>
+     );
+     expect(queryByTestId('smart-transactions-migration-banner')).toBeNull();
+   });
+
+   it('renders nothing when migration is not applied', () => {
+     mockedPreferences.selectSmartTransactionsMigrationApplied.mockReturnValue(false);
+     const store = mockStore({});
+     const { queryByTestId } = render(
+       <Provider store={store}>
+         <SmartTransactionsMigrationBanner />
+       </Provider>
+     );
+     expect(queryByTestId('smart-transactions-migration-banner')).toBeNull();
+   });
+
+   it('renders banner when all conditions are met', () => {
+     const store = mockStore({});
+
+     const { getByTestId, getByText } = render(
+       <Provider store={store}>
+         <SmartTransactionsMigrationBanner />
+       </Provider>
+     );
+
+     expect(getByTestId('smart-transactions-migration-banner')).toBeDefined();
+     expect(getByText('smart_transactions_migration.title')).toBeDefined();
+     expect(getByText('smart_transactions_migration.link')).toBeDefined();
+   });
+ });
+
+ describe('banner interactions', () => {
+   it('calls setFeatureFlag when close button is pressed', () => {
+     const store = mockStore({});
+
+     const { getByTestId } = render(
+       <Provider store={store}>
+         <SmartTransactionsMigrationBanner />
+       </Provider>
+     );
+
+     fireEvent.press(getByTestId('banner-close-button-icon'));
+     expect(mockSetFeatureFlag).toHaveBeenCalledWith(
+       'smartTransactionsBannerDismissed',
+       true,
+     );
+   });
+ });
+
+ describe('banner styling', () => {
+  it('accepts and applies custom styles', () => {
+    const store = mockStore({});
+    const customStyle = { marginTop: 20 };
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <SmartTransactionsMigrationBanner style={customStyle} />
+      </Provider>
+    );
+
+    const banner = getByTestId('smart-transactions-migration-banner');
+    const style = banner.props.style;
+
+    // Check if either marginVertical is set, or both marginTop/marginBottom are set
+    const hasCorrectMargins =
+      (style.marginVertical !== undefined) ||
+      (style.marginTop === 20 && style.marginBottom === 16);
+
+    expect(hasCorrectMargins).toBe(true);
+  });
+ });
+});