fix: display non ETH native transactions in the native token detail page (#28977)

## **Description**

This pull request refines the transaction filtering logic for native and
token assets. It adds comprehensive unit tests for the
`useTokenTransactions` hook. The most important changes are:

**Filtering Logic:**
* Updated the filter selection in `useTokenTransactions.ts` to use an
`isNativeToken` check, ensuring that native tokens (including non-ETH
chains) use the correct transaction filter. This prevents token-category
transactions from appearing in native token views and vice versa.

**Testing:**
* Added a new test suite `useTokenTransactions.test.ts` that covers
various scenarios for native tokens (ETH and non-ETH like MON), ERC20
tokens, cross-chain filtering, and edge cases (such as gas-sponsored
native sends and exclusion of unrelated transactions). This ensures
robust regression coverage and correct behavior for transaction
filtering.

These changes improve both the reliability of the `useTokenTransactions`
hook and confidence in its behavior through targeted unit tests.


## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: add transactions in the token details for gas fees
sponsored transactions

## **Related issues**

Fixes:
[https://github.com/MetaMask/metamask-mobile/issues/27247](https://github.com/MetaMask/metamask-mobile/issues/27247)
[Bug]: Gas Sponsored Send and Swap are not displayed on the Activity
section of the Token details page

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **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.

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes transaction filtering logic in `useTokenTransactions` for
native vs token assets, which can impact what users see in token detail
activity across chains. Risk is mitigated by a new unit test suite
covering native/non-native and cross-chain scenarios.
> 
> **Overview**
> Fixes `useTokenTransactions` filter selection to treat any *native*
asset (`asset.isNative` or `asset.isETH`) as using the
native/`ethFilter`, instead of keying off symbol/address (which could
hide non-ETH native transactions).
> 
> Adds a comprehensive `useTokenTransactions.test.ts` suite that
regression-tests native-token vs ERC20 filtering (including
gas-sponsored/zero-fee native sends), exclusion of token-category txs
from native views, and cross-chain exclusion.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
49c9f74. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Battambang

app/components/UI/TokenDetails/hooks/useTokenTransactions.test.ts

@@ -0,0 +1,331 @@
+import { renderHook, waitFor } from '@testing-library/react-native';
+import { useSelector } from 'react-redux';
+import { useTokenTransactions } from './useTokenTransactions';
+import { TokenI } from '../../Tokens/types';
+import { TX_CONFIRMED } from '../../../../constants/transaction';
+import {
+  selectTransactions,
+  selectSwapsTransactions,
+} from '../../../../selectors/transactionController';
+import { selectTokens } from '../../../../selectors/tokensController';
+import { selectSelectedInternalAccount } from '../../../../selectors/accountsController';
+import { selectSelectedInternalAccountByScope } from '../../../../selectors/multichainAccounts/accounts';
+import {
+  selectConversionRate,
+  selectCurrentCurrency,
+} from '../../../../selectors/currencyRateController';
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+}));
+
+jest.mock('@metamask/bridge-controller', () => ({
+  formatChainIdToCaip: jest.fn((chainId: string) => `eip155:${chainId}`),
+}));
+
+jest.mock('../../../../selectors/tokensController', () => ({
+  selectTokens: jest.fn(),
+}));
+
+jest.mock('../../../../selectors/transactionController', () => ({
+  selectTransactions: jest.fn(),
+  selectSwapsTransactions: jest.fn(),
+}));
+
+jest.mock('../../../../selectors/accountsController', () => ({
+  selectSelectedInternalAccount: jest.fn(),
+  selectSelectedInternalAccountAddress: jest.fn(),
+}));
+
+jest.mock('../../../../selectors/multichainAccounts/accounts', () => ({
+  selectSelectedInternalAccountByScope: jest.fn(),
+}));
+
+jest.mock('../../../../selectors/currencyRateController', () => ({
+  selectConversionRate: jest.fn(),
+  selectCurrentCurrency: jest.fn(),
+}));
+
+jest.mock('../../../../util/activity', () => ({
+  sortTransactions: jest.fn((txs: unknown[]) => txs),
+}));
+
+jest.mock('../../../../util/transactions', () => ({
+  addAccountTimeFlagFilter: jest.fn(() => false),
+}));
+
+jest.mock('../../../../util/transaction-controller', () => ({
+  updateIncomingTransactions: jest.fn(),
+}));
+
+jest.mock('../../../../core/Multichain/utils', () => ({
+  isNonEvmChainId: jest.fn(() => false),
+}));
+
+jest.mock('../../Earn/utils/musd', () => ({
+  isMusdClaimForCurrentView: jest.fn(() => false),
+}));
+
+jest.mock('../../../../selectors/multichain', () => ({
+  selectNonEvmTransactionsForSelectedAccountGroup: jest.fn(),
+}));
+
+jest.mock('../../../../selectors/accountTrackerController', () => ({
+  selectAccounts: jest.fn(),
+  selectAccountsByChainId: jest.fn(),
+}));
+
+jest.mock('../../../UI/TransactionElement/utils', () => ({
+  TOKEN_CATEGORY_HASH: {
+    tokenMethodApprove: true,
+    tokenMethodSetApprovalForAll: true,
+    tokenMethodTransfer: true,
+    tokenMethodTransferFrom: true,
+    tokenMethodIncreaseAllowance: true,
+  },
+}));
+
+jest.mock('../../../../store', () => ({
+  store: {
+    getState: () => ({
+      inpageProvider: { networkId: '1' },
+    }),
+  },
+}));
+
+const MOCK_ADDRESS = '0x1234567890abcdef1234567890abcdef12345678';
+const MOCK_RECIPIENT = '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd';
+const MONAD_CHAIN_ID = '0x279f';
+const ETH_CHAIN_ID = '0x1';
+const MOCK_TOKEN_ADDRESS = '0x6b175474e89094c44da98b954eedeac495271d0f';
+
+const mockUseSelector = jest.mocked(useSelector);
+
+const createMockTransaction = (overrides: Record<string, unknown> = {}) => ({
+  id: 'tx-1',
+  chainId: ETH_CHAIN_ID,
+  status: TX_CONFIRMED,
+  time: Date.now(),
+  txParams: {
+    from: MOCK_ADDRESS,
+    to: MOCK_RECIPIENT,
+  },
+  isTransfer: false,
+  ...overrides,
+});
+
+const createAsset = (overrides: Partial<TokenI> = {}): TokenI => ({
+  address: '',
+  decimals: 18,
+  image: '',
+  name: 'Ether',
+  symbol: 'ETH',
+  balance: '1000000000000000000',
+  logo: undefined,
+  isETH: true,
+  chainId: ETH_CHAIN_ID,
+  isNative: true,
+  ...overrides,
+});
+
+const setupMocks = (transactions: unknown[] = []) => {
+  mockUseSelector.mockImplementation((selector) => {
+    if (selector === selectTransactions) return transactions;
+    if (selector === selectSwapsTransactions) return {};
+    if (selector === selectTokens) return [];
+    if (selector === selectSelectedInternalAccount) {
+      return { address: MOCK_ADDRESS, metadata: { importTime: 0 } };
+    }
+    if (selector === selectSelectedInternalAccountByScope) {
+      return () => ({ address: MOCK_ADDRESS });
+    }
+    if (selector === selectConversionRate) return 1;
+    if (selector === selectCurrentCurrency) return 'usd';
+    // Inline selector for selectedAddressForAsset
+    return MOCK_ADDRESS;
+  });
+};
+
+describe('useTokenTransactions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('filter selection for native tokens', () => {
+    it('includes native send transaction for ETH (isETH=true)', async () => {
+      const tx = createMockTransaction({ chainId: ETH_CHAIN_ID });
+      setupMocks([tx]);
+
+      const asset = createAsset({
+        symbol: 'ETH',
+        isETH: true,
+        isNative: true,
+        address: '',
+        chainId: ETH_CHAIN_ID,
+      });
+
+      const { result } = renderHook(() => useTokenTransactions(asset));
+
+      await waitFor(() => {
+        expect(result.current.transactionsUpdated).toBe(true);
+      });
+
+      expect(result.current.confirmedTxs.length).toBe(1);
+    });
+
+    it('includes native send transaction for non-ETH native token (MON on Monad)', async () => {
+      const tx = createMockTransaction({
+        chainId: MONAD_CHAIN_ID,
+        txParams: { from: MOCK_ADDRESS, to: MOCK_RECIPIENT },
+      });
+      setupMocks([tx]);
+
+      const asset = createAsset({
+        symbol: 'MON',
+        isETH: false,
+        isNative: true,
+        address: '0x0000000000000000000000000000000000000000',
+        chainId: MONAD_CHAIN_ID,
+      });
+
+      const { result } = renderHook(() => useTokenTransactions(asset));
+
+      await waitFor(() => {
+        expect(result.current.transactionsUpdated).toBe(true);
+      });
+
+      // Core regression test: MON native sends must appear
+      expect(result.current.confirmedTxs.length).toBe(1);
+    });
+
+    it('excludes token-category transactions from native token view', async () => {
+      const tx = createMockTransaction({
+        chainId: MONAD_CHAIN_ID,
+        type: 'tokenMethodTransfer',
+        txParams: { from: MOCK_ADDRESS, to: MOCK_TOKEN_ADDRESS },
+      });
+      setupMocks([tx]);
+
+      const asset = createAsset({
+        symbol: 'MON',
+        isETH: false,
+        isNative: true,
+        address: '0x0000000000000000000000000000000000000000',
+        chainId: MONAD_CHAIN_ID,
+      });
+
+      const { result } = renderHook(() => useTokenTransactions(asset));
+
+      await waitFor(() => {
+        expect(result.current.transactionsUpdated).toBe(true);
+      });
+
+      expect(result.current.confirmedTxs.length).toBe(0);
+      expect(result.current.transactions.length).toBe(0);
+    });
+
+    it('includes ERC20 token transaction in token-specific view', async () => {
+      const tx = createMockTransaction({
+        chainId: ETH_CHAIN_ID,
+        txParams: { from: MOCK_ADDRESS, to: MOCK_TOKEN_ADDRESS },
+      });
+      setupMocks([tx]);
+
+      const asset = createAsset({
+        symbol: 'DAI',
+        isETH: false,
+        isNative: false,
+        address: MOCK_TOKEN_ADDRESS,
+        chainId: ETH_CHAIN_ID,
+      });
+
+      const { result } = renderHook(() => useTokenTransactions(asset));
+
+      await waitFor(() => {
+        expect(result.current.transactionsUpdated).toBe(true);
+      });
+
+      expect(result.current.confirmedTxs.length).toBe(1);
+    });
+
+    it('excludes unrelated transactions from ERC20 token view', async () => {
+      const tx = createMockTransaction({
+        chainId: ETH_CHAIN_ID,
+        txParams: { from: MOCK_ADDRESS, to: MOCK_RECIPIENT },
+      });
+      setupMocks([tx]);
+
+      const asset = createAsset({
+        symbol: 'DAI',
+        isETH: false,
+        isNative: false,
+        address: MOCK_TOKEN_ADDRESS,
+        chainId: ETH_CHAIN_ID,
+      });
+
+      const { result } = renderHook(() => useTokenTransactions(asset));
+
+      await waitFor(() => {
+        expect(result.current.transactionsUpdated).toBe(true);
+      });
+
+      expect(result.current.confirmedTxs.length).toBe(0);
+    });
+
+    it('includes gas-sponsored native send for non-ETH chain', async () => {
+      const tx = createMockTransaction({
+        chainId: MONAD_CHAIN_ID,
+        txParams: {
+          from: MOCK_ADDRESS,
+          to: MOCK_RECIPIENT,
+          gasPrice: '0x0',
+          maxFeePerGas: '0x0',
+        },
+      });
+      setupMocks([tx]);
+
+      const asset = createAsset({
+        symbol: 'MON',
+        isETH: false,
+        isNative: true,
+        address: '0x0000000000000000000000000000000000000000',
+        chainId: MONAD_CHAIN_ID,
+      });
+
+      const { result } = renderHook(() => useTokenTransactions(asset));
+
+      await waitFor(() => {
+        expect(result.current.transactionsUpdated).toBe(true);
+      });
+
+      // Gas-sponsored (zero gas fee) native sends must still appear
+      expect(result.current.confirmedTxs.length).toBe(1);
+    });
+  });
+
+  describe('cross-chain filtering', () => {
+    it('excludes transactions from a different chain', async () => {
+      const tx = createMockTransaction({
+        chainId: ETH_CHAIN_ID,
+        txParams: { from: MOCK_ADDRESS, to: MOCK_RECIPIENT },
+      });
+      setupMocks([tx]);
+
+      const asset = createAsset({
+        symbol: 'MON',
+        isETH: false,
+        isNative: true,
+        address: '0x0000000000000000000000000000000000000000',
+        chainId: MONAD_CHAIN_ID,
+      });
+
+      const { result } = renderHook(() => useTokenTransactions(asset));
+
+      await waitFor(() => {
+        expect(result.current.transactionsUpdated).toBe(true);
+      });
+
+      expect(result.current.confirmedTxs.length).toBe(0);
+    });
+  });
+});

app/components/UI/TokenDetails/hooks/useTokenTransactions.ts

@@ -374,12 +374,13 @@ export const useTokenTransactions = (
   );
 
   // Determine which filter to use
+  const isNativeToken = asset.isNative || asset.isETH;
   const filter = useMemo(() => {
-    if (navSymbol.toUpperCase() !== 'ETH' && navAddress !== '') {
-      return noEthFilter;
+    if (isNativeToken) {
+      return ethFilter;
     }
-    return ethFilter;
-  }, [navSymbol, navAddress, ethFilter, noEthFilter]);
+    return noEthFilter;
+  }, [isNativeToken, ethFilter, noEthFilter]);
 
   // Check if pending tx statuses changed
   const didTxStatusesChange = useCallback(