adds balanceMask variable

cgjohn · cgjohn · commit ef88cdcd9823 · 2025-02-25T11:46:45.000-06:00
diff --git a/packages/mobile-app/app/(drawer)/account/account-settings/account-select/index.tsx b/packages/mobile-app/app/(drawer)/account/account-settings/account-select/index.tsx
@@ -4,10 +4,12 @@ import { Stack, useRouter } from "expo-router";
 import { useFacade } from "@/data/facades";
 import { CurrencyUtils } from "@ironfish/sdk";
 import { Layout, Text, Button, Card } from "@ui-kitten/components";
+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,
@@ -41,7 +43,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 && (
diff --git a/packages/mobile-app/app/(drawer)/account/account-settings/index.tsx b/packages/mobile-app/app/(drawer)/account/account-settings/index.tsx
@@ -17,6 +17,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" />
@@ -49,15 +50,17 @@ 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} (${hideBalances ? "•••••" : currentAccountBalance} $IRON)`,
+        title: `${currentAccountName} (${hideBalances ? balanceMask : currentAccountBalance} $IRON)`,
         href: route.href,
       };
     }
@@ -74,8 +77,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);
@@ -110,6 +114,7 @@ function AccountSettingsContent({ accountName }: { accountName: string }) {
       getAccountResult.data?.balances.iron.confirmed ?? "0",
     ),
     hideBalances,
+    balanceMask,
   });
 
   const handleSelect = (index: number) => {
diff --git a/packages/mobile-app/app/(drawer)/account/index.tsx b/packages/mobile-app/app/(drawer)/account/index.tsx
@@ -48,7 +48,7 @@ interface Balance {
 }
 
 export default function Balances() {
-  const hideBalances = useHideBalances();
+  const { hideBalances, balanceMask } = useHideBalances();
   const facade = useFacade();
   const { account, accountName, isLoading } = useAccount();
   const scrollYOffset = useSharedValue(0);
@@ -193,7 +193,7 @@ export default function Balances() {
                 <Layout style={styles.headerBalance}>
                   <Text category="h1" style={styles.balanceAmount}>
                     {hideBalances
-                      ? "•••••"
+                      ? balanceMask
                       : CurrencyUtils.render(
                           account?.balances.iron.confirmed ?? "0",
                         )}
diff --git a/packages/mobile-app/app/(drawer)/account/send/index.tsx b/packages/mobile-app/app/(drawer)/account/send/index.tsx
@@ -43,7 +43,7 @@ type TransactionState = "sending" | "sent" | "idle";
 export default function Send() {
   const facade = useFacade();
   const router = useRouter();
-  const hideBalances = useHideBalances();
+  const { hideBalances, balanceMask } = useHideBalances();
 
   const [selectedAssetId, setSelectedAssetId] =
     useState<string>(IRON_ASSET_ID_HEX);
@@ -103,7 +103,7 @@ export default function Send() {
     const options = [
       {
         id: IRON_ASSET_ID_HEX,
-        title: `IRON (${hideBalances ? "•••••" : CurrencyUtils.render(getAccountResult.data?.balances.iron.available ?? "0")})`,
+        title: `IRON (${hideBalances ? balanceMask : CurrencyUtils.render(getAccountResult.data?.balances.iron.available ?? "0")})`,
       },
     ];
 
@@ -114,7 +114,7 @@ export default function Send() {
           id: b.assetId,
           title: `${asset.name} (${
             hideBalances
-              ? "•••••"
+              ? balanceMask
               : CurrencyUtils.render(
                   b.available,
                   false,
@@ -129,7 +129,7 @@ export default function Send() {
     });
 
     return options;
-  }, [getAccountResult.data, assetMap, hideBalances]);
+  }, [getAccountResult.data, assetMap, hideBalances, balanceMask]);
 
   // Find the selected asset index
   const selectedIndex = useMemo(() => {
@@ -310,7 +310,7 @@ export default function Send() {
             {transactionState === "sending" ? "Sending..." : "Sent!"}
           </Text>
           <Text category="s1" style={styles.amountText}>
-            {hideBalances ? "•••••" : amount}{" "}
+            {hideBalances ? balanceMask : amount}{" "}
             {selectedAssetId === IRON_ASSET_ID_HEX
               ? "$IRON"
               : (assetMap.get(selectedAssetId)?.name ?? "Unknown")}{" "}
diff --git a/packages/mobile-app/app/(drawer)/account/transaction/[hash].tsx b/packages/mobile-app/app/(drawer)/account/transaction/[hash].tsx
@@ -54,7 +54,7 @@ const CopyableText = ({ text, style }: { text: string; style?: any }) => {
 export default function TransactionDetails() {
   const { hash } = useLocalSearchParams<{ hash: string }>();
   const facade = useFacade();
-  const hideBalances = useHideBalances();
+  const { hideBalances, balanceMask } = useHideBalances();
 
   const transactionQuery = facade.getTransaction.useQuery(
     {
@@ -183,7 +183,7 @@ export default function TransactionDetails() {
             </Text>
             <Text category="h2" style={styles.mainAmount}>
               {hideBalances
-                ? "•••••"
+                ? balanceMask
                 : CurrencyUtils.render(
                     (mainAmount < 0n ? -mainAmount : mainAmount).toString(),
                     false,
@@ -243,8 +243,9 @@ export default function TransactionDetails() {
                 Fee
               </Text>
               <Text style={styles.value}>
-                {hideBalances ? "•••••" : CurrencyUtils.render(transaction.fee)}{" "}
-                $IRON
+                {hideBalances
+                  ? balanceMask
+                  : CurrencyUtils.render(transaction.fee ?? "0")}
               </Text>
             </View>
             <Divider style={styles.divider} />
diff --git a/packages/mobile-app/components/account/AssetRow.tsx b/packages/mobile-app/components/account/AssetRow.tsx
@@ -14,7 +14,7 @@ export function AssetRow({
   verified: boolean;
   image?: string;
 }) {
-  const hideBalances = useHideBalances();
+  const { hideBalances, balanceMask } = useHideBalances();
 
   return (
     <Card style={styles.assetCard}>
@@ -27,7 +27,7 @@ export function AssetRow({
             {name} {verified ? "(Verified)" : ""}
           </Text>
           <Text category="p2" appearance="hint">
-            {hideBalances ? "•••••" : amount}
+            {hideBalances ? balanceMask : amount}
           </Text>
         </Layout>
       </Layout>
diff --git a/packages/mobile-app/components/account/TransactionRow.tsx b/packages/mobile-app/components/account/TransactionRow.tsx
@@ -95,7 +95,7 @@ const assetBalanceCompare = (
 export function TransactionRow({ transaction }: { transaction: Transaction }) {
   const facade = useFacade();
   const router = useRouter();
-  const hideBalances = useHideBalances();
+  const { hideBalances, balanceMask } = useHideBalances();
 
   const getAssets = useQueries({
     queries:
@@ -198,7 +198,7 @@ export function TransactionRow({ transaction }: { transaction: Transaction }) {
                     color: delta.delta.startsWith("-") ? "black" : "#5BA54C",
                   }}
                 >
-                  {hideBalances ? "•••••" : delta.delta}
+                  {hideBalances ? balanceMask : delta.delta}
                 </Text>
               </Layout>
             );
diff --git a/packages/mobile-app/hooks/useHideBalances.ts b/packages/mobile-app/hooks/useHideBalances.ts
@@ -3,9 +3,12 @@ import { useEffect, useState } from "react";
 
 /**
  * Hook that provides the current hide balances setting
- * @returns The current hide balances state
+ * @returns Object with hideBalances state and balanceMask for consistent display
  */
-export function useHideBalances(): boolean {
+export function useHideBalances(): {
+  hideBalances: boolean;
+  balanceMask: string;
+} {
   const facade = useFacade();
   const [hideBalances, setHideBalances] = useState(true);
   const appSettings = facade.getAppSettings.useQuery();
@@ -14,5 +17,8 @@ export function useHideBalances(): boolean {
     setHideBalances(appSettings.data?.hideBalances === "true");
   }, [appSettings.data?.hideBalances]);
 
-  return hideBalances;
+  return {
+    hideBalances,
+    balanceMask: "•••••",
+  };
 }
