feat: token network selector (WIP)

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/TokenList/TokenListItem/index.tsx

@@ -43,13 +43,18 @@
 import NetworkMainAssetLogo from '../../../NetworkMainAssetLogo';
 import images from 'images/image-icons';
 import { TokenI } from '../../types';
-import { strings } from '../../../../../../locales/i18n';
+import I18n, { strings } from '../../../../../../locales/i18n';
 import { ScamWarningIcon } from '../ScamWarningIcon';
 import { ScamWarningModal } from '../ScamWarningModal';
 import { StakeButton } from '../../../Stake/components/StakeButton';
 import { CustomNetworkImgMapping } from '../../../../../util/networks/customNetworks';
 import useStakingChain from '../../../Stake/hooks/useStakingChain';
 
+export function getImageForChainId(chainId: string) {
+  // TODO: Fetch by image url by chain id
+  console.log('chainId:', chainId);
+}
+
 interface TokenListItemProps {
   asset: TokenI;
   showScamWarningModal: boolean;
@@ -89,14 +94,20 @@
 
   const itemAddress = safeToChecksumAddress(asset.address);
 
-  const { balanceFiat, balanceValueFormatted } =
-    deriveBalanceFromAssetMarketDetails(
-      asset,
-      tokenExchangeRates,
-      tokenBalances,
-      conversionRate,
-      currentCurrency,
-    );
+  const { _, balanceValueFormatted } = deriveBalanceFromAssetMarketDetails(
+    asset,
+    tokenExchangeRates,
+    tokenBalances,
+    conversionRate,
+    currentCurrency,
+  );
+
+  // format pricing here
+  const { tokenFiatAmount } = asset;
+  const balanceFiat = new Intl.NumberFormat(I18n.locale, {
+    currency: currentCurrency.toUpperCase(),
+    style: 'currency',
+  }).format(tokenFiatAmount);
 
   const pricePercentChange1d = itemAddress
     ? tokenExchangeRates?.[itemAddress as `0x${string}`]?.pricePercentChange1d
@@ -155,7 +166,7 @@
   const isLineaMainnet = isLineaMainnetByChainId(chainId);
 
   const { isStakingSupportedChain } = useStakingChain();
-
+  console.log('images', images);
   const NetworkBadgeSource = () => {
     if (isTestNet(chainId)) return getTestNetImageByChainId(chainId);
 
@@ -175,7 +186,7 @@
       ...token,
     });
   };
-
+  console.log('network badge source:', getImageForChainId(chainId));
   return (
     <AssetElement
       key={itemAddress || '0x'}

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,101 @@
+import React, { useRef } from 'react';
+import { useSelector } from 'react-redux';
+import {
+  selectChainId,
+  selectNetworkConfigurations,
+} 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,
+  CurrentNetwork,
+}
+
+const TokenFilterBottomSheet = () => {
+  const sheetRef = useRef<BottomSheetRef>(null);
+  const { colors } = useTheme();
+  const styles = createStyles(colors);
+
+  const chainId = useSelector(selectChainId);
+  const allNetworks = useSelector(selectNetworkConfigurations);
+  const tokenNetworkFilter = useSelector(selectTokenNetworkFilter);
+
+  const allOpts: Record<string, boolean> = {};
+  Object.keys(allNetworks).forEach((networkChainId) => {
+    allOpts[networkChainId] = true;
+  });
+
+  const onFilterControlsBottomSheetPress = (option: FilterOption) => {
+    const { PreferencesController } = Engine.context;
+
+    switch (option) {
+      case FilterOption.AllNetworks:
+        PreferencesController.setTokenNetworkFilter(allOpts);
+        sheetRef.current?.onCloseBottomSheet();
+        break;
+      case FilterOption.CurrentNetwork:
+        PreferencesController.setTokenNetworkFilter({
+          [chainId]: true,
+        });
+        sheetRef.current?.onCloseBottomSheet();
+        break;
+      default:
+        break;
+    }
+  };
+
+  const isCurrentNetwork = Boolean(
+    tokenNetworkFilter[chainId] && Object.keys(tokenNetworkFilter).length === 1,
+  );
+  const isAllNetworks =
+    Object.keys(tokenNetworkFilter).length === Object.keys(allNetworks).length;
+
+  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={isAllNetworks}
+          gap={8}
+          verticalAlignment={VerticalAlignment.Center}
+        >
+          <Text style={styles.bottomSheetText}>
+            {strings('wallet.all_networks')}
+          </Text>
+        </ListItemSelect>
+        <ListItemSelect
+          onPress={() =>
+            onFilterControlsBottomSheetPress(FilterOption.CurrentNetwork)
+          }
+          isSelected={isCurrentNetwork}
+          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';