feat: add privacy mode #28021

jonybur · 2024-10-22T18:38:33Z

Description

Adds a privacy mode toggle (an eye icon next to the main balance) that hides all sensitive information/token balances

UPDATE
Here is feedback from @amandaye0h and has been currently implemented in this PR
Figma

Related issues

Fixes:
https://github.com/MetaMask/MetaMask-planning/issues/3416
https://github.com/MetaMask/MetaMask-planning/issues/3418
https://github.com/MetaMask/MetaMask-planning/issues/3419

Manual testing steps

Go to the Wallet page
Click on the new Eye icon next to the balance
All balances should be hidden
Click on the Eye icon once again
All balances should be shown

Screenshots/Recordings

Before

After

nocontent2.mp4

demo2.mp4

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
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 format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). 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.

github-actions · 2024-10-22T18:38:47Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

ui/store/actions.ts

metamaskbot · 2024-10-23T04:41:01Z

Builds ready [02b49f1]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2013 ± 72 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1809	2557	2012	168	81
		domContentLoaded	1793	2394	1961	141	68
		load	1858	2495	2013	151	72
		domInteractive	22	166	52	31	15
		backgroundConnect	11	115	48	30	14
		firstReactRender	51	303	105	65	31
		getState	4	93	34	26	13
		initialActions	0	1	0	0	0
		loadScripts	1274	1822	1454	132	64
		setupStore	13	90	31	21	10
		uiStartup	2054	2904	2281	241	116

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 45 Bytes (0.00%)
ui: 823 Bytes (0.01%)
common: 2.81 KiB (0.04%)

andreahaku

a few comments on the SensitiveText component

ui/components/component-library/sensitive-text/sensitive-text.tsx

test/e2e/tests/privacy-mode/privacy-mode.spec.js

ui/store/actions.ts

ui/components/component-library/sensitive-text/sensitive-text.types.ts

georgewrmarshall

Hey @jonybur, this is looking great! Could we pull out the SensitiveText component into its own PR for review? This way, we can ensure the docs, tests, and Storybook stories accurately reflect the component, making it more valuable for the rest of the org. Let me know if you have any questions or need support!

metamaskbot · 2024-10-23T19:38:35Z

Builds ready [8fc378a]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2052 ± 128 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	413	2578	1854	492	236
		domContentLoaded	1701	2631	1995	242	116
		load	1714	2654	2052	267	128
		domInteractive	18	95	49	20	10
		backgroundConnect	9	265	49	55	27
		firstReactRender	50	198	109	35	17
		getState	5	106	26	28	13
		initialActions	0	1	0	0	0
		loadScripts	1233	2122	1494	215	103
		setupStore	13	92	29	22	11
		uiStartup	1913	3302	2308	361	173

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 45 Bytes (0.00%)
ui: 823 Bytes (0.01%)
common: 3.33 KiB (0.04%)

metamaskbot · 2024-10-28T21:02:15Z

Builds ready [72198f0]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (2075 ± 71 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1865	2527	2072	152	73
		domContentLoaded	1853	2470	2039	148	71
		load	1866	2478	2075	147	71
		domInteractive	33	86	58	19	9
		backgroundConnect	10	78	34	22	11
		firstReactRender	69	186	114	30	14
		getState	6	61	23	21	10
		initialActions	0	0	0	0	0
		loadScripts	1341	1820	1513	123	59
		setupStore	12	76	29	22	11
		uiStartup	2073	2826	2311	171	82

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 45 Bytes (0.00%)
ui: 1.27 KiB (0.02%)
common: 90 Bytes (0.00%)

…28089) ## **Description** This PR updates the Storybook stories for the `SensitiveText` component to align with extension component library standards. The changes include: - Updating Storybook stories to use the CSF 3.0 format for better organization and future-proofing. - Converting `README.md` to `README.mdx`, leveraging Storybook stories for documentation and improving the accessibility and usability of the component documentation. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28089?quickstart=1) ## **Related issues** Related: #28021 ## **Manual testing steps** 1. Run Storybook locally and navigate to the `SensitiveText` component. 2. Verify that the stories render correctly in the CSF 3.0 format. 3. Check that the new `README.mdx` renders properly in the Storybook Docs tab. ## **Screenshots/Recordings** ### **Before** https://github.com/user-attachments/assets/e1804283-72d2-45e6-829b-e2ce38776e1e ### **After** https://github.com/user-attachments/assets/5d776529-6fe3-4646-90f2-57f2ceceefd6 ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.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-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I’ve manually tested the PR (e.g., pulled and built the branch, ran the app, tested the code being changed). - [ ] I confirm that this PR addresses all acceptance criteria and includes the necessary testing evidence, such as recordings or screenshots.

… jb-privacy-mode

metamaskbot · 2024-10-29T14:49:07Z

