chore: updates

Author: georgewrmarshall

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

@@ -5,6 +5,7 @@ import { backgroundState } from '../../../../../util/test/initial-root-state';
 import { WalletViewSelectorsIDs } from '../../../../../../e2e/selectors/wallet/WalletView.selectors';
 import { PortfolioBalance } from '.';
 import Engine from '../../../../../core/Engine';
+import { useSelectedAccountMultichainBalances } from '../../../../hooks/useMultichainBalances';
 
 const { PreferencesController } = Engine.context;
 
@@ -17,9 +18,9 @@ const mockSelectedAccountMultichainBalance = {
 };
 
 jest.mock('../../../../hooks/useMultichainBalances', () => ({
-  useSelectedAccountMultichainBalances: () => ({
+  useSelectedAccountMultichainBalances: jest.fn(() => ({
     selectedAccountMultichainBalance: mockSelectedAccountMultichainBalance,
-  }),
+  })),
 }));
 
 jest.mock('../../../../../core/Engine', () => ({
@@ -47,6 +48,30 @@ jest.mock('../../../../../core/Engine', () => ({
   },
 }));
 
+jest.mock('@react-navigation/native', () => {
+  const actualNav = jest.requireActual('@react-navigation/native');
+  return {
+    ...actualNav,
+    useNavigation: () => ({
+      navigate: jest.fn(),
+    }),
+  };
+});
+
+jest.mock('../../../../../components/hooks/useMetrics', () => ({
+  useMetrics: () => ({
+    trackEvent: jest.fn(),
+    createEventBuilder: jest.fn(() => ({
+      addProperties: jest.fn().mockReturnThis(),
+      build: jest.fn(),
+    })),
+  }),
+  MetaMetricsEvents: {
+    CARD_ADD_FUNDS_DEPOSIT_CLICKED: 'CARD_ADD_FUNDS_DEPOSIT_CLICKED',
+    RAMPS_BUTTON_CLICKED: 'RAMPS_BUTTON_CLICKED',
+  },
+}));
+
 const initialState = {
   engine: {
     backgroundState: {
@@ -146,6 +171,15 @@ const renderPortfolioBalance = (state: any = {}) =>
   renderWithProvider(<PortfolioBalance />, { state });
 
 describe('PortfolioBalance', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    // Reset to default mock before each test
+    const mockedHook = jest.mocked(useSelectedAccountMultichainBalances);
+    mockedHook.mockReturnValue({
+      selectedAccountMultichainBalance: mockSelectedAccountMultichainBalance,
+    });
+  });
+
   it('fiat balance must be defined', () => {
     const { getByTestId } = renderPortfolioBalance(initialState);
     expect(
@@ -207,4 +241,40 @@ describe('PortfolioBalance', () => {
 
     expect(PreferencesController.setPrivacyMode).toHaveBeenCalledWith(true);
   });
+
+  it('displays BalanceEmptyState when balance is zero', () => {
+    // Mock zero balance
+    const mockSelectedAccountMultichainBalanceZero = {
+      displayBalance: '$0.00',
+      totalFiatBalance: 0,
+      shouldShowAggregatedPercentage: false,
+      tokenFiatBalancesCrossChains: [],
+    };
+
+    const mockedHook = jest.mocked(useSelectedAccountMultichainBalances);
+    mockedHook.mockReturnValue({
+      selectedAccountMultichainBalance:
+        mockSelectedAccountMultichainBalanceZero,
+    });
+
+    const { getByTestId, queryByTestId } = renderPortfolioBalance(initialState);
+
+    // Should render BalanceEmptyState instead of balance text
+    expect(getByTestId('portfolio-balance-empty-state')).toBeDefined();
+    expect(queryByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT)).toBeNull();
+  });
+
+  it('displays loader when balance is not available', () => {
+    // Mock null balance
+    const mockedHook = jest.mocked(useSelectedAccountMultichainBalances);
+    mockedHook.mockReturnValue({
+      selectedAccountMultichainBalance: null,
+    });
+
+    const { queryByTestId } = renderPortfolioBalance(initialState);
+
+    // Should not render balance text or empty state
+    expect(queryByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT)).toBeNull();
+    expect(queryByTestId('portfolio-balance-empty-state')).toBeNull();
+  });
 });

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

@@ -15,6 +15,7 @@ import { useSelectedAccountMultichainBalances } from '../../../../hooks/useMulti
 import Loader from '../../../../../component-library/components-temp/Loader/Loader';
 import NonEvmAggregatedPercentage from '../../../../../component-library/components-temp/Price/AggregatedPercentage/NonEvmAggregatedPercentage';
 import { selectIsEvmNetworkSelected } from '../../../../../selectors/multichainNetworkController';
+import BalanceEmptyState from '../../../BalanceEmptyState';
 
 export const PortfolioBalance = React.memo(() => {
   const { PreferencesController } = Engine.context;
@@ -57,10 +58,21 @@ export const PortfolioBalance = React.memo(() => {
     [PreferencesController],
   );
 
+  // Check if balance is zero (empty state) - only check when we have balance data
+  const hasZeroBalance =
+    selectedAccountMultichainBalance &&
+    selectedAccountMultichainBalance.totalFiatBalance === 0;
+
   return (
     <View style={styles.portfolioBalance}>
       <View>
-        {selectedAccountMultichainBalance?.displayBalance ? (
+        {!selectedAccountMultichainBalance ? (
+          <View style={styles.loaderWrapper}>
+            <Loader />
+          </View>
+        ) : hasZeroBalance ? (
+          <BalanceEmptyState testID="portfolio-balance-empty-state" />
+        ) : (
           <TouchableOpacity
             onPress={() => toggleIsBalanceAndAssetsHidden(!privacyMode)}
             testID="balance-container"
@@ -78,10 +90,6 @@ export const PortfolioBalance = React.memo(() => {
 
             {renderAggregatedPercentage()}
           </TouchableOpacity>
-        ) : (
-          <View style={styles.loaderWrapper}>
-            <Loader />
-          </View>
         )}
       </View>
     </View>