feat: add option to hide balance, closes leather-io#5096

adrianocola · Sep 3, 2024 · 57ee6b0 · 57ee6b0
1 parent ad2d69f
commit 57ee6b0
Show file tree

Hide file tree

Showing 14 changed files with 188 additions and 32 deletions.
diff --git 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 { HideableBalance } from '@app/components/balance/hideable-balance';
 
 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}
+        <HideableBalance>{totalUsdBalance}</HideableBalance>
       </styled.span>
     </SkeletonLoader>
   );

diff --git a/src/app/components/balance/hideable-balance.tsx b/src/app/components/balance/hideable-balance.tsx
@@ -0,0 +1,14 @@
+import { type HTMLStyledProps, styled } from 'leather-styles/jsx';
+
+import { useHideBalance } from '@app/store/settings/settings.selectors';
+
+interface HideableBalanceProps extends HTMLStyledProps<'span'> {
+  children: React.ReactNode;
+  forceHidden?: boolean;
+}
+
+export function HideableBalance({ forceHidden, children, ...rest }: HideableBalanceProps) {
+  const hideBalance = useHideBalance();
+
+  return <styled.span {...rest}>{hideBalance || forceHidden ? '•••••' : children}</styled.span>;
+}
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
@@ -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 { HideableBalance } from '@app/components/balance/hideable-balance';
+import { useHideBalance } from '@app/store/settings/settings.selectors';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
 
 import { parseCryptoAssetBalance } from './crypto-asset-item.layout.utils';
@@ -43,24 +45,25 @@ export function CryptoAssetItemLayout({
   titleLeft,
   titleRightBulletInfo,
 }: CryptoAssetItemLayoutProps) {
+  const hideBalance = useHideBalance();
   const { availableBalanceString, dataTestId, formattedBalance } =
     parseCryptoAssetBalance(availableBalance);
 
   const titleRight = (
     <SkeletonLoader width="126px" isLoading={isLoading}>
       <BasicTooltip
         asChild
-        label={formattedBalance.isAbbreviated ? availableBalanceString : undefined}
+        label={formattedBalance.isAbbreviated && !hideBalance ? availableBalanceString : undefined}
         side="left"
       >
         <Flex alignItems="center" gap="space.02" textStyle="label.02">
           <BulletSeparator>
-            <styled.span
+            <HideableBalance
               data-state={isLoadingAdditionalData ? 'loading' : undefined}
               className={shimmerStyles}
             >
               {formattedBalance.value} {balanceSuffix}
-            </styled.span>
+            </HideableBalance>
             {titleRightBulletInfo}
           </BulletSeparator>
         </Flex>
@@ -76,7 +79,9 @@ export function CryptoAssetItemLayout({
             data-state={isLoadingAdditionalData ? 'loading' : undefined}
             className={shimmerStyles}
           >
-            {availableBalance.amount.toNumber() > 0 ? fiatBalance : null}
+            <HideableBalance>
+              {availableBalance.amount.toNumber() > 0 ? fiatBalance : null}
+            </HideableBalance>
           </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
@@ -2,6 +2,7 @@ import { Box, Flex, HStack, styled } from 'leather-styles/jsx';
 
 import { InfoCircleIcon } from '@leather.io/ui';
 
+import { HideableBalance } from '@app/components/balance/hideable-balance';
 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}
+        <HideableBalance>{balance}</HideableBalance>
       </styled.span>
     </Flex>
   );

diff --git 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 { HideableBalance } from '@app/components/balance/hideable-balance';
+
 interface TransactionItemLayoutProps {
   openTxLink(): void;
   rightElement?: ReactNode;
@@ -42,7 +44,11 @@ export function TransactionItemLayout({
           </HStack>
         }
         titleRight={
-          rightElement ? rightElement : <styled.span textStyle="label.02">{txValue}</styled.span>
+          rightElement ? (
+            rightElement
+          ) : (
+            <HideableBalance textStyle="label.02">{txValue}</HideableBalance>
+          )
         }
       />
     </Pressable>

diff --git 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 { useToggleHideBalance } from '@app/store/settings/settings.actions';
+import { useHideBalance } 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 hideBalance = useHideBalance();
+  const toggleHideBalance = useToggleHideBalance();
+
   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.ToggleTheme}
+                onSelect={() => {
+                  void analytics.track('click_toggle_privacy');
+                  toggleHideBalance();
+                }}
+              >
+                <Flag img={hideBalance ? <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
@@ -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 { useToggleHideBalance } from '@app/store/settings/settings.actions';
+import { useHideBalance } 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 hideBalance = useHideBalance();
+  const toggleHideBalance = useToggleHideBalance();
 
   const { data: name = '', isFetching: isFetchingBnsName } = useAccountDisplayName({
     address: account?.address || '',
@@ -63,9 +67,11 @@ export function Home() {
           name={name}
           balance={totalUsdBalance}
           toggleSwitchAccount={() => setIsShowingSwitchAccount(!isShowingSwitchAccount)}
+          toggleHideBlance={toggleHideBalance}
           isFetchingBnsName={isFetchingBnsName}
           isLoadingBalance={isLoading}
           isLoadingAdditionalData={isLoadingAdditionalData}
+          hideBalance={hideBalance}
         >
           <AccountActions />
         </AccountCard>

diff --git 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 useToggleHideBalance() {
+  const dispatch = useDispatch();
+  return () => dispatch(settingsActions.toggleHideBlance());
+}
diff --git 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 selectHideBalance = createSelector(selectSettings, state => state.hideBalance ?? false);
+
+export function useHideBalance() {
+  return useSelector(selectHideBalance);
+}
diff --git 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[];
+  hideBalance?: boolean;
 }
 
 const initialState: InitialState = {
@@ -26,5 +27,8 @@ export const settingsSlice = createSlice({
     resetMessages(state) {
       state.dismissedMessages = [];
     },
+    toggleHideBlance(state) {
+      state.hideBalance = !state.hideBalance;
+    },
   },
 });
diff --git a/src/app/ui/components/account/account.card.stories.tsx b/src/app/ui/components/account/account.card.stories.tsx
@@ -25,6 +25,7 @@ export function AccountCard() {
       name="leather.btc"
       balance="$1,000"
       toggleSwitchAccount={() => null}
+      toggleHideBlance={() => null}
       isLoadingBalance={false}
       isFetchingBnsName={false}
     >
@@ -44,6 +45,7 @@ export function AccountCardLoading() {
       name="leather.btc"
       balance="$1,000"
       toggleSwitchAccount={() => null}
+      toggleHideBlance={() => null}
       isLoadingBalance
       isFetchingBnsName={false}
     >
@@ -63,6 +65,7 @@ export function AccountCardBnsNameLoading() {
       name="leather.btc"
       balance="$1,000"
       toggleSwitchAccount={() => null}
+      toggleHideBlance={() => null}
       isLoadingBalance={false}
       isFetchingBnsName
     >
@@ -75,3 +78,24 @@ export function AccountCardBnsNameLoading() {
     </Component>
   );
 }
+
+export function AccountCardHiddenBalance() {
+  return (
+    <Component
+      name="leather.btc"
+      balance="$1,000"
+      toggleSwitchAccount={() => null}
+      toggleHideBlance={() => null}
+      isLoadingBalance={false}
+      isFetchingBnsName={false}
+      hideBalance
+    >
+      <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>
+  );
+}