Balance hiding (#144)

* adds balance hiding functionality

* revert file

* remove unnecessary prop drilling

* hide transaction balances

* pr feedback

* adds balanceMask variable

Author: cgjohn

packages/mobile-app/app/(drawer)/account/account-settings/account-select/index.tsx

@@ -3,11 +3,12 @@ import { Stack, useRouter } from "expo-router";
 import { useFacade } from "@/data/facades";
 import { CurrencyUtils } from "@ironfish/sdk";
 import { Layout, Text, Button, Card, Spinner } from "@ui-kitten/components";
-import React from "react";
+import { useHideBalances } from "@/hooks/useHideBalances";
 
 export default function AccountSelect() {
   const router = useRouter();
   const facade = useFacade();
+  const { hideBalances, balanceMask } = useHideBalances();
 
   const getAccountsResult = facade.getAccounts.useQuery(undefined, {
     refetchInterval: 1000,
@@ -49,7 +50,9 @@ export default function AccountSelect() {
                     <Layout>
                       <Text category="s1">{account.name}</Text>
                       <Text category="p2" appearance="hint">
-                        {`${CurrencyUtils.render(account.balances.iron.confirmed)} $IRON`}
+                        {hideBalances
+                          ? `${balanceMask} $IRON`
+                          : `${CurrencyUtils.render(account.balances.iron.confirmed)} $IRON`}
                       </Text>
                     </Layout>
                     {account.active && (

packages/mobile-app/app/(drawer)/account/account-settings/index.tsx

@@ -5,8 +5,9 @@ import {
   Menu,
   MenuItem,
   Toggle,
+  Text,
 } from "@ui-kitten/components";
-import { StyleSheet } from "react-native";
+import { StyleSheet, View } from "react-native";
 import { Stack, useRouter } from "expo-router";
 import { useFacade } from "@/data/facades";
 import { CurrencyUtils } from "@ironfish/sdk";
@@ -15,6 +16,7 @@ import { useEffect, useState, useCallback } from "react";
 import { useAccount } from "@/providers/AccountProvider";
 import { SafeAreaView } from "react-native";
 import { Spinner } from "@ui-kitten/components";
+import { useHideBalances } from "@/hooks/useHideBalances";
 
 const ForwardIcon = (props: any): IconElement => (
   <Icon {...props} name="arrow-ios-forward" />
@@ -46,14 +48,18 @@ const ACCOUNT_SETTINGS_ROUTES = {
 function getMenuItems({
   currentAccountName,
   currentAccountBalance,
+  hideBalances,
+  balanceMask,
 }: {
   currentAccountName: string;
   currentAccountBalance: string;
+  hideBalances: boolean;
+  balanceMask: string;
 }) {
   return Object.entries(ACCOUNT_SETTINGS_ROUTES).map(([key, route]) => {
     if (key === "accountSelect") {
       return {
-        title: `${currentAccountName} (${currentAccountBalance} $IRON)`,
+        title: `${currentAccountName} (${hideBalances ? balanceMask : currentAccountBalance} $IRON)`,
         href: route.href,
       };
     }
@@ -70,8 +76,9 @@ function getMenuItems({
 function AccountSettingsContent({ accountName }: { accountName: string }) {
   const router = useRouter();
   const facade = useFacade();
+  const { balanceMask } = useHideBalances();
 
-  // I tried using isPending and variables on the mutation, but it was causing toggle
+  // I tried using the useHideBalances hook but it was causing toggle
   // re-renders that made the toggle animation jittery.
   const appSettings = facade.getAppSettings.useQuery();
   const [hideBalances, setHideBalances] = useState(false);
@@ -105,6 +112,8 @@ function AccountSettingsContent({ accountName }: { accountName: string }) {
     currentAccountBalance: CurrencyUtils.render(
       getAccountResult.data?.balances.iron.confirmed ?? "0",
     ),
+    hideBalances,
+    balanceMask,
   });
 
   const handleSelect = (index: number) => {
@@ -128,12 +137,26 @@ function AccountSettingsContent({ accountName }: { accountName: string }) {
             .concat(
               <MenuItem
                 key="hide-balances"
-                title="Hide Balances"
-                accessoryRight={() => (
-                  <Toggle
-                    checked={hideBalances}
-                    onChange={onToggleHideBalances}
-                  />
+                title={(props) => (
+                  <Layout style={styles.tipContainer}>
+                    <View style={styles.textColumn}>
+                      <Text>Hide Balances</Text>
+                      <Text
+                        category="c1"
+                        appearance="hint"
+                        style={styles.tipText}
+                      >
+                        Tip: Long press on your balance to quickly toggle
+                        visibility
+                      </Text>
+                    </View>
+                    <View style={styles.toggleContainer}>
+                      <Toggle
+                        checked={hideBalances}
+                        onChange={onToggleHideBalances}
+                      />
+                    </View>
+                  </Layout>
                 )}
               />,
             )}
@@ -170,7 +193,23 @@ const styles = StyleSheet.create({
   menu: {
     flex: 1,
   },
-  toggle: {
-    marginRight: 8,
+  tipContainer: {
+    flexDirection: "row",
+    width: "100%",
+  },
+  textColumn: {
+    flex: 1,
+    paddingLeft: 12,
+    paddingRight: 8,
+  },
+  toggleContainer: {
+    justifyContent: "center",
+    alignItems: "flex-end",
+    paddingRight: 12,
+  },
+  tipText: {
+    marginTop: 4,
+    width: "80%",
+    fontStyle: "italic",
   },
 });

packages/mobile-app/app/(drawer)/account/index.tsx

@@ -12,7 +12,7 @@ import {
   Spinner,
   Modal,
 } from "@ui-kitten/components";
-import { StyleSheet, View } from "react-native";
+import { StyleSheet, View, Pressable } from "react-native";
 import { setStringAsync } from "expo-clipboard";
 import Animated, {
   useAnimatedScrollHandler,
@@ -28,6 +28,8 @@ import { CurrencyUtils } from "@ironfish/sdk";
 import { CONFIRMATIONS } from "@/data/constants";
 import { AssetRow } from "@/components/account/AssetRow";
 import { TransactionRow } from "@/components/account/TransactionRow";
+import { useHideBalances } from "@/hooks/useHideBalances";
+import { SettingsKey } from "@/data/settings/db";
 
 const ReceiveIcon = (props: IconProps) => (
   <Icon {...props} name="download-outline" />
@@ -46,11 +48,13 @@ interface Balance {
 }
 
 export default function Balances() {
+  const { hideBalances, balanceMask } = useHideBalances();
   const facade = useFacade();
   const { account, accountName, isLoading } = useAccount();
   const scrollYOffset = useSharedValue(0);
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [addressModalVisible, setAddressModalVisible] = useState(false);
+  const { mutate: setAppSetting } = facade.setAppSetting.useMutation();
 
   const scrollHandler = useAnimatedScrollHandler((event) => {
     scrollYOffset.value = event.contentOffset.y;
@@ -105,6 +109,13 @@ export default function Balances() {
     },
   );
 
+  const handleLongPress = () => {
+    setAppSetting({
+      key: SettingsKey.HideBalances,
+      value: hideBalances ? "false" : "true",
+    });
+  };
+
   if (isLoading || !account) {
     return (
       <SafeAreaView>
@@ -178,44 +189,48 @@ export default function Balances() {
                 paddingTop: 40,
               }}
             >
-              <Layout style={styles.headerBalance}>
-                <Text category="h1" style={styles.balanceAmount}>
-                  {CurrencyUtils.render(
-                    account?.balances.iron.confirmed ?? "0",
-                  )}
-                </Text>
-                <Text category="s1" appearance="hint">
-                  {getIronAsset.data?.verification.status === "verified"
-                    ? getIronAsset.data.verification.symbol
-                    : (getIronAsset.data?.name ?? "IRON")}
-                </Text>
-
-                <Layout style={styles.actionButtons}>
-                  <Button
-                    appearance="ghost"
-                    accessoryLeft={ReceiveIcon}
-                    style={styles.actionButton}
-                    onPress={() => setAddressModalVisible(true)}
-                  >
-                    Receive
-                  </Button>
-                  <Button
-                    appearance="ghost"
-                    accessoryLeft={SendIcon}
-                    style={styles.actionButton}
-                    onPress={() => router.push("/(drawer)/account/send")}
-                  >
-                    Send
-                  </Button>
-                  <Button
-                    appearance="ghost"
-                    accessoryLeft={BridgeIcon}
-                    style={styles.actionButton}
-                    onPress={() => router.push("/(drawer)/account/bridge")}
-                  >
-                    Bridge
-                  </Button>
+              <Pressable onLongPress={handleLongPress} delayLongPress={2000}>
+                <Layout style={styles.headerBalance}>
+                  <Text category="h1" style={styles.balanceAmount}>
+                    {hideBalances
+                      ? balanceMask
+                      : CurrencyUtils.render(
+                          account?.balances.iron.confirmed ?? "0",
+                        )}
+                  </Text>
+                  <Text category="s1" appearance="hint">
+                    {getIronAsset.data?.verification.status === "verified"
+                      ? getIronAsset.data.verification.symbol
+                      : (getIronAsset.data?.name ?? "IRON")}
+                  </Text>
                 </Layout>
+              </Pressable>
+
+              <Layout style={styles.actionButtons}>
+                <Button
+                  appearance="ghost"
+                  accessoryLeft={ReceiveIcon}
+                  style={styles.actionButton}
+                  onPress={() => setAddressModalVisible(true)}
+                >
+                  Receive
+                </Button>
+                <Button
+                  appearance="ghost"
+                  accessoryLeft={SendIcon}
+                  style={styles.actionButton}
+                  onPress={() => router.push("/(drawer)/account/send")}
+                >
+                  Send
+                </Button>
+                <Button
+                  appearance="ghost"
+                  accessoryLeft={BridgeIcon}
+                  style={styles.actionButton}
+                  onPress={() => router.push("/(drawer)/account/bridge")}
+                >
+                  Bridge
+                </Button>
               </Layout>
             </Animated.View>
 
@@ -265,6 +280,11 @@ export default function Balances() {
                       }
                       amount={CurrencyUtils.render(
                         account.balances.iron.confirmed,
+                        hideBalances,
+                        account.balances.iron.assetId,
+                        getIronAsset.data?.verification.status === "verified"
+                          ? getIronAsset.data.verification
+                          : undefined,
                       )}
                       verified={
                         getIronAsset.data?.verification.status === "verified"
@@ -289,7 +309,7 @@ export default function Balances() {
                           }
                           amount={CurrencyUtils.render(
                             balance.confirmed,
-                            false,
+                            hideBalances,
                             balance.assetId,
                             asset?.verification.status === "verified"
                               ? asset.verification

packages/mobile-app/app/(drawer)/account/send/index.tsx

@@ -6,6 +6,7 @@ import { CurrencyUtils } from "@ironfish/sdk";
 import { useQueries } from "@tanstack/react-query";
 import { Asset } from "@/data/facades/chain/types";
 import { AccountBalance } from "@/data/facades/wallet/types";
+import { useHideBalances } from "@/hooks/useHideBalances";
 import {
   Layout,
   Text,
@@ -41,6 +42,7 @@ type TransactionState = "sending" | "sent" | "idle";
 export default function Send() {
   const facade = useFacade();
   const router = useRouter();
+  const { hideBalances, balanceMask } = useHideBalances();
 
   const [selectedAssetId, setSelectedAssetId] =
     useState<string>(IRON_ASSET_ID_HEX);
@@ -95,12 +97,12 @@ export default function Send() {
     return map;
   }, [getCustomAssets]);
 
-  // Create asset options for the select component
+  // Update asset options to respect hide balances
   const assetOptions = useMemo(() => {
     const options = [
       {
         id: IRON_ASSET_ID_HEX,
-        title: `IRON (${CurrencyUtils.render(getAccountResult.data?.balances.iron.available ?? "0")})`,
+        title: `IRON (${hideBalances ? balanceMask : CurrencyUtils.render(getAccountResult.data?.balances.iron.available ?? "0")})`,
       },
     ];
 
@@ -109,20 +111,24 @@ export default function Send() {
       if (asset) {
         options.push({
           id: b.assetId,
-          title: `${asset.name} (${CurrencyUtils.render(
-            b.available,
-            false,
-            b.assetId,
-            asset.verification.status === "verified"
-              ? asset.verification
-              : undefined,
-          )})`,
+          title: `${asset.name} (${
+            hideBalances
+              ? balanceMask
+              : CurrencyUtils.render(
+                  b.available,
+                  false,
+                  b.assetId,
+                  asset.verification.status === "verified"
+                    ? asset.verification
+                    : undefined,
+                )
+          })`,
         });
       }
     });
 
     return options;
-  }, [getAccountResult.data, assetMap]);
+  }, [getAccountResult.data, assetMap, hideBalances, balanceMask]);
 
   // Find the selected asset index
   const selectedIndex = useMemo(() => {
@@ -303,7 +309,7 @@ export default function Send() {
             {transactionState === "sending" ? "Sending..." : "Sent!"}
           </Text>
           <Text category="s1" style={styles.amountText}>
-            {amount}{" "}
+            {hideBalances ? balanceMask : amount}{" "}
             {selectedAssetId === IRON_ASSET_ID_HEX
               ? "$IRON"
               : (assetMap.get(selectedAssetId)?.name ?? "Unknown")}{" "}