adds balance hiding functionality

cgjohn · cgjohn · commit fd9d9009069b · 2025-02-24T16:22:14.000-06:00
diff --git a/packages/mobile-app/app/(drawer)/account/account-settings/export-account/index.tsx b/packages/mobile-app/app/(drawer)/account/account-settings/export-account/index.tsx
@@ -11,7 +11,7 @@ export default function ExportAccount() {
   const [modalVisible, setModalVisible] = useState(false);
   const [exportType, setExportType] = useState<AccountFormat | null>(null);
   const [exportedContent, setExportedContent] = useState<string | null>(null);
-  const [holdProgress, setHoldProgress] = useState(3);
+  const [holdProgress, setHoldProgress] = useState(2);
   const holdTimerRef = useRef<NodeJS.Timeout | null>(null);
   const isHoldingRef = useRef(false);
 
@@ -33,7 +33,7 @@ export default function ExportAccount() {
   const handleExport = async (format: AccountFormat) => {
     setExportType(format);
     setExportedContent(null);
-    setHoldProgress(3);
+    setHoldProgress(2);
     setModalVisible(true);
   };
 
@@ -61,7 +61,7 @@ export default function ExportAccount() {
       holdTimerRef.current = null;
     }
     isHoldingRef.current = false;
-    setHoldProgress(3);
+    setHoldProgress(2);
   };
 
   const handleReveal = async () => {
diff --git a/packages/mobile-app/app/(drawer)/account/account-settings/index.tsx b/packages/mobile-app/app/(drawer)/account/account-settings/index.tsx
@@ -6,8 +6,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";
@@ -47,14 +48,16 @@ const ACCOUNT_SETTINGS_ROUTES = {
 function getMenuItems({
   currentAccountName,
   currentAccountBalance,
+  hideBalances,
 }: {
   currentAccountName: string;
   currentAccountBalance: string;
+  hideBalances: boolean;
 }) {
   return Object.entries(ACCOUNT_SETTINGS_ROUTES).map(([key, route]) => {
     if (key === "accountSelect") {
       return {
-        title: `${currentAccountName} (${currentAccountBalance} $IRON)`,
+        title: `${currentAccountName} (${hideBalances ? "•••••" : currentAccountBalance} $IRON)`,
         href: route.href,
       };
     }
@@ -106,6 +109,7 @@ function AccountSettingsContent({ accountName }: { accountName: string }) {
     currentAccountBalance: CurrencyUtils.render(
       getAccountResult.data?.balances.iron.confirmed ?? "0",
     ),
+    hideBalances,
   });
 
   const handleSelect = (index: number) => {
@@ -129,12 +133,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>
                 )}
               />,
             )}
@@ -172,7 +190,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",
   },
 });
diff --git a/packages/mobile-app/app/(drawer)/account/index.tsx b/packages/mobile-app/app/(drawer)/account/index.tsx
@@ -1,5 +1,5 @@
 import { StatusBar } from "expo-status-bar";
