feat: add privacy mode (#28021)

## **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 <[email protected]> Co-authored-by: David Walsh <[email protected]>
MetaMask · Oct 30, 2024 · 05da3f7 · 05da3f7
1 parent 62cc460
commit 05da3f7
Show file tree

Hide file tree

Showing 39 changed files with 284 additions and 48 deletions.
diff --git a/app/scripts/constants/sentry-state.ts b/app/scripts/constants/sentry-state.ts
@@ -243,6 +243,7 @@ export const SENTRY_BACKGROUND_STATE = {
       showNativeTokenAsMainBalance: true,
       petnamesEnabled: true,
       showConfirmationAdvancedDetails: true,
+      privacyMode: false,
     },
     useExternalServices: false,
     selectedAddress: false,

diff --git a/app/scripts/controllers/preferences-controller.test.ts b/app/scripts/controllers/preferences-controller.test.ts
@@ -730,6 +730,7 @@ describe('preferences controller', () => {
       expect(controller.state.preferences).toStrictEqual({
         autoLockTimeLimit: undefined,
         showExtensionInFullSizeView: false,
+        privacyMode: false,
         showFiatInTestnets: false,
         showTestNetworks: false,
         smartTransactionsOptInStatus: null,
@@ -764,6 +765,7 @@ describe('preferences controller', () => {
         useNativeCurrencyAsPrimaryCurrency: true,
         hideZeroBalanceTokens: false,
         petnamesEnabled: true,
+        privacyMode: false,
         redesignedConfirmationsEnabled: true,
         redesignedTransactionsEnabled: true,
         shouldShowAggregatedBalancePopover: true,

diff --git a/app/scripts/controllers/preferences-controller.ts b/app/scripts/controllers/preferences-controller.ts
@@ -112,6 +112,7 @@ export type Preferences = {
   redesignedTransactionsEnabled: boolean;
   featureNotificationsEnabled: boolean;
   showMultiRpcModal: boolean;
+  privacyMode: boolean;
   isRedesignedConfirmationsDeveloperEnabled: boolean;
   showConfirmationAdvancedDetails: boolean;
   tokenSortConfig: {
@@ -214,6 +215,7 @@ export const getDefaultPreferencesControllerState =
       isRedesignedConfirmationsDeveloperEnabled: false,
       showConfirmationAdvancedDetails: false,
       showMultiRpcModal: false,
+      privacyMode: false,
       shouldShowAggregatedBalancePopover: true, // by default user should see popover;
       tokenSortConfig: {
         key: 'tokenFiatAmount',

diff --git a/app/scripts/fixtures/with-preferences.js b/app/scripts/fixtures/with-preferences.js
@@ -13,6 +13,7 @@ export const FIXTURES_PREFERENCES = {
     showNftAutodetectModal: false,
     isRedesignedConfirmationsDeveloperEnabled: false,
     showConfirmationAdvancedDetails: false,
+    privacyMode: false,
   },
   featureFlags: {
     sendHexData: true,

diff --git a/test/e2e/fixture-builder.js b/test/e2e/fixture-builder.js
@@ -75,6 +75,7 @@ function onboardingFixture() {
           hideZeroBalanceTokens: false,
           showExtensionInFullSizeView: false,
           showFiatInTestnets: false,
+          privacyMode: false,
           showTestNetworks: false,
           smartTransactionsOptInStatus: false,
           showNativeTokenAsMainBalance: true,

diff --git a/test/e2e/tests/metrics/errors.spec.js b/test/e2e/tests/metrics/errors.spec.js
@@ -881,6 +881,7 @@ describe('Sentry errors', function () {
       preferences: {
         autoLockTimeLimit: true, // Initialized as undefined
         showConfirmationAdvancedDetails: true,
+        privacyMode: false,
       },
       smartTransactionsState: {
         fees: {

diff --git a/test/e2e/tests/privacy-mode/privacy-mode.spec.js b/test/e2e/tests/privacy-mode/privacy-mode.spec.js
@@ -0,0 +1,106 @@
+const { strict: assert } = require('assert');
+const {
+  withFixtures,
+  unlockWallet,
+  defaultGanacheOptions,
+} = require('../../helpers');
+const FixtureBuilder = require('../../fixture-builder');
+
+describe('Privacy Mode', function () {
+  it('should activate privacy mode, then deactivate it', async function () {
+    await withFixtures(
+      {
+        dapp: true,
+        fixtures: new FixtureBuilder().withPreferencesController().build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test.fullTitle(),
+      },
+      async ({ driver }) => {
+        async function checkForHeaderValue(value) {
+          const balanceElement = await driver.findElement(
+            '[data-testid="eth-overview__primary-currency"] .currency-display-component__text',
+          );
+          const surveyText = await balanceElement.getText();
+          assert.equal(
+            surveyText,
+            value,
+            `Header balance should be "${value}"`,
+          );
+        }
+
+        async function checkForTokenValue(value) {
+          const balanceElement = await driver.findElement(
+            '[data-testid="multichain-token-list-item-secondary-value"]',
+          );
+          const surveyText = await balanceElement.getText();
+          assert.equal(surveyText, value, `Token balance should be "${value}"`);
+        }
+
+        async function checkForPrivacy() {
+          await checkForHeaderValue('••••••');
+          await checkForTokenValue('•••••••••');
+        }
+
+        async function checkForNoPrivacy() {
+          await checkForHeaderValue('25');
+          await checkForTokenValue('25 ETH');
+        }
+
+        async function togglePrivacy() {
+          const balanceElement = await driver.findElement(
+            '[data-testid="eth-overview__primary-currency"] .currency-display-component__text',
+          );
+          const initialText = await balanceElement.getText();
+
+          await driver.clickElement('[data-testid="sensitive-toggle"]');
+          await driver.wait(async () => {
+            const currentText = await balanceElement.getText();
+            return currentText !== initialText;
+          }, 2e3);
+        }
+
+        await unlockWallet(driver);
+        await checkForNoPrivacy();
+        await togglePrivacy();
+        await checkForPrivacy();
+        await togglePrivacy();
+        await checkForNoPrivacy();
+      },
+    );
+  });
+
+  it('should hide fiat balance and token balance when privacy mode is activated', async function () {
+    await withFixtures(
+      {
+        fixtures: new FixtureBuilder().withPreferencesController().build(),
+        ganacheOptions: defaultGanacheOptions,
+        title: this.test.fullTitle(),
+      },
+      async ({ driver }) => {
+        await unlockWallet(driver);
+
+        async function togglePrivacy() {
+          const balanceElement = await driver.findElement(
+            '[data-testid="eth-overview__primary-currency"] .currency-display-component__text',
+          );
+          const initialText = await balanceElement.getText();
+
+          await driver.clickElement('[data-testid="sensitive-toggle"]');
+          await driver.wait(async () => {
+            const currentText = await balanceElement.getText();
+            return currentText !== initialText;
+          }, 2e3);
+        }
+
+        await togglePrivacy();
+        await driver.clickElement('[data-testid="account-menu-icon"]');
+        const valueText = await driver.findElement(
+          '[data-testid="account-value-and-suffix"]',
+        );
+        const valueTextContent = await valueText.getText();
+
+        assert.equal(valueTextContent, '••••••');
+      },
+    );
+  });
+});
diff --git a/test/integration/data/onboarding-completion-route.json b/test/integration/data/onboarding-completion-route.json
@@ -227,7 +227,8 @@
     "hideZeroBalanceTokens": false,
     "petnamesEnabled": true,
     "redesignedConfirmationsEnabled": true,
-    "featureNotificationsEnabled": false
+    "featureNotificationsEnabled": false,
+    "privacyMode": false
   },
   "preventPollingOnNetworkRestart": false,
   "previousAppVersion": "",

diff --git a/ui/components/app/assets/asset-list/native-token/native-token.tsx b/ui/components/app/assets/asset-list/native-token/native-token.tsx
@@ -8,18 +8,19 @@ import {
   getMultichainIsMainnet,
   getMultichainSelectedAccountCachedBalance,
 } from '../../../../../selectors/multichain';
+import { getPreferences } from '../../../../../selectors';
 import { TokenListItem } from '../../../../multichain';
 import { useIsOriginalNativeTokenSymbol } from '../../../../../hooks/useIsOriginalNativeTokenSymbol';
 import { AssetListProps } from '../asset-list';
 import { useNativeTokenBalance } from './use-native-token-balance';
-// import { getPreferences } from '../../../../../selectors';
 
 const NativeToken = ({ onClickAsset }: AssetListProps) => {
   const nativeCurrency = useSelector(getMultichainNativeCurrency);
   const isMainnet = useSelector(getMultichainIsMainnet);
   const { chainId, ticker, type, rpcUrl } = useSelector(
     getMultichainCurrentNetwork,
   );
+  const { privacyMode } = useSelector(getPreferences);
   const isOriginalNativeSymbol = useIsOriginalNativeTokenSymbol(
     chainId,
     ticker,
@@ -52,6 +53,7 @@ const NativeToken = ({ onClickAsset }: AssetListProps) => {
       isNativeCurrency
       isStakeable={isStakeable}
       showPercentage
+      privacyMode={privacyMode}
     />
   );
 };

diff --git a/ui/components/app/assets/token-cell/token-cell.test.tsx b/ui/components/app/assets/token-cell/token-cell.test.tsx
@@ -5,7 +5,7 @@ import { fireEvent } from '@testing-library/react';
 import { useSelector } from 'react-redux';
 import { renderWithProvider } from '../../../../../test/lib/render-helpers';
 import { useTokenFiatAmount } from '../../../../hooks/useTokenFiatAmount';
-import { getTokenList } from '../../../../selectors';
+import { getTokenList, getPreferences } from '../../../../selectors';
 import {
   getMultichainCurrentChainId,
   getMultichainIsEvm,
@@ -98,6 +98,9 @@ describe('Token Cell', () => {
   };
   const useSelectorMock = useSelector;
   (useSelectorMock as jest.Mock).mockImplementation((selector) => {
+    if (selector === getPreferences) {
+      return { privacyMode: false };
+    }
     if (selector === getTokenList) {
       return MOCK_GET_TOKEN_LIST;
     }

diff --git a/ui/components/app/assets/token-cell/token-cell.tsx b/ui/components/app/assets/token-cell/token-cell.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { getTokenList } from '../../../../selectors';
+import { getTokenList, getPreferences } from '../../../../selectors';
 import { useTokenFiatAmount } from '../../../../hooks/useTokenFiatAmount';
 import { TokenListItem } from '../../../multichain';
 import { isEqualCaseInsensitive } from '../../../../../shared/modules/string-utils';
@@ -23,6 +23,7 @@ export default function TokenCell({
   onClick,
 }: TokenCellProps) {
   const tokenList = useSelector(getTokenList);
+  const { privacyMode } = useSelector(getPreferences);
   const tokenData = Object.values(tokenList).find(
     (token) =>
       isEqualCaseInsensitive(token.symbol, symbol) &&
@@ -51,6 +52,7 @@ export default function TokenCell({
       isOriginalTokenSymbol={isOriginalTokenSymbol}
       address={address}
       showPercentage
+      privacyMode={privacyMode}
     />
   );
 }
diff --git a/ui/components/app/confirm/info/row/__snapshots__/currency.test.tsx.snap b/ui/components/app/confirm/info/row/__snapshots__/currency.test.tsx.snap
@@ -12,6 +12,7 @@ exports[`ConfirmInfoRowCurrency should display in currency passed 1`] = `
     >
       <span
         class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
+        data-testid="account-value-and-suffix"
       >
         $82.65
       </span>
@@ -37,6 +38,7 @@ exports[`ConfirmInfoRowCurrency should display value in user preferred currency
     >
       <span
         class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
+        data-testid="account-value-and-suffix"
       >
         0.14861879
       </span>

diff --git a/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap b/ui/components/app/currency-input/__snapshots__/currency-input.test.js.snap
@@ -36,6 +36,7 @@ exports[`CurrencyInput Component rendering should disable unit input 1`] = `
       >
         <span
           class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
+          data-testid="account-value-and-suffix"
         >
           $0.00
         </span>
@@ -89,6 +90,7 @@ exports[`CurrencyInput Component rendering should render properly with a fiat va
       >
         <span
           class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
+          data-testid="account-value-and-suffix"
         >
           0.004327880204275946
         </span>
@@ -183,6 +185,7 @@ exports[`CurrencyInput Component rendering should render properly with an ETH va
       >
         <span
           class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
+          data-testid="account-value-and-suffix"
         >
           $231.06
         </span>
@@ -237,6 +240,7 @@ exports[`CurrencyInput Component rendering should render properly without a suff
       >
         <span
           class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
+          data-testid="account-value-and-suffix"
         >
           $0.00
         </span>

diff --git a/...ancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap b/...ancel-transaction-gas-fee/__snapshots__/cancel-transaction-gas-fee.component.test.js.snap
@@ -11,6 +11,7 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
     >
       <span
         class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
+        data-testid="account-value-and-suffix"
       >
         &lt;0.000001
       </span>
@@ -26,6 +27,7 @@ exports[`CancelTransactionGasFee Component should render 1`] = `
     >
       <span
         class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
+        data-testid="account-value-and-suffix"
       >
         &lt;0.000001
       </span>

diff --git a/...preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap b/...preferenced-currency-display/__snapshots__/user-preferenced-currency-display.test.js.snap
@@ -8,6 +8,7 @@ exports[`UserPreferencedCurrencyDisplay Component rendering should match snapsho
   >
     <span
       class="mm-box mm-text currency-display-component__text mm-text--inherit mm-text--ellipsis mm-box--color-text-default"
+      data-testid="account-value-and-suffix"
     >
       0
     </span>

diff --git a/ui/components/app/wallet-overview/aggregated-percentage-overview.test.tsx b/ui/components/app/wallet-overview/aggregated-percentage-overview.test.tsx
@@ -7,6 +7,7 @@ import {
   getSelectedAccount,
   getShouldHideZeroBalanceTokens,
   getTokensMarketData,
+  getPreferences,
 } from '../../../selectors';
 import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance';
 import { AggregatedPercentageOverview } from './aggregated-percentage-overview';
@@ -22,6 +23,7 @@ jest.mock('../../../ducks/locale/locale', () => ({
 jest.mock('../../../selectors', () => ({
   getCurrentCurrency: jest.fn(),
   getSelectedAccount: jest.fn(),
+  getPreferences: jest.fn(),
   getShouldHideZeroBalanceTokens: jest.fn(),
   getTokensMarketData: jest.fn(),
 }));
@@ -32,6 +34,7 @@ jest.mock('../../../hooks/useAccountTotalFiatBalance', () => ({
 
 const mockGetIntlLocale = getIntlLocale as unknown as jest.Mock;
 const mockGetCurrentCurrency = getCurrentCurrency as jest.Mock;
+const mockGetPreferences = getPreferences as jest.Mock;
 const mockGetSelectedAccount = getSelectedAccount as unknown as jest.Mock;
 const mockGetShouldHideZeroBalanceTokens =
   getShouldHideZeroBalanceTokens as jest.Mock;
@@ -159,6 +162,7 @@ describe('AggregatedPercentageOverview', () => {
   beforeEach(() => {
     mockGetIntlLocale.mockReturnValue('en-US');
     mockGetCurrentCurrency.mockReturnValue('USD');
+    mockGetPreferences.mockReturnValue({ privacyMode: false });
     mockGetSelectedAccount.mockReturnValue(selectedAccountMock);
     mockGetShouldHideZeroBalanceTokens.mockReturnValue(false);
     mockGetTokensMarketData.mockReturnValue(marketDataMock);