fix: Update STX Banner Alert, include chainSupportsSmartTransactions

app/scripts/migrations/135.test.ts

@@ -18,7 +18,7 @@ describe('migration #135', () => {
     expect(newStorage.meta).toStrictEqual({ version: 135 });
   });
 
-  it('should set stx opt-in to true and migration flag when stx opt-in status is null', async () => {
+  it('should set stx opt-in to true and mark as migration-enabled when opt-in status is null', async () => {
     const oldStorage: VersionedData = {
       meta: { version: prevVersion },
       data: {
@@ -41,7 +41,7 @@ describe('migration #135', () => {
     ).toBe(true);
   });
 
-  it('should set stx opt-in to true and migration flag when stx opt-in status is undefined', async () => {
+  it('should set stx opt-in to true and mark as migration-enabled when opt-in status is undefined', async () => {
     const oldStorage: VersionedData = {
       meta: { version: prevVersion },
       data: {
@@ -60,7 +60,7 @@ describe('migration #135', () => {
     ).toBe(true);
   });
 
-  it('should set stx opt-in to true and migration flag when stx opt-in is false and no existing mainnet smart transactions', async () => {
+  it('should set stx opt-in to true and mark as migration-enabled when opt-in is false and no existing mainnet transactions', async () => {
     const oldStorage: VersionedData = {
       meta: { version: prevVersion },
       data: {
@@ -91,7 +91,7 @@ describe('migration #135', () => {
     ).toBe(true);
   });
 
-  it('should not change stx opt-in when stx opt-in is false but has existing smart transactions, but should set migration flag', async () => {
+  it('should preserve disabled stx state when user has transaction history', async () => {
     const oldStorage: VersionedData = {
       meta: { version: prevVersion },
       data: {
@@ -118,10 +118,10 @@ describe('migration #135', () => {
     expect(
       newStorage.data.PreferencesController?.preferences
         ?.smartTransactionsMigrationApplied,
-    ).toBe(true);
+    ).toBeUndefined();
   });
 
-  it('should not change stx opt-in when stx opt-in is already true, but should set migration flag', async () => {
+  it('should preserve existing stx enabled state', async () => {
     const oldStorage: VersionedData = {
       meta: { version: prevVersion },
       data: {
@@ -141,7 +141,7 @@ describe('migration #135', () => {
     expect(
       newStorage.data.PreferencesController?.preferences
         ?.smartTransactionsMigrationApplied,
-    ).toBe(true);
+    ).toBeUndefined();
   });
 
   it('should initialize preferences object if it does not exist', async () => {
@@ -161,7 +161,7 @@ describe('migration #135', () => {
     expect(
       newStorage.data.PreferencesController?.preferences
         ?.smartTransactionsMigrationApplied,
-    ).toBe(true);
+    ).toBeUndefined();
   });
 
   it('should capture exception if PreferencesController state is invalid', async () => {

app/scripts/migrations/135.ts

@@ -52,11 +52,12 @@ function transformState(state: VersionedData['data']) {
       smartTransactionsOptInStatus: true,
       smartTransactionsMigrationApplied: true,
     };
-  } else {
-    state.PreferencesController.preferences = {
-      ...state.PreferencesController.preferences,
-      smartTransactionsMigrationApplied: true,
-    };
+    // // Removing this block, as we want to set migration flag only when user has opted in
+    // } else {
+    //   state.PreferencesController.preferences = {
+    //     ...state.PreferencesController.preferences,
+    //     smartTransactionsMigrationApplied: true,
+    //   };
   }
 
   return state;

ui/pages/confirmations/components/smart-transactions-banner-alert/smart-transactions-banner-alert.test.tsx

@@ -8,6 +8,8 @@ import { renderWithProvider } from '../../../../../test/jest/rendering';
 import configureStore from '../../../../store/store';
 import { AlertTypes } from '../../../../../shared/constants/alerts';
 import { setAlertEnabledness } from '../../../../store/actions';
+import { mockNetworkState } from '../../../../../test/stub/networks';
+import { CHAIN_IDS } from '../../../../../shared/constants/network';
 import { SmartTransactionsBannerAlert } from './smart-transactions-banner-alert';
 
 type TestConfirmContextValue = {
@@ -56,10 +58,41 @@ describe('SmartTransactionsBannerAlert', () => {
         smartTransactionsOptInStatus: true,
         smartTransactionsMigrationApplied: true,
       },
+      featureFlags: {
+        smartTransactionsEnabled: true,
+      },
+      smartTransactionsFeatureFlags: {
+        enabled: true,
+      },
+      swapsState: {
+        swapsFeatureFlags: {
+          ethereum: {
+            extensionActive: true,
+            mobileActive: false,
+            smartTransactions: {
+              expectedDeadline: 45,
+              maxDeadline: 150,
+              extensionReturnTxHashAsap: false,
+            },
+          },
+          smartTransactions: {
+            extensionActive: true,
+            mobileActive: false,
+          },
+        },
+      },
+      smartTransactionsState: {
+        liveness: true,
+      },
+      ...mockNetworkState({
+        id: 'network-configuration-id-1',
+        chainId: CHAIN_IDS.MAINNET,
+        rpcUrl: 'https://mainnet.infura.io/v3/',
+      }),
     },
   };
 
-  it('renders banner when alert is enabled, STX is opted in, and migration is applied', () => {
+  it('renders banner when all conditions are met', () => {
     const store = configureStore(mockState);
     renderWithProvider(<SmartTransactionsBannerAlert />, store);
 
@@ -79,14 +112,12 @@ describe('SmartTransactionsBannerAlert', () => {
 
   it('does not render when alert is disabled', () => {
     const disabledState = {
+      ...mockState,
       metamask: {
+        ...mockState.metamask,
         alertEnabledness: {
           [AlertTypes.smartTransactionsMigration]: false,
         },
-        preferences: {
-          smartTransactionsOptInStatus: true,
-          smartTransactionsMigrationApplied: true,
-        },
       },
     };
     const store = configureStore(disabledState);
@@ -99,12 +130,11 @@ describe('SmartTransactionsBannerAlert', () => {
 
   it('does not render when migration has not been applied', () => {
     const noMigrationState = {
+      ...mockState,
       metamask: {
-        alertEnabledness: {
-          [AlertTypes.smartTransactionsMigration]: true,
-        },
+        ...mockState.metamask,
         preferences: {
-          smartTransactionsOptInStatus: true,
+          ...mockState.metamask.preferences,
           smartTransactionsMigrationApplied: false,
         },
       },
@@ -117,6 +147,67 @@ describe('SmartTransactionsBannerAlert', () => {
     ).not.toBeInTheDocument();
   });
 
+  it('does not render when chain does not support smart transactions', () => {
+    const unsupportedChainState = {
+      ...mockState,
+      metamask: {
+        ...mockState.metamask,
+        ...mockNetworkState({
+          id: 'network-configuration-id-2',
+          chainId: CHAIN_IDS.POLYGON,
+          rpcUrl: 'https://polygon-rpc.com',
+        }),
+      },
+    };
+    const store = configureStore(unsupportedChainState);
+    renderWithProvider(<SmartTransactionsBannerAlert />, store);
+
+    expect(
+      screen.queryByTestId('smart-transactions-banner-alert'),
+    ).not.toBeInTheDocument();
+  });
+
+  it('does not render when smart transactions preference is disabled', () => {
+    const disabledPreferenceState = {
+      ...mockState,
+      metamask: {
+        ...mockState.metamask,
+        preferences: {
+          ...mockState.metamask.preferences,
+          smartTransactionsOptInStatus: false, // Add this
+        },
+        featureFlags: {
+          smartTransactionsEnabled: false,
+        },
+        smartTransactionsFeatureFlags: {
+          enabled: false,
+        },
+        swapsState: {
+          swapsFeatureFlags: {
+            ethereum: {
+              extensionActive: false,
+              smartTransactions: {
+                expectedDeadline: 45,
+                maxDeadline: 150,
+                extensionReturnTxHashAsap: false,
+              },
+            },
+            smartTransactions: {
+              extensionActive: false,
+              mobileActive: false,
+            },
+          },
+        },
+      },
+    };
+    const store = configureStore(disabledPreferenceState);
+    renderWithProvider(<SmartTransactionsBannerAlert />, store);
+
+    expect(
+      screen.queryByTestId('smart-transactions-banner-alert'),
+    ).not.toBeInTheDocument();
+  });
+
   it('dismisses banner when close button or link is clicked', () => {
     const store = configureStore(mockState);
 
@@ -224,7 +315,6 @@ describe('SmartTransactionsBannerAlert', () => {
 
   it('handles being outside of ConfirmContext correctly', () => {
     const store = configureStore(mockState);
-
     renderWithProvider(<SmartTransactionsBannerAlert />, store);
 
     expect(
@@ -235,12 +325,10 @@ describe('SmartTransactionsBannerAlert', () => {
   it('automatically dismisses banner when Smart Transactions is manually disabled', () => {
     const store = configureStore({
       metamask: {
-        alertEnabledness: {
-          [AlertTypes.smartTransactionsMigration]: true,
-        },
+        ...mockState.metamask,
         preferences: {
+          ...mockState.metamask.preferences,
           smartTransactionsOptInStatus: false,
-          smartTransactionsMigrationApplied: true,
         },
       },
     });

ui/pages/confirmations/components/smart-transactions-banner-alert/smart-transactions-banner-alert.tsx

@@ -19,6 +19,10 @@ import {
   getSmartTransactionsOptInStatusInternal,
   getSmartTransactionsMigrationAppliedInternal,
 } from '../../../../../shared/modules/selectors/smart-transactions';
+import {
+  getCurrentChainSupportsSmartTransactions,
+  getSmartTransactionsPreferenceEnabled,
+} from '../../../../../shared/modules/selectors';
 
 type MarginType = 'default' | 'none' | 'noTop' | 'onlyTop';
 
@@ -55,6 +59,14 @@ export const SmartTransactionsBannerAlert: React.FC<SmartTransactionsBannerAlert
       getSmartTransactionsMigrationAppliedInternal,
     );
 
+    const chainSupportsSmartTransactions = useSelector(
+      getCurrentChainSupportsSmartTransactions,
+    );
+
+    const smartTransactionsPreferenceEnabled = useSelector(
+      getSmartTransactionsPreferenceEnabled,
+    );
+
     const dismissAlert = useCallback(() => {
       setAlertEnabledness(AlertTypes.smartTransactionsMigration, false);
     }, []);
@@ -68,7 +80,9 @@ export const SmartTransactionsBannerAlert: React.FC<SmartTransactionsBannerAlert
     const alertConditions =
       alertEnabled &&
       smartTransactionsOptIn &&
-      smartTransactionsMigrationApplied;
+      smartTransactionsMigrationApplied &&
+      chainSupportsSmartTransactions &&
+      smartTransactionsPreferenceEnabled;
 
     const shouldRender =
       currentConfirmation === null

ui/pages/confirmations/components/transaction-alerts/transaction-alerts.test.js

@@ -570,7 +570,7 @@ describe('TransactionAlerts', () => {
 });
 
 describe('Smart Transactions Migration Alert', () => {
-  it('shows when alert is enabled, opted in, and migration applied', () => {
+  it('shows when stx was enabled by migration', () => {
     const { getByTestId } = render({
       componentProps: {
         txData: {
@@ -585,15 +585,35 @@ describe('Smart Transactions Migration Alert', () => {
           networkConfigurationsByChainId: {
             [CHAIN_ID_MOCK]: {
               chainId: CHAIN_ID_MOCK,
+              rpcEndpoints: [
+                {
+                  rpcUrl: 'https://mainnet.infura.io/v3/',
+                  networkClientId: '1',
+                  blockExplorerUrl: 'https://etherscan.io',
+                },
+              ],
+              defaultBlockExplorerUrlIndex: 0,
             },
           },
+          selectedNetworkClientId: '1',
           alertEnabledness: {
             [AlertTypes.smartTransactionsMigration]: true,
           },
           preferences: {
             smartTransactionsOptInStatus: true,
             smartTransactionsMigrationApplied: true,
           },
+          featureFlags: {
+            smartTransactionsEnabled: true,
+          },
+          swapsState: {
+            swapsFeatureFlags: {
+              smartTransactions: {
+                extensionActive: true,
+                mobileActive: false,
+              },
+            },
+          },
         },
       },
     });