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, });