fix: chains with only batchSell stablecoins in wallet should not appear

infiniteflower · infiniteflower · commit 4956b5e72370 · 2026-05-13T13:04:58.000-04:00
diff --git a/app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.test.tsx b/app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.test.tsx
@@ -25,6 +25,9 @@ const mockDispatch = jest.fn();
 const mockNavigate = jest.fn();
 const mockUseTokensWithBalance = jest.fn();
 let mockDestinationStablecoins: BridgeToken[] = [];
+let mockDestinationStablecoinsByChain: Partial<
+  Record<CaipChainId, BridgeToken[]>
+> = {};
 let mockWalletTokens: BridgeToken[] = [];
 let mockPricePercentChangesByAddress: Record<string, number | undefined> = {};
 let mockTokenMarketData: Record<
@@ -106,6 +109,9 @@ jest.mock('../../../../../selectors/networkController', () => ({
 
 jest.mock('../../../../../core/redux/slices/bridge', () => ({
   selectBatchSellDestStablecoins: jest.fn(() => mockDestinationStablecoins),
+  selectBatchSellDestStablecoinsByChain: jest.fn(
+    () => mockDestinationStablecoinsByChain,
+  ),
   setBatchSellDestToken: jest.fn((token: BridgeToken | undefined) => ({
     type: 'bridge/setBatchSellDestToken',
     payload: token,
@@ -199,7 +205,9 @@ describe('filterBatchSellDestinationStablecoins', () => {
 
     const result = removeStablecoinsFromSourceTokens({
       tokens: [lowBalanceToken, stablecoinToken, highBalanceToken],
-      stablecoins: [BridgeTokenMetadata[usdcAssetId]],
+      stablecoinsByChain: {
+        ['eip155:1' as CaipChainId]: [BridgeTokenMetadata[usdcAssetId]],
+      },
     });
 
     expect(result.map((token) => token.symbol)).toEqual(['LOW', 'HIGH']);
@@ -341,6 +349,7 @@ describe('BatchSellTokenSelect', () => {
   beforeEach(() => {
     jest.clearAllMocks();
     mockDestinationStablecoins = [];
+    mockDestinationStablecoinsByChain = {};
     mockPricePercentChangesByAddress = {};
     mockTokenMarketData = {};
     mockCurrencyRates = {
@@ -372,6 +381,9 @@ describe('BatchSellTokenSelect', () => {
   it('renders only eligible wallet tokens', () => {
     const stablecoinAddress = '0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48';
     mockDestinationStablecoins = [BridgeTokenMetadata[usdcAssetId]];
+    mockDestinationStablecoinsByChain = {
+      ['eip155:1' as CaipChainId]: mockDestinationStablecoins,
+    };
     mockWalletTokens = [
       createToken({ symbol: 'SELL', name: 'Sell Token' }),
       createToken({
@@ -655,6 +667,74 @@ describe('BatchSellTokenSelect', () => {
     ).not.toBeOnTheScreen();
   });
 
+  it('shows the no sellable tokens empty state when wallet only has destination stablecoins', () => {
+    const stablecoin = BridgeTokenMetadata[usdcAssetId];
+    mockDestinationStablecoins = [stablecoin];
+    mockDestinationStablecoinsByChain = {
+      ['eip155:1' as CaipChainId]: [stablecoin],
+    };
+    mockWalletTokens = [
+      createToken({
+        symbol: 'USDC',
+        name: 'USD Coin',
+        address: stablecoin.address,
+        chainId: stablecoin.chainId as Hex,
+        tokenFiatAmount: 100,
+      }),
+    ];
+
+    const { getByTestId, queryByTestId, queryByText } = render(
+      <BatchSellTokenSelect />,
+    );
+
+    expect(
+      getByTestId(BatchSellTokenSelectSelectorsIDs.EMPTY_STATE),
+    ).toBeOnTheScreen();
+    expect(
+      queryByTestId(getNetworkPillTestId('eip155:1' as CaipChainId)),
+    ).not.toBeOnTheScreen();
+    expect(queryByText('USDC')).not.toBeOnTheScreen();
+    expect(
+      queryByTestId(BatchSellTokenSelectSelectorsIDs.NEXT_BUTTON),
+    ).not.toBeOnTheScreen();
+  });
+
+  it('omits stablecoin-only network pills when another chain has a sellable token', () => {
+    const stablecoin = BridgeTokenMetadata[usdcAssetId];
+    mockDestinationStablecoinsByChain = {
+      ['eip155:1' as CaipChainId]: [stablecoin],
+    };
+    mockWalletTokens = [
+      createToken({
+        symbol: 'USDC',
+        name: 'USD Coin',
+        address: stablecoin.address,
+        chainId: stablecoin.chainId as Hex,
+        tokenFiatAmount: 100,
+      }),
+      createToken({
+        symbol: 'BASEA',
+        name: 'Base A',
+        address: '0x2222222222222222222222222222222222222222',
+        chainId: '0x2105' as Hex,
+        tokenFiatAmount: 1,
+      }),
+    ];
+
+    const { getByTestId, getByText, queryByTestId, queryByText } = render(
+      <BatchSellTokenSelect />,
+    );
+
+    expect(
+      getByTestId(getNetworkPillTestId('eip155:8453' as CaipChainId)),
+    ).toBeOnTheScreen();
+    expect(
+      queryByTestId(getNetworkPillTestId('eip155:1' as CaipChainId)),
+    ).not.toBeOnTheScreen();
+    expect(getByText('BASEA')).toBeOnTheScreen();
+    expect(queryByText('USDC')).not.toBeOnTheScreen();
+  });
+
   it('navigates to Explore Tokens from the empty state', () => {
     mockWalletTokens = [];
 
diff --git a/app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.tsx b/app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.tsx
@@ -32,6 +32,7 @@ import { strings } from '../../../../../../locales/i18n';
 import Routes from '../../../../../constants/navigation/Routes';
 import {
   selectBatchSellDestStablecoins,
+  selectBatchSellDestStablecoinsByChain,
   setBatchSellDestToken,
   setBatchSellSourceTokens,
 } from '../../../../../core/redux/slices/bridge';
@@ -64,11 +65,20 @@ export function BatchSellTokenSelect() {
   const allWalletTokens = useTokensWithBalance({
     chainIds: SUPPORTED_BATCH_SELL_CHAIN_IDS,
   });
+  const stablecoinsByChain = useSelector(selectBatchSellDestStablecoinsByChain);
   const [tokenSortDirection, setTokenSortDirection] =
     useState<BatchSellTokenSortDirection>('desc');
+  const eligibleSourceTokens = useMemo(() => {
+    const sourceTokens = removeStablecoinsFromSourceTokens({
+      tokens: allWalletTokens,
+      stablecoinsByChain,
+    });
+
+    return sortBatchSellTokens(sourceTokens, tokenSortDirection);
+  }, [allWalletTokens, stablecoinsByChain, tokenSortDirection]);
   const sortedEligibleChains = useMemo(
-    () => buildBatchSellEligibleChains(allWalletTokens),
-    [allWalletTokens],
+    () => buildBatchSellEligibleChains(eligibleSourceTokens),
+    [eligibleSourceTokens],
   );
   const [selectedChainId, setSelectedChainId] = useState<
     CaipChainId | undefined
@@ -106,24 +116,15 @@ export function BatchSellTokenSelect() {
   const destinationStablecoins = useSelector((state: RootState) =>
     selectBatchSellDestStablecoins(state, activeChainId),
   );
-  const selectedChainTokens = useMemo(() => {
-    const activeChainTokens = activeChainId
-      ? allWalletTokens.filter(
-          (token) => formatChainIdToCaip(token.chainId) === activeChainId,
-        )
-      : allWalletTokens;
-    const sourceTokens = removeStablecoinsFromSourceTokens({
-      tokens: activeChainTokens,
-      stablecoins: destinationStablecoins,
-    });
-
-    return sortBatchSellTokens(sourceTokens, tokenSortDirection);
-  }, [
-    activeChainId,
-    allWalletTokens,
-    destinationStablecoins,
-    tokenSortDirection,
-  ]);
+  const selectedChainTokens = useMemo(
+    () =>
+      activeChainId
+        ? eligibleSourceTokens.filter(
+            (token) => formatChainIdToCaip(token.chainId) === activeChainId,
+          )
+        : eligibleSourceTokens,
+    [activeChainId, eligibleSourceTokens],
+  );
   const selectedTokenKeys = useMemo(
     () => new Set(selectedTokens.map(getTokenKey)),
     [selectedTokens],
diff --git a/app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.utils.ts b/app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.utils.ts
@@ -45,18 +45,30 @@ export function getBatchSellDestinationToken(
 
 export function removeStablecoinsFromSourceTokens({
   tokens,
-  stablecoins,
+  stablecoinsByChain,
 }: {
   tokens: BridgeToken[];
-  stablecoins: BridgeToken[];
+  stablecoinsByChain: Partial<Record<CaipChainId, BridgeToken[]>>;
 }): BridgeToken[] {
-  const stablecoinAssetIds = new Set(
-    stablecoins
-      .map((stablecoin) => getBridgeTokenAssetId(stablecoin))
-      .filter((assetId): assetId is CaipAssetType => Boolean(assetId)),
+  const stablecoinAssetIdsByChain = new Map(
+    Object.entries(stablecoinsByChain).map(([chainId, stablecoins]) => [
+      chainId as CaipChainId,
+      new Set(
+        (stablecoins ?? [])
+          .map((stablecoin) => getBridgeTokenAssetId(stablecoin))
+          .filter((assetId): assetId is CaipAssetType => Boolean(assetId)),
+      ),
+    ]),
   );
 
   return tokens.filter((token) => {
+    const caipChainId = formatChainIdToCaip(token.chainId);
+    const stablecoinAssetIds = stablecoinAssetIdsByChain.get(caipChainId);
+
+    if (!stablecoinAssetIds) {
+      return true;
+    }
+
     const assetId = getBridgeTokenAssetId(token);
 
     if (!assetId) {
diff --git a/app/core/redux/slices/bridge/index.test.ts b/app/core/redux/slices/bridge/index.test.ts
@@ -27,6 +27,7 @@ import reducer, {
   setBatchSellDestToken,
   selectBatchSellDestToken,
   selectBatchSellDestStablecoins,
+  selectBatchSellDestStablecoinsByChain,
 } from '.';
 import { FEATURE_FLAG_NAME } from '../../../../selectors/featureFlagController/rwa';
 import {
@@ -710,6 +711,54 @@ describe('bridge slice', () => {
       ]);
     });
 
+    it('returns configured stablecoins by chain with local metadata', () => {
+      const mockState = cloneDeep(mockRootState);
+      const ethUsdc =
+        'eip155:1/erc20:0xA0B86991C6218B36C1D19D4A2E9EB0CE3606EB48' as CaipAssetType;
+      const baseUsdc =
+        'eip155:8453/erc20:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913' as CaipAssetType;
+      const unknownStablecoin =
+        'eip155:1/erc20:0x0000000000000000000000000000000000000001' as CaipAssetType;
+
+      mockState.engine.backgroundState.RemoteFeatureFlagController.remoteFeatureFlags.bridgeConfigV2.chains[
+        'eip155:1'
+      ] = {
+        ...mockState.engine.backgroundState.RemoteFeatureFlagController
+          .remoteFeatureFlags.bridgeConfigV2.chains['eip155:1'],
+        batchSellDestStablecoins: [unknownStablecoin, ethUsdc],
+      } as unknown as any;
+      mockState.engine.backgroundState.RemoteFeatureFlagController.remoteFeatureFlags.bridgeConfigV2.chains[
+        'eip155:8453'
+      ] = {
+        ...mockState.engine.backgroundState.RemoteFeatureFlagController
+          .remoteFeatureFlags.bridgeConfigV2.chains['eip155:8453'],
+        isActiveSrc: true,
+        isActiveDest: true,
+        isGaslessSwapEnabled: false,
+        batchSellDestStablecoins: [baseUsdc],
+      } as unknown as any;
+
+      const expectedEthUsdc =
+        BridgeTokenMetadata[
+          'eip155:1/erc20:0xa0b86991c6218b36c1d19d4a2e9eb0ce3606eb48' as CaipAssetType
+        ];
+      const expectedBaseUsdc =
+        BridgeTokenMetadata[
+          'eip155:8453/erc20:0x833589fcd6edb6e08f4c7c32d4f71b54bda02913' as CaipAssetType
+        ];
+
+      const result = selectBatchSellDestStablecoinsByChain(
+        mockState as unknown as RootState,
+      );
+
+      expect(result).toEqual(
+        expect.objectContaining({
+          'eip155:1': [expectedEthUsdc],
+          'eip155:8453': [expectedBaseUsdc],
+        }),
+      );
+    });
+
     it('returns an empty array when no chain is selected', () => {
       const result = selectBatchSellDestStablecoins(
         mockRootState as unknown as RootState,
diff --git a/app/core/redux/slices/bridge/index.ts b/app/core/redux/slices/bridge/index.ts
@@ -367,6 +367,41 @@ function getBridgeTokenMetadata(
   return metadataAssetId ? BridgeTokenMetadata[metadataAssetId] : undefined;
 }
 
+function getBatchSellDestStablecoinMetadata(
+  stablecoinAssetIds: CaipAssetType[],
+): BridgeToken[] {
+  return stablecoinAssetIds.reduce<BridgeToken[]>(
+    (stablecoins, stablecoinAssetId) => {
+      const tokenMetadata = getBridgeTokenMetadata(stablecoinAssetId);
+
+      if (tokenMetadata) {
+        stablecoins.push(tokenMetadata);
+      }
+
+      return stablecoins;
+    },
+    [],
+  );
+}
+
+export const selectBatchSellDestStablecoinsByChain = createSelector(
+  selectBridgeFeatureFlags,
+  (bridgeFeatureFlags): Partial<Record<CaipChainId, BridgeToken[]>> =>
+    Object.entries(bridgeFeatureFlags.chains ?? {}).reduce<
+      Partial<Record<CaipChainId, BridgeToken[]>>
+    >((stablecoinsByChain, [chainId, chainConfig]) => {
+      const stablecoins = getBatchSellDestStablecoinMetadata(
+        chainConfig.batchSellDestStablecoins ?? [],
+      );
+
+      if (stablecoins.length > 0) {
+        stablecoinsByChain[chainId as CaipChainId] = stablecoins;
+      }
+
+      return stablecoinsByChain;
+    }, {}),
+);
+
 export const selectBatchSellDestStablecoins = createSelector(
   selectBridgeFeatureFlags,
   (_state: RootState, chainId?: BridgeToken['chainId']) =>
@@ -379,18 +414,7 @@ export const selectBatchSellDestStablecoins = createSelector(
     const batchSellDestStablecoins =
       bridgeFeatureFlags.chains?.[chainId]?.batchSellDestStablecoins ?? [];
 
-    return batchSellDestStablecoins.reduce<BridgeToken[]>(
-      (stablecoins, stablecoinAssetId) => {
-        const tokenMetadata = getBridgeTokenMetadata(stablecoinAssetId);
-
-        if (tokenMetadata) {
-          stablecoins.push(tokenMetadata);
-        }
-
-        return stablecoins;
-      },
-      [],
-    );
+    return getBatchSellDestStablecoinMetadata(batchSellDestStablecoins);
   },
 );
 
