From 15167f832e263a395a537b35deac90e39848fe2e Mon Sep 17 00:00:00 2001 From: jpuri Date: Wed, 5 Mar 2025 12:59:30 +0530 Subject: [PATCH 01/10] Display account label in re-designs confirmation page account info section --- .../AccountNetworkInfoCollapsed.styles.ts | 15 ++++++++++++++ .../AccountNetworkInfoCollapsed.test.tsx | 20 ++++++++++++++++++- .../AccountNetworkInfoCollapsed.tsx | 11 +++++++++- 3 files changed, 44 insertions(+), 2 deletions(-) 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..9be3a8fbce8f 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,26 @@ 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, }, + accountLabelWrapper: { + backgroundColor: theme.colors.background.alternative, + borderRadius: 16, + paddingHorizontal: 12, + paddingVertical: 2, + marginLeft: 8, + }, + accountLabel: { + color: theme.colors.text.alternative, + }, 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..224497ac07c0 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'; + 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..fe86469ee7b1 100644 --- a/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx +++ b/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx @@ -11,6 +11,7 @@ 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 { getLabelTextByAddress } from '../../../../../../../util/address'; import { useStyles } from '../../../../../../../component-library/hooks'; import { RootState } from '../../../../../../UI/BasicFunctionality/BasicFunctionalityModal/BasicFunctionalityModal.test'; import useAccountInfo from '../../../../hooks/useAccountInfo'; @@ -27,6 +28,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 +54,14 @@ const AccountNetworkInfoCollapsed = () => { /> - {accountName} + + {accountName} + {accountLabel && ( + + {accountLabel} + + )} + {networkName} From 2947b15f28e53ce9277cdfb28e4dd3bf5164a0c0 Mon Sep 17 00:00:00 2001 From: jpuri Date: Wed, 5 Mar 2025 13:47:46 +0530 Subject: [PATCH 02/10] Display account label in re-designs confirmation page account info section --- .../AccountNetworkInfoCollapsed.tsx | 6 ++++++ 1 file changed, 6 insertions(+) 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 fe86469ee7b1..2b4cf4b190d7 100644 --- a/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx +++ b/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx @@ -11,6 +11,7 @@ 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 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'; @@ -61,6 +62,11 @@ const AccountNetworkInfoCollapsed = () => { {accountLabel} )} + {accountLabel && ( + + {accountLabel} + + )} {networkName} From 52e8d0efadc31198cabe2e4ebc9eb7f9e407fd73 Mon Sep 17 00:00:00 2001 From: jpuri Date: Wed, 5 Mar 2025 14:20:47 +0530 Subject: [PATCH 03/10] update --- .../Views/confirmations/Confirm/Confirm.test.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) 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(), From e6972e57aafbc9d485ca0c7cc54b294125e9e5e8 Mon Sep 17 00:00:00 2001 From: jpuri Date: Wed, 5 Mar 2025 15:48:14 +0530 Subject: [PATCH 04/10] update --- .../Info/PersonalSign/PersonalSign.test.tsx | 11 +++++++++++ .../Info/TypedSignV3V4/TypedSignV3V4.test.tsx | 15 +++++++++++++-- 2 files changed, 24 insertions(+), 2 deletions(-) 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/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, }); From e73d56fae580f875d3a1a32763fd55d4b0403928 Mon Sep 17 00:00:00 2001 From: jpuri Date: Wed, 5 Mar 2025 16:08:08 +0530 Subject: [PATCH 05/10] update --- .../Confirm/Info/TypedSignV1/TypedSignV1.test.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) 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(), From 2488b496d9e3ae2177e6aa1fa9e8b2de190a4c59 Mon Sep 17 00:00:00 2001 From: jpuri Date: Wed, 5 Mar 2025 16:17:41 +0530 Subject: [PATCH 06/10] Update --- .../components/Confirm/Info/Info.test.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) 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(), From 30ee6af18cbef0d99e07595d434ac949eb6c9ab6 Mon Sep 17 00:00:00 2001 From: jpuri Date: Wed, 5 Mar 2025 16:27:23 +0530 Subject: [PATCH 07/10] Update --- .../AccountNetworkInfoCollapsed.test.tsx | 2 +- .../AccountNetworkInfoCollapsed.tsx | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) 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 224497ac07c0..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 @@ -25,7 +25,7 @@ describe('AccountNetworkInfoCollapsed', () => { }); it('displays account label', async () => { - const MOCK_ACCOUNT_LABEL = 'Ledger'; + const MOCK_ACCOUNT_LABEL = 'ledger_label'; jest .spyOn(AddressUtils, 'getLabelTextByAddress') .mockReturnValue(MOCK_ACCOUNT_LABEL); 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 2b4cf4b190d7..500ca3657d2f 100644 --- a/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx +++ b/app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.tsx @@ -57,11 +57,6 @@ const AccountNetworkInfoCollapsed = () => { {accountName} - {accountLabel && ( - - {accountLabel} - - )} {accountLabel && ( {accountLabel} From 370cdd9953d204bc49b71d09e2bf2d996045cebb Mon Sep 17 00:00:00 2001 From: jpuri Date: Wed, 5 Mar 2025 16:36:45 +0530 Subject: [PATCH 08/10] Update --- .../AccountNetworkInfo/AccountNetworkInfo.test.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) 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', () => { From 7b98ca7420385ebad6f440857ec0f9186da1d629 Mon Sep 17 00:00:00 2001 From: Jyoti Puri Date: Thu, 6 Mar 2025 11:49:05 +0530 Subject: [PATCH 09/10] Update app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoCollapsed/AccountNetworkInfoCollapsed.styles.ts Co-authored-by: digiwand <20778143+digiwand@users.noreply.github.com> --- .../AccountNetworkInfoCollapsed.styles.ts | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) 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 9be3a8fbce8f..faefd1fd9058 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 @@ -26,14 +26,7 @@ const styleSheet = (params: { theme: Theme }) => { fontSize: 14, }, accountLabelWrapper: { - backgroundColor: theme.colors.background.alternative, - borderRadius: 16, - paddingHorizontal: 12, - paddingVertical: 2, - marginLeft: 8, - }, - accountLabel: { - color: theme.colors.text.alternative, + marginStart: 8, }, networkName: { color: theme.colors.text.default, From 97534473813370e8fdd9f2828977b024c49fefb7 Mon Sep 17 00:00:00 2001 From: jpuri Date: Thu, 6 Mar 2025 12:13:36 +0530 Subject: [PATCH 10/10] update --- .../AccountNetworkInfoCollapsed.styles.ts | 9 ++------- .../AccountNetworkInfoCollapsed.tsx | 15 +++++++++++---- 2 files changed, 13 insertions(+), 11 deletions(-) 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 9be3a8fbce8f..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 @@ -25,15 +25,10 @@ const styleSheet = (params: { theme: Theme }) => { ...fontStyles.bold, fontSize: 14, }, - accountLabelWrapper: { - backgroundColor: theme.colors.background.alternative, + accountLabel: { borderRadius: 16, + marginStart: 8, paddingHorizontal: 12, - paddingVertical: 2, - marginLeft: 8, - }, - accountLabel: { - color: theme.colors.text.alternative, }, networkName: { color: theme.colors.text.default, 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 500ca3657d2f..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,14 +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 from '../../../../../../../component-library/base-components/TagBase'; +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(); @@ -58,8 +61,12 @@ const AccountNetworkInfoCollapsed = () => { {accountName} {accountLabel && ( - - {accountLabel} + + {accountLabel} )}