Skip to content

Commit 0157bb7

Browse files
jpurijpuri
authored
fix: Addressing design feedbacks on re-designed signature pages (#12957)
## **Description** Addressing design feedbacks details [here](https://www.figma.com/design/7kYok9B46ohR6h47cksRAz/Confirmation-redesign-V1?node-id=2182-8614&p=f&t=Ni0PilmtT9xyMXd1-0) on re-designed signature request pages. ## **Related issues** Fixes: MetaMask/MetaMask-planning#3900 ## **Manual testing steps** 1. Enable re-designs locally 2. Open test-dapp and submit signature requests 3. Check re-designed signature request pages ## **Screenshots/Recordings** todo ## **Pre-merge author checklist** - [X] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile Coding Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [X] I've completed the PR template to the best of my ability - [X] I’ve included tests if applicable - [X] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [X] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.
1 parent 224ffbf commit 0157bb7

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+196
-117
lines changed

‎app/components/UI/NetworkVerificationInfo/NetworkVerificationInfo.test.tsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,9 @@ describe('NetworkVerificationInfo', () => {
109109
);
110110

111111
expect(() =>
112-
getByText('Attackers sometimes mimic sites by making small changes to the site address. Make sure you\'re interacting with the intended Network URL before you continue. Punycode version: https://xn--ifura-dig.io/gnosis')
112+
getByText(
113+
"Attackers sometimes mimic sites by making small changes to the site address. Make sure you're interacting with the intended Network URL before you continue. Punycode version: https://xn--ifura-dig.io/gnosis",
114+
),
113115
).toThrow('Unable to find an element with text');
114116
});
115117

@@ -127,7 +129,11 @@ describe('NetworkVerificationInfo', () => {
127129
/>,
128130
);
129131

130-
expect(getByText('Attackers sometimes mimic sites by making small changes to the site address. Make sure you\'re interacting with the intended Network URL before you continue. Punycode version: https://xn--ifura-dig.io/gnosis')).toBeTruthy();
132+
expect(
133+
getByText(
134+
"Attackers sometimes mimic sites by making small changes to the site address. Make sure you're interacting with the intended Network URL before you continue. Punycode version: https://xn--ifura-dig.io/gnosis",
135+
),
136+
).toBeTruthy();
131137
});
132138
});
133139
});

‎app/components/UI/NetworkVerificationInfo/NetworkVerificationInfo.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -239,9 +239,7 @@ const NetworkVerificationInfo = ({
239239
: strings('add_custom_network.network_url')}
240240
</Text>
241241
)}
242-
<Text style={styles.textSection}>
243-
{hideKeyFromUrl(customRpcUrl)}
244-
</Text>
242+
<Text style={styles.textSection}>{hideKeyFromUrl(customRpcUrl)}</Text>
245243

