fix: don't pin selected asset if it doesn't match search (#25395)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
Prevents pinning of selected asset when it doesn't match the search
query
<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **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: Fixed a bug where the currently selected swap asset
would be pinned to the top of the asset picker list even when it didn't
match the search query

## **Related issues**

Fixes:

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

## **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]
> **Low Risk**
> Low risk UI/filtering change limited to token list search/pinning
logic, with added unit tests for the new matcher helper.
> 
> **Overview**
> Fixes Bridge token selector filtering so the currently selected token
is **only pinned** to the top when it matches both the active chain
filter and the current search query.
> 
> Introduces a shared `tokenMatchesQuery` helper (name/symbol/address,
case-insensitive) and uses it to filter balance tokens and gate
selected-token pinning; adds unit tests covering empty queries, field
matches, and edge cases like missing `name`.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
14b9ae2. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: bfullam

app/components/UI/Bridge/components/BridgeTokenSelector/BridgeTokenSelector.tsx

@@ -54,7 +54,7 @@ import { useTokensWithBalances } from '../../hooks/useTokensWithBalances';
 import { useTokenSelection } from '../../hooks/useTokenSelection';
 import { createStyles } from './BridgeTokenSelector.styles';
 import Engine from '../../../../../core/Engine';
-import { tokenToIncludeAsset } from '../../utils/tokenUtils';
+import { tokenToIncludeAsset, tokenMatchesQuery } from '../../utils/tokenUtils';
 
 export interface BridgeTokenSelectorRouteParams {
   type: TokenSelectorType;
@@ -161,35 +161,30 @@ export const BridgeTokenSelector: React.FC = () => {
   const { tokensWithBalance, balancesByAssetId } = useBalancesByAssetId({
     chainIds: chainIdsToFetch,
   });
-  const filteredTokensWithBalance = useMemo(() => {
-    const filteredTokens = tokensWithBalance.filter(
-      (token) => token.balance && parseFloat(token.balance) > 0,
-    );
-
-    if (!searchString.trim()) {
-      return filteredTokens;
-    }
-
-    const searchLower = searchString.toLowerCase();
-    return filteredTokens.filter(
-      (token) =>
-        token.name?.toLowerCase().includes(searchLower) ||
-        token.symbol.toLowerCase().includes(searchLower) ||
-        token.address.toLowerCase().includes(searchLower),
-    );
-  }, [tokensWithBalance, searchString]);
+  const searchQuery = searchString.trim();
+
+  const filteredTokensWithBalance = useMemo(
+    () =>
+      tokensWithBalance.filter(
+        (token) =>
+          token.balance &&
+          parseFloat(token.balance) > 0 &&
+          tokenMatchesQuery(token, searchQuery),
+      ),
+    [tokensWithBalance, searchQuery],
+  );
 
   // Create includeAssets array from tokens with balance to be sent to API
   // Selected token is prepended to pin it to the top of the list
   // Stringified to avoid triggering the useEffect when only balances change
   const includeAssets = useMemo(() => {
-    // Only include selected token if its network matches the current filter
-    const isSelectedTokenOnFilteredNetwork =
+    // Only include selected token if it matches current network and search filters
+    const shouldPinSelectedToken =
       selectedToken &&
-      chainIdsToFetch.includes(formatChainIdToCaip(selectedToken.chainId));
+      chainIdsToFetch.includes(formatChainIdToCaip(selectedToken.chainId)) &&
+      tokenMatchesQuery(selectedToken, searchQuery);
 
-    // Convert selected token first (will be pinned to top of list)
-    const selectedAsset = isSelectedTokenOnFilteredNetwork
+    const selectedAsset = shouldPinSelectedToken
       ? tokenToIncludeAsset(selectedToken)
       : null;
 
@@ -201,12 +196,10 @@ export const BridgeTokenSelector: React.FC = () => {
           asset !== null && asset.assetId !== selectedAsset?.assetId,
       );
 
-    const assets = selectedAsset
-      ? [selectedAsset, ...balanceAssets]
-      : balanceAssets;
-
-    return JSON.stringify(assets);
-  }, [filteredTokensWithBalance, selectedToken, chainIdsToFetch]);
+    return JSON.stringify(
+      selectedAsset ? [selectedAsset, ...balanceAssets] : balanceAssets,
+    );
+  }, [filteredTokensWithBalance, selectedToken, chainIdsToFetch, searchQuery]);
 
   // Fetch popular tokens
   const { popularTokens, isLoading: isPopularTokensLoading } = usePopularTokens(

app/components/UI/Bridge/utils/tokenUtils.test.ts

@@ -1,5 +1,10 @@
 import { constants } from 'ethers';
-import { getNativeSourceToken, getDefaultDestToken } from './tokenUtils';
+import {
+  getNativeSourceToken,
+  getDefaultDestToken,
+  tokenMatchesQuery,
+} from './tokenUtils';
+import { BridgeToken } from '../types';
 import {
   getNativeAssetForChainId,
   isNonEvmChainId,
@@ -226,4 +231,79 @@ describe('tokenUtils', () => {
       expect(result?.chainId).not.toBe(originalToken.chainId);
     });
   });
+
+  describe('tokenMatchesQuery', () => {
+    const createToken = (
+      overrides: Partial<BridgeToken> = {},
+    ): BridgeToken => ({
+      address: '0x1234567890abcdef',
+      symbol: 'TEST',
+      name: 'Test Token',
+      decimals: 18,
+      chainId: '0x1',
+      ...overrides,
+    });
+
+    it('returns true when query is empty', () => {
+      const token = createToken();
+
+      expect(tokenMatchesQuery(token, '')).toBe(true);
+    });
+
+    it('matches token by name (case-insensitive)', () => {
+      const token = createToken({ name: 'Ethereum' });
+
+      expect(tokenMatchesQuery(token, 'ethereum')).toBe(true);
+      expect(tokenMatchesQuery(token, 'ETHEREUM')).toBe(true);
+      expect(tokenMatchesQuery(token, 'Ether')).toBe(true);
+    });
+
+    it('matches token by symbol (case-insensitive)', () => {
+      const token = createToken({ symbol: 'ETH' });
+
+      expect(tokenMatchesQuery(token, 'eth')).toBe(true);
+      expect(tokenMatchesQuery(token, 'ETH')).toBe(true);
+      expect(tokenMatchesQuery(token, 'Et')).toBe(true);
+    });
+
+    it('matches token by address (case-insensitive)', () => {
+      const token = createToken({ address: '0xAbCdEf1234567890' });
+
+      expect(tokenMatchesQuery(token, '0xabcdef')).toBe(true);
+      expect(tokenMatchesQuery(token, '0xABCDEF')).toBe(true);
+      expect(tokenMatchesQuery(token, 'abcdef1234')).toBe(true);
+    });
+
+    it('returns false when query does not match any field', () => {
+      const token = createToken({
+        name: 'Ethereum',
+        symbol: 'ETH',
+        address: '0x1234',
+      });
+
+      expect(tokenMatchesQuery(token, 'bitcoin')).toBe(false);
+      expect(tokenMatchesQuery(token, 'BTC')).toBe(false);
+      expect(tokenMatchesQuery(token, '0x9999')).toBe(false);
+    });
+
+    it('handles token with undefined name', () => {
+      const token = createToken({ name: undefined });
+
+      // Query that would only match name returns false
+      expect(tokenMatchesQuery(token, 'token')).toBe(false);
+      // Query matching symbol still works
+      expect(tokenMatchesQuery(token, token.symbol)).toBe(true);
+    });
+
+    it('handles partial matches', () => {
+      const token = createToken({
+        name: 'Wrapped Bitcoin',
+        symbol: 'WBTC',
+      });
+
+      expect(tokenMatchesQuery(token, 'wrap')).toBe(true);
+      expect(tokenMatchesQuery(token, 'bit')).toBe(true);
+      expect(tokenMatchesQuery(token, 'btc')).toBe(true);
+    });
+  });
 });

app/components/UI/Bridge/utils/tokenUtils.ts

@@ -62,6 +62,23 @@ export const getDefaultDestToken = (
   return undefined;
 };
 
+/**
+ * Checks if a token matches a search query by name, symbol, or address.
+ * Returns true if no query is provided.
+ */
+export const tokenMatchesQuery = (
+  token: BridgeToken,
+  query: string,
+): boolean => {
+  if (!query) return true;
+  const lowerQuery = query.toLowerCase();
+  return (
+    token.name?.toLowerCase().includes(lowerQuery) ||
+    token.symbol.toLowerCase().includes(lowerQuery) ||
+    token.address.toLowerCase().includes(lowerQuery)
+  );
+};
+
 /**
  * Converts a BridgeToken to IncludeAsset format for the API.
  * Returns null if the token cannot be converted (invalid assetId).