feat: Token Network Filter UI [Mobile]

app/actions/settings/index.js

@@ -67,3 +67,10 @@ export function toggleDeviceNotification(deviceNotificationEnabled) {
     deviceNotificationEnabled,
   };
 }
+
+export function setTokenSortConfig(tokenSortConfig) {
+  return {
+    type: 'SET_TOKEN_SORT_CONFIG',
+    tokenSortConfig,
+  };
+}

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

@@ -0,0 +1,141 @@
+import React from 'react';
+import { fireEvent } from '@testing-library/react-native';
+import { BN } from 'ethereumjs-util';
+import renderWithProvider from '../../../../../util/test/renderWithProvider';
+import { backgroundState } from '../../../../../util/test/initial-root-state';
+import AppConstants from '../../../../../../app/core/AppConstants';
+import Routes from '../../../../../../app/constants/navigation/Routes';
+import { WalletViewSelectorsIDs } from '../../../../../../e2e/selectors/wallet/WalletView.selectors';
+import { PortfolioBalance } from '.';
+
+jest.mock('../../../../../core/Engine', () => ({
+  getTotalFiatAccountBalance: jest.fn(),
+  context: {
+    TokensController: {
+      ignoreTokens: jest.fn(() => Promise.resolve()),
+    },
+  },
+}));
+
+const initialState = {
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+      TokensController: {
+        tokens: [
+          {
+            name: 'Ethereum',
+            symbol: 'ETH',
+            address: '0x0',
+            decimals: 18,
+            isETH: true,
+
+            balanceFiat: '< $0.01',
+            iconUrl: '',
+          },
+          {
+            name: 'Bat',
+            symbol: 'BAT',
+            address: '0x01',
+            decimals: 18,
+            balanceFiat: '$0',
+            iconUrl: '',
+          },
+          {
+            name: 'Link',
+            symbol: 'LINK',
+            address: '0x02',
+            decimals: 18,
+            balanceFiat: '$0',
+            iconUrl: '',
+          },
+        ],
+      },
+      TokenRatesController: {
+        marketData: {
+          '0x1': {
+            '0x0': { price: 0.005 },
+            '0x01': { price: 0.005 },
+            '0x02': { price: 0.005 },
+          },
+        },
+      },
+      CurrencyRateController: {
+        currentCurrency: 'USD',
+        currencyRates: {
+          ETH: {
+            conversionRate: 1,
+          },
+        },
+      },
+      TokenBalancesController: {
+        contractBalances: {
+          '0x00': new BN(2),
+          '0x01': new BN(2),
+          '0x02': new BN(0),
+        },
+      },
+    },
+  },
+  settings: {
+    primaryCurrency: 'usd',
+    hideZeroBalanceTokens: true,
+  },
+  security: {
+    dataCollectionForMarketing: true,
+  },
+};
+
+const mockNavigate = jest.fn();
+const mockPush = jest.fn();
+
+jest.mock('@react-navigation/native', () => {
+  const actualReactNavigation = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualReactNavigation,
+    useNavigation: () => ({
+      navigate: mockNavigate,
+      push: mockPush,
+    }),
+  };
+});
+
+// TODO: Replace "any" with type
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const renderPortfolioBalance = (state: any = {}) =>
+  renderWithProvider(<PortfolioBalance />, { state });
+
+describe('PortfolioBalance', () => {
+  afterEach(() => {
+    mockNavigate.mockClear();
+    mockPush.mockClear();
+  });
+
+  it('fiat balance must be defined', () => {
+    const { getByTestId } = renderPortfolioBalance(initialState);
+    expect(
+      getByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT),
+    ).toBeDefined();
+  });
+
+  it('portfolio button should render correctly', () => {
+    const { getByTestId } = renderPortfolioBalance(initialState);
+
+    expect(getByTestId(WalletViewSelectorsIDs.PORTFOLIO_BUTTON)).toBeDefined();
+  });
+
+  it('navigates to Portfolio url when portfolio button is pressed', () => {
+    const { getByTestId } = renderPortfolioBalance(initialState);
+
+    const expectedUrl = `${AppConstants.PORTFOLIO.URL}/?metamaskEntry=mobile&metricsEnabled=false&marketingEnabled=${initialState.security.dataCollectionForMarketing}`;
+
+    fireEvent.press(getByTestId(WalletViewSelectorsIDs.PORTFOLIO_BUTTON));
+    expect(mockNavigate).toHaveBeenCalledWith(Routes.BROWSER.HOME, {
+      params: {
+        newTabUrl: expectedUrl,
+        timestamp: 123,
+      },
+      screen: Routes.BROWSER.VIEW,
+    });
+  });
+});

app/components/UI/Tokens/TokenList/PortfolioBalance/index.tsx

