Skip to content

Commit a8023a3

Browse files
amandaye0hamandaye0h
authored
fix: Replace eye icon with hover interaction to hide balances (#36543)
<!-- 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 replaces the eye icon with a hover interaction to hide the main balance. It reduces the visual noise of the home screen, polishing the UI. These changes are part of the wider Home Page updates. Similar changes were made [on Mobile](MetaMask/metamask-mobile#18328). [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/36543?quickstart=1) ## **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: fix: replace eye icon with a hover interaction to hide balances ## **Related issues** Related Fixes: MetaMask/metamask-mobile#18328 ## **Manual testing steps** 1. Hover over main balance 2. Click to hide icon 3. Make sure all impacted components have been updated ## **Screenshots/Recordings** <!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. --> ### **Before** https://github.com/user-attachments/assets/dadbefbf-b1df-495a-af28-beb322561b65 ### **After** https://github.com/user-attachments/assets/8f60ecee-8add-4664-ad6a-7eb71a867e50 ## **Pre-merge author checklist** - [ ] I've followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md). - [ ] I've completed the PR template to the best of my ability - [ ] I’ve included tests if applicable - [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable - [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/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] > Clicking the displayed balance (and suffix) now toggles privacy mode; removed the eye icon and updated components, props, selectors, and snapshots accordingly. > > - **Balance privacy interaction**: > - Replace `ButtonIcon` eye toggle with clicking the balance text across `AccountGroupBalance`, `LegacyAggregatedBalance`/`CoinOverview`, and `AggregatedBalance`. > - Make `SensitiveText`/balance suffix clickable; add hover styles. > - Extend `CurrencyDisplay` to accept `onClick`, wire to value and suffix; propagate in callers. > - **Selectors/e2e**: > - Update e2e to click `[data-testid="account-value-and-suffix"]` instead of `sensitive-toggle`. > - **Tests/Snapshots**: > - Update numerous snapshots for new classes (`cursor-pointer`, hover color) and removal of the eye icon. > > <sup>Written by [Cursor Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit 724983e. This will update automatically on new commits. Configure [here](https://cursor.com/dashboard?tab=bugbot).</sup> <!-- /CURSOR_SUMMARY -->
1 parent f35e29d commit a8023a3

File tree

23 files changed

+155
-204
lines changed

23 files changed

+155
-204
lines changed

‎test/e2e/page-objects/pages/home/homepage.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ class HomePage {
6161
private readonly portfolioLink = '[data-testid="portfolio-link"]';
6262

6363
private readonly privacyBalanceToggle = {
64-
testId: 'sensitive-toggle',
64+
testId: 'account-value-and-suffix',
6565
};
6666

6767
protected readonly sendButton: string = '[data-testid="eth-overview-send"]';

‎ui/components/app/assets/account-group-balance/account-group-balance.tsx‎

Lines changed: 3 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -7,24 +7,15 @@ import {
77
AlignItems,
88
Display,
99
FlexWrap,
10-
IconColor,
11-
JustifyContent,
1210
TextVariant,
1311
} from '../../../../helpers/constants/design-system';
14-
import {
15-
Box,
16-
ButtonIcon,
17-
ButtonIconSize,
18-
SensitiveText,
19-
IconName,
20-
} from '../../../component-library';
12+
import { Box, SensitiveText } from '../../../component-library';
2113
import {
2214
getPreferences,
2315
selectAnyEnabledNetworksAreAvailable,
2416
} from '../../../../selectors';
2517
import { useFormatters } from '../../../../hooks/useFormatters';
2618
import { getCurrentCurrency } from '../../../../ducks/metamask/metamask';
27-
import { useI18nContext } from '../../../../hooks/useI18nContext';
2819
import { Skeleton } from '../../../component-library/skeleton';
2920
import { isZeroAmount } from '../../../../helpers/utils/number-utils';
3021

@@ -41,7 +32,6 @@ export const AccountGroupBalance: React.FC<AccountGroupBalanceProps> = ({
4132
}) => {
4233
const { privacyMode } = useSelector(getPreferences);
4334
const { formatCurrency } = useFormatters();
44-
const t = useI18nContext();
4535

4636
const selectedGroupBalance = useSelector(selectBalanceBySelectedAccountGroup);
4737
const fallbackCurrency = useSelector(getCurrentCurrency);
@@ -76,21 +66,12 @@ export const AccountGroupBalance: React.FC<AccountGroupBalanceProps> = ({
7666
variant={TextVariant.inherit}
7767
isHidden={privacyMode}
7868
data-testid="account-value-and-suffix"
69+
onClick={handleSensitiveToggle}
70+
className="cursor-pointer transition-colors duration-200 hover:text-text-alternative"
7971
>
8072
{/* We should always show something but the check is just to appease TypeScript */}
8173
{total === undefined ? null : formatCurrency(total, currency)}
8274
</SensitiveText>
83-
84-
<ButtonIcon
85-
color={IconColor.iconAlternative}
86-
marginLeft={2}
87-
size={ButtonIconSize.Md}
88-
onClick={handleSensitiveToggle}
89-
iconName={privacyMode ? IconName.EyeSlash : IconName.Eye}
90-
justifyContent={JustifyContent.center}
91-
ariaLabel={t('hideSentitiveInfo')}
92-
data-testid="sensitive-toggle"
93-
/>
9475
</Box>
9576
</Skeleton>
9677
);

‎ui/components/app/confirm/info/row/__snapshots__/currency.test.tsx.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ exports[`ConfirmInfoRowCurrency should display in currency passed 1`] = `
1111
title="$82.65"
1212
>
1313
<span
14-
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
14+
class="mm-box mm-text currency-display-component__text cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
1515
data-testid="account-value-and-suffix"
1616
>
1717
$82.65
@@ -32,13 +32,13 @@ exports[`ConfirmInfoRowCurrency should display value in user preferred currency
3232
title="0.14861879 ETH"
3333
>
3434
<span
35-
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
35+
class="mm-box mm-text currency-display-component__text cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
3636
data-testid="account-value-and-suffix"
3737
>
3838
0.14861879
3939
</span>
4040
<span
41-
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
41+
class="mm-box mm-text currency-display-component__suffix cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
4242
>
4343
ETH
4444
</span>

‎ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ exports[`CurrencyInput Component rendering should disable unit input 1`] = `
3535
title="$0.00"
3636
>
3737
<span
38-
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
38+
class="mm-box mm-text currency-display-component__text cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
3939
data-testid="account-value-and-suffix"
4040
>
4141
$0.00
@@ -89,13 +89,13 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va
8989
title="0.004327880204275946 ETH"
9090
>
9191
<span
92-
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
92+
class="mm-box mm-text currency-display-component__text cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
9393
data-testid="account-value-and-suffix"
9494
>
9595
0.004327880204275946
9696
</span>
9797
<span
98-
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
98+
class="mm-box mm-text currency-display-component__suffix cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
9999
>
100100
ETH
101101
</span>
@@ -184,7 +184,7 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va
184184
title="$231.06"
185185
>
186186
<span
187-
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
187+
class="mm-box mm-text currency-display-component__text cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
188188
data-testid="account-value-and-suffix"
189189
>
190190
$231.06
@@ -239,7 +239,7 @@ exports[`CurrencyInput Component rendering should render properly without a suff
239239
title="$0.00"
240240
>
241241
<span
242-
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
242+
class="mm-box mm-text currency-display-component__text cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
243243
data-testid="account-value-and-suffix"
244244
>
245245
$0.00

‎ui/components/app/modals/cancel-transaction/cancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,13 +10,13 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
1010
title="<0.000001 ETH"
1111
>
1212
<span
13-
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
13+
class="mm-box mm-text currency-display-component__text cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
1414
data-testid="account-value-and-suffix"
1515
>
1616
&lt;0.000001
1717
</span>
1818
<span
19-
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
19+
class="mm-box mm-text currency-display-component__suffix cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
2020
>
2121
ETH
2222
</span>
@@ -26,13 +26,13 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
2626
title="<0.000001 ETH"
2727
>
2828
<span
29-
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
29+
class="mm-box mm-text currency-display-component__text cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
3030
data-testid="account-value-and-suffix"
3131
>
3232
&lt;0.000001
3333
</span>
3434
<span
35-
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
35+
class="mm-box mm-text currency-display-component__suffix cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
3636
>
3737
ETH
3838
</span>

‎ui/components/app/snaps/snap-ui-renderer/components/__snapshots__/account-selector.test.ts.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -164,13 +164,13 @@ exports[`SnapUIAccountSelector renders an account selector 1`] = `
164164
title="966.988 ETH"
165165
>
166166
<span
167-
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
167+
class="mm-box mm-text currency-display-component__text cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
168168
data-testid="account-value-and-suffix"
169169
>
170170
966.988
171171
</span>
172172
<span
173-
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
173+
class="mm-box mm-text currency-display-component__suffix cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
174174
>
175175
ETH
176176
</span>
@@ -475,13 +475,13 @@ exports[`SnapUIAccountSelector renders inside a field 1`] = `
475475
title="966.988 ETH"
476476
>
477477
<span
478-
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
478+
class="mm-box mm-text currency-display-component__text cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
479479
data-testid="account-value-and-suffix"
480480
>
481481
966.988
482482
</span>
483483
<span
484-
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
484+
class="mm-box mm-text currency-display-component__suffix cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
485485
>
486486
ETH
487487
</span>

‎ui/components/app/user-preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ exports[`UserPreferencedCurrencyDisplay Component rendering should match snapsho
77
title="0 ETH"
88
>
99
<span
10-
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
10+
class="mm-box mm-text currency-display-component__text cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
1111
data-testid="account-value-and-suffix"
1212
>
1313
0
1414
</span>
1515
<span
16-
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
16+
class="mm-box mm-text currency-display-component__suffix cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
1717
>
1818
ETH
1919
</span>

‎ui/components/app/wallet-overview/coin-overview.tsx‎

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -6,18 +6,8 @@ import type { Hex } from '@metamask/utils';
66

77
import { InternalAccount } from '@metamask/keyring-internal-api';
88
import { getNativeTokenAddress } from '@metamask/assets-controllers';
9-
import {
10-
Box,
11-
ButtonIcon,
12-
ButtonIconSize,
13-
ButtonLink,
14-
IconName,
15-
} from '../../component-library';
16-
import {
17-
JustifyContent,
18-
TextVariant,
19-
IconColor,
20-
} from '../../../helpers/constants/design-system';
9+
import { Box, ButtonLink, IconName } from '../../component-library';
10+
import { TextVariant } from '../../../helpers/constants/design-system';
2111
import { getPortfolioUrl } from '../../../helpers/utils/portfolio';
2212
import { MetaMetricsContext } from '../../../contexts/metametrics';
2313
import {
@@ -183,16 +173,7 @@ export const LegacyAggregatedBalance = ({
183173
!showNativeTokenAsMain && !isTestnet && shouldShowFiat
184174
}
185175
privacyMode={privacyMode}
186-
/>
187-
<ButtonIcon
188-
color={IconColor.iconAlternative}
189-
marginLeft={2}
190-
size={ButtonIconSize.Md}
191176
onClick={handleSensitiveToggle}
192-
iconName={privacyMode ? IconName.EyeSlash : IconName.Eye}
193-
justifyContent={JustifyContent.center}
194-
ariaLabel="Sensitive toggle"
195-
data-testid="sensitive-toggle"
196177
/>
197178
</Skeleton>
198179
);

‎ui/components/multichain/account-list-item/__snapshots__/account-list-item.test.js.snap‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
159159
title="$100,000.00"
160160
>
161161
<span
162-
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
162+
class="mm-box mm-text currency-display-component__text cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
163163
data-testid="account-value-and-suffix"
164164
>
165165
$100,000.00
@@ -392,13 +392,13 @@ exports[`AccountListItem renders AccountListItem component and shows account nam
392392
title="0.006 ETH"
393393
>
394394
<span
395-
class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
395+
class="mm-box mm-text currency-display-component__text cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
396396
data-testid="account-value-and-suffix"
397397
>
398398
0.006
399399
</span>
400400
<span
401-
class="mm-box mm-text currency-display-component__suffix mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
401+
class="mm-box mm-text currency-display-component__suffix cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--inherit mm-box--margin-inline-start-1 mm-box--color-text-default"
402402
>
403403
ETH
404404
</span>

‎ui/components/multichain/asset-picker-amount/asset-balance/__snapshots__/asset-balance-text.test.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,13 @@ exports[`AssetBalanceText matches snapshot 1`] = `
77
title="undefined"
88
>
99
<span
10-
class="mm-box mm-text currency-display-component__text mm-text--body-sm mm-text--ellipsis mm-box--color-textColor"
10+
class="mm-box mm-text currency-display-component__text cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--body-sm mm-text--ellipsis mm-box--color-textColor"
1111
data-testid="account-value-and-suffix"
1212
>
1313
prefix-fiat value
1414
</span>
1515
<span
16-
class="mm-box mm-text currency-display-component__suffix mm-text--body-sm mm-box--margin-inline-start-1 mm-box--color-textColor"
16+
class="mm-box mm-text currency-display-component__suffix cursor-pointer transition-colors duration-200 hover:text-text-alternative mm-text--body-sm mm-box--margin-inline-start-1 mm-box--color-textColor"
1717
>
1818
suffix
1919
</span>

0 commit comments

Comments
 (0)