From ae624594be6275a766705e6daccfae5e848f526b Mon Sep 17 00:00:00 2001
From: Owen Craston <owengc12@gmail.com>
Date: Fri, 17 Jan 2025 15:12:07 -0800
Subject: [PATCH] extract balance logic into a hook

---
 .../TokenList/PortfolioBalance/index.tsx      | 211 ++----------------
 .../hooks/usePortfolioBalance/index.ts        |   7 +
 .../usePortfolioBalance.test.ts               | 187 ++++++++++++++++
 .../usePortfolioBalance.ts                    | 187 ++++++++++++++++
 .../usePortfolioBalance.types.ts              |  34 +++
 app/hooks/usePortfolioBalance/index.ts        | 211 ++++++++++++++++++
 6 files changed, 642 insertions(+), 195 deletions(-)
 create mode 100644 app/components/hooks/usePortfolioBalance/index.ts
 create mode 100644 app/components/hooks/usePortfolioBalance/usePortfolioBalance.test.ts
 create mode 100644 app/components/hooks/usePortfolioBalance/usePortfolioBalance.ts
 create mode 100644 app/components/hooks/usePortfolioBalance/usePortfolioBalance.types.ts
 create mode 100644 app/hooks/usePortfolioBalance/index.ts

diff --git a/app/components/UI/Tokens/TokenList/PortfolioBalance/index.tsx b/app/components/UI/Tokens/TokenList/PortfolioBalance/index.tsx
index 0883d3836ead..f4236af4763d 100644
--- a/app/components/UI/Tokens/TokenList/PortfolioBalance/index.tsx
+++ b/app/components/UI/Tokens/TokenList/PortfolioBalance/index.tsx
@@ -1,32 +1,6 @@
 import React from 'react';
 import { View, TouchableOpacity } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
-import { useSelector } from 'react-redux';
-import useIsOriginalNativeTokenSymbol from '../../../../hooks/useIsOriginalNativeTokenSymbol/useIsOriginalNativeTokenSymbol';
-import { useMetrics } from '../../../../hooks/useMetrics';
 import { useTheme } from '../../../../../util/theme';
