chore: implementing isHomepageRedesignV1Enabled feature flag logic

Author: georgewrmarshall

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

@@ -1,7 +1,9 @@
 import React from 'react';
 import AccountGroupBalance from './AccountGroupBalance';
 import { WalletViewSelectorsIDs } from '../../../../../../e2e/selectors/wallet/WalletView.selectors';
-import renderWithProvider, { renderScreen } from '../../../../../util/test/renderWithProvider';
+import renderWithProvider, {
+  renderScreen,
+} from '../../../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../../../util/test/initial-root-state';
 
 jest.mock('../../../../../selectors/assets/balances', () => ({
@@ -11,6 +13,10 @@ jest.mock('../../../../../selectors/assets/balances', () => ({
   selectBalanceChangeBySelectedAccountGroup: jest.fn(() => () => null),
 }));
 
+jest.mock('../../../../../selectors/featureFlagController/homepage', () => ({
+  selectHomepageRedesignV1Enabled: jest.fn(() => false),
+}));
+
 const testState = {
   engine: {
     backgroundState: {
@@ -57,10 +63,14 @@ describe('AccountGroupBalance', () => {
     expect(queryByTestId('account-group-balance-empty-state')).toBeNull();
   });
 
-  it('renders balance empty state when balance is zero', () => {
+  it('renders balance empty state when balance is zero and feature flag is enabled', () => {
     const { selectBalanceBySelectedAccountGroup } = jest.requireMock(
       '../../../../../selectors/assets/balances',
     );
+    const { selectHomepageRedesignV1Enabled } = jest.requireMock(
+      '../../../../../selectors/featureFlagController/homepage',
+    );
+
     (selectBalanceBySelectedAccountGroup as jest.Mock).mockImplementation(
       () => ({
         walletId: 'wallet-1',
@@ -70,6 +80,9 @@ describe('AccountGroupBalance', () => {
       }),
     );
 
+    // Enable the feature flag for this test
+    (selectHomepageRedesignV1Enabled as jest.Mock).mockReturnValue(true);
+
     const { getByTestId, queryByTestId } = renderScreen(
       () => <AccountGroupBalance />,
       { name: 'AccountGroupBalance' },
@@ -80,4 +93,34 @@ describe('AccountGroupBalance', () => {
     expect(getByTestId('account-group-balance-empty-state')).toBeDefined();
     expect(queryByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT)).toBeNull();
   });
+
+  it('does not render balance empty state when balance is zero but feature flag is disabled', () => {
+    const { selectBalanceBySelectedAccountGroup } = jest.requireMock(
+      '../../../../../selectors/assets/balances',
+    );
+    const { selectHomepageRedesignV1Enabled } = jest.requireMock(
+      '../../../../../selectors/featureFlagController/homepage',
+    );
+
+    (selectBalanceBySelectedAccountGroup as jest.Mock).mockImplementation(
+      () => ({
+        walletId: 'wallet-1',
+        groupId: 'wallet-1/group-1',
+        totalBalanceInUserCurrency: 0, // Zero balance
+        userCurrency: 'usd',
+      }),
+    );
+
+    // Ensure the feature flag is disabled for this test
+    (selectHomepageRedesignV1Enabled as jest.Mock).mockReturnValue(false);
+
+    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();
+  });
 });

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

@@ -8,6 +8,7 @@ import {
   selectBalanceBySelectedAccountGroup,
   selectBalanceChangeBySelectedAccountGroup,
 } from '../../../../../selectors/assets/balances';
+import { selectHomepageRedesignV1Enabled } from '../../../../../selectors/featureFlagController/homepage';
 import SensitiveText, {
   SensitiveTextLength,
 } from '../../../../../component-library/components/Texts/SensitiveText';
@@ -27,6 +28,9 @@ const AccountGroupBalance = () => {
   const balanceChange1d = useSelector(
     selectBalanceChangeBySelectedAccountGroup('1d'),
   );
+  const isHomepageRedesignV1Enabled = useSelector(
+    selectHomepageRedesignV1Enabled,
+  );
 
   const togglePrivacy = useCallback(
     (value: boolean) => {
@@ -51,7 +55,7 @@ const AccountGroupBalance = () => {
             <Skeleton width={100} height={40} />
             <Skeleton width={100} height={20} />
           </View>
-        ) : hasZeroBalance ? (
+        ) : hasZeroBalance && isHomepageRedesignV1Enabled ? (
           <>
             <BalanceEmptyState testID="account-group-balance-empty-state" />
           </>

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

@@ -34,6 +34,10 @@ jest.mock('../../../../hooks/useMultichainBalances', () => ({
   })),
 }));
 
+jest.mock('../../../../../selectors/featureFlagController/homepage', () => ({
+  selectHomepageRedesignV1Enabled: jest.fn(() => false),
+}));
+
 jest.mock('../../../../../core/Engine', () => ({
   getTotalEvmFiatAccountBalance: jest.fn(),
   context: {
@@ -253,7 +257,13 @@ describe('PortfolioBalance', () => {
     expect(PreferencesController.setPrivacyMode).toHaveBeenCalledWith(true);
   });
 
-  it('displays BalanceEmptyState when balance is zero', () => {
+  it('displays BalanceEmptyState when balance is zero and feature flag is enabled', () => {
+    // Mock the feature flag to be enabled
+    const { selectHomepageRedesignV1Enabled } = jest.requireMock(
+      '../../../../../selectors/featureFlagController/homepage',
+    );
+    (selectHomepageRedesignV1Enabled as jest.Mock).mockReturnValue(true);
+
     // Mock zero balance
     const mockSelectedAccountMultichainBalanceZero = {
       displayBalance: '$0.00',
@@ -286,6 +296,45 @@ describe('PortfolioBalance', () => {
     expect(queryByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT)).toBeNull();
   });
 
+  it('does not display BalanceEmptyState when balance is zero but feature flag is disabled', () => {
+    // Ensure feature flag is disabled
+    const { selectHomepageRedesignV1Enabled } = jest.requireMock(
+      '../../../../../selectors/featureFlagController/homepage',
+    );
+    (selectHomepageRedesignV1Enabled as jest.Mock).mockReturnValue(false);
+
+    // Mock zero balance
+    const mockSelectedAccountMultichainBalanceZero = {
+      displayBalance: '$0.00',
+      displayCurrency: 'USD',
+      totalFiatBalance: 0,
+      totalNativeTokenBalance: '0',
+      nativeTokenUnit: 'ETH',
+      shouldShowAggregatedPercentage: false,
+      isPortfolioVieEnabled: false,
+      aggregatedBalance: {
+        ethFiat: 123.45,
+        tokenFiat: 0,
+        tokenFiat1dAgo: 0,
+        ethFiat1dAgo: 100.0,
+      },
+      isLoadingAccount: false,
+      tokenFiatBalancesCrossChains: [],
+    };
+
+    const mockedHook = jest.mocked(useSelectedAccountMultichainBalances);
+    mockedHook.mockReturnValue({
+      selectedAccountMultichainBalance:
+        mockSelectedAccountMultichainBalanceZero,
+    });
+
+    const { getByTestId, queryByTestId } = renderPortfolioBalance(initialState);
+
+    // Should render balance text, not empty state
+    expect(getByTestId(WalletViewSelectorsIDs.TOTAL_BALANCE_TEXT)).toBeTruthy();
+    expect(queryByTestId('portfolio-balance-empty-state')).toBeNull();
+  });
+
   it('displays loader when balance is not available', () => {
     // Mock undefined balance
     const mockedHook = jest.mocked(useSelectedAccountMultichainBalances);

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 { selectHomepageRedesignV1Enabled } from '../../../../../selectors/featureFlagController/homepage';
 import BalanceEmptyState from '../../../BalanceEmptyState';
 
 export const PortfolioBalance = React.memo(() => {
@@ -26,6 +27,9 @@ export const PortfolioBalance = React.memo(() => {
   const { selectedAccountMultichainBalance } =
     useSelectedAccountMultichainBalances();
   const isEvmSelected = useSelector(selectIsEvmNetworkSelected);
+  const isHomepageRedesignV1Enabled = useSelector(
+    selectHomepageRedesignV1Enabled,
+  );
 
   const renderAggregatedPercentage = () => {
     if (
@@ -70,7 +74,7 @@ export const PortfolioBalance = React.memo(() => {
           <View style={styles.loaderWrapper}>
             <Loader />
           </View>
-        ) : hasZeroBalance ? (
+        ) : hasZeroBalance && isHomepageRedesignV1Enabled ? (
           <BalanceEmptyState testID="portfolio-balance-empty-state" />
         ) : (
           <TouchableOpacity