feat(3420): privacy mode toggle

app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.constants.ts

@@ -0,0 +1,2 @@
+export const FORMATTED_VALUE_PRICE_TEST_ID = 'formatted-value-price-test-id';
+export const FORMATTED_PERCENTAGE_TEST_ID = 'formatted-percentage-test-id';

app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.test.tsx

@@ -4,6 +4,10 @@ import AggregatedPercentage from './AggregatedPercentage';
 import { mockTheme } from '../../../../util/theme';
 import { useSelector } from 'react-redux';
 import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
+import {
+  FORMATTED_VALUE_PRICE_TEST_ID,
+  FORMATTED_PERCENTAGE_TEST_ID,
+} from './AggregatedPercentage.constants';
 
 jest.mock('react-redux', () => ({
   ...jest.requireActual('react-redux'),
@@ -65,4 +69,22 @@ describe('AggregatedPercentage', () => {
       color: mockTheme.colors.error.default,
     });
   });
+
+  it('renders correctly with privacy mode on', () => {
+    const { getByTestId } = render(
+      <AggregatedPercentage
+        ethFiat={150}
+        tokenFiat={200}
+        tokenFiat1dAgo={300}
+        ethFiat1dAgo={200}
+        privacyMode
+      />,
+    );
+
+    const formattedPercentage = getByTestId(FORMATTED_PERCENTAGE_TEST_ID);
+    const formattedValuePrice = getByTestId(FORMATTED_VALUE_PRICE_TEST_ID);
+
+    expect(formattedPercentage.props.children).toBe('••••••••••');
+    expect(formattedValuePrice.props.children).toBe('••••••••••');
+  });
 });

app/component-library/components-temp/Price/AggregatedPercentage/AggregatedPercentage.tsx

@@ -1,14 +1,19 @@
 import React from 'react';
