Add setting for hiding balances

Author: dguenther

packages/mobile-app/app/account-settings/index.tsx

@@ -9,9 +9,10 @@ import {
 } from "@ui-kitten/components";
 import { StyleSheet } from "react-native";
 import { Stack, useLocalSearchParams, useRouter } from "expo-router";
-import { useState } from "react";
 import { useFacade } from "../../data/facades";
 import { CurrencyUtils } from "@ironfish/sdk";
+import { SettingsKey } from "@/data/settings/db";
+import { useEffect, useState, useCallback } from "react";
 
 const ForwardIcon = (props: any): IconElement => (
   <Icon {...props} name="arrow-ios-forward" />
@@ -82,8 +83,29 @@ export default function AccountSettings() {
   }
 
   const facade = useFacade();
+
+  // I tried using isPending and variables on the mutation, but it was causing toggle
+  // re-renders that made the toggle animation jittery.
+  const appSettings = facade.getAppSettings.useQuery();
   const [hideBalances, setHideBalances] = useState(false);
 
+  useEffect(() => {
+    setHideBalances(appSettings.data?.hideBalances === "true");
+  }, [appSettings.data?.hideBalances]);
+
+  const { mutate: setAppSetting } = facade.setAppSetting.useMutation();
+
+  const onToggleHideBalances = useCallback(
+    (checked: boolean) => {
+      setHideBalances(checked);
+      setAppSetting({
+        key: SettingsKey.HideBalances,
+        value: checked ? "true" : "false",
+      });
+    },
+    [setAppSetting],
+  );
+
   const getAccountResult = facade.getAccount.useQuery(
     { name: accountName },
     {
@@ -123,8 +145,7 @@ export default function AccountSettings() {
                 accessoryRight={() => (
                   <Toggle
                     checked={hideBalances}
-                    onChange={setHideBalances}
-                    style={styles.toggle}
+                    onChange={onToggleHideBalances}
                   />
                 )}
               />,

packages/mobile-app/data/facades/app/demoHandlers.ts

@@ -11,6 +11,7 @@ export const appDemoHandlers = f.facade<AppHandlers>({
     return {
       pin: undefined,
       network: Network.TESTNET,
+      hideBalances: "false",
     };
   }),
   getExplorerUrl: f.handler.query(

packages/mobile-app/data/facades/app/walletServerHandlers.ts

@@ -16,6 +16,7 @@ export const appHandlers = f.facade<AppHandlers>({
     return {
       pin: undefined,
       network: Network.TESTNET,
+      hideBalances: "false",
     };
   }),
   getExplorerUrl: f.handler.query(

packages/mobile-app/data/settings/db.ts

@@ -16,18 +16,21 @@ interface Database {
 export enum SettingsKey {
   PIN = "pin",
   Network = "network",
+  HideBalances = "hideBalances",
 }
 
 const defaults: AppSettingsType = {
   [SettingsKey.PIN]: undefined,
   [SettingsKey.Network]: Network.MAINNET,
+  [SettingsKey.HideBalances]: "false",
 };
 
 export type AppSettingsType = z.infer<typeof schema>;
 
 const schema = z.object({
   [SettingsKey.PIN]: z.string().optional(),
   [SettingsKey.Network]: z.enum([Network.MAINNET, Network.TESTNET]),
+  [SettingsKey.HideBalances]: z.enum(["true", "false"]),
 });
 
 const partialSchema = schema.partial();