merge main and solve conflicts

app/components/UI/AccountSelectorList/AccountSelector.test.tsx

@@ -16,6 +16,7 @@ import {
 } from '../../../util/test/accountsControllerTestUtils';
 import { mockNetworkState } from '../../../util/test/network';
 import { CHAIN_IDS } from '@metamask/transaction-controller';
+import { AccountSelectorListProps } from './AccountSelectorList.types';
 
 const BUSINESS_ACCOUNT = '0xC4955C0d639D99699Bfd7Ec54d9FaFEe40e4D272';
 const PERSONAL_ACCOUNT = '0xd018538C87232FF95acbCe4870629b75640a78E7';
@@ -82,8 +83,9 @@ const initialState = {
 
 const onSelectAccount = jest.fn();
 const onRemoveImportedAccount = jest.fn();
-
-const AccountSelectorListUseAccounts = () => {
+const AccountSelectorListUseAccounts: React.FC<AccountSelectorListProps> = ({
+  privacyMode = false,
+}) => {
   const { accounts, ensByAccountAddress } = useAccounts();
   return (
     <AccountSelectorList
@@ -92,6 +94,7 @@ const AccountSelectorListUseAccounts = () => {
       accounts={accounts}
       ensByAccountAddress={ensByAccountAddress}
       isRemoveAccountEnabled
+      privacyMode={privacyMode}
     />
   );
 };
@@ -118,7 +121,7 @@ const renderComponent = (
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   state: any = {},
   AccountSelectorListTest = AccountSelectorListUseAccounts,
-) => renderWithProvider(<AccountSelectorListTest />, { state });
+) => renderWithProvider(<AccountSelectorListTest {...state} />, { state });
 
 describe('AccountSelectorList', () => {
   beforeEach(() => {
@@ -238,4 +241,46 @@ describe('AccountSelectorList', () => {
       expect(snapTag).toBeDefined();
     });
   });
+  it('Text is not hidden when privacy mode is off', async () => {
+    const state = {
+      ...initialState,
+      privacyMode: false,
+    };
+
+    const { queryByTestId } = renderComponent(state);
+
+    await waitFor(() => {
+      const businessAccountItem = queryByTestId(
+        `${AccountListViewSelectorsIDs.ACCOUNT_BALANCE_BY_ADDRESS_TEST_ID}-${BUSINESS_ACCOUNT}`,
+      );
+
+      expect(within(businessAccountItem).getByText(regex.eth(1))).toBeDefined();
+      expect(
+        within(businessAccountItem).getByText(regex.usd(3200)),
+      ).toBeDefined();
+
+      expect(within(businessAccountItem).queryByText('••••••')).toBeNull();
+    });
+  });
+  it('Text is hidden when privacy mode is on', async () => {
+    const state = {
+      ...initialState,
+      privacyMode: true,
+    };
+
+    const { queryByTestId } = renderComponent(state);
+
+    await waitFor(() => {
+      const businessAccountItem = queryByTestId(
+        `${AccountListViewSelectorsIDs.ACCOUNT_BALANCE_BY_ADDRESS_TEST_ID}-${BUSINESS_ACCOUNT}`,
+      );
+
+      expect(within(businessAccountItem).queryByText(regex.eth(1))).toBeNull();
+      expect(
+        within(businessAccountItem).queryByText(regex.usd(3200)),
+      ).toBeNull();
+
+      expect(within(businessAccountItem).getByText('••••••')).toBeDefined();
+    });
+  });
 });

app/components/UI/AccountSelectorList/AccountSelectorList.tsx

@@ -14,7 +14,6 @@ import Cell, {
 } from '../../../component-library/components/Cells/Cell';
 import { InternalAccount } from '@metamask/keyring-api';
 import { useStyles } from '../../../component-library/hooks';
-import { selectPrivacyMode } from '../../../selectors/preferencesController';
 import { TextColor } from '../../../component-library/components/Texts/Text';
 import SensitiveText, {
   SensitiveTextLength,
@@ -52,6 +51,7 @@ const AccountSelectorList = ({
   isSelectionDisabled,
   isRemoveAccountEnabled = false,
   isAutoScrollEnabled = true,
+  privacyMode = false,
   ...props
 }: AccountSelectorListProps) => {
   const { navigate } = useNavigation();
@@ -72,7 +72,6 @@ const AccountSelectorList = ({
   );
 
   const internalAccounts = useSelector(selectInternalAccounts);
-  const privacyMode = useSelector(selectPrivacyMode);
   const getKeyExtractor = ({ address }: Account) => address;
 
   const renderAccountBalances = useCallback(

app/components/UI/AccountSelectorList/AccountSelectorList.types.ts

@@ -56,4 +56,8 @@ export interface AccountSelectorListProps
    * Optional boolean to enable removing accounts.
    */
   isRemoveAccountEnabled?: boolean;
+  /**
+   * Optional boolean to indicate if privacy mode is enabled.
+   */
+  privacyMode?: boolean;
 }

app/components/UI/WalletAccount/WalletAccount.test.tsx

@@ -57,6 +57,9 @@ const mockInitialState: DeepPartial<RootState> = {
   engine: {
     backgroundState: {
       ...backgroundState,
+      PreferencesController: {
+        privacyMode: false,
+      },
       AccountsController: MOCK_ACCOUNTS_CONTROLLER_STATE,
       NetworkController: {
         ...mockNetworkState({
@@ -101,14 +104,21 @@ jest.mock('../../../util/ENSUtils', () => ({
     }),
 }));
 
+const mockSelector = jest
+  .fn()
+  .mockImplementation((callback) => callback(mockInitialState));
+
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
-  useSelector: jest
-    .fn()
-    .mockImplementation((callback) => callback(mockInitialState)),
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  useSelector: (selector: any) => mockSelector(selector),
 }));
 
 describe('WalletAccount', () => {
+  beforeEach(() => {
+    mockSelector.mockImplementation((callback) => callback(mockInitialState));
+  });
+
   it('renders correctly', () => {
     const { toJSON } = renderWithProvider(<WalletAccount />, {
       state: mockInitialState,
@@ -132,7 +142,9 @@ describe('WalletAccount', () => {
 
     fireEvent.press(getByTestId(WalletViewSelectorsIDs.ACCOUNT_ICON));
     expect(mockNavigate).toHaveBeenCalledWith(
-      ...createAccountSelectorNavDetails({}),
+      ...createAccountSelectorNavDetails({
+        privacyMode: false,
+      }),
     );
   });
   it('displays the correct account name', () => {
@@ -164,4 +176,47 @@ describe('WalletAccount', () => {
       expect(getByText(customAccountName)).toBeDefined();
     });
   });
+
+  it('should navigate to account selector with privacy mode disabled', () => {
+    const { getByTestId } = renderWithProvider(<WalletAccount />, {
+      state: mockInitialState,
+    });
+
+    fireEvent.press(getByTestId(WalletViewSelectorsIDs.ACCOUNT_ICON));
+    expect(mockNavigate).toHaveBeenCalledWith(
+      ...createAccountSelectorNavDetails({
+        privacyMode: false,
+      }),
+    );
+  });
+
+  it('should navigate to account selector with privacy mode enabled', () => {
+    const stateWithPrivacyMode = {
+      ...mockInitialState,
+      engine: {
+        ...mockInitialState.engine,
+        backgroundState: {
+          ...mockInitialState.engine?.backgroundState,
+          PreferencesController: {
+            privacyMode: true,
+          },
+        },
+      },
+    };
+
+    mockSelector.mockImplementation((callback) =>
+      callback(stateWithPrivacyMode),
+    );
+
+    const { getByTestId } = renderWithProvider(<WalletAccount />, {
+      state: stateWithPrivacyMode,
+    });
+
+    fireEvent.press(getByTestId(WalletViewSelectorsIDs.ACCOUNT_ICON));
+    expect(mockNavigate).toHaveBeenCalledWith(
+      ...createAccountSelectorNavDetails({
+        privacyMode: true,
+      }),
+    );
+  });
 });

app/components/UI/WalletAccount/WalletAccount.tsx

@@ -5,6 +5,7 @@ import { useNavigation } from '@react-navigation/native';
 import { View } from 'react-native';
 
 // External dependencies
+import { selectPrivacyMode } from '../../../selectors/preferencesController';
 import { IconName } from '../../../component-library/components/Icons/Icon';
 import PickerAccount from '../../../component-library/components/Pickers/PickerAccount';
 import { AvatarAccountType } from '../../../component-library/components/Avatars/Avatar/variants/AvatarAccount';
@@ -37,6 +38,7 @@ const WalletAccount = ({ style }: WalletAccountProps, ref: React.Ref<any>) => {
   const yourAccountRef = useRef(null);
   const accountActionsRef = useRef(null);
   const selectedAccount = useSelector(selectSelectedInternalAccount);
+  const privacyMode = useSelector(selectPrivacyMode);
   const { ensName } = useEnsNameByAddress(selectedAccount?.address);
   const defaultName = selectedAccount?.metadata?.name;
   const accountName = useMemo(
@@ -86,7 +88,11 @@ const WalletAccount = ({ style }: WalletAccountProps, ref: React.Ref<any>) => {
             tags: getTraceTags(store.getState()),
             op: TraceOperation.AccountList,
           });
-          navigate(...createAccountSelectorNavDetails({}));
+          navigate(
+            ...createAccountSelectorNavDetails({
+              privacyMode,
+            }),
+          );
         }}
         accountTypeLabel={
           getLabelTextByAddress(selectedAccount?.address) || undefined