fix(swaps): backfill sparse post-trade suggestions (#33273)

## **Description**

The post-trade “What to swap next” section can return only one or two
suggestions on lower-liquidity networks such as Linea because the
trending API applies network-specific liquidity and volume thresholds.

This change preserves those quality filters and backfills sparse
destination-chain results with Ethereum trending tokens:

- Destination-chain tokens remain first.
- Ethereum fallback results fill the remaining slots up to the existing
20-token limit.
- Destination and Ethereum requests start in parallel so the list is
revealed as one complete set.
- Ethereum fallback failures degrade to the available destination
results.
- Each suggestion uses the network badge matching its own asset ID.
- Existing post-trade selection and analytics behavior remain unchanged.

## **Changelog**

CHANGELOG entry: Fixed sparse token suggestions in the post-trade swap
section

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/SWAPS-4688

## **Manual testing steps**

N/A — simulator/manual testing was not run in this thread. The behavior
is covered by targeted hook and bottom-sheet tests.

## **Screenshots/Recordings**

### **Before**

N/A — no screenshots captured.

### **After**

N/A — no screenshots captured.

## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability.
- [x] I've included tests for the changed behavior.
- [x] I've documented my code using JSDoc format where applicable.
- [x] I've applied the appropriate labels; existing PR labels and
reviewer assignments remain unchanged.

#### Performance checks

- [x] N/A — this is a read-only suggestions query/UI change with no new
transaction or wallet operation.

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

## **Validation**

- `yarn jest
app/components/UI/Bridge/components/PostTradeBottomSheet/usePostTradeTrendingTokens.test.ts
--collectCoverage=false --watchman=false`
- `yarn jest
app/components/UI/Bridge/components/PostTradeBottomSheet/PostTradeBottomSheet.test.ts
--collectCoverage=false --watchman=false`
- `yarn lint:tsc`
- `bash scripts/check-ab-testing-compliance.sh --staged`
- `git diff --check`

All targeted tests, TypeScript checks, formatting checks, and A/B
compliance checks passed.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Read-only trending fetch and UI badge logic in the post-trade bottom
sheet; no wallet, auth, or transaction changes.
> 
> **Overview**
> Fixes sparse **“What to swap next”** pills on low-liquidity
destination chains by **backfilling** up to the existing 20-token cap
with Ethereum trending tokens while keeping destination-chain picks
first.
> 
> `usePostTradeTrendingTokens` now loads destination and Ethereum
trending lists via separate React Query calls (Ethereum prefetch runs
for non-Ethereum destinations), merges only when the destination list is
short, and **keeps showing destination-only results** if the Ethereum
request fails. `PostTradeTokenSuggestions` assigns each pill’s **network
badge from the token’s asset ID** (Ethereum vs destination) instead of a
single badge for the whole row.
> 
> Hook tests cover sparse fill, fallback failure, and skipping Ethereum
backfill when the destination is already Ethereum.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
166fd44. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: bfullam

app/components/UI/Bridge/components/PostTradeBottomSheet/PostTradeTokenSuggestions.tsx

@@ -15,7 +15,11 @@ import BadgeWrapper, {
   BadgePosition,
 } from '../../../../../component-library/components/Badges/BadgeWrapper';
 import { AvatarSize } from '../../../../../component-library/components/Avatars/Avatar';
-import { getNetworkBadgeSource } from '../../../Trending/components/TrendingTokenRowItem/utils';
+import {
+  getCaipChainIdFromAssetId,
+  getNetworkBadgeSource,
+} from '../../../Trending/components/TrendingTokenRowItem/utils';
+import { NetworkToCaipChainId } from '../../../NetworkMultiSelector/NetworkMultiSelector.constants';
 import { formatPercentChange } from '../../../Trending/utils/formatPercentChange';
 import { strings } from '../../../../../../locales/i18n';
 import { PostTradeStatus } from './PostTradeBottomSheet.types';
@@ -31,6 +35,10 @@ interface PostTradeSuggestionPillProps {
   onPress: (token: TrendingAsset) => void;
 }
 
+const ETHEREUM_NETWORK_BADGE_SOURCE = getNetworkBadgeSource(
+  NetworkToCaipChainId.ETHEREUM,
+);
+
 const PostTradeSuggestionPill = React.memo(
   ({
     token,
@@ -99,23 +107,30 @@ export const PostTradeTokenSuggestions = ({
     destToken,
     enabled: shouldShowSuggestions,
   });
-  const networkBadgeImageSource = useMemo(
+  const destinationNetworkBadgeSource = useMemo(
     () =>
       destToken?.chainId
         ? getNetworkBadgeSource(formatChainIdToCaip(destToken.chainId))
         : undefined,
     [destToken?.chainId],
   );
-
   const renderItem = useCallback(
-    (token: TrendingAsset) => (
-      <PostTradeSuggestionPill
-        token={token}
-        networkBadgeImageSource={networkBadgeImageSource}
-        onPress={onTokenPress}
-      />
-    ),
-    [networkBadgeImageSource, onTokenPress],
+    (token: TrendingAsset) => {
+      const networkBadgeImageSource =
+        getCaipChainIdFromAssetId(token.assetId) ===
+        NetworkToCaipChainId.ETHEREUM
+          ? ETHEREUM_NETWORK_BADGE_SOURCE
+          : destinationNetworkBadgeSource;
+
+      return (
+        <PostTradeSuggestionPill
+          token={token}
+          networkBadgeImageSource={networkBadgeImageSource}
+          onPress={onTokenPress}
+        />
+      );
+    },
+    [destinationNetworkBadgeSource, onTokenPress],
   );
 
   if (!shouldShowSuggestions || (!isLoading && tokens.length === 0)) {

app/components/UI/Bridge/components/PostTradeBottomSheet/usePostTradeTrendingTokens.test.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { renderHook, waitFor } from '@testing-library/react-native';
+import { act, renderHook, waitFor } from '@testing-library/react-native';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
   getTrendingTokens,
@@ -23,13 +23,16 @@ jest.mock('../../../../../selectors/currencyRateController', () => ({
   selectCurrentCurrency: jest.fn(() => 'usd'),
 }));
 
-const mockGetTrendingTokens = getTrendingTokens as jest.MockedFunction<
-  typeof getTrendingTokens
->;
+const mockGetTrendingTokens = jest.mocked(getTrendingTokens);
 
 const createWrapper = () => {
   const queryClient = new QueryClient({
     defaultOptions: { queries: { retry: false, cacheTime: Infinity } },
+    logger: {
+      log: () => undefined,
+      warn: () => undefined,
+      error: () => undefined,
+    },
   });
 
   const Wrapper = ({ children }: { children: React.ReactNode }) =>
@@ -117,6 +120,7 @@ describe('usePostTradeTrendingTokens', () => {
         vsCurrency: expect.any(String),
       }),
     );
+    expect(mockGetTrendingTokens).toHaveBeenCalledTimes(1);
     expect(result.current.tokens).toHaveLength(
       POST_TRADE_TRENDING_TOKENS_LIMIT,
     );
@@ -144,4 +148,129 @@ describe('usePostTradeTrendingTokens', () => {
     expect(result.current.tokens).toEqual([]);
     expect(mockGetTrendingTokens).not.toHaveBeenCalled();
   });
+
+  it('fills sparse destination results with Ethereum tokens', async () => {
+    const { Wrapper } = createWrapper();
+    const lineaToken = createTrendingToken(
+      'eip155:59144/erc20:0x0000000000000000000000000000000000000001',
+      'LINEA',
+      1,
+    );
+    const ethereumTokens = Array.from({ length: 20 }, (_, index) =>
+      createTrendingToken(
+        `eip155:1/erc20:0x${(index + 1).toString(16).padStart(40, '0')}`,
+        `ETH${index + 1}`,
+        index + 1,
+      ),
+    );
+    let resolveEthereumTokens: (tokens: TrendingAsset[]) => void = () =>
+      undefined;
+    const ethereumTokensPromise = new Promise<TrendingAsset[]>((resolve) => {
+      resolveEthereumTokens = resolve;
+    });
+    mockGetTrendingTokens
+      .mockResolvedValueOnce([lineaToken])
+      .mockReturnValueOnce(ethereumTokensPromise);
+
+    const { result } = renderHook(
+      () =>
+        usePostTradeTrendingTokens({
+          destToken: createBridgeToken({ chainId: '0xe708' }),
+        }),
+      { wrapper: Wrapper },
+    );
+
+    await waitFor(() => {
+      expect(mockGetTrendingTokens).toHaveBeenCalledTimes(2);
+    });
+
+    expect(result.current.isLoading).toBe(true);
+    expect(result.current.tokens).toEqual([]);
+
+    expect(mockGetTrendingTokens).toHaveBeenNthCalledWith(
+      1,
+      expect.objectContaining({
+        chainIds: ['eip155:59144'],
+        minLiquidity: 100000,
+        minVolume24hUsd: 25000,
+      }),
+    );
+    expect(mockGetTrendingTokens).toHaveBeenNthCalledWith(
+      2,
+      expect.objectContaining({
+        chainIds: ['eip155:1'],
+        minLiquidity: 100000,
+        minVolume24hUsd: 500000,
+      }),
+    );
+
+    await act(async () => {
+      resolveEthereumTokens(ethereumTokens);
+    });
+
+    await waitFor(() => {
+      expect(result.current.tokens).toHaveLength(
+        POST_TRADE_TRENDING_TOKENS_LIMIT,
+      );
+    });
+
+    expect(result.current.tokens).toHaveLength(
+      POST_TRADE_TRENDING_TOKENS_LIMIT,
+    );
+    expect(result.current.tokens[0]).toBe(lineaToken);
+    expect(result.current.tokens[1].symbol).toBe('ETH20');
+  });
+
+  it('returns destination results when the Ethereum fallback fails', async () => {
+    const { Wrapper } = createWrapper();
+    const lineaToken = createTrendingToken(
+      'eip155:59144/erc20:0x0000000000000000000000000000000000000001',
+      'LINEA',
+      1,
+    );
+    mockGetTrendingTokens
+      .mockResolvedValueOnce([lineaToken])
+      .mockRejectedValueOnce(new Error('Ethereum unavailable'));
+
+    const { result } = renderHook(
+      () =>
+        usePostTradeTrendingTokens({
+          destToken: createBridgeToken({ chainId: '0xe708' }),
+        }),
+      { wrapper: Wrapper },
+    );
+
+    await waitFor(() => {
+      expect(mockGetTrendingTokens).toHaveBeenCalledTimes(2);
+    });
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(result.current.tokens).toEqual([lineaToken]);
+    expect(result.current.error).toBeNull();
+  });
+
+  it('does not request an Ethereum fallback for sparse Ethereum results', async () => {
+    const { Wrapper } = createWrapper();
+    const ethereumToken = createTrendingToken(
+      'eip155:1/erc20:0x0000000000000000000000000000000000000001',
+      'ETH1',
+      1,
+    );
+    mockGetTrendingTokens.mockResolvedValueOnce([ethereumToken]);
+
+    const { result } = renderHook(
+      () => usePostTradeTrendingTokens({ destToken: createBridgeToken() }),
+      { wrapper: Wrapper },
+    );
+
+    await waitFor(() => {
+      expect(result.current.isLoading).toBe(false);
+    });
+
+    expect(mockGetTrendingTokens).toHaveBeenCalledTimes(1);
+    expect(result.current.tokens).toEqual([ethereumToken]);
+  });
 });

app/components/UI/Bridge/components/PostTradeBottomSheet/usePostTradeTrendingTokens.ts

@@ -5,11 +5,13 @@ import {
   type TrendingAsset,
 } from '@metamask/assets-controllers';
 import { formatChainIdToCaip } from '@metamask/bridge-controller';
+import type { CaipChainId } from '@metamask/utils';
 import type { BridgeToken } from '../../types';
 import {
   getMinLiquidityForChains,
   getMinVolume24hForChains,
 } from '../../../Trending/hooks/useTrendingRequest/useTrendingRequest';
+import { NetworkToCaipChainId } from '../../../NetworkMultiSelector/NetworkMultiSelector.constants';
 import {
   PriceChangeOption,
   SortDirection,
@@ -22,6 +24,24 @@ const STALE_TIME_MS = 5 * 60 * 1000;
 const POST_TRADE_TRENDING_TOKENS_QUERY_KEY =
   'bridge-post-trade-trending-tokens';
 
+const getSortedTrendingTokens = async (chainId: CaipChainId) => {
+  const chainIds = [chainId];
+  const tokens = await getTrendingTokens({
+    chainIds,
+    sort: 'h24_trending',
+    minLiquidity: getMinLiquidityForChains(chainIds),
+    minVolume24hUsd: getMinVolume24hForChains(chainIds),
+    minMarketCap: 0,
+    excludeLabels: ['stable_coin', 'blue_chip'],
+  });
+
+  return sortTrendingTokens(
+    tokens,
+    PriceChangeOption.MarketCap,
+    SortDirection.Descending,
+  );
+};
+
 export const usePostTradeTrendingTokens = ({
   destToken,
   enabled = true,
@@ -32,46 +52,63 @@ export const usePostTradeTrendingTokens = ({
   const destinationCaipChainId = destToken?.chainId
     ? formatChainIdToCaip(destToken.chainId)
     : undefined;
-  const chainIds = destinationCaipChainId ? [destinationCaipChainId] : [];
   const isQueryEnabled = enabled && Boolean(destinationCaipChainId);
 
-  const query = useQuery<TrendingAsset[], Error>({
+  const destinationQuery = useQuery<TrendingAsset[], Error>({
     queryKey: [POST_TRADE_TRENDING_TOKENS_QUERY_KEY, destinationCaipChainId],
     queryFn: () => {
       if (!destinationCaipChainId) {
         return Promise.resolve([]);
       }
 
-      return getTrendingTokens({
-        chainIds,
-        sort: 'h24_trending',
-        minLiquidity: getMinLiquidityForChains(chainIds),
-        minVolume24hUsd: getMinVolume24hForChains(chainIds),
-        minMarketCap: 0,
-        excludeLabels: ['stable_coin', 'blue_chip'],
-      });
+      return getSortedTrendingTokens(destinationCaipChainId);
     },
     enabled: isQueryEnabled,
     staleTime: STALE_TIME_MS,
     cacheTime: STALE_TIME_MS,
   });
-
+  const destinationTokens = useMemo(
+    () =>
+      destinationQuery.data?.slice(0, POST_TRADE_TRENDING_TOKENS_LIMIT) ?? [],
+    [destinationQuery.data],
+  );
+  const isFallbackEnabled =
+    isQueryEnabled && destinationCaipChainId !== NetworkToCaipChainId.ETHEREUM;
+  const shouldFillWithFallback =
+    isFallbackEnabled &&
+    destinationQuery.isSuccess &&
+    destinationTokens.length < POST_TRADE_TRENDING_TOKENS_LIMIT;
+  const fallbackQuery = useQuery<TrendingAsset[], Error>({
+    queryKey: [
+      POST_TRADE_TRENDING_TOKENS_QUERY_KEY,
+      NetworkToCaipChainId.ETHEREUM,
+    ],
+    queryFn: () => getSortedTrendingTokens(NetworkToCaipChainId.ETHEREUM),
+    enabled: isFallbackEnabled,
+    staleTime: STALE_TIME_MS,
+    cacheTime: STALE_TIME_MS,
+  });
   const tokens = useMemo(() => {
-    if (!query.data?.length) {
-      return [];
+    if (!shouldFillWithFallback || !fallbackQuery.data?.length) {
+      return destinationTokens;
     }
 
-    return sortTrendingTokens(
-      query.data,
-      PriceChangeOption.MarketCap,
-      SortDirection.Descending,
-    ).slice(0, POST_TRADE_TRENDING_TOKENS_LIMIT);
-  }, [query.data]);
+    return [
+      ...destinationTokens,
+      ...fallbackQuery.data.slice(
+        0,
+        POST_TRADE_TRENDING_TOKENS_LIMIT - destinationTokens.length,
+      ),
+    ];
+  }, [destinationTokens, fallbackQuery.data, shouldFillWithFallback]);
 
   return {
     tokens,
-    isLoading: isQueryEnabled && query.isLoading,
-    error: query.error,
-    refetch: query.refetch,
+    isLoading:
+      isQueryEnabled &&
+      (destinationQuery.isLoading ||
+        (shouldFillWithFallback && fallbackQuery.isLoading)),
+    error: destinationQuery.error,
+    refetch: destinationQuery.refetch,
   };
 };