-
Notifications
You must be signed in to change notification settings - Fork 4.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: add privacy mode #28021
base: develop
Are you sure you want to change the base?
feat: add privacy mode #28021
Conversation
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. |
Builds ready [02b49f1]
Page Load Metrics (2013 ± 72 ms)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
a few comments on the SensitiveText
component
ui/components/component-library/sensitive-text/sensitive-text.tsx
Outdated
Show resolved
Hide resolved
ui/components/component-library/sensitive-text/sensitive-text.tsx
Outdated
Show resolved
Hide resolved
ui/components/component-library/sensitive-text/sensitive-text.tsx
Outdated
Show resolved
Hide resolved
ui/components/component-library/sensitive-text/sensitive-text.types.ts
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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!
Builds ready [8fc378a]
Page Load Metrics (2052 ± 128 ms)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Here is a separate PR for just the sensitive text component @georgewrmarshall |
Builds ready [6e27a5c]
Page Load Metrics (2055 ± 66 ms)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
Builds ready [7431efc]
Page Load Metrics (2054 ± 69 ms)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
## **Description** ### Overview This PR introduces a new `SensitiveText` component to our component library. The `SensitiveText` component extends our existing `Text` component to handle sensitive information, providing the ability to hide or show text content as needed. ### Features - Extends the existing `Text` component functionality - Allows toggling between visible and hidden states for sensitive information - Supports different lengths of hidden text (Short, Medium, Long, ExtraLong) - Maintains all styling capabilities of the `Text` component (variants, colors, etc) This is dependent on this open PR [#28021](#28021) [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28056?quickstart=1) ## **Related issues** Fixes: [#3419](MetaMask/MetaMask-planning#3419) ## **Manual testing steps** 1. Go to Storybook to play with new component 👯 ## **Screenshots/Recordings** NA ### **Before** NA ### **After** ![Screenshot 2024-10-24 at 11 56 13 AM](https://github.com/user-attachments/assets/58ae3fc8-882d-47f5-8c18-4d69bb033d94) The screenshots below are from this [pull request](#28021) and NOT apart of this PR. This is just to show how it looks like in extension 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** - [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** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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.
Builds ready [5ac2d24]
Page Load Metrics (1992 ± 88 ms)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
## **Description** ### Overview This PR introduces a new `SensitiveText` component to our component library. The `SensitiveText` component extends our existing `Text` component to handle sensitive information, providing the ability to hide or show text content as needed. ### Features - Extends the existing `Text` component functionality - Allows toggling between visible and hidden states for sensitive information - Supports different lengths of hidden text (Short, Medium, Long, ExtraLong) - Maintains all styling capabilities of the `Text` component (variants, colors, etc) This is dependent on this open PR [#28021](#28021) [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/28056?quickstart=1) ## **Related issues** Fixes: [#3419](MetaMask/MetaMask-planning#3419) ## **Manual testing steps** 1. Go to Storybook to play with new component 👯 ## **Screenshots/Recordings** NA ### **Before** NA ### **After** ![Screenshot 2024-10-24 at 11 56 13 AM](https://github.com/user-attachments/assets/58ae3fc8-882d-47f5-8c18-4d69bb033d94) The screenshots below are from this [pull request](#28021) and NOT apart of this PR. This is just to show how it looks like in extension 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** - [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** - [x] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed). - [x] 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.
… test for account selection modal and privacy mode
Builds ready [731199a]
Page Load Metrics (1865 ± 51 ms)
Bundle size diffs [🚨 Warning! Bundle size has increased!]
|
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
Screenshots/Recordings
Before
After
nocontent2.mp4
demo2.mp4
Pre-merge author checklist
Pre-merge reviewer checklist