Builds ready [475a2d8]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1883 ± 70 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1638	2230	1890	148	71
		domContentLoaded	1629	2142	1847	128	62
		load	1637	2238	1883	147	70
		domInteractive	15	75	39	16	8
		backgroundConnect	9	111	31	28	13
		firstReactRender	46	147	84	28	13
		getState	5	72	20	21	10
		initialActions	0	48	2	10	5
		loadScripts	1152	1642	1343	124	59
		setupStore	11	68	26	20	9
		uiStartup	1836	2498	2080	161	77

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 45 Bytes (0.00%)
ui: 1.27 KiB (0.02%)
common: 90 Bytes (0.00%)

georgewrmarshall

Left one small comment!

ui/components/component-library/sensitive-text/README.md

metamaskbot · 2024-10-29T17:31:05Z

Builds ready [ac9c738]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1905 ± 60 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1762	2292	1912	124	59
		domContentLoaded	1715	2279	1876	129	62
		load	1765	2296	1905	124	60
		domInteractive	19	72	42	15	7
		backgroundConnect	8	79	32	24	12
		firstReactRender	52	129	98	20	10
		getState	5	72	14	18	9
		initialActions	0	1	0	0	0
		loadScripts	1245	1738	1383	115	55
		setupStore	10	75	31	25	12
		uiStartup	1940	2578	2115	144	69

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 45 Bytes (0.00%)
ui: 1.27 KiB (0.02%)
common: 90 Bytes (0.00%)

jpuri

Changes in files owned by confirmation team look good 👍

@amandaye0h

## **Description** Adds a privacy mode toggle (an eye icon next to the main balance) that hides all sensitive information/token balances **UPDATE** Here is feedback from @amandaye0h and has been currently implemented in this PR [Figma](https://www.figma.com/design/aMYisczaJyEsYl1TYdcPUL/Portfolio-View?node-id=6219-62460&t=aeTv5cenoUPUrg1c-4) [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28021?quickstart=1) ## **Related issues** Fixes: MetaMask/MetaMask-planning#3416 MetaMask/MetaMask-planning#3418 MetaMask/MetaMask-planning#3419 ## **Manual testing steps** 1. Go to the Wallet page 2. Click on the new Eye icon next to the balance 3. All balances should be hidden 4. Click on the Eye icon once again 5. All balances should be shown ## **Screenshots/Recordings**  ### **Before**  ### **After** https://github.com/user-attachments/assets/2950ac0c-593d-4daa-aa5d-3e6c3a2d5598 https://github.com/user-attachments/assets/6371c2a2-04fa-48a3-8744-991a1540d5f2 <img width="496" alt="Screenshot 2024-10-22 at 18 43 19" src="https://github.com/user-attachments/assets/d7c2f681-75c7-4be0-921b-f3c5186f8d4a"> ## **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/develop/.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/develop/.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. --------- Co-authored-by: vinnyhoward <vincenguyenhoward@gmail.com> Co-authored-by: David Walsh <davidwalsh83@gmail.com>

metamaskbot · 2024-10-30T04:35:13Z

Builds ready [3d0eeda]

builds: chrome, firefox
builds (beta): chrome
builds (flask): chrome, firefox
builds (MMI): chrome, firefox
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Background Module Init Stats
mv3: UI Init Stats
mv3: Module Load Stats
mv3: Bundle Size Stats
mv2: E2e Actions Stats
code coverage: Report
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6
- common: 0, 1, 10, 11, 2, 3, 4, 5, 6, 7, 8, 9
- content-script: 0
- offscreen: 0
- ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1964 ± 65 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1741	2194	1961	135	65
		domContentLoaded	1686	2169	1932	134	64
		load	1745	2197	1964	135	65
		domInteractive	13	234	54	45	22
		backgroundConnect	8	91	37	25	12
		firstReactRender	44	189	97	36	17
		getState	4	57	14	15	7
		initialActions	0	1	0	0	0
		loadScripts	1144	1652	1424	121	58
		setupStore	11	75	36	25	12
		uiStartup	1895	2396	2193	155	75

Bundle size diffs [🚨 Warning! Bundle size has increased!]

background: 45 Bytes (0.00%)
ui: 1.27 KiB (0.02%)
common: 90 Bytes (0.00%)

…28089) ## **Description** This PR updates the Storybook stories for the `SensitiveText` component to align with extension component library standards. The changes include: - Updating Storybook stories to use the CSF 3.0 format for better organization and future-proofing. - Converting `README.md` to `README.mdx`, leveraging Storybook stories for documentation and improving the accessibility and usability of the component documentation. [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28089?quickstart=1) ## **Related issues** Related: #28021 ## **Manual testing steps** 1. Run Storybook locally and navigate to the `SensitiveText` component. 2. Verify that the stories render correctly in the CSF 3.0 format. 3. Check that the new `README.mdx` renders properly in the Storybook Docs tab. ## **Screenshots/Recordings** ### **Before** https://github.com/user-attachments/assets/e1804283-72d2-45e6-829b-e2ce38776e1e ### **After** https://github.com/user-attachments/assets/5d776529-6fe3-4646-90f2-57f2ceceefd6 ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Contributor Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Extension Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.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-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors. ## **Pre-merge reviewer checklist** - [ ] I’ve manually tested the PR (e.g., pulled and built the branch, ran the app, tested the code being changed). - [ ] I confirm that this PR addresses all acceptance criteria and includes the necessary testing evidence, such as recordings or screenshots.

