feat: implement BatchSellEmptyState component and update BatchSellTokenSelect to use it

infiniteflower · infiniteflower · commit 5d2232f864a6 · 2026-05-06T17:28:48.000-04:00
diff --git a/app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellEmptyState.tsx b/app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellEmptyState.tsx
@@ -0,0 +1,64 @@
+import React from 'react';
+import { Image } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import {
+  Box,
+  BoxAlignItems,
+  BoxJustifyContent,
+  Button,
+  ButtonSize,
+  ButtonVariant,
+  Text,
+  TextColor,
+  TextVariant,
+} from '@metamask/design-system-react-native';
+import { strings } from '../../../../../../locales/i18n';
+import emptyStateDefiLight from '../../../../../images/empty-state-defi-light.png';
+import { BatchSellTokenSelectSelectorsIDs } from './BatchSellTokenSelect.testIds';
+
+interface BatchSellEmptyStateProps {
+  onExploreTokensPress: () => void;
+}
+
+export function BatchSellEmptyState({
+  onExploreTokensPress,
+}: BatchSellEmptyStateProps) {
+  const tw = useTailwind();
+
+  return (
+    <SafeAreaView style={tw.style('flex-1 bg-default')} edges={['bottom']}>
+      <Box
+        testID={BatchSellTokenSelectSelectorsIDs.EMPTY_STATE}
+        alignItems={BoxAlignItems.Center}
+        justifyContent={BoxJustifyContent.Center}
+        gap={3}
+        twClassName="flex-1 px-4 py-4"
+      >
+        <Image
+          source={emptyStateDefiLight}
+          resizeMode="contain"
+          style={tw.style('h-[72px] w-[72px]')}
+        />
+        <Box alignItems={BoxAlignItems.Center} gap={3} twClassName="px-4">
+          <Text
+            variant={TextVariant.BodyMd}
+            color={TextColor.TextAlternative}
+            twClassName="w-[240px] text-center"
+          >
+            {strings('bridge.batch_sell_empty_state_description')}
+          </Text>
+          <Button
+            variant={ButtonVariant.Secondary}
+            size={ButtonSize.Lg}
+            onPress={onExploreTokensPress}
+            twClassName="self-center"
+            testID={BatchSellTokenSelectSelectorsIDs.EXPLORE_TOKENS_BUTTON}
+          >
+            {strings('bridge.explore_tokens')}
+          </Button>
+        </Box>
+      </Box>
+    </SafeAreaView>
+  );
+}
diff --git a/app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.test.tsx b/app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.test.tsx
@@ -13,7 +13,6 @@ import {
   sortBatchSellTokens,
 } from './BatchSellTokenSelect.utils';
 import Routes from '../../../../../constants/navigation/Routes';
