From cd9192f8e5b2a0d7f83fbb3ac64e41c0d6e2b9a7 Mon Sep 17 00:00:00 2001
From: Adriano Cola <adriano@ensemble.com.br>
Date: Mon, 2 Sep 2024 09:04:19 -0300
Subject: [PATCH] feat: add option to hide balance, closes leather-io#5096

---
 src/app/components/account-total-balance.tsx  |  3 +-
 src/app/components/balance/btc-balance.tsx    |  8 ++-
 src/app/components/balance/stx-balance.tsx    |  7 ++-
 .../crypto-asset-item.layout.tsx              | 15 +++--
 .../card/components/available-balance.tsx     |  3 +-
 src/app/components/privacy/private-text.tsx   | 25 +++++++++
 .../transaction-item.layout.tsx               |  8 ++-
 .../stx-crypto-asset-item.tsx                 | 11 +++-
 src/app/features/settings/settings.tsx        | 21 +++++++
 src/app/pages/home/home.tsx                   |  6 ++
 src/app/store/settings/settings.actions.ts    |  5 ++
 src/app/store/settings/settings.selectors.ts  |  6 ++
 src/app/store/settings/settings.slice.ts      |  4 ++
 .../account/account.card.stories.tsx          | 32 +++++++++++
 .../ui/components/account/account.card.tsx    | 55 +++++++++++--------
 .../privacy/private-text.layout.tsx           | 35 ++++++++++++
 tests/selectors/settings.selectors.ts         |  1 +
 tests/selectors/shared-component.selectors.ts |  3 +
 tests/specs/settings/settings.spec.ts         | 23 ++++++++
 19 files changed, 235 insertions(+), 36 deletions(-)
 create mode 100644 src/app/components/privacy/private-text.tsx
 create mode 100644 src/app/ui/components/privacy/private-text.layout.tsx

diff --git a/src/app/components/account-total-balance.tsx b/src/app/components/account-total-balance.tsx
index 86e2123c93d..e7e4657251d 100644
--- a/src/app/components/account-total-balance.tsx
+++ b/src/app/components/account-total-balance.tsx
@@ -5,6 +5,7 @@ import { styled } from 'leather-styles/jsx';
 import { SkeletonLoader, shimmerStyles } from '@leather.io/ui';
 
 import { useTotalBalance } from '@app/common/hooks/balance/use-total-balance';
