chore: Reorganize PortfolioBalance (#11520)

## **Description**

Step 2 of token sorting is to move `PortfolioBalance` above the
`TabView`. This PR introduces this UI change to move the
`PortfolioBalance` above the `TabView`, since it can happen separately
from the Token sorting task in order to keep PRs small and easy to
review / get past CI.

No functional changes. I did bump the font variant per the design spec
to `TextVariant.DisplayMD`

## **Related issues**

Design:
https://www.figma.com/design/aMYisczaJyEsYl1TYdcPUL/Portfolio-View?node-id=5008-57060&node-type=frame&t=DkOQgh3ZMZfzy6C4-0

## **Manual testing steps**

## **Screenshots/Recordings**

<img width="250" alt="Screenshot 2024-09-30 at 10 29 54 PM"
src="https://github.com/user-attachments/assets/d2397167-c149-4d1f-b78a-574217eaba2e">


## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

---------

Co-authored-by: salimtb <[email protected]>

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

@@ -16,7 +16,6 @@ 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';
 
@@ -77,7 +76,6 @@ export const TokenList = ({
 
   return tokens?.length ? (
     <FlatList
-      ListHeaderComponent={<PortfolioBalance />}
       data={tokens}
       renderItem={({ item }) => (
         <TokenListItem