feat: add privacy mode

app/scripts/constants/sentry-state.ts

@@ -233,6 +233,7 @@ export const SENTRY_BACKGROUND_STATE = {
       showNativeTokenAsMainBalance: true,
       petnamesEnabled: true,
       showConfirmationAdvancedDetails: true,
+      privacyMode: false,
     },
     useExternalServices: false,
     selectedAddress: false,

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,

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',

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,

test/e2e/fixture-builder.js

@@ -73,6 +73,7 @@ function onboardingFixture() {
           hideZeroBalanceTokens: false,
           showExtensionInFullSizeView: false,
           showFiatInTestnets: false,
+          privacyMode: false,
           showTestNetworks: false,
           smartTransactionsOptInStatus: false,
           showNativeTokenAsMainBalance: true,

test/e2e/tests/metrics/errors.spec.js

@@ -869,6 +869,7 @@ describe('Sentry errors', function () {
       preferences: {
         autoLockTimeLimit: true, // Initialized as undefined
         showConfirmationAdvancedDetails: true,
+        privacyMode: false,
       },
       smartTransactionsState: {
         fees: {

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

@@ -0,0 +1,59 @@
+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, `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, `Balance should be "${value}"`);
+        }
+
+        async function checkForPrivacy() {
+          await checkForHeaderValue('*****');
+          await checkForTokenValue('*****');
+        }
+
+        async function checkForNoPrivacy() {
+          await checkForHeaderValue('25');
+          await checkForTokenValue('25 ETH');
+        }
+
+        async function togglePrivacy() {
+          await driver.clickElement('[data-testid="sensitive-toggle"]');
+          await new Promise((resolve) => setTimeout(resolve, 2e3));
+        }
+
+        await unlockWallet(driver);
+        await checkForNoPrivacy();
+        await togglePrivacy();
+        await checkForPrivacy();
+        await togglePrivacy();
+        await checkForNoPrivacy();
+      },
+    );
+  });
+});

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": "",

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;
     }

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);

ui/components/app/wallet-overview/aggregated-percentage-overview.tsx

@@ -7,6 +7,7 @@ import {
   getSelectedAccount,
   getShouldHideZeroBalanceTokens,
   getTokensMarketData,
+  getPreferences,
 } from '../../../selectors';
 
 import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance';
@@ -19,7 +20,7 @@ import {
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
-import { Box, Text } from '../../component-library';
+import { Box, SensitiveText } from '../../component-library';
 import { getCalculatedTokenAmount1dAgo } from '../../../helpers/utils/util';
 
 // core already has this exported type but its not yet available in this version
@@ -34,6 +35,7 @@ export const AggregatedPercentageOverview = () => {
     useSelector(getTokensMarketData);
   const locale = useSelector(getIntlLocale);
   const fiatCurrency = useSelector(getCurrentCurrency);
+  const { privacyMode } = useSelector(getPreferences);
   const selectedAccount = useSelector(getSelectedAccount);
   const shouldHideZeroBalanceTokens = useSelector(
     getShouldHideZeroBalanceTokens,
@@ -121,23 +123,25 @@ export const AggregatedPercentageOverview = () => {
   }
   return (
     <Box display={Display.Flex}>
-      <Text
+      <SensitiveText
         variant={TextVariant.bodyMdMedium}
         color={color}
         data-testid="aggregated-value-change"
         style={{ whiteSpace: 'pre' }}
+        isHidden={privacyMode}
         ellipsis
       >
         {formattedAmountChange}
-      </Text>
-      <Text
+      </SensitiveText>
+      <SensitiveText
         variant={TextVariant.bodyMdMedium}
         color={color}
         data-testid="aggregated-percentage-change"
+        isHidden={privacyMode}
         ellipsis
       >
         {formattedPercentChange}
-      </Text>
+      </SensitiveText>
     </Box>
   );
 };

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

@@ -61,7 +61,10 @@ import Spinner from '../../ui/spinner';
 import { PercentageAndAmountChange } from '../../multichain/token-list-item/price/percentage-and-amount-change/percentage-and-amount-change';
 import { getMultichainIsEvm } from '../../../selectors/multichain';
 import { useAccountTotalFiatBalance } from '../../../hooks/useAccountTotalFiatBalance';
-import { setAggregatedBalancePopoverShown } from '../../../store/actions';
+import {
+  setAggregatedBalancePopoverShown,
+  setPrivacyMode,
+} from '../../../store/actions';
 import { useTheme } from '../../../hooks/useTheme';
 import { getSpecificSettingsRoute } from '../../../helpers/utils/settings-search';
 import { useI18nContext } from '../../../hooks/useI18nContext';
@@ -128,7 +131,7 @@ export const CoinOverview = ({
 
   const shouldShowPopover = useSelector(getShouldShowAggregatedBalancePopover);
   const isTestnet = useSelector(getIsTestnet);
-  const { showFiatInTestnets } = useSelector(getPreferences);
+  const { showFiatInTestnets, privacyMode } = useSelector(getPreferences);
 
   const selectedAccount = useSelector(getSelectedAccount);
   const shouldHideZeroBalanceTokens = useSelector(
@@ -163,6 +166,10 @@ export const CoinOverview = ({
     dispatch(setAggregatedBalancePopoverShown());
   };
 
+  const handleSensitiveToggle = () => {
+    dispatch(setPrivacyMode(!privacyMode));
+  };
+
   const [referenceElement, setReferenceElement] =
     useState<HTMLSpanElement | null>(null);
   const setBoxRef = (ref: HTMLSpanElement | null) => {
@@ -253,26 +260,37 @@ export const CoinOverview = ({
               ref={setBoxRef}
             >
               {balanceToDisplay ? (
-                <UserPreferencedCurrencyDisplay
-                  style={{ display: 'contents' }}
-                  account={account}
-                  className={classnames(
-                    `${classPrefix}-overview__primary-balance`,
-                    {
-                      [`${classPrefix}-overview__cached-balance`]:
-                        balanceIsCached,
-                    },
-                  )}
-                  data-testid={`${classPrefix}-overview__primary-currency`}
-                  value={balanceToDisplay}
-                  type={PRIMARY}
-                  ethNumberOfDecimals={4}
-                  hideTitle
-                  shouldCheckShowNativeToken
-                  isAggregatedFiatOverviewBalance={
-                    !showNativeTokenAsMainBalance && !isTestnet
-                  }
-                />
+                <>
+                  <UserPreferencedCurrencyDisplay
+                    style={{ display: 'contents' }}
+                    account={account}
+                    className={classnames(
+                      `${classPrefix}-overview__primary-balance`,
+                      {
+                        [`${classPrefix}-overview__cached-balance`]:
+                          balanceIsCached,
+                      },
+                    )}
+                    data-testid={`${classPrefix}-overview__primary-currency`}
+                    value={balanceToDisplay}
+                    type={PRIMARY}
+                    ethNumberOfDecimals={4}
+                    hideTitle
+                    shouldCheckShowNativeToken
+                    isAggregatedFiatOverviewBalance={
+                      !showNativeTokenAsMainBalance && !isTestnet
+                    }
+                  />
+                  <ButtonIcon
+                    marginLeft={2}
+                    size={ButtonIconSize.Lg}
+                    onClick={handleSensitiveToggle}
+                    iconName={privacyMode ? IconName.EyeSlash : IconName.Eye}
+                    justifyContent={JustifyContent.center}
+                    ariaLabel="Sensitive toggle"
+                    data-testid="sensitive-toggle"
+                  />
+                </>
               ) : (
                 <Spinner className="loading-overlay__spinner" />
               )}

ui/components/app/wallet-overview/index.scss

@@ -70,7 +70,8 @@
     display: flex;
     max-width: inherit;
     justify-content: center;
-    flex-wrap: wrap;
+    align-items: center;
+    flex-wrap: nowrap;
   }
 
   &__primary-balance {
@@ -134,7 +135,8 @@
     display: flex;
     max-width: inherit;
     justify-content: center;
-    flex-wrap: wrap;
+    align-items: center;
+    flex-wrap: nowrap;
   }
 
   &__primary-balance {

ui/components/component-library/index.ts

@@ -69,6 +69,8 @@ export { TagUrl } from './tag-url';
 export type { TagUrlProps } from './tag-url';
 export { Text, ValidTag, TextDirection, InvisibleCharacter } from './text';
 export type { TextProps } from './text';
+export { SensitiveText, SensitiveLengths } from './sensitive-text';
+export type { SensitiveTextProps } from './sensitive-text';
 export { Input, InputType } from './input';
 export type { InputProps } from './input';
 export { TextField, TextFieldType, TextFieldSize } from './text-field';

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

@@ -0,0 +1,3 @@
+export { SensitiveText } from './sensitive-text';
+export { SensitiveLengths } from './sensitive-text.types';
+export type { SensitiveTextProps } from './sensitive-text.types';