@@ -25,7 +25,9 @@ import Button, {
   ButtonSize,
   ButtonWidthTypes,
 } from '../../../../../component-library/components/Buttons/Button';
-import Text from '../../../../../component-library/components/Texts/Text';
+import Text, {
+  TextVariant,
+} from '../../../../../component-library/components/Texts/Text';
 import AggregatedPercentage from '../../../../../component-library/components-temp/Price/AggregatedPercentage';
 import { IconName } from '../../../../../component-library/components/Icons/Icon';
 import { BrowserTab } from '../../types';
@@ -110,8 +112,8 @@ export const PortfolioBalance = () => {
     <View style={styles.portfolioBalance}>
       <View>
         <Text
-          style={styles.fiatBalance}
           testID={WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT}
+          variant={TextVariant.DisplayMD}
         >
           {fiatBalance}
         </Text>

app/components/UI/Tokens/TokenList/TokenListFooter/index.tsx

@@ -28,16 +28,16 @@ import { TokenI } from '../../types';
 
 interface TokenListFooterProps {
   tokens: TokenI[];
-  isAddTokenEnabled: boolean;
   goToAddToken: () => void;
   showDetectedTokens: () => void;
+  isAddTokenEnabled: boolean;
 }
 
 export const TokenListFooter = ({
   tokens,
-  isAddTokenEnabled,
   goToAddToken,
   showDetectedTokens,
+  isAddTokenEnabled,
 }: TokenListFooterProps) => {
   const navigation = useNavigation();
   const { colors } = useTheme();
@@ -106,7 +106,7 @@ export const TokenListFooter = ({
           style={styles.add}
           onPress={goToAddToken}
           disabled={!isAddTokenEnabled}
-          testID={WalletViewSelectorsIDs.IMPORT_TOKEN_BUTTON}
+          testID={WalletViewSelectorsIDs.IMPORT_TOKEN_FOOTER_LINK}
         >
           <Text style={styles.centered}>
             <Text style={styles.emptyText}>

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

@@ -16,15 +16,17 @@ import createStyles from '../styles';
 import Text from '../../../../component-library/components/Texts/Text';
 import { TokenI } from '../types';
 import { strings } from '../../../../../locales/i18n';
-import { PortfolioBalance } from './PortfolioBalance';
 import { TokenListFooter } from './TokenListFooter';
 import { TokenListItem } from './TokenListItem';
 
 interface TokenListProps {
   tokens: TokenI[];
   refreshing: boolean;
+  isAddTokenEnabled: boolean;
   onRefresh: () => void;
   showRemoveMenu: (arg: TokenI) => void;
+  goToAddToken: () => void;
+  setIsAddTokenEnabled: (arg: boolean) => void;
 }
 
 interface TokenListNavigationParamList {
@@ -35,8 +37,11 @@ interface TokenListNavigationParamList {
 export const TokenList = ({
   tokens,
   refreshing,
+  isAddTokenEnabled,
   onRefresh,
   showRemoveMenu,
+  goToAddToken,
+  setIsAddTokenEnabled,
 }: TokenListProps) => {
   const navigation =
     useNavigation<
@@ -49,20 +54,9 @@ export const TokenList = ({
   const detectedTokens = useSelector(selectDetectedTokens);
 
   const [showScamWarningModal, setShowScamWarningModal] = useState(false);
-  const [isAddTokenEnabled, setIsAddTokenEnabled] = useState(true);
 
   const styles = createStyles(colors);
 
-  const goToAddToken = () => {
-    setIsAddTokenEnabled(false);
-    navigation.push('AddAsset', { assetType: 'token' });
-    trackEvent(MetaMetricsEvents.TOKEN_IMPORT_CLICKED, {
-      source: 'manual',
-      chain_id: getDecimalChainId(chainId),
-    });
-    setIsAddTokenEnabled(true);
-  };
-
   const showDetectedTokens = () => {
     navigation.navigate(...createDetectedTokensNavDetails());
     trackEvent(MetaMetricsEvents.TOKEN_IMPORT_CLICKED, {
@@ -77,7 +71,6 @@ export const TokenList = ({
 
   return tokens?.length ? (
     <FlatList
-      ListHeaderComponent={<PortfolioBalance />}
       data={tokens}
       renderItem={({ item }) => (
         <TokenListItem
@@ -91,9 +84,9 @@ export const TokenList = ({
       ListFooterComponent={
         <TokenListFooter
           tokens={tokens}
-          isAddTokenEnabled={isAddTokenEnabled}
           goToAddToken={goToAddToken}
           showDetectedTokens={showDetectedTokens}
+          isAddTokenEnabled={isAddTokenEnabled}
         />
       }
       refreshControl={