Add sensitive text

7611b29

jonybur requested review from a team as code owners October 22, 2024 18:38

github-actions bot added the team-wallet-ux label Oct 22, 2024

gambinish reviewed Oct 22, 2024

View reviewed changes

ui/store/actions.ts Outdated Show resolved Hide resolved

jonybur added 11 commits October 22, 2024 18:44

Add nowrap to token container

63c9c3f

Dont show hidden text if there's no text

25ded19

Use setPreference

e916835

Move privacyMode setting

4e59b98

Fix test

2dd26d1

Add stories

b5eda7b

Fix test

ddbaf76

Fix test

a508e38

Add e2e test

ac1fb14

Await for 2 secodns

c783377

Add privacyMode to state

02b49f1

jonybur requested review from darkwing and gambinish October 23, 2024 04:07

andreahaku reviewed Oct 23, 2024

View reviewed changes

darkwing requested changes Oct 23, 2024

View reviewed changes

test/e2e/tests/privacy-mode/privacy-mode.spec.js Outdated Show resolved Hide resolved

gambinish reviewed Oct 23, 2024

View reviewed changes

ui/store/actions.ts Show resolved Hide resolved

vinnyhoward reviewed Oct 23, 2024

View reviewed changes

ui/components/component-library/sensitive-text/sensitive-text.types.ts Outdated Show resolved Hide resolved

vinnyhoward added 3 commits October 23, 2024 12:40

fix: updates according to feedback from pr

4f3f174

fix: e2e test delay

23e0a29

Merge branch 'develop' into jb-privacy-mode

8fc378a

georgewrmarshall reviewed Oct 23, 2024

View reviewed changes

Merge branch 'develop' of github.com:MetaMask/metamask-extension into…

475a2d8

… jb-privacy-mode

gambinish previously approved these changes Oct 29, 2024

View reviewed changes

georgewrmarshall reviewed Oct 29, 2024

View reviewed changes

ui/components/component-library/sensitive-text/README.md Outdated Show resolved Hide resolved

Remove unwanted markdown file

ac9c738

darkwing dismissed gambinish’s stale review via ac9c738 October 29, 2024 16:52

darkwing approved these changes Oct 29, 2024

View reviewed changes

gambinish approved these changes Oct 29, 2024

View reviewed changes

georgewrmarshall approved these changes Oct 29, 2024

View reviewed changes

jpuri approved these changes Oct 30, 2024

View reviewed changes

vinnyhoward added this pull request to the merge queue Oct 30, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 30, 2024

vinnyhoward added this pull request to the merge queue Oct 30, 2024

vinnyhoward removed this pull request from the merge queue due to a manual request Oct 30, 2024

Merge branch 'develop' into jb-privacy-mode

3d0eeda

vinnyhoward enabled auto-merge October 30, 2024 03:56

vinnyhoward added this pull request to the merge queue Oct 30, 2024

github-merge-queue bot removed this pull request from the merge queue due to failed status checks Oct 30, 2024

darkwing added this pull request to the merge queue Oct 30, 2024

Merged via the queue into develop with commit 05da3f7 Oct 30, 2024
76 checks passed

darkwing deleted the jb-privacy-mode branch October 30, 2024 13:24

github-actions bot locked and limited conversation to collaborators Oct 30, 2024

metamaskbot added the release-12.7.0 Issue or pull request that will be included in release 12.7.0 label Oct 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: add privacy mode #28021

feat: add privacy mode #28021

jonybur commented Oct 22, 2024 •

edited by vinnyhoward

Loading

github-actions bot commented Oct 22, 2024

metamaskbot commented Oct 23, 2024

andreahaku left a comment

georgewrmarshall left a comment

metamaskbot commented Oct 23, 2024

metamaskbot commented Oct 28, 2024

metamaskbot commented Oct 29, 2024

georgewrmarshall left a comment

metamaskbot commented Oct 29, 2024

jpuri left a comment

metamaskbot commented Oct 30, 2024

feat: add privacy mode #28021

feat: add privacy mode #28021

Conversation

jonybur commented Oct 22, 2024 • edited by vinnyhoward Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Oct 22, 2024

metamaskbot commented Oct 23, 2024

andreahaku left a comment

Choose a reason for hiding this comment

georgewrmarshall left a comment

Choose a reason for hiding this comment

metamaskbot commented Oct 23, 2024

metamaskbot commented Oct 28, 2024

metamaskbot commented Oct 29, 2024

georgewrmarshall left a comment

Choose a reason for hiding this comment

metamaskbot commented Oct 29, 2024

jpuri left a comment

Choose a reason for hiding this comment

metamaskbot commented Oct 30, 2024

jonybur commented Oct 22, 2024 •

edited by vinnyhoward

Loading