-import AppConstants from '../../../../../core/AppConstants';
 import { BridgeTokenMetadata } from '../../constants/tokens';
 import {
   TextColor as ComponentLibraryTextColor,
@@ -775,7 +774,9 @@ describe('BatchSellTokenSelect', () => {
 
     const { getByText, queryByTestId } = render(<BatchSellTokenSelect />);
 
-    expect(getByText('No tokens. No problem.')).toBeOnTheScreen();
+    expect(
+      getByText('No tokens. No problem. Explore and buy tokens to batch sell.'),
+    ).toBeOnTheScreen();
     expect(
       queryByTestId(BatchSellTokenSelectSelectorsIDs.NEXT_BUTTON),
     ).not.toBeOnTheScreen();
@@ -790,12 +791,8 @@ describe('BatchSellTokenSelect', () => {
       getByTestId(BatchSellTokenSelectSelectorsIDs.EXPLORE_TOKENS_BUTTON),
     );
 
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.BROWSER.HOME, {
-      screen: Routes.BROWSER.VIEW,
-      params: {
-        newTabUrl: AppConstants.EXPLORE_TOKENS.URL,
-        timestamp: expect.any(Number),
-      },
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.TRENDING_VIEW, {
+      screen: Routes.TRENDING_FEED,
     });
   });
 
diff --git a/app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.testIds.ts b/app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.testIds.ts
@@ -5,6 +5,5 @@ export const BatchSellTokenSelectSelectorsIDs = {
   NEXT_BUTTON: 'batch-sell-token-select-next-button',
   EMPTY_STATE: 'batch-sell-token-select-empty-state',
   EXPLORE_TOKENS_BUTTON: 'batch-sell-token-select-explore-tokens-button',
-  SEARCH_EMPTY_STATE: 'batch-sell-token-select-search-empty-state',
   BALANCE_SORT_BUTTON: 'batch-sell-token-select-balance-sort-button',
 };
diff --git a/app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.tsx b/app/components/UI/Bridge/Views/BatchSellTokenSelect/BatchSellTokenSelect.tsx
@@ -1,6 +1,6 @@
 import { useNavigation } from '@react-navigation/native';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Image, ListRenderItemInfo, Pressable } from 'react-native';
+import { ListRenderItemInfo, Pressable } from 'react-native';
 import { FlatList, ScrollView } from 'react-native-gesture-handler';
 import { SafeAreaView } from 'react-native-safe-area-context';
 import { useDispatch, useSelector } from 'react-redux';
@@ -12,7 +12,6 @@ import {
   Box,
   BoxAlignItems,
   BoxFlexDirection,
-  BoxJustifyContent,
   Button,
   ButtonSize,
   ButtonVariant,
@@ -30,7 +29,6 @@ import { CaipChainId } from '@metamask/utils';
 
 import { getHeaderCompactStandardNavbarOptions } from '../../../../../component-library/components-temp/HeaderCompactStandard';
 import { strings } from '../../../../../../locales/i18n';
-import AppConstants from '../../../../../core/AppConstants';
 import Routes from '../../../../../constants/navigation/Routes';
 import {
   selectBatchSellDestStablecoinsByChain,
@@ -41,7 +39,6 @@ import { useTokensWithBalance } from '../../hooks/useTokensWithBalance';
 import ButtonToggle from '../../../../../component-library/components-temp/Buttons/ButtonToggle';
 import { ButtonSize as ButtonToggleSize } from '../../../../../component-library/components/Buttons/Button';
 import { getNetworkImageSource } from '../../../../../util/networks';
-import emptyStateDefiLight from '../../../../../images/empty-state-defi-light.png';
 import {
   buildBatchSellEligibleChains,
   removeStablecoinsFromSourceTokens,
@@ -53,6 +50,7 @@ import {
 } from './BatchSellTokenSelect.utils';
 import { BatchSellTokenSelectSelectorsIDs } from './BatchSellTokenSelect.testIds';
 import { BatchSellTokenRow } from './BatchSellTokenRow';
+import { BatchSellEmptyState } from './BatchSellEmptyState';
 
 const getTokenKey = (token: BridgeToken) =>
   `${formatChainIdToCaip(token.chainId)}:${token.address}`;
@@ -220,12 +218,8 @@ export function BatchSellTokenSelect() {
   }, [dispatch, navigation, selectedTokens, stablecoinsByChain]);
 
   const handleExploreTokensPress = useCallback(() => {
-    navigation.navigate(Routes.BROWSER.HOME, {
-      screen: Routes.BROWSER.VIEW,
-      params: {
-        newTabUrl: AppConstants.EXPLORE_TOKENS.URL,
-        timestamp: Date.now(),
-      },
+    navigation.navigate(Routes.TRENDING_VIEW, {
+      screen: Routes.TRENDING_FEED,
     });
   }, [navigation]);
 
@@ -308,45 +302,7 @@ export function BatchSellTokenSelect() {
 
   if (eligibleSourceTokens.length === 0) {
     return (
-      <SafeAreaView style={tw.style('flex-1 bg-default')} edges={['bottom']}>
-        <Box
-          testID={BatchSellTokenSelectSelectorsIDs.EMPTY_STATE}
-          alignItems={BoxAlignItems.Center}
-          justifyContent={BoxJustifyContent.Center}
-          twClassName="flex-1 px-8"
-        >
-          <Image
-            source={emptyStateDefiLight}
-            resizeMode="contain"
-            style={tw.style('h-[96px] w-[96px] mb-6')}
-          />
-          <Text
-            variant={TextVariant.HeadingMd}
-            color={TextColor.TextDefault}
-            twClassName="text-center"
-          >
-            {strings('bridge.batch_sell_empty_state_title')}
-          </Text>
-          <Text
-            variant={TextVariant.BodyMd}
-            color={TextColor.TextAlternative}
-            twClassName="mt-2 text-center"
-          >
-            {strings('bridge.batch_sell_empty_state_description')}
-          </Text>
-          <Box twClassName="mt-6 w-full">
-            <Button
-              variant={ButtonVariant.Secondary}
-              size={ButtonSize.Lg}
-              isFullWidth
-              onPress={handleExploreTokensPress}
-              testID={BatchSellTokenSelectSelectorsIDs.EXPLORE_TOKENS_BUTTON}
-            >
-              {strings('bridge.explore_tokens')}
-            </Button>
-          </Box>
-        </Box>
-      </SafeAreaView>
+      <BatchSellEmptyState onExploreTokensPress={handleExploreTokensPress} />
     );
   }
 
@@ -420,28 +376,6 @@ export function BatchSellTokenSelect() {
           keyExtractor={getTokenKey}
           showsVerticalScrollIndicator={false}
           contentContainerStyle={tw.style('pb-4')}
-          ListEmptyComponent={
-            <Box
-              testID={BatchSellTokenSelectSelectorsIDs.SEARCH_EMPTY_STATE}
-              alignItems={BoxAlignItems.Center}
-              twClassName="px-8 py-20"
-            >
-              <Text
-                variant={TextVariant.HeadingMd}
-                color={TextColor.TextDefault}
-                twClassName="text-center"
-              >
-                {strings('bridge.no_tokens_found')}
-              </Text>
-              <Text
-                variant={TextVariant.BodyMd}
-                color={TextColor.TextAlternative}
-                twClassName="mt-2 text-center"
-              >
-                {strings('bridge.no_tokens_found_description')}
-              </Text>
-            </Box>
-          }
         />
         <Box twClassName="border-t border-muted px-4 pb-4 pt-3">
           <Button
diff --git a/locales/languages/en.json b/locales/languages/en.json
@@ -7161,7 +7161,7 @@
     "batch_sell_select_title": "Select up to 5 tokens",
     "batch_sell_select_subtitle": "All tokens need to be on the same network.",
     "batch_sell_empty_state_title": "No tokens. No problem.",
-    "batch_sell_empty_state_description": "Explore and buy tokens to batch sell.",
+    "batch_sell_empty_state_description": "No tokens. No problem. Explore and buy tokens to batch sell.",
     "batch_sell_continue_with_one_token": "Continue with (1) token",
     "batch_sell_continue_with_tokens": "Continue with ({{tokenCount}}) tokens",
     "batch_sell_max_tokens_allowed": "Max 5 tokens allowed",
@@ -7171,7 +7171,6 @@
     "batch_sell_checkbox_label": "Batch Sell token",
     "sort_balance": "Balance",
     "next": "Next",
-    "cancel": "Cancel",
     "explore_tokens": "Explore tokens",
     "no_tokens_found": "No tokens found",
     "no_tokens_found_description": "We couldn't find any tokens with this name. Try a different search.",
