feat: Use chainId when checking if it's a smart transaction (#14890)

dan437 · web-flow · commit 57a99815a835 · 2025-04-30T13:57:36.000Z
## **Description** We should be using a chainId param from a transaction (if available) to better support multichain efforts. This PR also disables unused STX networks in the dev environment and is similar to the PR in the extension: MetaMask/metamask-extension#32201 ## **Related issues** Fixes: ## **Manual testing steps** 1. Make sure that smart transactions still work (Send, Swap, dapp transactions) ## **Screenshots/Recordings**  ### **Before**  ### **After**  ## **Pre-merge author checklist** - [ ] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots. --------- Signed-off-by: dan437 <80175477+dan437@users.noreply.github.com>
diff --git a/app/components/Nav/Main/RootRPCMethodsUI.js b/app/components/Nav/Main/RootRPCMethodsUI.js
@@ -588,7 +588,10 @@ const mapStateToProps = (state) => ({
   chainId: selectEvmChainId(state),
   tokens: selectTokens(state),
   providerType: selectProviderType(state),
-  shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
+  shouldUseSmartTransaction: selectShouldUseSmartTransaction(
+    state,
+    selectEvmChainId(state),
+  ),
 });
 
 const mapDispatchToProps = (dispatch) => ({
diff --git a/app/components/UI/Swaps/QuotesView.js b/app/components/UI/Swaps/QuotesView.js
@@ -2650,7 +2650,10 @@ const mapStateToProps = (state) => ({
   usedCustomGas: selectSwapsUsedCustomGas(state),
   primaryCurrency: state.settings.primaryCurrency,
   swapsTokens: swapsTokensSelector(state),
-  shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
+  shouldUseSmartTransaction: selectShouldUseSmartTransaction(
+    state,
+    selectEvmChainId(state),
+  ),
   isEIP1559Network: selectIsEIP1559Network(state),
 });
 
diff --git a/app/components/UI/Swaps/index.js b/app/components/UI/Swaps/index.js
@@ -1040,7 +1040,10 @@ const mapStateToProps = (state) => ({
   selectedNetworkClientId: selectSelectedNetworkClientId(state),
   tokensWithBalance: swapsTokensWithBalanceSelector(state),
   tokensTopAssets: swapsTopAssetsSelector(state),
-  shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
+  shouldUseSmartTransaction: selectShouldUseSmartTransaction(
+    state,
+    selectEvmChainId(state),
+  ),
 });
 
 const mapDispatchToProps = (dispatch) => ({
diff --git a/app/components/UI/TransactionElement/TransactionDetails/index.js b/app/components/UI/TransactionElement/TransactionDetails/index.js
@@ -509,7 +509,7 @@ class TransactionDetails extends PureComponent {
   };
 }
 
-const mapStateToProps = (state) => ({
+const mapStateToProps = (state, ownProps) => ({
   chainId: selectChainId(state),
   networkConfigurations: selectNetworkConfigurations(state),
   selectedAddress: selectSelectedInternalAccountFormattedAddress(state),
@@ -522,7 +522,10 @@ const mapStateToProps = (state) => ({
   primaryCurrency: selectPrimaryCurrency(state),
   swapsTransactions: selectSwapsTransactions(state),
   swapsTokens: swapsControllerTokens(state),
-  shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
+  shouldUseSmartTransaction: selectShouldUseSmartTransaction(
+    state,
+    ownProps.transactionObject.chainId,
+  ),
 });
 
 TransactionDetails.contextType = ThemeContext;
diff --git a/app/components/UI/TransactionElement/TransactionDetails/index.test.tsx b/app/components/UI/TransactionElement/TransactionDetails/index.test.tsx
@@ -102,7 +102,6 @@ const renderComponent = ({
       <Stack.Screen name="Amount" options={{}}>
         {() => (
           <TransactionDetails
-            // @ts-expect-error - TransactionDetails needs to be converted to typescript
             transactionObject={{
               networkID: '1',
               status,
@@ -112,7 +111,6 @@ const renderComponent = ({
               chainId: networkId,
               ...(txParams ? { txParams } : {}),
             }}
-            //@ts-expect-error - TransactionDetails needs to be converted to typescript
             transactionDetails={{
               renderFrom: '0x0',
               renderTo: networkId,
@@ -126,9 +124,7 @@ const renderComponent = ({
               hash: '0x3',
               ...(hash ? { hash } : {}),
             }}
-            //@ts-expect-error - navigation is not typed
             navigation={navigationMock}
-            // @ts-expect-error - chainId is not typed
             chainId={networkId}
           />
         )}
diff --git a/app/components/Views/Settings/AdvancedSettings/index.js b/app/components/Views/Settings/AdvancedSettings/index.js
@@ -515,7 +515,10 @@ const mapStateToProps = (state) => ({
   isTokenDetectionEnabled: selectUseTokenDetection(state),
   chainId: selectChainId(state),
   smartTransactionsOptInStatus: selectSmartTransactionsOptInStatus(state),
-  smartTransactionsEnabled: selectSmartTransactionsEnabled(state),
+  smartTransactionsEnabled: selectSmartTransactionsEnabled(
+    state,
+    selectChainId(state),
+  ),
 });
 
 const mapDispatchToProps = (dispatch) => ({
diff --git a/app/components/Views/confirmations/hooks/useConfirmActions.ts b/app/components/Views/confirmations/hooks/useConfirmActions.ts
@@ -12,6 +12,7 @@ import { useSignatureMetrics } from './signatures/useSignatureMetrics';
 import { useTransactionMetadataRequest } from './transactions/useTransactionMetadataRequest';
 import { selectShouldUseSmartTransaction } from '../../../../selectors/smartTransactionsController';
 import { useSelector } from 'react-redux';
+import { RootState } from '../../../../reducers';
 
 export const useConfirmActions = () => {
   const {
@@ -29,7 +30,7 @@ export const useConfirmActions = () => {
   const navigation = useNavigation();
   const transactionMetadata = useTransactionMetadataRequest();
   const shouldUseSmartTransaction = useSelector(
-    selectShouldUseSmartTransaction,
+    (state: RootState) => selectShouldUseSmartTransaction(state, transactionMetadata?.chainId)
   );
   const isOneOfTheStakingConfirmations = isStakingConfirmation(
     transactionMetadata?.type as string,
diff --git a/app/components/Views/confirmations/legacy/Approval/index.js b/app/components/Views/confirmations/legacy/Approval/index.js
@@ -763,7 +763,7 @@ const mapStateToProps = (state) => {
     showCustomNonce: selectShowCustomNonce(state),
     chainId,
     activeTabUrl: getActiveTabUrl(state),
-    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
+    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state, chainId),
     confirmationMetricsById: selectConfirmationMetrics(state),
     securityAlertResponse: selectCurrentTransactionSecurityAlertResponse(state),
   };
diff --git a/app/components/Views/confirmations/legacy/Approve/index.js b/app/components/Views/confirmations/legacy/Approve/index.js
@@ -983,7 +983,7 @@ const mapStateToProps = (state) => {
     providerType: selectProviderTypeByChainId(state, chainId),
     providerRpcTarget: selectRpcUrlByChainId(state, chainId),
     networkConfigurations: selectEvmNetworkConfigurationsByChainId(state),
-    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
+    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state, chainId),
     simulationData: selectCurrentTransactionMetadata(state)?.simulationData,
   };
 };
diff --git a/app/components/Views/confirmations/legacy/ApproveView/Approve/index.js b/app/components/Views/confirmations/legacy/ApproveView/Approve/index.js
@@ -984,7 +984,7 @@ const mapStateToProps = (state) => {
     providerType: selectProviderTypeByChainId(state, chainId),
     providerRpcTarget: selectRpcUrlByChainId(state, chainId),
     networkConfigurations: selectEvmNetworkConfigurationsByChainId(state),
-    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
+    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state, chainId),
     simulationData: selectCurrentTransactionMetadata(state)?.simulationData,
   };
 };
diff --git a/app/components/Views/confirmations/legacy/Send/index.js b/app/components/Views/confirmations/legacy/Send/index.js
@@ -820,7 +820,10 @@ const mapStateToProps = (state) => {
     selectedAddress: selectSelectedInternalAccountFormattedAddress(state),
     dappTransactionModalVisible: state.modals.dappTransactionModalVisible,
     tokenList: selectTokenList(state),
-    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
+    shouldUseSmartTransaction: selectShouldUseSmartTransaction(
+      state,
+      state.transaction?.chainId,
+    ),
   };
 };
 
diff --git a/app/components/Views/confirmations/legacy/SendFlow/Confirm/index.js b/app/components/Views/confirmations/legacy/SendFlow/Confirm/index.js
@@ -1592,7 +1592,8 @@ Confirm.contextType = ThemeContext;
 
 const mapStateToProps = (state) => {
   const transaction = getNormalizedTxState(state);
-  const chainId = selectEvmChainId(state);
+  const chainId = transaction?.chainId || selectEvmChainId(state);
+
   const networkClientId =
     transaction?.networkClientId || selectNetworkClientId(state);
 
@@ -1620,7 +1621,7 @@ const mapStateToProps = (state) => {
       chainId,
       getRampNetworks(state),
     ),
-    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
+    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state, chainId),
     confirmationMetricsById: selectConfirmationMetrics(state),
     transactionMetadata: selectCurrentTransactionMetadata(state),
     securityAlertResponse: selectCurrentTransactionSecurityAlertResponse(state),
diff --git a/app/components/Views/confirmations/legacy/components/ApproveTransactionReview/index.js b/app/components/Views/confirmations/legacy/components/ApproveTransactionReview/index.js
@@ -1369,7 +1369,7 @@ const mapStateToProps = (state) => {
       chainId,
       getRampNetworks(state),
     ),
-    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
+    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state, chainId),
     securityAlertResponse: selectCurrentTransactionSecurityAlertResponse(state),
   };
 };
diff --git a/app/components/Views/confirmations/legacy/components/SmartTransactionsMigrationBanner/SmartTransactionsMigrationBanner.test.tsx b/app/components/Views/confirmations/legacy/components/SmartTransactionsMigrationBanner/SmartTransactionsMigrationBanner.test.tsx
@@ -4,6 +4,12 @@ import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
 import SmartTransactionsMigrationBanner from './SmartTransactionsMigrationBanner';
 import Engine from '../../../../../../core/Engine';
+import { Linking } from 'react-native';
+import AppConstants from '../../../../../../core/AppConstants';
+
+jest.mock('react-native/Libraries/Linking/Linking', () => ({
+  openURL: jest.fn(() => Promise.resolve()),
+}));
 
 jest.mock('../../../../../../core/Engine', () => ({
  context: {
@@ -32,6 +38,7 @@ describe('SmartTransactionsMigrationBanner', () => {
  const mockSetFeatureFlag = jest.mocked(Engine.context.PreferencesController.setFeatureFlag);
  const mockedPreferences = jest.requireMock('../../../../../../selectors/preferencesController');
  const mockedSmartTransactions = jest.requireMock('../../../../../../selectors/smartTransactionsController');
+ const mockOpenURL = jest.mocked(Linking.openURL);
 
  beforeEach(() => {
    jest.clearAllMocks();
@@ -107,6 +114,25 @@ describe('SmartTransactionsMigrationBanner', () => {
        true,
      );
    });
+
+   it('opens URL and dismisses banner when learn more link is pressed', () => {
+     const store = mockStore({});
+     
+     const { getByText } = render(
+       <Provider store={store}>
+         <SmartTransactionsMigrationBanner />
+       </Provider>
+     );
+
+     fireEvent.press(getByText('smart_transactions_migration.link'));
+     
+     expect(mockOpenURL).toHaveBeenCalledTimes(1);
+     expect(mockOpenURL).toHaveBeenCalledWith(AppConstants.URLS.SMART_TXS);
+     expect(mockSetFeatureFlag).toHaveBeenCalledWith(
+       'smartTransactionsBannerDismissed',
+       true,
+     );
+   });
  });
 
  describe('banner styling', () => {
diff --git a/app/components/Views/confirmations/legacy/components/SmartTransactionsMigrationBanner/SmartTransactionsMigrationBanner.tsx b/app/components/Views/confirmations/legacy/components/SmartTransactionsMigrationBanner/SmartTransactionsMigrationBanner.tsx
@@ -12,6 +12,7 @@ import { SmartTransactionsMigrationBannerProps } from './SmartTransactionsMigrat
 import {
   selectShouldUseSmartTransaction,
 } from '../../../../../../selectors/smartTransactionsController';
+import { selectEvmChainId } from '../../../../../../selectors/networkController';
 import Engine from '../../../../../../core/Engine';
 import Logger from '../../../../../../util/Logger';
 import {
@@ -25,8 +26,11 @@ const SmartTransactionsMigrationBanner = ({
   const { styles } = useStyles(styleSheet, { style });
   const isMigrationApplied = useSelector(selectSmartTransactionsMigrationApplied);
   const isBannerDismissed = useSelector(selectSmartTransactionsBannerDismissed);
+  const chainId = useSelector(selectEvmChainId);
 
-  const shouldUseSmartTransaction = useSelector(selectShouldUseSmartTransaction);
+  const shouldUseSmartTransaction = useSelector((state) => 
+    selectShouldUseSmartTransaction(state, chainId)
+  );
 
   const dismissBanner = useCallback(async () => {
     try {
diff --git a/app/components/Views/confirmations/legacy/components/TransactionReview/TransactionReviewInformation/index.js b/app/components/Views/confirmations/legacy/components/TransactionReview/TransactionReviewInformation/index.js
@@ -257,7 +257,8 @@ class TransactionReviewInformation extends PureComponent {
   };
 
   setNetworkNonce = async () => {
-    const { networkClientId, setNonce, setProposedNonce, transaction } = this.props;
+    const { networkClientId, setNonce, setProposedNonce, transaction } =
+      this.props;
     const proposedNonce = await getNetworkNonce(transaction, networkClientId);
     setNonce(proposedNonce);
     setProposedNonce(proposedNonce);
@@ -358,14 +359,16 @@ class TransactionReviewInformation extends PureComponent {
           currentCurrency,
           amountToken,
         );
-        const totalValue = `${amountToken + ' ' + selectedAsset.symbol
-          } + ${renderFromWei(totalGas)} ${getTicker(ticker)}`;
+        const totalValue = `${
+          amountToken + ' ' + selectedAsset.symbol
+        } + ${renderFromWei(totalGas)} ${getTicker(ticker)}`;
         return [totalFiat, totalValue];
       },
       ERC721: () => {
         const totalFiat = totalGasFiat;
-        const totalValue = `${selectedAsset.name}  (#${selectedAsset.tokenId
-          }) + ${renderFromWei(totalGas)} ${getTicker(ticker)}`;
+        const totalValue = `${selectedAsset.name}  (#${
+          selectedAsset.tokenId
+        }) + ${renderFromWei(totalGas)} ${getTicker(ticker)}`;
         return [totalFiat, totalValue];
       },
       default: () => [undefined, undefined],
@@ -515,11 +518,13 @@ class TransactionReviewInformation extends PureComponent {
           totalMaxConversion,
         });
 
-        renderableTotalMinNative = `${selectedAsset.name} ${' (#' + selectedAsset.tokenId + ')'
-          } + ${renderableTotalMinNative}`;
+        renderableTotalMinNative = `${selectedAsset.name} ${
+          ' (#' + selectedAsset.tokenId + ')'
+        } + ${renderableTotalMinNative}`;
 
-        renderableTotalMaxNative = `${selectedAsset.name} ${' (#' + selectedAsset.tokenId + ')'
-          } + ${renderableTotalMaxNative}`;
+        renderableTotalMaxNative = `${selectedAsset.name} ${
+          ' (#' + selectedAsset.tokenId + ')'
+        } + ${renderableTotalMaxNative}`;
 
         return [
           renderableTotalMinNative,
@@ -761,7 +766,7 @@ const mapStateToProps = (state) => {
       chainId,
       getRampNetworks(state),
     ),
-    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
+    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state, chainId),
   };
 };
 
diff --git a/app/components/Views/confirmations/legacy/components/TransactionReview/index.js b/app/components/Views/confirmations/legacy/components/TransactionReview/index.js
@@ -734,7 +734,7 @@ const mapStateToProps = (state) => {
     browser: state.browser,
     primaryCurrency: state.settings.primaryCurrency,
     tokenList: selectTokenList(state),
-    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state),
+    shouldUseSmartTransaction: selectShouldUseSmartTransaction(state, chainId),
     useTransactionSimulations: selectUseTransactionSimulations(state),
     securityAlertResponse: selectCurrentTransactionSecurityAlertResponse(state),
     transactionMetadata,
diff --git a/app/constants/smartTransactions.test.ts b/app/constants/smartTransactions.test.ts
@@ -21,8 +21,8 @@ describe('smartTransactions', () => {
       expect(allowedChainIds).toStrictEqual([
         NETWORKS_CHAIN_ID.MAINNET,
         NETWORKS_CHAIN_ID.SEPOLIA,
-        NETWORKS_CHAIN_ID.BASE,
-        NETWORKS_CHAIN_ID.LINEA_MAINNET,
+        // NETWORKS_CHAIN_ID.BASE, // TODO: Add base to development when ready
+        // NETWORKS_CHAIN_ID.LINEA_MAINNET, // TODO: Add linea mainnet to development when ready
         NETWORKS_CHAIN_ID.BSC,
       ]);
     });
diff --git a/app/constants/smartTransactions.ts b/app/constants/smartTransactions.ts
@@ -6,8 +6,8 @@ import { NETWORKS_CHAIN_ID } from './network';
 const ALLOWED_SMART_TRANSACTIONS_CHAIN_IDS_DEVELOPMENT: string[] = [
   NETWORKS_CHAIN_ID.MAINNET,
   NETWORKS_CHAIN_ID.SEPOLIA,
-  NETWORKS_CHAIN_ID.BASE,
-  NETWORKS_CHAIN_ID.LINEA_MAINNET,
+  // NETWORKS_CHAIN_ID.BASE, // TODO: Add base to development when ready
+  // NETWORKS_CHAIN_ID.LINEA_MAINNET, // TODO: Add linea mainnet to development when ready
   NETWORKS_CHAIN_ID.BSC,
 ];
 
diff --git a/app/core/Engine/controllers/transaction-controller/event-handlers/metrics.test.ts b/app/core/Engine/controllers/transaction-controller/event-handlers/metrics.test.ts
@@ -18,7 +18,13 @@ import {
   enabledSmartTransactionsState,
 } from '../data-helpers';
 
-jest.mock('../../../../../util/smart-transactions');
+jest.mock('../../../../../util/smart-transactions', () => {
+  const actual = jest.requireActual('../../../../../util/smart-transactions');
+  return {
+    ...actual,
+    getSmartTransactionMetricsProperties: jest.fn(),
+  };
+});
 
 // Mock dependencies
 jest.mock('../../../../Analytics', () => ({
diff --git a/app/core/Engine/controllers/transaction-controller/event-handlers/metrics.ts b/app/core/Engine/controllers/transaction-controller/event-handlers/metrics.ts
@@ -59,7 +59,7 @@ export async function handleTransactionFinalizedEventForMetrics(
 
   let stxMetricsProperties = {};
 
-  const shouldUseSmartTransaction = selectShouldUseSmartTransaction(getState());
+  const shouldUseSmartTransaction = selectShouldUseSmartTransaction(getState(), transactionMeta.chainId);
   if (shouldUseSmartTransaction) {
     stxMetricsProperties = await getSmartTransactionMetricsProperties(
       smartTransactionsController,
diff --git a/app/core/Engine/controllers/transaction-controller/transaction-controller-init.test.ts b/app/core/Engine/controllers/transaction-controller/transaction-controller-init.test.ts
@@ -245,6 +245,13 @@ describe('Transaction Controller Init', () => {
   it('publish hook calls submitSmartTransactionHook', () => {
     const MOCK_TRANSACTION_META = {
       id: '123',
+      chainId: '0x1',
+      status: 'approved',
+      time: 123,
+      txParams: {
+        from: '0x123',
+      },
+      networkClientId: 'selectedNetworkClientId',
     } as TransactionMeta;
 
     const hooks = testConstructorOption('hooks');
@@ -253,6 +260,7 @@ describe('Transaction Controller Init', () => {
 
     expect(submitSmartTransactionHookMock).toHaveBeenCalledTimes(1);
     expect(selectShouldUseSmartTransactionMock).toHaveBeenCalledTimes(1);
+    expect(selectShouldUseSmartTransactionMock).toHaveBeenCalledWith(undefined, MOCK_TRANSACTION_META.chainId);
     expect(selectSwapsChainFeatureFlagsMock).toHaveBeenCalledTimes(1);
     expect(submitSmartTransactionHookMock).toHaveBeenCalledWith(
       expect.objectContaining({
diff --git a/app/core/Engine/controllers/transaction-controller/transaction-controller-init.ts b/app/core/Engine/controllers/transaction-controller/transaction-controller-init.ts
@@ -140,7 +140,7 @@ function publishHook({
   initMessenger: TransactionControllerInitMessenger;
 }): Promise<{ transactionHash: string }> {
   const state = getState();
-  const shouldUseSmartTransaction = selectShouldUseSmartTransaction(state);
+  const shouldUseSmartTransaction = selectShouldUseSmartTransaction(state, transactionMeta.chainId);
 
   // @ts-expect-error - TransactionController expects transactionHash to be defined but submitSmartTransactionHook could return undefined
   return submitSmartTransactionHook({
diff --git a/app/reducers/swaps/index.js b/app/reducers/swaps/index.js
diff --git a/app/selectors/smartTransactionsController.test.ts b/app/selectors/smartTransactionsController.test.ts
diff --git a/app/selectors/smartTransactionsController.ts b/app/selectors/smartTransactionsController.ts
diff --git a/app/util/smart-transactions/index.test.ts b/app/util/smart-transactions/index.test.ts
diff --git a/app/util/smart-transactions/index.ts b/app/util/smart-transactions/index.ts