246244
<Accordion
247245
title={strings('spend_limit_edition.view_details')}
@@ -295,7 +293,9 @@ const NetworkVerificationInfo = ({
295293
};
296294

297295
const renderBannerNetworkUrlNonAsciiDetected = () => {
298-
if (!customRpcUrl || isValidASCIIURL(customRpcUrl)) { return null; }
296+
if (!customRpcUrl || isValidASCIIURL(customRpcUrl)) {
297+
return null;
298+
}
299299
const punycodeUrl = toPunycodeURL(customRpcUrl);
300300

301301
return (
@@ -353,9 +353,7 @@ const NetworkVerificationInfo = ({
353353
<Text variant={TextVariant.BodyMDBold}>
354354
{strings('networks.current_label')}
355355
</Text>
356-
<Text style={styles.textSection}>
357-
{customRpcUrl}
358-
</Text>
356+
<Text style={styles.textSection}>{customRpcUrl}</Text>
359357
<Text variant={TextVariant.BodyMDBold}>
360358
{strings('networks.new_label')}
361359
</Text>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@ import {
88
} from '../../../../util/test/confirm-data-helpers';
99
import Confirm from './index';
1010

11+
jest.mock('../../../../core/Engine', () => ({
12+
getTotalFiatAccountBalance: () => ({ tokenFiat: 10 }),
13+
}));
14+
1115
jest.mock('../../../../util/address', () => ({
1216
...jest.requireActual('../../../../util/address'),
1317
getAddressAccountType: (str: string) => str,
@@ -23,6 +27,9 @@ describe('Confirm', () => {
2327
state: personalSignatureConfirmationState,
2428
});
2529
expect(getByText('Signature request')).toBeDefined();
30+
expect(
31+
getByText('Review request details before you confirm.'),
32+
).toBeDefined();
2633
expect(getByText('Request from')).toBeDefined();
2734
expect(getByText('metamask.github.io')).toBeDefined();
2835
expect(getByText('Message')).toBeDefined();

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ import renderWithProvider from '../../../../../../util/test/renderWithProvider';
44
import { personalSignatureConfirmationState } from '../../../../../../util/test/confirm-data-helpers';
55
import AccountNetworkInfo from './AccountNetworkInfo';
66

7+
jest.mock('../../../../../../core/Engine', () => ({
8+
getTotalFiatAccountBalance: () => ({ tokenFiat: 10 }),
9+
}));
10+
711
describe('AccountNetworkInfo', () => {
812
it('should render correctly', async () => {
913
const { getByText } = renderWithProvider(<AccountNetworkInfo />, {

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,10 @@ import renderWithProvider from '../../../../../../../util/test/renderWithProvide
44
import { personalSignatureConfirmationState } from '../../../../../../../util/test/confirm-data-helpers';
55
import AccountNetworkInfoCollapsed from './AccountNetworkInfoCollapsed';
66

7+
jest.mock('../../../../../../../core/Engine', () => ({
8+
getTotalFiatAccountBalance: () => ({ tokenFiat: 10 }),
9+
}));
10+
711
describe('AccountNetworkInfoCollapsed', () => {
812
it('should render correctly', async () => {
913
const { getByText } = renderWithProvider(<AccountNetworkInfoCollapsed />, {

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,19 @@ import renderWithProvider from '../../../../../../../util/test/renderWithProvide
44
import { personalSignatureConfirmationState } from '../../../../../../../util/test/confirm-data-helpers';
55
import AccountNetworkInfoExpanded from './AccountNetworkInfoExpanded';
66

7+
jest.mock('../../../../../../../core/Engine', () => ({
8+
getTotalFiatAccountBalance: () => ({ tokenFiat: 10 }),
9+
}));
10+
711
describe('AccountNetworkInfoExpanded', () => {
812
it('should render correctly', async () => {
913
const { getByText } = renderWithProvider(<AccountNetworkInfoExpanded />, {
1014
state: personalSignatureConfirmationState,
1115
});
1216
expect(getByText('Account')).toBeDefined();
1317
expect(getByText('Balance')).toBeDefined();
14-
expect(getByText('0 ETH')).toBeDefined();
18+
expect(getByText('$10')).toBeDefined();
1519
expect(getByText('Network')).toBeDefined();
1620
expect(getByText('Ethereum Mainnet')).toBeDefined();
17-
expect(getByText('RPC URL')).toBeDefined();
18-
expect(getByText('mainnet.infura.io/v3/')).toBeDefined();
1921
});
2022
});

‎app/components/Views/confirmations/components/Confirm/AccountNetworkInfo/AccountNetworkInfoExpanded/AccountNetworkInfoExpanded.tsx

Lines changed: 8 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,36 @@
11
import React from 'react';
2-
import { StyleSheet, View } from 'react-native';
2+
import { View } from 'react-native';
33
import { useSelector } from 'react-redux';
44

55
import { strings } from '../../../../../../../../locales/i18n';
6-
import {
7-
selectChainId,
8-
selectProviderConfig,
9-
} from '../../../../../../../selectors/networkController';
6+
import { selectChainId } from '../../../../../../../selectors/networkController';
7+
import { renderShortAddress } from '../../../../../../../util/address';
108
import useAccountInfo from '../../../../hooks/useAccountInfo';
119
import useApprovalRequest from '../../../../hooks/useApprovalRequest';
1210
import InfoSection from '../../../UI/InfoRow/InfoSection';
1311
import InfoRow from '../../../UI/InfoRow';
14-
import Address from '../../../UI/InfoRow/InfoValue/Address';
15-
import DisplayURL from '../../../UI/InfoRow/InfoValue/DisplayURL';
1612
import Network from '../../../UI/InfoRow/InfoValue/Network';
1713

18-
const styles = StyleSheet.create({
19-
addressRowValue: {
20-
paddingTop: 8,
21-
},
22-
});
23-
2414
const AccountNetworkInfoExpanded = () => {
2515
const { approvalRequest } = useApprovalRequest();
2616
const chainId = useSelector(selectChainId);
27-
const { rpcUrl: networkRpcUrl, type: networkType } =
28-
useSelector(selectProviderConfig);
2917
const fromAddress = approvalRequest?.requestData?.from;
30-
const { accountAddress, accountBalance } = useAccountInfo(fromAddress);
18+
const { accountAddress, accountFiatBalance } = useAccountInfo(fromAddress);
3119

3220
return (
3321
<View>
3422
<InfoSection>
3523
<InfoRow label={strings('confirm.account')}>
36-
<View style={styles.addressRowValue}>
37-
<Address address={accountAddress} chainId={chainId} />
38-
</View>
24+
{renderShortAddress(accountAddress, 5)}
25+
</InfoRow>
26+
<InfoRow label={strings('confirm.balance')}>
27+
{accountFiatBalance}
3928
</InfoRow>
40-
<InfoRow label={strings('confirm.balance')}>{accountBalance}</InfoRow>
4129
</InfoSection>
4230
<InfoSection>
4331
<InfoRow label={strings('confirm.network')}>
4432
<Network chainId={chainId} />
4533
</InfoRow>
46-
<InfoRow label={strings('confirm.rpc_url')}>
47-
<DisplayURL
48-
url={networkRpcUrl ?? `https://${networkType}.infura.io/v3/`}
49-
/>
50-
</InfoRow>
5134
</InfoSection>
5235
</View>
5336
);

‎app/components/Views/confirmations/components/Confirm/DataTree/DataField.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const createStyles = (depth: number) =>
1717
},
1818
dataRow: {
1919
paddingHorizontal: 0,
20-
paddingBottom: 4,
20+
paddingBottom: 16,
2121
},
2222
});
2323

‎app/components/Views/confirmations/components/Confirm/Footer/Footer.styles.ts

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,15 @@ import { StyleSheet } from 'react-native';
22

33
import { Theme } from '../../../../../../util/theme/models';
44

5-
const styleSheet = (params: { theme: Theme }) => {
6-
const { theme } = params;
5+
const styleSheet = (params: { theme: Theme; vars: { hasError: boolean } }) => {
6+
const { theme, vars } = params;
77

88
return StyleSheet.create({
99
confirmButton: {
1010
flex: 1,
11+
backgroundColor: vars.hasError
12+
? theme.colors.error.default
13+
: theme.colors.primary.default,
1114
},
1215
rejectButton: {
1316
flex: 1,

‎app/components/Views/confirmations/components/Confirm/Footer/Footer.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,18 @@ import { View } from 'react-native';
44
import { strings } from '../../../../../../../locales/i18n';
55
import StyledButton from '../../../../../../components/UI/StyledButton';
66
import { useStyles } from '../../../../../../component-library/hooks';
7+
import useApprovalRequest from '../../../hooks/useApprovalRequest';
78
import { useConfirmActions } from '../../../hooks/useConfirmActions';
89
import styleSheet from './Footer.styles';
910

1011
const Footer = () => {
1112
const { onConfirm, onReject } = useConfirmActions();
12-
const { styles } = useStyles(styleSheet, {});
13+
const { approvalRequest } = useApprovalRequest();
14+
const securityAlertResponse =
15+
approvalRequest?.requestData?.securityAlertResponse;
16+
const { styles } = useStyles(styleSheet, {
17+
hasError: securityAlertResponse !== undefined,
18+
});
1319

1420
return (
1521
<View style={styles.buttonsContainer}>

‎app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Message.styles.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,16 @@ const styleSheet = (params: { theme: Theme }) => {
1111
marginStart: -8,
1212
paddingBottom: 4,
1313
},
14+
dataRow: {
15+
paddingHorizontal: 0,
16+
paddingBottom: 16,
17+
},
1418
title: {
1519
color: theme.colors.text.default,
1620
...fontStyles.normal,
1721
fontSize: 14,
1822
fontWeight: '500',
19-
marginBottom: 4,
23+
marginBottom: 16,
2024
},
2125
});
2226
};

‎app/components/Views/confirmations/components/Confirm/Info/TypedSignV3V4/Message.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ const Message = () => {
4343
<Text style={styles.title}>{strings('confirm.message')}</Text>
4444
<InfoRow
4545
label={strings('confirm.primary_type')}
46-
style={styles.collpasedInfoRow}
46+
style={styles.dataRow}
4747
>
4848
{primaryType}
4949
</InfoRow>

‎app/components/Views/confirmations/components/Confirm/NoChangeSimulation/NoChangeSimulation.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { selectUseTransactionSimulations } from '../../../../../../selectors/pre
66
import InfoSection from '../../UI/InfoRow/InfoSection';
77
import InfoRow from '../../UI/InfoRow';
88

9+
// todo: this component can be deleted if not used anywhere
910
const NoChangeSimulation = () => {
1011
const useTransactionSimulations = useSelector(
1112
selectUseTransactionSimulations,

‎app/components/Views/confirmations/components/Confirm/Title/Title.styles.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,13 @@ const styleSheet = (params: { theme: Theme }) => {
1717
fontWeight: '700',
1818
textAlign: 'center',
1919
},
20+
subTitle: {
21+
color: theme.colors.text.default,
22+
fontSize: 14,
23+
fontWeight: '400',
24+
marginTop: 8,
25+
textAlign: 'center',
26+
},
2027
});
2128
};
2229

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,13 @@ import { personalSignatureConfirmationState } from '../../../../../../util/test/
55
import Title from './Title';
66

77
describe('Title', () => {
8-
it('should render correct title for personal sign request', async () => {
8+
it('should render correct title and subtitle for personal sign request', async () => {
99
const { getByText } = renderWithProvider(<Title />, {
1010
state: personalSignatureConfirmationState,
1111
});
1212
expect(getByText('Signature request')).toBeDefined();
13+
expect(
14+
getByText('Review request details before you confirm.'),
15+
).toBeDefined();
1316
});
1417
});

‎app/components/Views/confirmations/components/Confirm/Title/Title.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,25 +7,29 @@ import { useStyles } from '../../../../../../component-library/hooks';
77
import useApprovalRequest from '../../../hooks/useApprovalRequest';
88
import styleSheet from './Title.styles';
99

10-
const getTitle = (confirmationType?: string) => {
10+
const getTitleAndSubTitle = (confirmationType?: string) => {
1111
switch (confirmationType) {
1212
case TransactionType.personalSign:
1313
case TransactionType.signTypedData:
14-
return strings('confirm.title.signature');
14+
return {
15+
title: strings('confirm.title.signature'),
16+
subTitle: strings('confirm.sub_title.signature'),
17+
};
1518
default:
16-
return '';
19+
return {};
1720
}
1821
};
1922

2023
const Title = () => {
2124
const { approvalRequest } = useApprovalRequest();
2225
const { styles } = useStyles(styleSheet, {});
2326

24-
const title = getTitle(approvalRequest?.type);
27+
const { title, subTitle } = getTitleAndSubTitle(approvalRequest?.type);
2528

2629
return (
2730
<View style={styles.titleContainer}>
2831
<Text style={styles.title}>{title}</Text>
32+
<Text style={styles.subTitle}>{subTitle}</Text>
2933
</View>
3034
);
3135
};

‎app/components/Views/confirmations/components/UI/BottomModal/BottomModal.styles.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { StyleSheet } from 'react-native';
2+
3+
import { Theme } from '../../../../../../util/theme/models';
4+
5+
const styleSheet = (params: { theme: Theme }) => {
6+
const { theme } = params;
7+
8+
return StyleSheet.create({
9+
bottomModal: {
10+
justifyContent: 'flex-end',
11+
margin: 0,
12+
},
13+
topBar: {
14+
alignSelf: 'center',
15+
backgroundColor: theme.colors.background.alternativePressed,
16+
borderRadius: 4,
17+
height: 4,
18+
marginBottom: -8,
19+
width: 56,
20+
zIndex: 1,
21+
},
22+
wrapper: {
23+
justifyContent: 'flex-end',
24+
},
25+
});
26+
};
27+
28+
export default styleSheet;

0 commit comments

Comments
 (0)