pr feedback

Author: cgjohn

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

@@ -1,5 +1,5 @@
 import { StatusBar } from "expo-status-bar";
-import { useState, useRef, useEffect } from "react";
+import { useState } from "react";
 import {
   Layout,
   Text,
@@ -49,7 +49,6 @@ 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);
@@ -110,30 +109,13 @@ export default function Balances() {
     },
   );
 
-  const handlePressIn = () => {
-    longPressTimerRef.current = setTimeout(() => {
-      setAppSetting({
-        key: SettingsKey.HideBalances,
-        value: hideBalances ? "false" : "true",
-      });
-    }, 3000);
+  const handleLongPress = () => {
+    setAppSetting({
+      key: SettingsKey.HideBalances,
+      value: hideBalances ? "false" : "true",
+    });
   };
 
-  const handlePressOut = () => {
-    if (longPressTimerRef.current) {
-      clearTimeout(longPressTimerRef.current);
-      longPressTimerRef.current = null;
-    }
-  };
-
-  useEffect(() => {
-    return () => {
-      if (longPressTimerRef.current) {
-        clearTimeout(longPressTimerRef.current);
-      }
-    };
-  }, []);
-
   if (isLoading || !account) {
     return (
       <SafeAreaView>
@@ -207,7 +189,7 @@ export default function Balances() {
                 paddingTop: 40,
               }}
             >
-              <Pressable onPressIn={handlePressIn} onPressOut={handlePressOut}>
+              <Pressable onLongPress={handleLongPress} delayLongPress={2000}>
                 <Layout style={styles.headerBalance}>
                   <Text category="h1" style={styles.balanceAmount}>
                     {hideBalances
@@ -300,7 +282,9 @@ export default function Balances() {
                         account.balances.iron.confirmed,
                         hideBalances,
                         account.balances.iron.assetId,
-                        getIronAsset.data?.verification,
+                        getIronAsset.data?.verification.status === "verified"
+                          ? getIronAsset.data.verification
+                          : undefined,
                       )}
                       verified={
                         getIronAsset.data?.verification.status === "verified"

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

@@ -7,6 +7,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,
@@ -42,6 +43,7 @@ type TransactionState = "sending" | "sent" | "idle";
 export default function Send() {
   const facade = useFacade();
   const router = useRouter();
+  const hideBalances = useHideBalances();
 
   const [selectedAssetId, setSelectedAssetId] =
     useState<string>(IRON_ASSET_ID_HEX);
@@ -96,12 +98,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 ? "•••••" : CurrencyUtils.render(getAccountResult.data?.balances.iron.available ?? "0")})`,
       },
     ];
 
@@ -110,20 +112,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
+              ? "•••••"
+              : CurrencyUtils.render(
+                  b.available,
+                  false,
+                  b.assetId,
+                  asset.verification.status === "verified"
+                    ? asset.verification
+                    : undefined,
+                )
+          })`,
         });
       }
     });
 
     return options;
-  }, [getAccountResult.data, assetMap]);
+  }, [getAccountResult.data, assetMap, hideBalances]);
 
   // Find the selected asset index
   const selectedIndex = useMemo(() => {
@@ -304,7 +310,7 @@ export default function Send() {
             {transactionState === "sending" ? "Sending..." : "Sent!"}
           </Text>
           <Text category="s1" style={styles.amountText}>
-            {amount}{" "}
+            {hideBalances ? "•••••" : amount}{" "}
             {selectedAssetId === IRON_ASSET_ID_HEX
               ? "$IRON"
               : (assetMap.get(selectedAssetId)?.name ?? "Unknown")}{" "}

packages/mobile-app/hooks/useHideBalances.ts

@@ -7,7 +7,7 @@ import { useEffect, useState } from "react";
  */
 export function useHideBalances(): boolean {
   const facade = useFacade();
-  const [hideBalances, setHideBalances] = useState(false);
+  const [hideBalances, setHideBalances] = useState(true);
   const appSettings = facade.getAppSettings.useQuery();
 
   useEffect(() => {