feat: Token Network Filter UI [Mobile]

app/components/Nav/App/index.js

@@ -58,7 +58,8 @@ import Toast, {
   ToastContext,
 } from '../../../component-library/components/Toast';
 import AccountSelector from '../../../components/Views/AccountSelector';
-import TokenSortBottomSheet from '../../../components/UI/Tokens/TokensBottomSheet/TokenSortBottomSheet.tsx';
+import { TokenSortBottomSheet } from '../../../components/UI/Tokens/TokensBottomSheet/TokenSortBottomSheet.tsx';
+import { TokenFilterBottomSheet } from '../../../components/UI/Tokens/TokensBottomSheet/TokenFilterBottomSheet.tsx';
 import AccountConnect from '../../../components/Views/AccountConnect';
 import AccountPermissions from '../../../components/Views/AccountPermissions';
 import { AccountPermissionsScreens } from '../../../components/Views/AccountPermissions/AccountPermissions.types';
@@ -432,6 +433,10 @@ const RootModalFlow = () => (
       name={Routes.SHEET.TOKEN_SORT}
       component={TokenSortBottomSheet}
     />
+    <Stack.Screen
+      name={Routes.SHEET.TOKEN_FILTER}
+      component={TokenFilterBottomSheet}
+    />
     <Stack.Screen
       name={Routes.SHEET.BASIC_FUNCTIONALITY}
       component={BasicFunctionalityModal}

app/components/UI/Tokens/TokensBottomSheet/TokenFilterBottomSheet.test.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react-native';
+import { TokenFilterBottomSheet } from './TokenFilterBottomSheet';
+import { useSelector } from 'react-redux';
+import Engine from '../../../../core/Engine';
+import { selectChainId } from '../../../../selectors/networkController';
+import { selectTokenNetworkFilter } from '../../../../selectors/preferencesController';
+
+jest.mock('react-redux', () => ({
+  useSelector: jest.fn(),
+}));
+
+jest.mock('../../../../util/theme', () => ({
+  useTheme: jest.fn(() => ({ colors: {} })),
+}));
+
+jest.mock('../../../../core/Engine', () => ({
+  context: {
+    PreferencesController: {
+      setTokenNetworkFilter: jest.fn(),
+    },
+  },
+}));
+
+jest.mock('@react-navigation/native', () => {
+  const reactNavigationModule = jest.requireActual('@react-navigation/native');
+  return {
+    ...reactNavigationModule,
+    useNavigation: () => ({
+      navigate: jest.fn(),
+      goBack: jest.fn(),
+    }),
+  };
+});
+
+jest.mock('react-native-safe-area-context', () => {
+  // copied from BottomSheetDialog.test.tsx
+  const inset = { top: 1, right: 2, bottom: 3, left: 4 };
+  const frame = { width: 5, height: 6, x: 7, y: 8 };
+  return {
+    SafeAreaProvider: jest.fn().mockImplementation(({ children }) => children),
+    SafeAreaConsumer: jest
+      .fn()
+      .mockImplementation(({ children }) => children(inset)),
+    useSafeAreaInsets: jest.fn().mockImplementation(() => inset),
+    useSafeAreaFrame: jest.fn().mockImplementation(() => frame),
+  };
+});
+
+describe('TokenFilterBottomSheet', () => {
+  beforeEach(() => {
+    (useSelector as jest.Mock).mockImplementation((selector) => {
+      if (selector === selectChainId) {
+        return '0x1'; // default chain ID
+      } else if (selector === selectTokenNetworkFilter) {
+        return {}; // default to show all networks
+      }
+      return null;
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders correctly with the default option (All Networks) selected', () => {
+    const { queryByText } = render(<TokenFilterBottomSheet />);
+
+    expect(queryByText('All Networks')).toBeTruthy();
+    expect(queryByText('Current Network')).toBeTruthy();
+  });
+
+  it('sets filter to All Networks and closes bottom sheet when first option is pressed', async () => {
+    const { queryByText } = render(<TokenFilterBottomSheet />);
+
+    fireEvent.press(queryByText('All Networks'));
+
+    await waitFor(() => {
+      expect(
+        Engine.context.PreferencesController.setTokenNetworkFilter,
+      ).toHaveBeenCalledWith({});
+    });
+  });
+
+  it('sets filter to Current Network and closes bottom sheet when second option is pressed', async () => {
+    const { queryByText } = render(<TokenFilterBottomSheet />);
+
+    fireEvent.press(queryByText('Current Network'));
+
+    await waitFor(() => {
+      expect(
+        Engine.context.PreferencesController.setTokenNetworkFilter,
+      ).toHaveBeenCalledWith({
+        '0x1': true,
+      });
+    });
+  });
+
+  it('displays the correct selection based on tokenNetworkFilter', () => {
+    (useSelector as jest.Mock).mockImplementation((selector) => {
+      if (selector === selectChainId) {
+        return '0x1';
+      } else if (selector === selectTokenNetworkFilter) {
+        return { '0x1': true }; // filter by current network
+      }
+      return null;
+    });
+
+    const { queryByText } = render(<TokenFilterBottomSheet />);
+
+    expect(queryByText('Current Network')).toBeTruthy();
+  });
+});

app/components/UI/Tokens/TokensBottomSheet/TokenFilterBottomSheet.tsx

@@ -0,0 +1,87 @@
+import React, { useRef } from 'react';
+import { useSelector } from 'react-redux';
+import { selectChainId } from '../../../../selectors/networkController';
+import { selectTokenNetworkFilter } from '../../../../selectors/preferencesController';
+import BottomSheet, {
+  BottomSheetRef,
+} from '../../../../component-library/components/BottomSheets/BottomSheet';
+import { useTheme } from '../../../../util/theme';
+import createStyles from '../styles';
+import Engine from '../../../../core/Engine';
+import { View } from 'react-native';
+import Text, {
+  TextVariant,
+} from '../../../../component-library/components/Texts/Text';
+import ListItemSelect from '../../../../component-library/components/List/ListItemSelect';
+import { VerticalAlignment } from '../../../../component-library/components/List/ListItem';
+import { strings } from '../../../../../locales/i18n';
+
+enum FilterOption {
+  AllNetworks = 0,
+  CurrentNetwork = 1,
+}
+
+const TokenFilterBottomSheet = () => {
+  const sheetRef = useRef<BottomSheetRef>(null);
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+
+  const chainId = useSelector(selectChainId);
+  const tokenNetworkFilter = useSelector(selectTokenNetworkFilter);
+
+  const onFilterControlsBottomSheetPress = (option: FilterOption) => {
+    const { PreferencesController } = Engine.context;
+    switch (option) {
+      case FilterOption.AllNetworks:
+        PreferencesController.setTokenNetworkFilter({});
+        sheetRef.current?.onCloseBottomSheet();
+        break;
+      case FilterOption.CurrentNetwork:
+        PreferencesController.setTokenNetworkFilter({
+          [chainId]: true,
+        });
+        sheetRef.current?.onCloseBottomSheet();
+        break;
+      default:
+        break;
+    }
+  };
+
+  const isSelectedNetwork = Boolean(tokenNetworkFilter?.[chainId]);
+
+  return (
+    <BottomSheet shouldNavigateBack ref={sheetRef}>
+      <View style={styles.bottomSheetWrapper}>
+        <Text variant={TextVariant.HeadingMD} style={styles.bottomSheetTitle}>
+          {strings('wallet.filter_by')}
+        </Text>
+        <ListItemSelect
+          onPress={() =>
+            onFilterControlsBottomSheetPress(FilterOption.AllNetworks)
+          }
+          isSelected={!isSelectedNetwork}
+          gap={8}
+          verticalAlignment={VerticalAlignment.Center}
+        >
+          <Text style={styles.bottomSheetText}>
+            {strings('wallet.all_networks')}
+          </Text>
+        </ListItemSelect>
+        <ListItemSelect
+          onPress={() =>
+            onFilterControlsBottomSheetPress(FilterOption.CurrentNetwork)
+          }
+          isSelected={isSelectedNetwork}
+          gap={8}
+          verticalAlignment={VerticalAlignment.Center}
+        >
+          <Text style={styles.bottomSheetText}>
+            {strings('wallet.current_network')}
+          </Text>
+        </ListItemSelect>
+      </View>
+    </BottomSheet>
+  );
+};
+
+export { TokenFilterBottomSheet };

app/components/UI/Tokens/TokensBottomSheet/TokenSortBottomSheet.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent, waitFor } from '@testing-library/react-native';
-import TokenSortBottomSheet from './TokenSortBottomSheet';
+import { TokenSortBottomSheet } from './TokenSortBottomSheet';
 import { useSelector } from 'react-redux';
 import Engine from '../../../../core/Engine';
 import { selectTokenSortConfig } from '../../../../selectors/preferencesController';

app/components/UI/Tokens/TokensBottomSheet/TokenSortBottomSheet.tsx

@@ -101,4 +101,4 @@ const TokenSortBottomSheet = () => {
   );
 };
 
-export default TokenSortBottomSheet;
+export { TokenSortBottomSheet };

app/components/UI/Tokens/TokensBottomSheet/index.ts

@@ -5,4 +5,11 @@ export const createTokensBottomSheetNavDetails = createNavigationDetails(
   Routes.MODAL.ROOT_MODAL_FLOW,
   Routes.SHEET.TOKEN_SORT,
 );
-export { default } from './TokenSortBottomSheet';
+
+export const createTokenBottomSheetFilterNavDetails = createNavigationDetails(
+  Routes.MODAL.ROOT_MODAL_FLOW,
+  Routes.SHEET.TOKEN_FILTER,
+);
+
+export { TokenSortBottomSheet } from './TokenSortBottomSheet';
+export { TokenFilterBottomSheet } from './TokenFilterBottomSheet';

app/components/UI/Tokens/__snapshots__/index.test.tsx.snap

@@ -340,9 +340,13 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
                               "flexDirection": "row",
                               "height": 40,
                               "justifyContent": "center",
+                              "marginLeft": 5,
+                              "marginRight": 5,
+                              "maxWidth": "60%",
                               "paddingHorizontal": 16,
                             }
                           }