-import { useState } from "react";
+import { useState, useRef, useEffect } from "react";
 import {
   Layout,
   Text,
@@ -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,14 @@ interface Balance {
 }
 
 export default function Balances() {
+  const hideBalances = useHideBalances();
+  const longPressTimerRef = useRef<NodeJS.Timeout | null>(null);
   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 +110,30 @@ export default function Balances() {
     },
   );
 
+  const handlePressIn = () => {
+    longPressTimerRef.current = setTimeout(() => {
+      setAppSetting({
+        key: SettingsKey.HideBalances,
+        value: hideBalances ? "false" : "true",
+      });
+    }, 3000);
+  };
+
+  const handlePressOut = () => {
+    if (longPressTimerRef.current) {
+      clearTimeout(longPressTimerRef.current);
+      longPressTimerRef.current = null;
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      if (longPressTimerRef.current) {
+        clearTimeout(longPressTimerRef.current);
+      }
+    };
+  }, []);
+
   if (isLoading || !account) {
     return (
       <SafeAreaView>
@@ -178,44 +207,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 onPressIn={handlePressIn} onPressOut={handlePressOut}>
+                <Layout style={styles.headerBalance}>
+                  <Text category="h1" style={styles.balanceAmount}>
+                    {hideBalances
+                      ? "•••••"
+                      : 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 +298,9 @@ export default function Balances() {
                       }
                       amount={CurrencyUtils.render(
                         account.balances.iron.confirmed,
+                        hideBalances,
+                        account.balances.iron.assetId,
+                        getIronAsset.data?.verification,
                       )}
                       verified={
                         getIronAsset.data?.verification.status === "verified"
@@ -274,6 +310,7 @@ export default function Balances() {
                           ? getIronAsset.data.verification.logoURI
                           : undefined
                       }
+                      forceHideBalance={hideBalances}
                     />
 
                     {/* Custom Assets */}
@@ -289,7 +326,7 @@ export default function Balances() {
                           }
                           amount={CurrencyUtils.render(
                             balance.confirmed,
-                            false,
+                            hideBalances,
                             balance.assetId,
                             asset?.verification.status === "verified"
                               ? asset.verification
@@ -301,6 +338,7 @@ export default function Balances() {
                               ? asset.verification.logoURI
                               : undefined
                           }
+                          forceHideBalance={hideBalances}
                         />
                       );
                     })}
diff --git a/packages/mobile-app/components/account/AssetRow.tsx b/packages/mobile-app/components/account/AssetRow.tsx
@@ -1,18 +1,25 @@
 import { Layout, Text, Card } from "@ui-kitten/components";
 import { Image } from "expo-image";
 import { StyleSheet } from "react-native";
+import { useHideBalances } from "@/hooks/useHideBalances";
 
 export function AssetRow({
   name,
   amount,
   verified,
   image,
+  forceHideBalance,
 }: {
   name: string;
   amount: string;
   verified: boolean;
   image?: string;
+  forceHideBalance?: boolean;
 }) {
+  const hideBalancesGlobal = useHideBalances();
+  const hideBalances =
+    forceHideBalance !== undefined ? forceHideBalance : hideBalancesGlobal;
+
   return (
     <Card style={styles.assetCard}>
       <Layout style={styles.assetCardContent}>
@@ -24,7 +31,7 @@ export function AssetRow({
             {name} {verified ? "(Verified)" : ""}
           </Text>
           <Text category="p2" appearance="hint">
-            {amount}
+            {hideBalances ? "•••••" : amount}
           </Text>
         </Layout>
       </Layout>
diff --git a/packages/mobile-app/components/account/TransactionRow.tsx b/packages/mobile-app/components/account/TransactionRow.tsx
@@ -11,6 +11,7 @@ import { Image } from "expo-image";
 import { ReceiveArrow } from "@/svgs/ReceiveArrow";
 import { SendArrow } from "@/svgs/SendArrow";
 import * as CurrencyUtils from "@/utils/currency";
+import { useHideBalances } from "@/hooks/useHideBalances";
 
 function renderTransactionType(txType: TransactionType): string {
   switch (txType) {
@@ -94,6 +95,7 @@ const assetBalanceCompare = (
 export function TransactionRow({ transaction }: { transaction: Transaction }) {
   const facade = useFacade();
   const router = useRouter();
+  const hideBalances = useHideBalances();
 
   const getAssets = useQueries({
     queries:
@@ -196,7 +198,7 @@ export function TransactionRow({ transaction }: { transaction: Transaction }) {
                     color: delta.delta.startsWith("-") ? "black" : "#5BA54C",
                   }}
                 >
-                  {delta.delta}
+                  {hideBalances ? "•••••" : delta.delta}
                 </Text>
               </Layout>
             );
diff --git a/packages/mobile-app/hooks/useHideBalances.ts b/packages/mobile-app/hooks/useHideBalances.ts
@@ -0,0 +1,18 @@
+import { useFacade } from "@/data/facades";
+import { useEffect, useState } from "react";
+
+/**
+ * Hook that provides the current hide balances setting
+ * @returns The current hide balances state
+ */
+export function useHideBalances(): boolean {
+  const facade = useFacade();
+  const [hideBalances, setHideBalances] = useState(false);
+  const appSettings = facade.getAppSettings.useQuery();
+
+  useEffect(() => {
+    setHideBalances(appSettings.data?.hideBalances === "true");
+  }, [appSettings.data?.hideBalances]);
+
+  return hideBalances;
+}
diff --git a/packages/mobile-app/utils/balance.utils.ts b/packages/mobile-app/utils/balance.utils.ts
