hide transaction balances

Author: cgjohn

packages/mobile-app/app/(drawer)/account/transaction/[hash].tsx

@@ -15,6 +15,7 @@ import { useFacade } from "../../../../data/facades";
 import { CurrencyUtils } from "@ironfish/sdk";
 import { useQueries } from "@tanstack/react-query";
 import { setStringAsync } from "expo-clipboard";
+import { useHideBalances } from "@/hooks/useHideBalances";
 
 const ExternalLinkIcon = (props: IconProps) => (
   <Icon {...props} name="external-link-outline" />
@@ -53,6 +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 transactionQuery = facade.getTransaction.useQuery(
     {
@@ -180,10 +182,12 @@ export default function TransactionDetails() {
               {isReceived ? "Received" : "Sent"}
             </Text>
             <Text category="h2" style={styles.mainAmount}>
-              {CurrencyUtils.render(
-                (mainAmount < 0n ? -mainAmount : mainAmount).toString(),
-                false,
-              )}{" "}
+              {hideBalances
+                ? "•••••"
+                : CurrencyUtils.render(
+                    (mainAmount < 0n ? -mainAmount : mainAmount).toString(),
+                    false,
+                  )}{" "}
               {mainAssetName}
             </Text>
             <Text category="s1" appearance="hint" style={styles.timestamp}>
@@ -239,7 +243,8 @@ export default function TransactionDetails() {
                 Fee
               </Text>
               <Text style={styles.value}>
-                {CurrencyUtils.render(transaction.fee)} $IRON
+                {hideBalances ? "•••••" : CurrencyUtils.render(transaction.fee)}{" "}
+                $IRON
               </Text>
             </View>
             <Divider style={styles.divider} />