fix: cp-7.42.0 Display account label in re-designs confirmation page account info section

app/components/Views/confirmations/Confirm/Confirm.test.tsx

@@ -64,6 +64,17 @@ jest.mock('../../../../core/Engine', () => ({
       startPolling: jest.fn(),
       stopPollingByPollingToken: jest.fn(),
     },
+    AccountsController: {
+      state: {
+        internalAccounts: {
+          accounts: {
+            '1': {
+              address: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+            },
+          },
+        },
+      },
+    },
   },
   controllerMessenger: {
     subscribe: jest.fn(),

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfo.test.tsx

@@ -6,6 +6,19 @@ import AccountNetworkInfo from './AccountNetworkInfo';
 
 jest.mock('../../../../../../core/Engine', () => ({
   getTotalFiatAccountBalance: () => ({ tokenFiat: 10 }),
+  context: {
+    AccountsController: {
+      state: {
+        internalAccounts: {
+          accounts: {
+            '1': {
+              address: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+            },
+          },
+        },
+      },
+    },
+  },
 }));
 
 describe('AccountNetworkInfo', () => {

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.styles.ts

@@ -15,11 +15,21 @@ const styleSheet = (params: { theme: Theme }) => {
       marginRight: 16,
       alignSelf: 'center',
     },
+    accountInfo: {
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
     accountName: {
       color: theme.colors.text.default,
       ...fontStyles.bold,
       fontSize: 14,
     },
+    accountLabel: {
+      borderRadius: 16,
+      marginStart: 8,
+      paddingHorizontal: 12,
+    },
     networkName: {
       color: theme.colors.text.default,
       ...fontStyles.normal,

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.test.tsx

@@ -2,18 +2,36 @@ import React from 'react';
 
 import renderWithProvider from '../../../../../../../util/test/renderWithProvider';
 import { personalSignatureConfirmationState } from '../../../../../../../util/test/confirm-data-helpers';
+// eslint-disable-next-line import/no-namespace
+import * as AddressUtils from '../../../../../../../util/address';
 import AccountNetworkInfoCollapsed from './AccountNetworkInfoCollapsed';
 
+jest.mock('../../../../../../../util/address', () => ({
+  ...jest.requireActual('../../../../../../../util/address'),
+  getLabelTextByAddress: jest.fn(),
+}));
+
 jest.mock('../../../../../../../core/Engine', () => ({
   getTotalFiatAccountBalance: () => ({ tokenFiat: 10 }),
 }));
 
 describe('AccountNetworkInfoCollapsed', () => {
-  it('should render correctly', async () => {
+  it('renders correctly', async () => {
     const { getByText } = renderWithProvider(<AccountNetworkInfoCollapsed />, {
       state: personalSignatureConfirmationState,
     });
     expect(getByText('0x935E...5477')).toBeDefined();
     expect(getByText('Ethereum Mainnet')).toBeDefined();
   });
+
+  it('displays account label', async () => {
+    const MOCK_ACCOUNT_LABEL = 'ledger_label';
+    jest
+      .spyOn(AddressUtils, 'getLabelTextByAddress')
+      .mockReturnValue(MOCK_ACCOUNT_LABEL);
+    const { getByText } = renderWithProvider(<AccountNetworkInfoCollapsed />, {
+      state: personalSignatureConfirmationState,
+    });
+    expect(getByText(MOCK_ACCOUNT_LABEL)).toBeDefined();
+  });
 });

app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx

@@ -11,12 +11,17 @@ import Badge, {
 } from '../../../../../../../component-library/components/Badges/Badge';
 import Text from '../../../../../../../component-library/components/Texts/Text';
 import BadgeWrapper from '../../../../../../../component-library/components/Badges/BadgeWrapper';
+import TagBase, {
+  TagSeverity,
+  TagShape,
+} from '../../../../../../../component-library/base-components/TagBase';
+import { getLabelTextByAddress } from '../../../../../../../util/address';
 import { useStyles } from '../../../../../../../component-library/hooks';
 import { RootState } from '../../../../../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.test';
 import useAccountInfo from '../../../../hooks/useAccountInfo';
 import useNetworkInfo from '../../../../hooks/useNetworkInfo';
-import styleSheet from './AccountNetworkInfoCollapsed.styles';
 import { useSignatureRequest } from '../../../../hooks/useSignatureRequest';
+import styleSheet from './AccountNetworkInfoCollapsed.styles';
 
 const AccountNetworkInfoCollapsed = () => {
   const signatureRequest = useSignatureRequest();
@@ -27,6 +32,7 @@ const AccountNetworkInfoCollapsed = () => {
   );
   const fromAddress = signatureRequest?.messageParams?.from as string;
   const { accountName } = useAccountInfo(fromAddress);
+  const accountLabel = getLabelTextByAddress(fromAddress);
   const { styles } = useStyles(styleSheet, {});
 
   return (
@@ -52,7 +58,18 @@ const AccountNetworkInfoCollapsed = () => {
         />
       </BadgeWrapper>
       <View>
-        <Text style={styles.accountName}>{accountName}</Text>
+        <View style={styles.accountInfo}>
+          <Text style={styles.accountName}>{accountName}</Text>
+          {accountLabel && (
+            <TagBase
+              style={styles.accountLabel}
+              severity={TagSeverity.Neutral}
+              shape={TagShape.Rectangle}
+            >
+              {accountLabel}
+            </TagBase>
+          )}
+        </View>
         <Text style={styles.networkName}>{networkName}</Text>
       </View>
     </View>

app/components/Views/confirmations/components/Confirm/Info/Info.test.tsx

@@ -33,6 +33,17 @@ jest.mock('../../../../../../core/Engine', () => ({
     NetworkController: {
       getNetworkConfigurationByNetworkClientId: jest.fn(),
     },
+    AccountsController: {
+      state: {
+        internalAccounts: {
+          accounts: {
+            '1': {
+              address: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+            },
+          },
+        },
+      },
+    },
   },
   controllerMessenger: {
     subscribe: jest.fn(),

app/components/Views/confirmations/components/Confirm/Info/PersonalSign/PersonalSign.test.tsx

@@ -17,6 +17,17 @@ jest.mock('../../../../../../../core/Engine', () => ({
       },
       getOrAddQRKeyring: jest.fn(),
     },
+    AccountsController: {
+      state: {
+        internalAccounts: {
+          accounts: {
+            '1': {
+              address: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+            },
+          },
+        },
+      },
+    },
   },
   controllerMessenger: {
     subscribe: jest.fn(),

app/components/Views/confirmations/components/Confirm/Info/TypedSignV1/TypedSignV1.test.tsx

@@ -13,6 +13,17 @@ jest.mock('../../../../../../../core/Engine', () => ({
       },
       getOrAddQRKeyring: jest.fn(),
     },
+    AccountsController: {
+      state: {
+        internalAccounts: {
+          accounts: {
+            '1': {
+              address: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+            },
+          },
+        },
+      },
+    },
   },
   controllerMessenger: {
     subscribe: jest.fn(),

app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/TypedSignV3V4.test.tsx

@@ -21,6 +21,17 @@ jest.mock('../../../../../../../core/Engine', () => ({
     NetworkController: {
       findNetworkClientIdByChainId: () => 123,
     },
+    AccountsController: {
+      state: {
+        internalAccounts: {
+          accounts: {
+            '1': {
+              address: '0x935e73edb9ff52e23bac7f7e043a1ecd06d05477',
+            },
+          },
+        },
+      },
+    },
   },
   controllerMessenger: {
     subscribe: jest.fn(),
@@ -32,7 +43,7 @@ jest.mock('../../../../hooks/useTokenDecimalsInTypedSignRequest', () => ({
 }));
 
 describe('TypedSignV3V4', () => {
-it('contains required text', () => {
+  it('contains required text', () => {
     const { getByText } = renderWithProvider(<TypedSignV3V4 />, {
       state: typedSignV3ConfirmationState,
     });
@@ -54,7 +65,7 @@ it('contains required text', () => {
     expect(queryByText('Mail')).toBeNull();
   });
 
-it('shows detailed message when message section is clicked', () => {
+  it('shows detailed message when message section is clicked', () => {
     const { getByText, getAllByText } = renderWithProvider(<TypedSignV3V4 />, {
       state: typedSignV4ConfirmationState,
     });