+import { PrivateText } from '@app/components/privacy/private-text';
 
 interface AccountTotalBalanceProps {
   btcAddress: string;
@@ -26,7 +27,7 @@ export const AccountTotalBalance = memo(({ btcAddress, stxAddress }: AccountTota
         textStyle="label.02"
         data-state={isLoadingAdditionalData || isFetching ? 'loading' : undefined}
       >
-        {totalUsdBalance}
+        <PrivateText>{totalUsdBalance}</PrivateText>
       </styled.span>
     </SkeletonLoader>
   );
diff --git a/src/app/components/balance/btc-balance.tsx b/src/app/components/balance/btc-balance.tsx
index 3e90079ae69..ab19a85241c 100644
--- a/src/app/components/balance/btc-balance.tsx
+++ b/src/app/components/balance/btc-balance.tsx
@@ -1,6 +1,8 @@
 import { Caption } from '@leather.io/ui';
 import { formatMoney } from '@leather.io/utils';
 
+import { PrivateText } from '@app/components/privacy/private-text';
+
 import { BitcoinNativeSegwitAccountLoader } from '../loaders/bitcoin-account-loader';
 import { BtcBalanceLoader } from '../loaders/btc-balance-loader';
 
@@ -9,7 +11,11 @@ export function BtcBalance() {
     <BitcoinNativeSegwitAccountLoader current>
       {signer => (
         <BtcBalanceLoader address={signer.address}>
-          {balance => <Caption>{formatMoney(balance.availableBalance)}</Caption>}
+          {balance => (
+            <Caption>
+              <PrivateText canClickToShow>{formatMoney(balance.availableBalance)}</PrivateText>
+            </Caption>
+          )}
         </BtcBalanceLoader>
       )}
     </BitcoinNativeSegwitAccountLoader>
diff --git a/src/app/components/balance/stx-balance.tsx b/src/app/components/balance/stx-balance.tsx
index 56b090692ee..133783ac913 100644
--- a/src/app/components/balance/stx-balance.tsx
+++ b/src/app/components/balance/stx-balance.tsx
@@ -4,6 +4,7 @@ import { useStxCryptoAssetBalance } from '@leather.io/query';
 import { Caption } from '@leather.io/ui';
 
 import { stacksValue } from '@app/common/stacks-utils';
+import { PrivateText } from '@app/components/privacy/private-text';
 
 interface StxBalanceProps {
   address: string;
@@ -21,5 +22,9 @@ export function StxBalance(props: StxBalanceProps) {
     [filteredBalanceQuery.data?.unlockedBalance.amount]
   );
 
-  return <Caption>{stxBalance}</Caption>;
+  return (
+    <Caption>
+      <PrivateText canClickToShow>{stxBalance}</PrivateText>
+    </Caption>
+  );
 }
diff --git a/src/app/components/crypto-asset-item/crypto-asset-item.layout.tsx b/src/app/components/crypto-asset-item/crypto-asset-item.layout.tsx
index 58d4865b988..896f09411b4 100644
--- a/src/app/components/crypto-asset-item/crypto-asset-item.layout.tsx
+++ b/src/app/components/crypto-asset-item/crypto-asset-item.layout.tsx
@@ -1,4 +1,4 @@
-import { Box, Flex, styled } from 'leather-styles/jsx';
+import { Box, Flex } from 'leather-styles/jsx';
 
 import type { Money } from '@leather.io/models';
 import {
@@ -11,6 +11,8 @@ import {
 } from '@leather.io/ui';
 import { spamFilter } from '@leather.io/utils';
 
+import { PrivateText } from '@app/components/privacy/private-text';
+import { useIsPrivacyMode } from '@app/store/settings/settings.selectors';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 import { parseCryptoAssetBalance } from './crypto-asset-item.layout.utils';
@@ -43,6 +45,7 @@ export function CryptoAssetItemLayout({
   titleLeft,
   titleRightBulletInfo,
 }: CryptoAssetItemLayoutProps) {
+  const isPrivacyMode = useIsPrivacyMode();
   const { availableBalanceString, dataTestId, formattedBalance } =
     parseCryptoAssetBalance(availableBalance);
 
@@ -50,17 +53,19 @@ export function CryptoAssetItemLayout({
     <SkeletonLoader width="126px" isLoading={isLoading}>
       <BasicTooltip
         asChild
-        label={formattedBalance.isAbbreviated ? availableBalanceString : undefined}
+        label={
+          formattedBalance.isAbbreviated && !isPrivacyMode ? availableBalanceString : undefined
+        }
         side="left"
       >
         <Flex alignItems="center" gap="space.02" textStyle="label.02">
           <BulletSeparator>
-            <styled.span
+            <PrivateText
               data-state={isLoadingAdditionalData ? 'loading' : undefined}
               className={shimmerStyles}
             >
               {formattedBalance.value} {balanceSuffix}
-            </styled.span>
+            </PrivateText>
             {titleRightBulletInfo}
           </BulletSeparator>
         </Flex>
@@ -76,7 +81,7 @@ export function CryptoAssetItemLayout({
             data-state={isLoadingAdditionalData ? 'loading' : undefined}
             className={shimmerStyles}
           >
-            {availableBalance.amount.toNumber() > 0 ? fiatBalance : null}
+            <PrivateText>{availableBalance.amount.toNumber() > 0 ? fiatBalance : null}</PrivateText>
           </Caption>
           {captionRightBulletInfo}
         </BulletSeparator>
diff --git a/src/app/components/layout/card/components/available-balance.tsx b/src/app/components/layout/card/components/available-balance.tsx
index 13e20c508a2..e78eb682c39 100644
--- a/src/app/components/layout/card/components/available-balance.tsx
+++ b/src/app/components/layout/card/components/available-balance.tsx
@@ -2,6 +2,7 @@ import { Box, Flex, HStack, styled } from 'leather-styles/jsx';
 
 import { InfoCircleIcon } from '@leather.io/ui';
 
+import { PrivateText } from '@app/components/privacy/private-text';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 interface AvailableBalanceProps {
@@ -26,7 +27,7 @@ export function AvailableBalance({
         </BasicTooltip>
       </HStack>
       <styled.span color="ink.text-subdued" mr="space.02" textStyle="caption.01">
-        {balance}
+        <PrivateText canClickToShow>{balance}</PrivateText>
       </styled.span>
     </Flex>
   );
diff --git a/src/app/components/privacy/private-text.tsx b/src/app/components/privacy/private-text.tsx
new file mode 100644
index 00000000000..2482cecc8dc
--- /dev/null
+++ b/src/app/components/privacy/private-text.tsx
@@ -0,0 +1,25 @@
+import { type HTMLStyledProps } from 'leather-styles/jsx';
+
+import { useTogglePrivacyMode } from '@app/store/settings/settings.actions';
+import { useIsPrivacyMode } from '@app/store/settings/settings.selectors';
+import { PrivateTextLayout } from '@app/ui/components/privacy/private-text.layout';
+
+interface PrivacyAwareProps extends HTMLStyledProps<'span'> {
+  children: React.ReactNode;
+  canClickToShow?: boolean;
+}
+
+export function PrivateText({ children, canClickToShow, ...rest }: PrivacyAwareProps) {
+  const isPrivacyMode = useIsPrivacyMode();
+  const togglePrivacyMode = useTogglePrivacyMode();
+
+  return (
+    <PrivateTextLayout
+      {...rest}
+      isPrivate={isPrivacyMode}
+      onShowValue={canClickToShow ? togglePrivacyMode : undefined}
+    >
+      {children}
+    </PrivateTextLayout>
+  );
+}
diff --git a/src/app/components/transaction-item/transaction-item.layout.tsx b/src/app/components/transaction-item/transaction-item.layout.tsx
index 1bff627b015..9b883b1f263 100644
--- a/src/app/components/transaction-item/transaction-item.layout.tsx
+++ b/src/app/components/transaction-item/transaction-item.layout.tsx
@@ -1,9 +1,11 @@
 import { ReactNode } from 'react';
 
-import { HStack, styled } from 'leather-styles/jsx';
+import { HStack } from 'leather-styles/jsx';
 
 import { Caption, ItemLayout, Pressable } from '@leather.io/ui';
 
+import { PrivateText } from '@app/components/privacy/private-text';
+
 interface TransactionItemLayoutProps {
   openTxLink(): void;
   rightElement?: ReactNode;
@@ -17,9 +19,9 @@ interface TransactionItemLayoutProps {
 
 function TxValue({ txValue }: { txValue: ReactNode }) {
   return (
-    <styled.span textStyle="label.02" px="space.02">
+    <PrivateText textStyle="label.02" px="space.02">
       {txValue}
-    </styled.span>
+    </PrivateText>
   );
 }
 
diff --git a/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx b/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx
index 74f9c291356..4ba1df7e1d4 100644
--- a/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx
+++ b/src/app/features/asset-list/stacks/stx-crypo-asset-item/stx-crypto-asset-item.tsx
@@ -10,6 +10,7 @@ import {
 } from '@leather.io/utils';
 
 import { CryptoAssetItemLayout } from '@app/components/crypto-asset-item/crypto-asset-item.layout';
+import { PrivateText } from '@app/components/privacy/private-text';
 
 interface StxCryptoAssetItemProps {
   balance: StxCryptoAssetBalance;
@@ -29,9 +30,15 @@ export function StxCryptoAssetItem({ balance, isLoading, onSelectAsset }: StxCry
     baseCurrencyAmountInQuote(availableBalance, marketData)
   );
   const titleRightBulletInfo = (
-    <styled.span>{formatMoneyWithoutSymbol(lockedBalance)} locked</styled.span>
+    <styled.span>
+      <PrivateText>{formatMoneyWithoutSymbol(lockedBalance)}</PrivateText> locked
+    </styled.span>
+  );
+  const captionRightBulletInfo = (
+    <Caption>
+      <PrivateText>{fiatLockedBalance}</PrivateText> locked
+    </Caption>
   );
-  const captionRightBulletInfo = <Caption>{fiatLockedBalance} locked</Caption>;
 
   return (
     <CryptoAssetItemLayout
diff --git a/src/app/features/settings/settings.tsx b/src/app/features/settings/settings.tsx
index b35ff5bc822..e9a14276fb2 100644
--- a/src/app/features/settings/settings.tsx
+++ b/src/app/features/settings/settings.tsx
@@ -12,6 +12,8 @@ import {
   ExitIcon,
   ExpandIcon,
   ExternalLinkIcon,
+  Eye1ClosedIcon,
+  Eye1Icon,
   Flag,
   GlobeTiltedIcon,
   KeyIcon,
@@ -37,6 +39,8 @@ import { SignOut } from '@app/features/settings/sign-out/sign-out-confirm';
 import { ThemeSheet } from '@app/features/settings/theme/theme-dialog';
 import { useLedgerDeviceTargetId } from '@app/store/ledger/ledger.selectors';
 import { useCurrentNetworkId } from '@app/store/networks/networks.selectors';
+import { useTogglePrivacyMode } from '@app/store/settings/settings.actions';
+import { useIsPrivacyMode } from '@app/store/settings/settings.selectors';
 
 import { openFeedbackSheet } from '../feedback-button/feedback-button';
 import { extractDeviceNameFromKnownTargetIds } from '../ledger/utils/generic-ledger-utils';
@@ -67,6 +71,9 @@ export function Settings({
   const { walletType } = useWalletType();
   const targetId = useLedgerDeviceTargetId();
 
+  const isPrivacyMode = useIsPrivacyMode();
+  const togglePrivacyMode = useTogglePrivacyMode();
+
   const location = useLocation();
 
   const { isPressed: showAdvancedMenuOptions } = useModifierKey('alt', 120);
@@ -189,6 +196,20 @@ export function Settings({
                   </Flex>
                 </Flag>
               </DropdownMenu.Item>
+
+              <DropdownMenu.Item
+                data-testid={SettingsSelectors.TogglePrivacy}
+                onSelect={() => {
+                  void analytics.track('click_toggle_privacy');
+                  togglePrivacyMode();
+                }}
+              >
+                <Flag img={isPrivacyMode ? <Eye1ClosedIcon /> : <Eye1Icon />}>
+                  <Flex justifyContent="space-between" textStyle="label.02">
+                    Toggle privacy
+                  </Flex>
+                </Flag>
+              </DropdownMenu.Item>
             </DropdownMenu.Group>
             <Divider />
             <DropdownMenu.Group>
diff --git a/src/app/pages/home/home.tsx b/src/app/pages/home/home.tsx
index 787cd57b9cb..97f9332d1d2 100644
--- a/src/app/pages/home/home.tsx
+++ b/src/app/pages/home/home.tsx
@@ -18,6 +18,8 @@ import { ModalBackgroundWrapper } from '@app/routes/components/modal-background-
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
+import { useTogglePrivacyMode } from '@app/store/settings/settings.actions';
+import { useIsPrivacyMode } from '@app/store/settings/settings.selectors';
 import { AccountCard } from '@app/ui/components/account/account.card';
 
 import { AccountActions } from './components/account-actions';
@@ -30,6 +32,8 @@ export function Home() {
   const navigate = useNavigate();
   const account = useCurrentStacksAccount();
   const currentAccountIndex = useCurrentAccountIndex();
+  const isPrivacyMode = useIsPrivacyMode();
+  const togglePrivacyMode = useTogglePrivacyMode();
 
   const { data: name = '', isFetching: isFetchingBnsName } = useAccountDisplayName({
     address: account?.address || '',
@@ -66,6 +70,8 @@ export function Home() {
           isFetchingBnsName={isFetchingBnsName}
           isLoadingBalance={isLoading}
           isLoadingAdditionalData={isLoadingAdditionalData}
+          isBalancePrivate={isPrivacyMode}
+          onShowBalance={togglePrivacyMode}
         >
           <AccountActions />
         </AccountCard>
diff --git a/src/app/store/settings/settings.actions.ts b/src/app/store/settings/settings.actions.ts
index eb38a7800b9..b65cadb9666 100644
--- a/src/app/store/settings/settings.actions.ts
+++ b/src/app/store/settings/settings.actions.ts
@@ -8,3 +8,8 @@ export function useDismissMessage() {
   const dispatch = useDispatch();
   return (messageId: string) => dispatch(settingsActions.messageDismissed(messageId));
 }
+
+export function useTogglePrivacyMode() {
+  const dispatch = useDispatch();
+  return () => dispatch(settingsActions.togglePrivacyMode());
+}
diff --git a/src/app/store/settings/settings.selectors.ts b/src/app/store/settings/settings.selectors.ts
index dbb64f30d64..47a9d637239 100644
--- a/src/app/store/settings/settings.selectors.ts
+++ b/src/app/store/settings/settings.selectors.ts
@@ -20,3 +20,9 @@ const selectDismissedMessageIds = createSelector(
 export function useDismissedMessageIds() {
   return useSelector(selectDismissedMessageIds);
 }
+
+const selectIsPrivacyMode = createSelector(selectSettings, state => state.isPrivacyMode ?? false);
+
+export function useIsPrivacyMode() {
+  return useSelector(selectIsPrivacyMode);
+}
diff --git a/src/app/store/settings/settings.slice.ts b/src/app/store/settings/settings.slice.ts
index edce40b7e0c..c1c94c7b78f 100644
--- a/src/app/store/settings/settings.slice.ts
+++ b/src/app/store/settings/settings.slice.ts
@@ -5,6 +5,7 @@ import { UserSelectedTheme } from '@app/common/theme-provider';
 interface InitialState {
   userSelectedTheme: UserSelectedTheme;
   dismissedMessages: string[];
+  isPrivacyMode?: boolean;
 }
 
 const initialState: InitialState = {
@@ -26,5 +27,8 @@ export const settingsSlice = createSlice({
     resetMessages(state) {
       state.dismissedMessages = [];
     },
+    togglePrivacyMode(state) {
+      state.isPrivacyMode = !state.isPrivacyMode;
+    },
   },
 });
diff --git a/src/app/ui/components/account/account.card.stories.tsx b/src/app/ui/components/account/account.card.stories.tsx
index 10b34416e8f..3c9f4631f8f 100644
--- a/src/app/ui/components/account/account.card.stories.tsx
+++ b/src/app/ui/components/account/account.card.stories.tsx
@@ -1,3 +1,6 @@
+import { useState } from 'react';
+
+import { TooltipProvider } from '@radix-ui/react-tooltip';
 import type { Meta } from '@storybook/react';
 import { Flex } from 'leather-styles/jsx';
 
@@ -15,6 +18,13 @@ const meta: Meta<typeof Component> = {
   component: Component,
   tags: ['autodocs'],
   title: 'Layout/AccountCard',
+  decorators: [
+    Story => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
 };
 
 export default meta;
@@ -75,3 +85,25 @@ export function AccountCardBnsNameLoading() {
     </Component>
   );
 }
+
+export function AccountCardPrivateBalance() {
+  const [isBalanceHidden, setisBalanceHidden] = useState(true);
+  return (
+    <Component
+      name="leather.btc"
+      balance="$1,000"
+      toggleSwitchAccount={() => null}
+      isLoadingBalance={false}
+      isFetchingBnsName={false}
+      isBalancePrivate={isBalanceHidden}
+      onShowBalance={() => setisBalanceHidden(false)}
+    >
+      <Flex justify="space-between">
+        <IconButton icon={<ArrowUpIcon />} label="Send" />
+        <IconButton icon={<ArrowDownIcon />} label="Receive" />
+        <IconButton icon={<PlusIcon />} label="Buy" />
+        <IconButton icon={<ArrowsRepeatLeftRightIcon />} label="Swap" />
+      </Flex>
+    </Component>
+  );
+}
diff --git a/src/app/ui/components/account/account.card.tsx b/src/app/ui/components/account/account.card.tsx
index 79725580e04..9f72347bfa3 100644
--- a/src/app/ui/components/account/account.card.tsx
+++ b/src/app/ui/components/account/account.card.tsx
@@ -1,12 +1,14 @@
 import { ReactNode } from 'react';
 
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
+import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
 import { Box, Flex, styled } from 'leather-styles/jsx';
 
 import { ChevronDownIcon, Link, SkeletonLoader, shimmerStyles } from '@leather.io/ui';
 
 import { useScaleText } from '@app/common/hooks/use-scale-text';
 import { AccountNameLayout } from '@app/components/account/account-name';
+import { PrivateTextLayout } from '@app/ui/components/privacy/private-text.layout';
 
 interface AccountCardProps {
   name: string;
@@ -16,16 +18,20 @@ interface AccountCardProps {
   isFetchingBnsName: boolean;
   isLoadingBalance: boolean;
   isLoadingAdditionalData?: boolean;
+  isBalancePrivate?: boolean;
+  onShowBalance?(): void;
 }
 
 export function AccountCard({
   name,
   balance,
   toggleSwitchAccount,
+  onShowBalance,
   children,
   isFetchingBnsName,
   isLoadingBalance,
   isLoadingAdditionalData,
+  isBalancePrivate,
 }: AccountCardProps) {
   const scaleTextRef = useScaleText();
 
@@ -37,28 +43,30 @@ export function AccountCard({
       px={{ base: 'space.05', sm: '0' }}
       pt={{ base: 'space.05', md: '0' }}
     >
-      <Link
-        _before={{ bg: 'transparent' }}
-        _hover={{ color: 'ink.action-primary-hover' }}
-        data-testid={SettingsSelectors.SwitchAccountTrigger}
-        onClick={toggleSwitchAccount}
-        variant="text"
-        maxWidth="fit-content"
-      >
-        <Flex>
-          <AccountNameLayout
-            isLoading={isFetchingBnsName}
-            data-testid={SettingsSelectors.CurrentAccountDisplayName}
-            textStyle="label.01"
-          >
-            {name}
-          </AccountNameLayout>
+      <Flex flexDir="row" justify="space-between" align="center">
+        <Link
+          _before={{ bg: 'transparent' }}
+          _hover={{ color: 'ink.action-primary-hover' }}
+          data-testid={SettingsSelectors.SwitchAccountTrigger}
+          onClick={toggleSwitchAccount}
+          variant="text"
+          maxWidth="fit-content"
+        >
+          <Flex>
+            <AccountNameLayout
+              isLoading={isFetchingBnsName}
+              data-testid={SettingsSelectors.CurrentAccountDisplayName}
+              textStyle="label.01"
+            >
+              {name}
+            </AccountNameLayout>
 
-          <Box mt="space.01" ml="space.02">
-            <ChevronDownIcon variant="small" />
-          </Box>
-        </Flex>
-      </Link>
+            <Box mt="space.01" ml="space.02">
+              <ChevronDownIcon variant="small" />
+            </Box>
+          </Flex>
+        </Link>
+      </Flex>
       <Flex flexDir={{ base: 'column', md: 'row' }} justify="space-between">
         <Box mb="space.05" mt="space.04">
           <SkeletonLoader width="200px" height="38px" isLoading={isLoadingBalance}>
@@ -66,6 +74,7 @@ export function AccountCard({
               textStyle="heading.02"
               data-state={isLoadingAdditionalData ? 'loading' : undefined}
               className={shimmerStyles}
+              data-testid={SharedComponentsSelectors.AccountCardBalanceText}
               style={{
                 whiteSpace: 'nowrap',
                 display: 'inline-block',
@@ -74,7 +83,9 @@ export function AccountCard({
               }}
               ref={scaleTextRef}
             >
-              {balance}
+              <PrivateTextLayout isPrivate={isBalancePrivate} onShowValue={onShowBalance}>
+                {balance}
+              </PrivateTextLayout>
             </styled.h1>
           </SkeletonLoader>
         </Box>
diff --git a/src/app/ui/components/privacy/private-text.layout.tsx b/src/app/ui/components/privacy/private-text.layout.tsx
new file mode 100644
index 00000000000..cbe3cb4593b
--- /dev/null
+++ b/src/app/ui/components/privacy/private-text.layout.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { type HTMLStyledProps, styled } from 'leather-styles/jsx';
+
+import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
+
+interface PrivateTextLayoutProps extends HTMLStyledProps<'span'> {
+  children: React.ReactNode;
+  isPrivate?: boolean;
+  onShowValue?(): void;
+}
+
+export function PrivateTextLayout({
+  isPrivate,
+  onShowValue,
+  children,
+  ...rest
+}: PrivateTextLayoutProps) {
+  const canShowValue = isPrivate && onShowValue;
+
+  return (
+    <BasicTooltip label="Show value" disabled={!canShowValue} asChild>
+      <styled.span
+        {...rest}
+        onClick={canShowValue ? onShowValue : undefined}
+        cursor={canShowValue ? 'pointer' : undefined}
+        display="inline-block"
+        overflow="hidden"
+        fontFamily={isPrivate ? 'Diatype !important' : undefined}
+      >
+        {isPrivate ? '***' : children}
+      </styled.span>
+    </BasicTooltip>
+  );
+}
diff --git a/tests/selectors/settings.selectors.ts b/tests/selectors/settings.selectors.ts
index 2af823d329b..e9e5852ed55 100644
--- a/tests/selectors/settings.selectors.ts
+++ b/tests/selectors/settings.selectors.ts
@@ -25,4 +25,5 @@ export enum SettingsSelectors {
   SwitchAccountMenuItem = 'switch-account-menu-item',
   SwitchAccountItemIndex = 'switch-account-item-[index]',
   OpenWalletInNewTab = 'open-wallet-in-new-tab',
+  TogglePrivacy = 'toggle-privacy',
 }
diff --git a/tests/selectors/shared-component.selectors.ts b/tests/selectors/shared-component.selectors.ts
index 1f98f53e98f..52543028e21 100644
--- a/tests/selectors/shared-component.selectors.ts
+++ b/tests/selectors/shared-component.selectors.ts
@@ -3,6 +3,9 @@ export enum SharedComponentsSelectors {
   AddressDisplayer = 'address-displayer',
   AddressDisplayerPart = 'address-displayer-part',
 
+  // AccountCard
+  AccountCardBalanceText = 'account-card-balance-text',
+
   // InfoCard
   InfoCardAssetValue = 'info-card-asset-value',
   InfoCardRowValue = 'info-card-row-value',
diff --git a/tests/specs/settings/settings.spec.ts b/tests/specs/settings/settings.spec.ts
index 5afe444075b..f953b840a0c 100644
--- a/tests/specs/settings/settings.spec.ts
+++ b/tests/specs/settings/settings.spec.ts
@@ -1,6 +1,7 @@
 import { TEST_PASSWORD } from '@tests/mocks/constants';
 import { OnboardingSelectors } from '@tests/selectors/onboarding.selectors';
 import { SettingsSelectors } from '@tests/selectors/settings.selectors';
+import { SharedComponentsSelectors } from '@tests/selectors/shared-component.selectors';
 
 import { test } from '../../fixtures/fixtures';
 
@@ -70,4 +71,26 @@ test.describe('Settings menu', () => {
     const networkListItems = await page.getByTestId(SettingsSelectors.NetworkListItem).all();
     test.expect(networkListItems).toHaveLength(5);
   });
+
+  test('that menu item can toggle privacy', async ({ page, homePage }) => {
+    const visibleBalanceText = await homePage.page
+      .getByTestId(SharedComponentsSelectors.AccountCardBalanceText)
+      .textContent();
+    test.expect(visibleBalanceText).toBeTruthy();
+
+    await homePage.clickSettingsButton();
+    await page.getByTestId(SettingsSelectors.TogglePrivacy).click();
+
+    // just checks that the balance text changed (don't care about the implementation)
+    await test
+      .expect(homePage.page.getByTestId(SharedComponentsSelectors.AccountCardBalanceText))
+      .not.toHaveText(visibleBalanceText!);
+
+    await homePage.clickSettingsButton();
+    await page.getByTestId(SettingsSelectors.TogglePrivacy).click();
+
+    await test
+      .expect(homePage.page.getByTestId(SharedComponentsSelectors.AccountCardBalanceText))
+      .toHaveText(visibleBalanceText!);
+  });
 });