-import AppConstants from '../../../../../core/AppConstants';
-import Engine from '../../../../../core/Engine';
-import Routes from '../../../../../constants/navigation/Routes';
-import { MetaMetricsEvents } from '../../../../../core/Analytics';
-import {
-  selectChainId,
-  selectIsPopularNetwork,
-  selectProviderConfig,
-  selectTicker,
-} from '../../../../../selectors/networkController';
-import { selectCurrentCurrency } from '../../../../../selectors/currencyRateController';
-import {
-  selectIsTokenNetworkFilterEqualCurrentNetwork,
-  selectPrivacyMode,
-} from '../../../../../selectors/preferencesController';
-import { RootState } from '../../../../../reducers';
-import { renderFiat } from '../../../../../util/number';
-import {
-  isPortfolioViewEnabled,
-  isTestNet,
-} from '../../../../../util/networks';
-import { isPortfolioUrl } from '../../../../../util/url';
 import createStyles from '../../styles';
 import Button, {
   ButtonVariants,
@@ -42,209 +16,56 @@ import Icon, {
   IconSize,
   IconName,
 } from '../../../../../component-library/components/Icons/Icon';
-import { BrowserTab } from '../../types';
 import { WalletViewSelectorsIDs } from '../../../../../../e2e/selectors/wallet/WalletView.selectors';
 import { strings } from '../../../../../../locales/i18n';
 import { EYE_SLASH_ICON_TEST_ID, EYE_ICON_TEST_ID } from './index.constants';
-import { selectSelectedInternalAccount } from '../../../../../selectors/accountsController';
-import { useGetFormattedTokensPerChain } from '../../../../hooks/useGetFormattedTokensPerChain';
-import {
-  TotalFiatBalancesCrossChains,
-  useGetTotalFiatBalanceCrossChains,
-} from '../../../../hooks/useGetTotalFiatBalanceCrossChains';
-import { InternalAccount } from '@metamask/keyring-internal-api';
-import { getChainIdsToPoll } from '../../../../../selectors/tokensController';
 import AggregatedPercentageCrossChains from '../../../../../component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentageCrossChains';
-import {
-  selectMultichainSelectedAccountCachedBalance,
-  selectMultichainIsEvm,
-  selectMultichainDefaultToken,
-} from '../../../../../selectors/multichain';
+import { usePortfolioBalance } from '../../../../hooks/usePortfolioBalance';
 
 export const PortfolioBalance = () => {
-  const { PreferencesController } = Engine.context;
   const { colors } = useTheme();
   const styles = createStyles(colors);
-  const balance = Engine.getTotalFiatAccountBalance();
-
-  const selectedInternalAccount: InternalAccount | undefined = useSelector(
-    selectSelectedInternalAccount,
-  );
-  const allChainIDs = useSelector(getChainIdsToPoll);
-  const isTokenNetworkFilterEqualCurrentNetwork = useSelector(
-    selectIsTokenNetworkFilterEqualCurrentNetwork,
-  );
-  const isPopularNetwork = useSelector(selectIsPopularNetwork);
-
-  const formattedTokensWithBalancesPerChain = useGetFormattedTokensPerChain(
-    [selectedInternalAccount as InternalAccount],
-    !isTokenNetworkFilterEqualCurrentNetwork && isPopularNetwork,
-    allChainIDs,
-  );
-
-  const totalFiatBalancesCrossChain: TotalFiatBalancesCrossChains =
-    useGetTotalFiatBalanceCrossChains(
-      [selectedInternalAccount as InternalAccount],
-      formattedTokensWithBalancesPerChain,
-    );
-
-  const tokenFiatBalancesCrossChains =
-    totalFiatBalancesCrossChain[selectedInternalAccount?.address as string]
-      ?.tokenFiatBalancesCrossChains ?? [];
-  const totalFiatBalance =
-    totalFiatBalancesCrossChain[selectedInternalAccount?.address as string]
-      ?.totalFiatBalance ?? 0;
-  const totalTokenFiat =
-    totalFiatBalancesCrossChain[selectedInternalAccount?.address as string]
-      ?.totalTokenFiat ?? 0;
-
-  const navigation = useNavigation();
-  const { trackEvent, isEnabled, createEventBuilder } = useMetrics();
-
-  const { type } = useSelector(selectProviderConfig);
-  const chainId = useSelector(selectChainId);
-  const ticker = useSelector(selectTicker);
-  const isDataCollectionForMarketingEnabled = useSelector(
-    (state: RootState) => state.security.dataCollectionForMarketing,
-  );
-  const currentCurrency = useSelector(selectCurrentCurrency);
-  const browserTabs = useSelector((state: RootState) => state.browser.tabs);
-  const privacyMode = useSelector(selectPrivacyMode);
-
-  const multichainSelectedAccountCachedBalance = useSelector(
-    selectMultichainSelectedAccountCachedBalance,
-  );
-
-  const isEvm = useSelector(selectMultichainIsEvm);
-  const { symbol } = useSelector(selectMultichainDefaultToken);
-  console.log('isEvm', isEvm);
-  console.log('symbol', symbol);
-
-  const isOriginalNativeTokenSymbol = useIsOriginalNativeTokenSymbol(
-    chainId,
-    ticker,
-    type,
-  );
-
-  let displayBalance;
-  if (isEvm) {
-    let total;
-    if (isOriginalNativeTokenSymbol) {
-      if (isPortfolioViewEnabled()) {
-        total = totalFiatBalance ?? 0;
-      } else {
-        const tokenFiatTotal = balance?.tokenFiat ?? 0;
-        const ethFiatTotal = balance?.ethFiat ?? 0;
-        total = tokenFiatTotal + ethFiatTotal;
-      }
-    } else if (isPortfolioViewEnabled()) {
-      total = totalTokenFiat ?? 0;
-    } else {
-      total = balance?.tokenFiat ?? 0;
-    }
-    displayBalance = `${renderFiat(total, currentCurrency)}`;
-  } else {
-    // For non-EVM accounts, display the native balance with symbol
-    displayBalance = `${multichainSelectedAccountCachedBalance} ${symbol}`;
-  }
-
-  const onOpenPortfolio = () => {
-    const existingPortfolioTab = browserTabs.find(({ url }: BrowserTab) =>
-      isPortfolioUrl(url),
-    );
-
-    let existingTabId;
-    let newTabUrl;
-    if (existingPortfolioTab) {
-      existingTabId = existingPortfolioTab.id;
-    } else {
-      const analyticsEnabled = isEnabled();
-      const portfolioUrl = new URL(AppConstants.PORTFOLIO.URL);
-
-      portfolioUrl.searchParams.append('metamaskEntry', 'mobile');
-
-      // Append user's privacy preferences for metrics + marketing on user navigation to Portfolio.
-      portfolioUrl.searchParams.append(
-        'metricsEnabled',
-        String(analyticsEnabled),
-      );
-      portfolioUrl.searchParams.append(
-        'marketingEnabled',
-        String(!!isDataCollectionForMarketingEnabled),
-      );
-
-      newTabUrl = portfolioUrl.href;
-    }
-    const params = {
-      ...(newTabUrl && { newTabUrl }),
-      ...(existingTabId && { existingTabId, newTabUrl: undefined }),
-      timestamp: Date.now(),
-    };
-    navigation.navigate(Routes.BROWSER.HOME, {
-      screen: Routes.BROWSER.VIEW,
-      params,
-    });
-    trackEvent(
-      createEventBuilder(MetaMetricsEvents.PORTFOLIO_LINK_CLICKED)
-        .addProperties({
-          portfolioUrl: AppConstants.PORTFOLIO.URL,
-        })
-        .build(),
-    );
-  };
+  const { data, actions } = usePortfolioBalance();
 
   const renderAggregatedPercentage = () => {
-    if (!isEvm || isTestNet(chainId)) {
+    if (!data.shouldShowAggregatedPercentage) {
       return null;
     }
 
-    if (isPortfolioViewEnabled()) {
-      return (
-        <AggregatedPercentageCrossChains
-          privacyMode={privacyMode}
-          totalFiatCrossChains={totalFiatBalance}
-          tokenFiatBalancesCrossChains={tokenFiatBalancesCrossChains}
-        />
-      );
-    }
     return (
-      <AggregatedPercentage
-        privacyMode={privacyMode}
-        ethFiat={balance?.ethFiat}
-        tokenFiat={balance?.tokenFiat}
-        tokenFiat1dAgo={balance?.tokenFiat1dAgo}
-        ethFiat1dAgo={balance?.ethFiat1dAgo}
+      <AggregatedPercentageCrossChains
+        privacyMode={data.privacyMode}
+        totalFiatCrossChains={data.totalFiatBalance}
+        tokenFiatBalancesCrossChains={data.tokenFiatBalancesCrossChains}
       />
     );
   };
 
-  const toggleIsBalanceAndAssetsHidden = (value: boolean) => {
-    PreferencesController.setPrivacyMode(value);
-  };
-
   return (
     <View style={styles.portfolioBalance}>
       <View>
         <View>
           <View style={styles.balanceContainer}>
             <SensitiveText
-              isHidden={privacyMode}
+              isHidden={data.privacyMode}
               length={SensitiveTextLength.Long}
               testID={WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT}
               variant={TextVariant.DisplayMD}
             >
-              {displayBalance}
+              {data.displayBalance}
             </SensitiveText>
             <TouchableOpacity
-              onPress={() => toggleIsBalanceAndAssetsHidden(!privacyMode)}
+              onPress={() => actions.togglePrivacyMode(!data.privacyMode)}
               testID="balance-container"
             >
               <Icon
                 style={styles.privacyIcon}
-                name={privacyMode ? IconName.EyeSlash : IconName.Eye}
+                name={data.privacyMode ? IconName.EyeSlash : IconName.Eye}
                 size={IconSize.Md}
                 color={colors.text.muted}
-                testID={privacyMode ? EYE_SLASH_ICON_TEST_ID : EYE_ICON_TEST_ID}
+                testID={
+                  data.privacyMode ? EYE_SLASH_ICON_TEST_ID : EYE_ICON_TEST_ID
+                }
               />
             </TouchableOpacity>
           </View>
@@ -252,14 +73,14 @@ export const PortfolioBalance = () => {
           {renderAggregatedPercentage()}
         </View>
       </View>
-      {isEvm && (
+      {data.shouldShowPortfolioButton && (
         <View style={styles.portfolioButtonContainer}>
           <Button
             variant={ButtonVariants.Secondary}
             size={ButtonSize.Md}
             width={ButtonWidthTypes.Full}
             style={styles.buyButton}
-            onPress={onOpenPortfolio}
+            onPress={actions.onOpenPortfolio}
             label={strings('asset_overview.portfolio_button')}
             testID={WalletViewSelectorsIDs.PORTFOLIO_BUTTON}
             endIconName={IconName.Export}
diff --git a/app/components/hooks/usePortfolioBalance/index.ts b/app/components/hooks/usePortfolioBalance/index.ts
new file mode 100644
index 000000000000..f5aec7d26e4e
--- /dev/null
+++ b/app/components/hooks/usePortfolioBalance/index.ts
@@ -0,0 +1,7 @@
+export { default as usePortfolioBalance } from './usePortfolioBalance';
+export type {
+  UsePortfolioBalanceHook,
+  PortfolioBalanceData,
+  PortfolioBalanceActions,
+  TokenFiatBalancesCrossChains,
+} from './usePortfolioBalance.types';
diff --git a/app/components/hooks/usePortfolioBalance/usePortfolioBalance.test.ts b/app/components/hooks/usePortfolioBalance/usePortfolioBalance.test.ts
new file mode 100644
index 000000000000..570bf244a445
--- /dev/null
+++ b/app/components/hooks/usePortfolioBalance/usePortfolioBalance.test.ts
@@ -0,0 +1,187 @@
+import { renderHook } from '@testing-library/react-hooks';
+import usePortfolioBalance from './usePortfolioBalance';
+import Engine from '../../../core/Engine';
+import { backgroundState } from '../../../util/test/initial-root-state';
+import { MOCK_ACCOUNTS_CONTROLLER_STATE } from '../../../util/test/accountsControllerTestUtils';
+
+const mockUseSelector = jest.fn();
+jest.mock('react-redux', () => ({
+  useSelector: (fn: (state: unknown) => unknown) => mockUseSelector(fn),
+}));
+
+jest.mock('@react-navigation/native', () => {
+  const actualNav = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualNav,
+    useNavigation: () => ({
+      navigate: jest.fn(),
+    }),
+  };
+});
+
+jest.mock('../../../core/Engine', () => ({
+  context: {
+    PreferencesController: {
+      state: {
+        selectedAddress: '0x123',
+        selectedAccountType: 'eip155:eoa',
+        isPrivacyModeEnabled: false,
+      },
+      setPrivacyMode: jest.fn(),
+    },
+    TokensController: {
+      state: {
+        tokens: [],
+        networkConfigurations: {
+          '0x1': {
+            chainId: '0x1',
+            type: 'mainnet',
+            ticker: 'ETH',
+          },
+        },
+      },
+    },
+    NetworkController: {
+      state: {
+        providerConfig: {
+          chainId: '0x1',
+          type: 'mainnet',
+        },
+        networkConfigurationsByChainId: {
+          '0x1': {
+            chainId: '0x1',
+            nativeCurrency: 'ETH',
+            type: 'mainnet',
+            rpcEndpoints: [
+              {
+                networkClientId: 'mainnet',
+                type: 'infura',
+                url: 'https://mainnet.infura.io/v3/{infuraProjectId}',
+              },
+            ],
+          },
+        },
+      },
+    },
+    AccountTrackerController: {
+      state: {
+        accounts: {
+          '0x123': {
+            balance: '0x0',
+          },
+        },
+      },
+    },
+  },
+  getTotalFiatAccountBalance: () => ({ tokenFiat: 0, ethFiat: 0 }),
+}));
+
+const MOCK_STORE_STATE = {
+  settings: {},
+  engine: {
+    backgroundState: {
+      ...backgroundState,
+      AccountsController: MOCK_ACCOUNTS_CONTROLLER_STATE,
+      AccountTrackerController: {
+        accounts: {
+          [MOCK_ACCOUNTS_CONTROLLER_STATE.internalAccounts.accounts[
+            Object.keys(
+              MOCK_ACCOUNTS_CONTROLLER_STATE.internalAccounts.accounts,
+            )[0]
+          ].address]: {
+            balance: '0x0',
+          },
+        },
+      },
+      PreferencesController: {
+        selectedAddress: '0x123',
+        selectedAccountType: 'eip155:eoa',
+        isPrivacyModeEnabled: false,
+      },
+      TokensController: {
+        tokens: [],
+        networkConfigurations: {
+          '0x1': {
+            chainId: '0x1',
+            type: 'mainnet',
+            ticker: 'ETH',
+          },
+        },
+      },
+      NetworkController: {
+        providerConfig: {
+          chainId: '0x1',
+          type: 'mainnet',
+          ticker: 'ETH',
+        },
+        networkConfigurations: {
+          '0x1': {
+            chainId: '0x1',
+            type: 'mainnet',
+            ticker: 'ETH',
+          },
+        },
+      },
+    },
+  },
+  selectedInternalAccount: { address: '0x123' },
+  chainIds: ['0x1'],
+  isTokenNetworkFilterEqualCurrentNetwork: true,
+  isPopularNetwork: true,
+  providerConfig: { type: 'mainnet', chainId: '0x1', ticker: 'ETH' },
+  chainId: '0x1',
+  ticker: 'ETH',
+  dataCollectionForMarketing: false,
+  currentCurrency: 'USD',
+  browser: { tabs: [] },
+  privacyMode: false,
+  multichainSelectedAccountCachedBalance: '0',
+  isEvm: true,
+  defaultToken: { symbol: 'ETH' },
+  security: { dataCollectionForMarketing: false },
+};
+
+describe('usePortfolioBalance', () => {
+  beforeEach(() => {
+    mockUseSelector.mockImplementation((selector) =>
+      selector(MOCK_STORE_STATE),
+    );
+  });
+
+  afterEach(() => {
+    mockUseSelector.mockClear();
+  });
+
+  it('should return the correct data and actions', () => {
+    const { result } = renderHook(() => usePortfolioBalance());
+
+    expect(result.current).toEqual({
+      data: {
+        displayBalance: '0',
+        isPrivacyModeEnabled: false,
+        privacyMode: false,
+        isEvm: true,
+        isTestNetwork: false,
+        tokenFiatBalancesCrossChains: [],
+        totalFiatBalance: 0,
+        totalTokenFiat: 0,
+        shouldShowAggregatedPercentage: true,
+        shouldShowPortfolioButton: true,
+      },
+      actions: {
+        togglePrivacyMode: expect.any(Function),
+        openPortfolio: expect.any(Function),
+      },
+    });
+  });
+
+  it('should handle privacy mode toggle', () => {
+    const { result } = renderHook(() => usePortfolioBalance());
+
+    result.current.actions.togglePrivacyMode(true);
+
+    expect(
+      Engine.context.PreferencesController.setPrivacyMode,
+    ).toHaveBeenCalledWith(true);
+  });
+});
diff --git a/app/components/hooks/usePortfolioBalance/usePortfolioBalance.ts b/app/components/hooks/usePortfolioBalance/usePortfolioBalance.ts
new file mode 100644
index 000000000000..d93d42ae1aef
--- /dev/null
+++ b/app/components/hooks/usePortfolioBalance/usePortfolioBalance.ts
@@ -0,0 +1,187 @@
+import { useSelector } from 'react-redux';
+import { useNavigation } from '@react-navigation/native';
+import { BrowserTab } from '../../UI/Tokens/types';
+import { RootState } from '../../../reducers';
+import { useMetrics } from '../useMetrics';
+import Engine from '../../../core/Engine';
+import AppConstants from '../../../core/AppConstants';
+import Routes from '../../../constants/navigation/Routes';
+import { MetaMetricsEvents } from '../../../core/Analytics';
+import { isPortfolioUrl } from '../../../util/url';
+import { isTestNet } from '../../../util/networks';
+import { renderFiat } from '../../../util/number';
+import {
+  selectChainId,
+  selectIsPopularNetwork,
+  selectProviderConfig,
+  selectTicker,
+} from '../../../selectors/networkController';
+import { selectCurrentCurrency } from '../../../selectors/currencyRateController';
+import {
+  selectIsTokenNetworkFilterEqualCurrentNetwork,
+  selectPrivacyMode,
+} from '../../../selectors/preferencesController';
+import { selectSelectedInternalAccount } from '../../../selectors/accountsController';
+import { getChainIdsToPoll } from '../../../selectors/tokensController';
+import {
+  selectMultichainSelectedAccountCachedBalance,
+  selectMultichainIsEvm,
+  selectMultichainDefaultToken,
+} from '../../../selectors/multichain';
+import { useGetFormattedTokensPerChain } from '../useGetFormattedTokensPerChain';
+import { useGetTotalFiatBalanceCrossChains } from '../useGetTotalFiatBalanceCrossChains';
+import { InternalAccount } from '@metamask/keyring-internal-api';
+import useIsOriginalNativeTokenSymbol from '../useIsOriginalNativeTokenSymbol/useIsOriginalNativeTokenSymbol';
+import { UsePortfolioBalanceHook } from './usePortfolioBalance.types';
+
+/**
+ * Hook to manage portfolio balance data and actions.
+ * Provides balance information, privacy controls, and portfolio navigation.
+ *
+ * @returns Portfolio balance data and actions
+ */
+const usePortfolioBalance = (): UsePortfolioBalanceHook => {
+  const { PreferencesController } = Engine.context;
+  const navigation = useNavigation();
+  const { trackEvent, isEnabled, createEventBuilder } = useMetrics();
+
+  // Selectors
+  const selectedInternalAccount: InternalAccount | undefined = useSelector(
+    selectSelectedInternalAccount,
+  );
+  const allChainIDs = useSelector(getChainIdsToPoll);
+  const isTokenNetworkFilterEqualCurrentNetwork = useSelector(
+    selectIsTokenNetworkFilterEqualCurrentNetwork,
+  );
+  const isPopularNetwork = useSelector(selectIsPopularNetwork);
+  const { type } = useSelector(selectProviderConfig);
+  const chainId = useSelector(selectChainId);
+  const ticker = useSelector(selectTicker);
+  const isDataCollectionForMarketingEnabled = useSelector(
+    (state: RootState) => state.security.dataCollectionForMarketing,
+  );
+  const currentCurrency = useSelector(selectCurrentCurrency);
+  const browserTabs = useSelector((state: RootState) => state.browser.tabs);
+  const privacyMode = useSelector(selectPrivacyMode);
+  const multichainSelectedAccountCachedBalance = useSelector(
+    selectMultichainSelectedAccountCachedBalance,
+  );
+  const isEvm = useSelector(selectMultichainIsEvm);
+  const { symbol } = useSelector(selectMultichainDefaultToken);
+
+  // Custom hooks
+  const formattedTokensWithBalancesPerChain = useGetFormattedTokensPerChain(
+    [selectedInternalAccount as InternalAccount],
+    !isTokenNetworkFilterEqualCurrentNetwork && isPopularNetwork,
+    allChainIDs,
+  );
+
+  const totalFiatBalancesCrossChain = useGetTotalFiatBalanceCrossChains(
+    [selectedInternalAccount as InternalAccount],
+    formattedTokensWithBalancesPerChain,
+  );
+
+  const isOriginalNativeTokenSymbol = useIsOriginalNativeTokenSymbol(
+    chainId,
+    ticker,
+    type,
+  );
+
+  // Compute balances
+  const tokenFiatBalancesCrossChains =
+    totalFiatBalancesCrossChain[selectedInternalAccount?.address as string]
+      ?.tokenFiatBalancesCrossChains ?? [];
+  const totalFiatBalance =
+    totalFiatBalancesCrossChain[selectedInternalAccount?.address as string]
+      ?.totalFiatBalance ?? 0;
+  const totalTokenFiat =
+    totalFiatBalancesCrossChain[selectedInternalAccount?.address as string]
+      ?.totalTokenFiat ?? 0;
+
+  // Calculate display balance
+  let displayBalance;
+  if (isEvm) {
+    let total;
+    const balance = Engine.getTotalFiatAccountBalance();
+    if (isOriginalNativeTokenSymbol) {
+      const tokenFiatTotal = balance?.tokenFiat ?? 0;
+      const ethFiatTotal = balance?.ethFiat ?? 0;
+      total = tokenFiatTotal + ethFiatTotal;
+    } else {
+      total = balance?.tokenFiat ?? 0;
+    }
+    displayBalance = `${renderFiat(total, currentCurrency)}`;
+  } else {
+    displayBalance = `${multichainSelectedAccountCachedBalance} ${symbol}`;
+  }
+
+  const togglePrivacyMode = (value: boolean) => {
+    PreferencesController.setPrivacyMode(value);
+  };
+
+  const onOpenPortfolio = () => {
+    const existingPortfolioTab = browserTabs.find(({ url }: BrowserTab) =>
+      isPortfolioUrl(url),
+    );
+
+    let existingTabId;
+    let newTabUrl;
+    if (existingPortfolioTab) {
+      existingTabId = existingPortfolioTab.id;
+    } else {
+      const analyticsEnabled = isEnabled();
+      const portfolioUrl = new URL(AppConstants.PORTFOLIO.URL);
+
+      portfolioUrl.searchParams.append('metamaskEntry', 'mobile');
+      portfolioUrl.searchParams.append(
+        'metricsEnabled',
+        String(analyticsEnabled),
+      );
+      portfolioUrl.searchParams.append(
+        'marketingEnabled',
+        String(!!isDataCollectionForMarketingEnabled),
+      );
+
+      newTabUrl = portfolioUrl.href;
+    }
+
+    const params = {
+      ...(newTabUrl && { newTabUrl }),
+      ...(existingTabId && { existingTabId, newTabUrl: undefined }),
+      timestamp: Date.now(),
+    };
+
+    navigation.navigate(Routes.BROWSER.HOME, {
+      screen: Routes.BROWSER.VIEW,
+      params,
+    });
+
+    trackEvent(
+      createEventBuilder(MetaMetricsEvents.PORTFOLIO_LINK_CLICKED)
+        .addProperties({
+          portfolioUrl: AppConstants.PORTFOLIO.URL,
+        })
+        .build(),
+    );
+  };
+
+  return {
+    data: {
+      displayBalance,
+      privacyMode,
+      isEvm,
+      isTestNetwork: isTestNet(chainId),
+      tokenFiatBalancesCrossChains,
+      totalFiatBalance,
+      totalTokenFiat,
+      shouldShowAggregatedPercentage: isEvm && !isTestNet(chainId),
+      shouldShowPortfolioButton: isEvm,
+    },
+    actions: {
+      togglePrivacyMode,
+      onOpenPortfolio,
+    },
+  };
+};
+
+export default usePortfolioBalance;
diff --git a/app/components/hooks/usePortfolioBalance/usePortfolioBalance.types.ts b/app/components/hooks/usePortfolioBalance/usePortfolioBalance.types.ts
new file mode 100644
index 000000000000..a48a2febab30
--- /dev/null
+++ b/app/components/hooks/usePortfolioBalance/usePortfolioBalance.types.ts
@@ -0,0 +1,34 @@
+export interface TokenFiatBalancesCrossChains {
+  chainId: string;
+  tokensWithBalances: {
+    address: string;
+    symbol: string;
+    decimals: number;
+    balance: string;
+    tokenBalanceFiat: number;
+  }[];
+  tokenFiatBalances: number[];
+  nativeFiatValue: number;
+}
+
+export interface PortfolioBalanceData {
+  displayBalance: string;
+  privacyMode: boolean;
+  isEvm: boolean;
+  isTestNetwork: boolean;
+  tokenFiatBalancesCrossChains: TokenFiatBalancesCrossChains[];
+  totalFiatBalance: number;
+  totalTokenFiat: number;
+  shouldShowAggregatedPercentage: boolean;
+  shouldShowPortfolioButton: boolean;
+}
+
+export interface PortfolioBalanceActions {
+  togglePrivacyMode: (value: boolean) => void;
+  onOpenPortfolio: () => void;
+}
+
+export interface UsePortfolioBalanceHook {
+  data: PortfolioBalanceData;
+  actions: PortfolioBalanceActions;
+}
diff --git a/app/hooks/usePortfolioBalance/index.ts b/app/hooks/usePortfolioBalance/index.ts
new file mode 100644
index 000000000000..3cc6124e2790
--- /dev/null
+++ b/app/hooks/usePortfolioBalance/index.ts
@@ -0,0 +1,211 @@
+import { useSelector } from 'react-redux';
+import { useNavigation } from '@react-navigation/native';
+import { BrowserTab } from '../../components/UI/Tokens/types';
+import { RootState } from '../../reducers';
+import { useMetrics } from '../../components/hooks/useMetrics';
+import Engine from '../../core/Engine';
+import AppConstants from '../../core/AppConstants';
+import Routes from '../../constants/navigation/Routes';
+import { MetaMetricsEvents } from '../../core/Analytics';
+import { isPortfolioUrl } from '../../util/url';
+import { isTestNet } from '../../util/networks';
+import { renderFiat } from '../../util/number';
+import {
+  selectChainId,
+  selectIsPopularNetwork,
+  selectProviderConfig,
+  selectTicker,
+} from '../../selectors/networkController';
+import { selectCurrentCurrency } from '../../selectors/currencyRateController';
+import {
+  selectIsTokenNetworkFilterEqualCurrentNetwork,
+  selectPrivacyMode,
+} from '../../selectors/preferencesController';
+import { selectSelectedInternalAccount } from '../../selectors/accountsController';
+import { getChainIdsToPoll } from '../../selectors/tokensController';
+import {
+  selectMultichainSelectedAccountCachedBalance,
+  selectMultichainIsEvm,
+  selectMultichainDefaultToken,
+} from '../../selectors/multichain';
+import { useGetFormattedTokensPerChain } from '../../components/hooks/useGetFormattedTokensPerChain';
+import { useGetTotalFiatBalanceCrossChains } from '../../components/hooks/useGetTotalFiatBalanceCrossChains';
+import { InternalAccount } from '@metamask/keyring-internal-api';
+import useIsOriginalNativeTokenSymbol from '../../components/hooks/useIsOriginalNativeTokenSymbol/useIsOriginalNativeTokenSymbol';
+
+interface TokenFiatBalancesCrossChains {
+  chainId: string;
+  tokensWithBalances: {
+    address: string;
+    symbol: string;
+    decimals: number;
+    balance: string;
+    tokenBalanceFiat: number;
+  }[];
+  tokenFiatBalances: number[];
+  nativeFiatValue: number;
+}
+
+export interface PortfolioBalanceData {
+  displayBalance: string;
+  privacyMode: boolean;
+  isEvm: boolean;
+  isTestNetwork: boolean;
+  tokenFiatBalancesCrossChains: TokenFiatBalancesCrossChains[];
+  totalFiatBalance: number;
+  totalTokenFiat: number;
+  shouldShowAggregatedPercentage: boolean;
+  shouldShowPortfolioButton: boolean;
+}
+
+export interface PortfolioBalanceActions {
+  togglePrivacyMode: (value: boolean) => void;
+  onOpenPortfolio: () => void;
+}
+
+export const usePortfolioBalance = (): {
+  data: PortfolioBalanceData;
+  actions: PortfolioBalanceActions;
+} => {
+  const { PreferencesController } = Engine.context;
+  const navigation = useNavigation();
+  const { trackEvent, isEnabled, createEventBuilder } = useMetrics();
+
+  // Selectors
+  const selectedInternalAccount: InternalAccount | undefined = useSelector(
+    selectSelectedInternalAccount,
+  );
+  const allChainIDs = useSelector(getChainIdsToPoll);
+  const isTokenNetworkFilterEqualCurrentNetwork = useSelector(
+    selectIsTokenNetworkFilterEqualCurrentNetwork,
+  );
+  const isPopularNetwork = useSelector(selectIsPopularNetwork);
+  const { type } = useSelector(selectProviderConfig);
+  const chainId = useSelector(selectChainId);
+  const ticker = useSelector(selectTicker);
+  const isDataCollectionForMarketingEnabled = useSelector(
+    (state: RootState) => state.security.dataCollectionForMarketing,
+  );
+  const currentCurrency = useSelector(selectCurrentCurrency);
+  const browserTabs = useSelector((state: RootState) => state.browser.tabs);
+  const privacyMode = useSelector(selectPrivacyMode);
+  const multichainSelectedAccountCachedBalance = useSelector(
+    selectMultichainSelectedAccountCachedBalance,
+  );
+  const isEvm = useSelector(selectMultichainIsEvm);
+  const { symbol } = useSelector(selectMultichainDefaultToken);
+
+  // Custom hooks
+  const formattedTokensWithBalancesPerChain = useGetFormattedTokensPerChain(
+    [selectedInternalAccount as InternalAccount],
+    !isTokenNetworkFilterEqualCurrentNetwork && isPopularNetwork,
+    allChainIDs,
+  );
+
+  const totalFiatBalancesCrossChain = useGetTotalFiatBalanceCrossChains(
+    [selectedInternalAccount as InternalAccount],
+    formattedTokensWithBalancesPerChain,
+  );
+
+  const isOriginalNativeTokenSymbol = useIsOriginalNativeTokenSymbol(
+    chainId,
+    ticker,
+    type,
+  );
+
+  // Compute balances
+  const tokenFiatBalancesCrossChains =
+    totalFiatBalancesCrossChain[selectedInternalAccount?.address as string]
+      ?.tokenFiatBalancesCrossChains ?? [];
+  const totalFiatBalance =
+    totalFiatBalancesCrossChain[selectedInternalAccount?.address as string]
+      ?.totalFiatBalance ?? 0;
+  const totalTokenFiat =
+    totalFiatBalancesCrossChain[selectedInternalAccount?.address as string]
+      ?.totalTokenFiat ?? 0;
+
+  // Calculate display balance
+  let displayBalance;
+  if (isEvm) {
+    let total;
+    const balance = Engine.getTotalFiatAccountBalance();
+    if (isOriginalNativeTokenSymbol) {
+      const tokenFiatTotal = balance?.tokenFiat ?? 0;
+      const ethFiatTotal = balance?.ethFiat ?? 0;
+      total = tokenFiatTotal + ethFiatTotal;
+    } else {
+      total = balance?.tokenFiat ?? 0;
+    }
+    displayBalance = `${renderFiat(total, currentCurrency)}`;
+  } else {
+    displayBalance = `${multichainSelectedAccountCachedBalance} ${symbol}`;
+  }
+
+  const togglePrivacyMode = (value: boolean) => {
+    PreferencesController.setPrivacyMode(value);
+  };
+
+  const onOpenPortfolio = () => {
+    const existingPortfolioTab = browserTabs.find(({ url }: BrowserTab) =>
+      isPortfolioUrl(url),
+    );
+
+    let existingTabId;
+    let newTabUrl;
+    if (existingPortfolioTab) {
+      existingTabId = existingPortfolioTab.id;
+    } else {
+      const analyticsEnabled = isEnabled();
+      const portfolioUrl = new URL(AppConstants.PORTFOLIO.URL);
+
+      portfolioUrl.searchParams.append('metamaskEntry', 'mobile');
+      portfolioUrl.searchParams.append(
+        'metricsEnabled',
+        String(analyticsEnabled),
+      );
+      portfolioUrl.searchParams.append(
+        'marketingEnabled',
+        String(!!isDataCollectionForMarketingEnabled),
+      );
+
+      newTabUrl = portfolioUrl.href;
+    }
+
+    const params = {
+      ...(newTabUrl && { newTabUrl }),
+      ...(existingTabId && { existingTabId, newTabUrl: undefined }),
+      timestamp: Date.now(),
+    };
+
+    navigation.navigate(Routes.BROWSER.HOME, {
+      screen: Routes.BROWSER.VIEW,
+      params,
+    });
+
+    trackEvent(
+      createEventBuilder(MetaMetricsEvents.PORTFOLIO_LINK_CLICKED)
+        .addProperties({
+          portfolioUrl: AppConstants.PORTFOLIO.URL,
+        })
+        .build(),
+    );
+  };
+
+  return {
+    data: {
+      displayBalance,
+      privacyMode,
+      isEvm,
+      isTestNetwork: isTestNet(chainId),
+      tokenFiatBalancesCrossChains,
+      totalFiatBalance,
+      totalTokenFiat,
+      shouldShowAggregatedPercentage: isEvm && !isTestNet(chainId),
+      shouldShowPortfolioButton: isEvm,
+    },
+    actions: {
+      togglePrivacyMode,
+      onOpenPortfolio,
+    },
+  };
+};