diff --git a/app/components/Views/confirmations/Confirm/Confirm.test.tsx b/app/components/Views/confirmations/Confirm/Confirm.test.tsx
index bf12b63f2ee4..85f6b84d237b 100644
--- a/app/components/Views/confirmations/Confirm/Confirm.test.tsx
+++ b/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(),
diff --git a/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfo.test.tsx b/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfo.test.tsx
index 16ed6ceba599..1499505c950a 100644
--- a/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfo.test.tsx
+++ b/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', () => {
diff --git a/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.styles.ts b/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.styles.ts
index 5e071d8fa7b4..3f7a12176deb 100644
--- a/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.styles.ts
+++ b/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,
diff --git a/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.test.tsx b/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.test.tsx
index 201720096fae..748eb734a21d 100644
--- a/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.test.tsx
+++ b/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(, {
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(, {
+ state: personalSignatureConfirmationState,
+ });
+ expect(getByText(MOCK_ACCOUNT_LABEL)).toBeDefined();
+ });
});
diff --git a/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx b/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx
index 71ddc35a1557..c50823dffa8f 100644
--- a/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx
+++ b/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 = () => {
/>
- {accountName}
+
+ {accountName}
+ {accountLabel && (
+
+ {accountLabel}
+
+ )}
+
{networkName}
diff --git a/app/components/Views/confirmations/components/Confirm/Info/Info.test.tsx b/app/components/Views/confirmations/components/Confirm/Info/Info.test.tsx
index 981857162c64..be88e4e3eaa1 100644
--- a/app/components/Views/confirmations/components/Confirm/Info/Info.test.tsx
+++ b/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(),
diff --git a/app/components/Views/confirmations/components/Confirm/Info/PersonalSign/PersonalSign.test.tsx b/app/components/Views/confirmations/components/Confirm/Info/PersonalSign/PersonalSign.test.tsx
index 239b70c5eb5b..f37c2e6e6447 100644
--- a/app/components/Views/confirmations/components/Confirm/Info/PersonalSign/PersonalSign.test.tsx
+++ b/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(),
diff --git a/app/components/Views/confirmations/components/Confirm/Info/TypedSignV1/TypedSignV1.test.tsx b/app/components/Views/confirmations/components/Confirm/Info/TypedSignV1/TypedSignV1.test.tsx
index 2880947db4fb..37eeffd55edc 100644
--- a/app/components/Views/confirmations/components/Confirm/Info/TypedSignV1/TypedSignV1.test.tsx
+++ b/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(),
diff --git a/app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/TypedSignV3V4.test.tsx b/app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/TypedSignV3V4.test.tsx
index a62cd30d022a..eda9f314306e 100644
--- a/app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/TypedSignV3V4.test.tsx
+++ b/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(, {
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(, {
state: typedSignV4ConfirmationState,
});