-import Text, {
+import {
   TextColor,
   TextVariant,
 } from '../../../../component-library/components/Texts/Text';
+import SensitiveText from '../../../../component-library/components/Texts/SensitiveText';
 import { View } from 'react-native';
 import { renderFiat } from '../../../../util/number';
 import { useSelector } from 'react-redux';
 import { selectCurrentCurrency } from '../../../../selectors/currencyRateController';
 import styleSheet from './AggregatedPercentage.styles';
 import { useStyles } from '../../../hooks';
+import {
+  FORMATTED_VALUE_PRICE_TEST_ID,
+  FORMATTED_PERCENTAGE_TEST_ID,
+} from './AggregatedPercentage.constants';
 
 export interface AggregatedPercentageProps {
   ethFiat: number;
@@ -25,11 +30,13 @@ const AggregatedPercentage = ({
   tokenFiat,
   tokenFiat1dAgo,
   ethFiat1dAgo,
+  privacyMode = false,
 }: {
   ethFiat: number;
   tokenFiat: number;
   tokenFiat1dAgo: number;
   ethFiat1dAgo: number;
+  privacyMode?: boolean;
 }) => {
   const { styles } = useStyles(styleSheet, {});
 
@@ -46,12 +53,16 @@ const AggregatedPercentage = ({
 
   let percentageTextColor = TextColor.Default;
 
-  if (percentageChange === 0) {
-    percentageTextColor = TextColor.Default;
-  } else if (percentageChange > 0) {
-    percentageTextColor = TextColor.Success;
+  if (!privacyMode) {
+    if (percentageChange === 0) {
+      percentageTextColor = TextColor.Default;
+    } else if (percentageChange > 0) {
+      percentageTextColor = TextColor.Success;
+    } else {
+      percentageTextColor = TextColor.Error;
+    }
   } else {
-    percentageTextColor = TextColor.Error;
+    percentageTextColor = TextColor.Alternative;
   }
 
   const formattedPercentage = isValidAmount(percentageChange)
@@ -70,12 +81,24 @@ const AggregatedPercentage = ({
 
   return (
     <View style={styles.wrapper}>
-      <Text color={percentageTextColor} variant={TextVariant.BodyMDMedium}>
+      <SensitiveText
+        isHidden={privacyMode}
+        length="10"
+        color={percentageTextColor}
+        variant={TextVariant.BodyMDMedium}
+        testID={FORMATTED_VALUE_PRICE_TEST_ID}
+      >
         {formattedValuePrice}
-      </Text>
-      <Text color={percentageTextColor} variant={TextVariant.BodyMDMedium}>
+      </SensitiveText>
+      <SensitiveText
+        isHidden={privacyMode}
+        length="10"
+        color={percentageTextColor}
+        variant={TextVariant.BodyMDMedium}
+        testID={FORMATTED_PERCENTAGE_TEST_ID}
+      >
         {formattedPercentage}
-      </Text>
+      </SensitiveText>
     </View>
   );
 };

app/component-library/components-temp/Price/AggregatedPercentage/__snapshots__/AggregatedPercentage.test.tsx.snap

@@ -21,6 +21,7 @@ exports[`AggregatedPercentage should render correctly 1`] = `
         "lineHeight": 22,
       }
     }
+    testID="formatted-value-price-test-id"
   >
     +20 USD 
   </Text>
@@ -36,6 +37,7 @@ exports[`AggregatedPercentage should render correctly 1`] = `
         "lineHeight": 22,
       }
     }
+    testID="formatted-percentage-test-id"
   >
     (+11.11%)
   </Text>

app/component-library/components/Texts/SensitiveText/SensitiveText.types.ts

@@ -1,4 +1,5 @@
 // External dependencies.
+import React from 'react';
 import { TextProps } from '../Text/Text.types';
 
 /**
@@ -42,5 +43,5 @@ export interface SensitiveTextProps extends TextProps {
   /**
    * The text content to be displayed or hidden.
    */
-  children: string;
+  children: string | React.ReactNode;
 }

app/components/UI/AccountSelectorList/AccountSelectorList.styles.ts

@@ -13,6 +13,7 @@ const styleSheet = () =>
   StyleSheet.create({
     balancesContainer: {
       alignItems: 'flex-end',
+      flexDirection: 'column',
     },
     balanceLabel: { textAlign: 'right' },
   });

app/components/UI/AccountSelectorList/AccountSelectorList.tsx

@@ -11,7 +11,11 @@ import Cell, {
   CellVariant,
 } from '../../../component-library/components/Cells/Cell';
 import { useStyles } from '../../../component-library/hooks';
-import Text from '../../../component-library/components/Texts/Text';
+import { selectPrivacyMode } from '../../../selectors/preferencesController';
+import { TextColor } from '../../../component-library/components/Texts/Text';
+import SensitiveText, {
+  SensitiveTextLength,
+} from '../../../component-library/components/Texts/SensitiveText';
 import AvatarGroup from '../../../component-library/components/Avatars/AvatarGroup';
 import {
   formatAddress,
@@ -61,30 +65,50 @@ const AccountSelectorList = ({
       ? AvatarAccountType.Blockies
       : AvatarAccountType.JazzIcon,
   );
-
+  const privacyMode = useSelector(selectPrivacyMode);
   const getKeyExtractor = ({ address }: Account) => address;
 
   const renderAccountBalances = useCallback(
-    ({ fiatBalance, tokens }: Assets, address: string) => (
-      <View
-        style={styles.balancesContainer}
-        {...generateTestId(
-          Platform,
-          `${ACCOUNT_BALANCE_BY_ADDRESS_TEST_ID}-${address}`,
-        )}
-      >
-        <Text style={styles.balanceLabel}>{fiatBalance}</Text>
-        {tokens && (
-          <AvatarGroup
-            avatarPropsList={tokens.map((tokenObj) => ({
-              ...tokenObj,
-              variant: AvatarVariant.Token,
-            }))}
-          />
-        )}
-      </View>
-    ),
-    [styles.balancesContainer, styles.balanceLabel],
+    ({ fiatBalance, tokens }: Assets, address: string) => {
+      const fiatBalanceStrSplit = fiatBalance.split('\n');
+      const fiatBalanceAmount = fiatBalanceStrSplit[0] || '';
+      const tokenTicker = fiatBalanceStrSplit[1] || '';
+
+      return (
+        <View
+          style={styles.balancesContainer}
+          {...generateTestId(
+            Platform,
+            `${ACCOUNT_BALANCE_BY_ADDRESS_TEST_ID}-${address}`,
+          )}
+        >
+          <SensitiveText
+            length={SensitiveTextLength.Long}
+            style={styles.balanceLabel}
+            isHidden={privacyMode}
+          >
+            {fiatBalanceAmount}
+          </SensitiveText>
+          <SensitiveText
+            length={SensitiveTextLength.Short}
+            style={styles.balanceLabel}
+            isHidden={privacyMode}
+            color={privacyMode ? TextColor.Alternative : TextColor.Default}
+          >
+            {tokenTicker}
+          </SensitiveText>
+          {tokens && (
+            <AvatarGroup
+              avatarPropsList={tokens.map((tokenObj) => ({
+                ...tokenObj,
+                variant: AvatarVariant.Token,
+              }))}
+            />
+          )}
+        </View>
+      );
+    },
+    [styles.balancesContainer, styles.balanceLabel, privacyMode],
   );
 
   const onLongPress = useCallback(