Skip to content

Commit 4567eb8

Browse files
PatrykLuckaPatrykLucka
authored
fix: addresses styling on transaction details (#21998)
<!-- Please submit this PR as a draft initially. Do not mark it as "Ready for review" until the template has been completely filled out, and PR status checks have passed at least once. --> ## **Description** This PR fixes addresses styling on transaction details view. <!-- Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions: 1. What is the reason for the change? 2. What is the improvement/solution? --> ## **Changelog** <!-- If this PR is not End-User-Facing and should not show up in the CHANGELOG, you can choose to either: 1. Write `CHANGELOG entry: null` 2. Label with `no-changelog` If this PR is End-User-Facing, please write a short User-Facing description in the past tense like: `CHANGELOG entry: Added a new tab for users to see their NFTs` `CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker` (This helps the Release Engineer do their job more quickly and accurately) --> CHANGELOG entry: Fixed styling on transaction details view ## **Related issues** Fixes: #15603 https://consensyssoftware.atlassian.net/browse/TMCU-138 ## **Manual testing steps** ```gherkin Feature: Show transaction details Scenario: user opens transaction details Given user has any transactions in activity view When user clicks transaction item to open details Then transaction details view has smaller addresses styling ``` ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** <!-- [screenshots/recordings] --> <img width="412" height="909" alt="Screenshot 2025-10-30 at 16 33 39" src="https://github.com/user-attachments/assets/82cb6219-542d-4ee5-8d39-c363c73b03ea" /> ### **After** <!-- [screenshots/recordings] --> <img width="407" height="915" alt="Screenshot 2025-10-31 at 09 16 40" src="https://github.com/user-attachments/assets/104bb565-5294-4658-ba84-2cae2953348d" /> ## **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. <!-- CURSOR_SUMMARY --> --- > [!NOTE] > Shrinks the from/to address avatar and label typography in Transaction Details and updates snapshots. > > - **UI — Transaction Details (`app/components/UI/TransactionElement/TransactionDetails/index.js`)**: > - Reduce `Avatar` size from `AvatarSize.Md` to `AvatarSize.Sm` for `renderFrom` and `renderTo`. > - Replace `Text small` with `Text variant={TextVariant.BodySM}` for address labels. > - **Tests — Snapshots**: > - Update `__snapshots__/index.test.tsx.snap` to reflect smaller avatar container (32→24, radius 8→6) and smaller text (fontSize 16→14, lineHeight 24→22). > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit bcceec7. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent c76eac4 commit 4567eb8

File tree

2 files changed

+46
-52
lines changed

2 files changed

+46
-52
lines changed

‎app/components/UI/TransactionElement/TransactionDetails/__snapshots__/index.test.tsx.snap‎

Lines changed: 42 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -615,34 +615,33 @@ exports[`TransactionDetails should render correctly 1`] = `
615615
style={
616616
{
617617
"backgroundColor": "#ffffff",
618-
"borderRadius": 8,
619-
"height": 32,
618+
"borderRadius": 6,
619+
"height": 24,
620620
"marginRight": 8,
621621
"overflow": "hidden",
622-
"width": 32,
622+
"width": 24,
623623
}
624624
}
625625
>
626626
<View
627627
style={
628628
{
629-
"height": 32,
630-
"width": 32,
629+
"height": 24,
630+
"width": 24,
631631
}
632632
}
633633
/>
634634
</View>
635635
<Text
636636
accessibilityRole="text"
637637
primary={true}
638-
small={true}
639638
style={
640639
{
641640
"color": "#121314",
642641
"fontFamily": "Geist Regular",
643-
"fontSize": 16,
642+
"fontSize": 14,
644643
"letterSpacing": 0,
645-
"lineHeight": 24,
644+
"lineHeight": 22,
646645
}
647646
}
648647
testID="account-label"
@@ -746,34 +745,33 @@ exports[`TransactionDetails should render correctly 1`] = `
746745
style={
747746
{
748747
"backgroundColor": "#ffffff",
749-
"borderRadius": 8,
750-
"height": 32,
748+
"borderRadius": 6,
749+
"height": 24,
751750
"marginRight": 8,
752751
"overflow": "hidden",
753-
"width": 32,
752+
"width": 24,
754753
}
755754
}
756755
>
757756
<View
758757
style={
759758
{
760-
"height": 32,
761-
"width": 32,
759+
"height": 24,
760+
"width": 24,
762761
}
763762
}
764763
/>
765764
</View>
766765
<Text
767766
accessibilityRole="text"
768767
primary={true}
769-
small={true}
770768
style={
771769
{
772770
"color": "#121314",
773771
"fontFamily": "Geist Regular",
774-
"fontSize": 16,
772+
"fontSize": 14,
775773
"letterSpacing": 0,
776-
"lineHeight": 24,
774+
"lineHeight": 22,
777775
}
778776
}
779777
testID="account-label"
@@ -1891,34 +1889,33 @@ exports[`TransactionDetails should render correctly for multi-layer fee network
18911889
style={
18921890
{
18931891
"backgroundColor": "#ffffff",
1894-
"borderRadius": 8,
1895-
"height": 32,
1892+
"borderRadius": 6,
1893+
"height": 24,
18961894
"marginRight": 8,
18971895
"overflow": "hidden",
1898-
"width": 32,
1896+
"width": 24,
18991897
}
19001898
}
19011899
>
19021900
<View
19031901
style={
19041902
{
1905-
"height": 32,
1906-
"width": 32,
1903+
"height": 24,
1904+
"width": 24,
19071905
}
19081906
}
19091907
/>
19101908
</View>
19111909
<Text
19121910
accessibilityRole="text"
19131911
primary={true}
1914-
small={true}
19151912
style={
19161913
{
19171914
"color": "#121314",
19181915
"fontFamily": "Geist Regular",
1919-
"fontSize": 16,
1916+
"fontSize": 14,
19201917
"letterSpacing": 0,
1921-
"lineHeight": 24,
1918+
"lineHeight": 22,
19221919
}
19231920
}
19241921
testID="account-label"
@@ -2022,34 +2019,33 @@ exports[`TransactionDetails should render correctly for multi-layer fee network
20222019
style={
20232020
{
20242021
"backgroundColor": "#ffffff",
2025-
"borderRadius": 8,
2026-
"height": 32,
2022+
"borderRadius": 6,
2023+
"height": 24,
20272024
"marginRight": 8,
20282025
"overflow": "hidden",
2029-
"width": 32,
2026+
"width": 24,
20302027
}
20312028
}
20322029
>
20332030
<View
20342031
style={
20352032
{
2036-
"height": 32,
2037-
"width": 32,
2033+
"height": 24,
2034+
"width": 24,
20382035
}
20392036
}
20402037
/>
20412038
</View>
20422039
<Text
20432040
accessibilityRole="text"
20442041
primary={true}
2045-
small={true}
20462042
style={
20472043
{
20482044
"color": "#121314",
20492045
"fontFamily": "Geist Regular",
2050-
"fontSize": 16,
2046+
"fontSize": 14,
20512047
"letterSpacing": 0,
2052-
"lineHeight": 24,
2048+
"lineHeight": 22,
20532049
}
20542050
}
20552051
testID="account-label"
@@ -3167,34 +3163,33 @@ exports[`TransactionDetails should render correctly for multi-layer fee network
31673163
style={
31683164
{
31693165
"backgroundColor": "#ffffff",
3170-
"borderRadius": 8,
3171-
"height": 32,
3166+
"borderRadius": 6,
3167+
"height": 24,
31723168
"marginRight": 8,
31733169
"overflow": "hidden",
3174-
"width": 32,
3170+
"width": 24,
31753171
}
31763172
}
31773173
>
31783174
<View
31793175
style={
31803176
{
3181-
"height": 32,
3182-
"width": 32,
3177+
"height": 24,
3178+
"width": 24,
31833179
}
31843180
}
31853181
/>
31863182
</View>
31873183
<Text
31883184
accessibilityRole="text"
31893185
primary={true}
3190-
small={true}
31913186
style={
31923187
{
31933188
"color": "#121314",
31943189
"fontFamily": "Geist Regular",
3195-
"fontSize": 16,
3190+
"fontSize": 14,
31963191
"letterSpacing": 0,
3197-
"lineHeight": 24,
3192+
"lineHeight": 22,
31983193
}
31993194
}
32003195
testID="account-label"
@@ -3298,34 +3293,33 @@ exports[`TransactionDetails should render correctly for multi-layer fee network
32983293
style={
32993294
{
33003295
"backgroundColor": "#ffffff",
3301-
"borderRadius": 8,
3302-
"height": 32,
3296+
"borderRadius": 6,
3297+
"height": 24,
33033298
"marginRight": 8,
33043299
"overflow": "hidden",
3305-
"width": 32,
3300+
"width": 24,
33063301
}
33073302
}
33083303
>
33093304
<View
33103305
style={
33113306
{
3312-
"height": 32,
3313-
"width": 32,
3307+
"height": 24,
3308+
"width": 24,
33143309
}
33153310
}
33163311
/>
33173312
</View>
33183313
<Text
33193314
accessibilityRole="text"
33203315
primary={true}
3321-
small={true}
33223316
style={
33233317
{
33243318
"color": "#121314",
33253319
"fontFamily": "Geist Regular",
3326-
"fontSize": 16,
3320+
"fontSize": 14,
33273321
"letterSpacing": 0,
3328-
"lineHeight": 24,
3322+
"lineHeight": 22,
33293323
}
33303324
}
33313325
testID="account-label"

‎app/components/UI/TransactionElement/TransactionDetails/index.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -449,11 +449,11 @@ class TransactionDetails extends PureComponent {
449449
this.props.avatarAccountType || AvatarAccountType.Maskicon
450450
}
451451
accountAddress={updatedTransactionDetails.renderFrom}
452-
size={AvatarSize.Md}
452+
size={AvatarSize.Sm}
453453
style={styles.accountAvatar}
454454
/>
455455
<Text
456-
small
456+
variant={TextVariant.BodySM}
457457
primary
458458
testID={WalletViewSelectorsIDs.ACCOUNT_NAME_LABEL_TEXT}
459459
>
@@ -479,11 +479,11 @@ class TransactionDetails extends PureComponent {
479479
this.props.avatarAccountType || AvatarAccountType.Maskicon
480480
}
481481
accountAddress={updatedTransactionDetails.renderTo}
482-
size={AvatarSize.Md}
482+
size={AvatarSize.Sm}
483483
style={styles.accountAvatar}
484484
/>
485485
<Text
486-
small
486+
variant={TextVariant.BodySM}
487487
primary
488488
testID={WalletViewSelectorsIDs.ACCOUNT_NAME_LABEL_TEXT}
489489
>

0 commit comments

Comments
 (0)