feat: implementing empty balance state component

Author: georgewrmarshall

app/components/UI/Assets/components/Balance/AccountGroupBalance.test.tsx

@@ -45,11 +45,40 @@ describe('AccountGroupBalance', () => {
       }),
     );
 
-    const { getByTestId } = renderWithProvider(<AccountGroupBalance />, {
-      state: testState,
-    });
+    const { getByTestId, queryByTestId } = renderWithProvider(
+      <AccountGroupBalance />,
+      {
+        state: testState,
+      },
+    );
+
+    // Should render balance text, not empty state
+    expect(getByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT)).toBeTruthy();
+    expect(queryByTestId('account-group-balance-empty-state')).toBeNull();
+  });
 
-    const el = getByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT);
-    expect(el).toBeTruthy();
+  it('renders balance empty state when balance is zero', () => {
+    const { selectBalanceBySelectedAccountGroup } = jest.requireMock(
+      '../../../../../selectors/assets/balances',
+    );
+    (selectBalanceBySelectedAccountGroup as jest.Mock).mockImplementation(
+      () => ({
+        walletId: 'wallet-1',
+        groupId: 'wallet-1/group-1',
+        totalBalanceInUserCurrency: 0, // Zero balance
+        userCurrency: 'usd',
+      }),
+    );
+
+    const { getByTestId, queryByTestId } = renderWithProvider(
+      <AccountGroupBalance />,
+      {
+        state: testState,
+      },
+    );
+
+    // Should render BalanceEmptyState instead of balance text
+    expect(getByTestId('account-group-balance-empty-state')).toBeDefined();
+    expect(queryByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT)).toBeNull();
   });
 });

app/components/UI/Assets/components/Balance/AccountGroupBalance.tsx

@@ -16,6 +16,7 @@ import { WalletViewSelectorsIDs } from '../../../../../../e2e/selectors/wallet/W
 import { Skeleton } from '../../../../../component-library/components/Skeleton';
 import { useFormatters } from '../../../../hooks/useFormatters';
 import AccountGroupBalanceChange from '../../components/BalanceChange/AccountGroupBalanceChange';
+import BalanceEmptyState from '../../../BalanceEmptyState';
 
 const AccountGroupBalance = () => {
   const { PreferencesController } = Engine.context;
@@ -38,10 +39,23 @@ const AccountGroupBalance = () => {
   const userCurrency = groupBalance?.userCurrency ?? '';
   const displayBalance = formatCurrency(totalBalance, userCurrency);
 
+  // Check if balance is zero (empty state) - only check when we have balance data
+  const hasZeroBalance =
+    groupBalance && groupBalance.totalBalanceInUserCurrency === 0;
+
   return (
     <View style={styles.accountGroupBalance}>
       <View>
-        {groupBalance ? (
+        {!groupBalance ? (
+          <View style={styles.skeletonContainer}>
+            <Skeleton width={100} height={40} />
+            <Skeleton width={100} height={20} />
+          </View>
+        ) : hasZeroBalance ? (
+          <>
+            <BalanceEmptyState testID="account-group-balance-empty-state" />
+          </>
+        ) : (
           <TouchableOpacity
             onPress={() => togglePrivacy(!privacyMode)}
             testID="balance-container"
@@ -66,11 +80,6 @@ const AccountGroupBalance = () => {
               />
             )}
           </TouchableOpacity>
-        ) : (
-          <View style={styles.skeletonContainer}>
-            <Skeleton width={100} height={40} />
-            <Skeleton width={100} height={20} />
-          </View>
         )}
       </View>
     </View>

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

@@ -13,7 +13,6 @@ import TextComponent, {
 } from '../../../../component-library/components/Texts/Text';
 import { TokenI } from '../types';
 import { strings } from '../../../../../locales/i18n';
-import { TokenListFooter } from './TokenListFooter';
 import { TokenListItem, TokenListItemBip44 } from './TokenListItem';
 import { WalletViewSelectorsIDs } from '../../../../../e2e/selectors/wallet/WalletView.selectors';
 import { useNavigation } from '@react-navigation/native';
@@ -107,7 +106,6 @@ const TokenListComponent = ({
         return `${item.address}-${item.chainId}-${staked}-${idx}`;
       }}
       decelerationRate="fast"
-      ListFooterComponent={<TokenListFooter />}
       refreshControl={
         <RefreshControl
           colors={[colors.primary.default]}