+                          testID="sort-by"
                         >
                           <Text
                             accessibilityRole="none"
@@ -390,6 +394,9 @@ exports[`Tokens should hide zero balance tokens when setting is on 1`] = `
                               "flexDirection": "row",
                               "height": 40,
                               "justifyContent": "center",
+                              "marginLeft": 5,
+                              "marginRight": 5,
+                              "maxWidth": "60%",
                               "paddingHorizontal": 16,
                             }
                           }
@@ -1586,9 +1593,13 @@ exports[`Tokens should render correctly 1`] = `
                               "flexDirection": "row",
                               "height": 40,
                               "justifyContent": "center",
+                              "marginLeft": 5,
+                              "marginRight": 5,
+                              "maxWidth": "60%",
                               "paddingHorizontal": 16,
                             }
                           }
+                          testID="sort-by"
                         >
                           <Text
                             accessibilityRole="none"
@@ -1636,6 +1647,9 @@ exports[`Tokens should render correctly 1`] = `
                               "flexDirection": "row",
                               "height": 40,
                               "justifyContent": "center",
+                              "marginLeft": 5,
+                              "marginRight": 5,
+                              "maxWidth": "60%",
                               "paddingHorizontal": 16,
                             }
                           }
@@ -2832,9 +2846,13 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
                               "flexDirection": "row",
                               "height": 40,
                               "justifyContent": "center",
+                              "marginLeft": 5,
+                              "marginRight": 5,
+                              "maxWidth": "60%",
                               "paddingHorizontal": 16,
                             }
                           }
+                          testID="sort-by"
                         >
                           <Text
                             accessibilityRole="none"
@@ -2882,6 +2900,9 @@ exports[`Tokens should show all balance tokens when hideZeroBalanceTokens settin
                               "flexDirection": "row",
                               "height": 40,
                               "justifyContent": "center",
+                              "marginLeft": 5,
+                              "marginRight": 5,
+                              "maxWidth": "60%",
                               "paddingHorizontal": 16,
                             }
                           }

app/components/UI/Tokens/index.test.tsx

@@ -365,9 +365,9 @@ describe('Tokens', () => {
   });
 
   it('triggers bottom sheet when sort controls are pressed', async () => {
-    const { getByText } = renderComponent(initialState);
+    const { getByTestId } = renderComponent(initialState);
 
-    await fireEvent.press(getByText('Sort by'));
+    await fireEvent.press(getByTestId(WalletViewSelectorsIDs.SORT_BY));
 
     await waitFor(() => {
       expect(createTokensBottomSheetNavDetails).toHaveBeenCalledWith({});