fix: persist balance display mode

getAlby · Dec 27, 2024 · e6fddbb · e6fddbb
1 parent 58894ff
commit e6fddbb
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 20 deletions.
diff --git a/lib/state/appStore.ts b/lib/state/appStore.ts
@@ -13,8 +13,10 @@ interface AppState {
   readonly isSecurityEnabled: boolean;
   readonly isOnboarded: boolean;
   readonly theme: Theme;
+  readonly balanceDisplayMode: BalanceDisplayMode;
   setUnlocked: (unlocked: boolean) => void;
   setTheme: (theme: Theme) => void;
+  setBalanceDisplayMode: (balanceDisplayMode: BalanceDisplayMode) => void;
   setOnboarded: (isOnboarded: boolean) => void;
   setNWCClient: (nwcClient: NWCClient | undefined) => void;
   updateCurrentWallet(wallet: Partial<Wallet>): void;
@@ -37,9 +39,11 @@ const fiatCurrencyKey = "fiatCurrency";
 const hasOnboardedKey = "hasOnboarded";
 const lastAlbyPaymentKey = "lastAlbyPayment";
 const themeKey = "theme";
+const balanceDisplayModeKey = "balanceDisplayMode";
 const isSecurityEnabledKey = "isSecurityEnabled";
 export const lastActiveTimeKey = "lastActiveTime";
 
+export type BalanceDisplayMode = "sats" | "fiat" | "hidden";
 export type Theme = "system" | "light" | "dark";
 
 type Wallet = {
@@ -169,6 +173,9 @@ export const useAppStore = create<AppState>()((set, get) => {
     secureStorage.getItem(isSecurityEnabledKey) === "true";
 
   const theme = (secureStorage.getItem(themeKey) as Theme) || "system";
+  const balanceDisplayMode =
+    (secureStorage.getItem(balanceDisplayModeKey) as BalanceDisplayMode) ||
+    "sats";
 
   const initialWallets = loadWallets();
   return {
@@ -179,6 +186,7 @@ export const useAppStore = create<AppState>()((set, get) => {
     fiatCurrency: secureStorage.getItem(fiatCurrencyKey) || "",
     isSecurityEnabled,
     theme,
+    balanceDisplayMode,
     isOnboarded: secureStorage.getItem(hasOnboardedKey) === "true",
     selectedWalletId: initialSelectedWalletId,
     updateCurrentWallet,
@@ -191,6 +199,10 @@ export const useAppStore = create<AppState>()((set, get) => {
       secureStorage.setItem(themeKey, theme);
       set({ theme });
     },
+    setBalanceDisplayMode: (balanceDisplayMode) => {
+      secureStorage.setItem(balanceDisplayModeKey, balanceDisplayMode);
+      set({ balanceDisplayMode });
+    },
     setOnboarded: (isOnboarded) => {
       if (isOnboarded) {
         secureStorage.setItem(hasOnboardedKey, "true");

diff --git a/pages/Home.tsx b/pages/Home.tsx
@@ -28,19 +28,11 @@ import { useAppStore } from "~/lib/state/appStore";
 
 dayjs.extend(relativeTime);
 
-enum BalanceState {
-  SATS = 1,
-  FIAT = 2,
-  HIDDEN = 3,
-}
-
 export function Home() {
   const { data: balance, mutate: reloadBalance } = useBalance();
   const [refreshingBalance, setRefreshingBalance] = useState(false);
   const getFiatAmount = useGetFiatAmount();
-  const [balanceState, setBalanceState] = useState<BalanceState>(
-    BalanceState.SATS,
-  );
+  const balanceDisplayMode = useAppStore((store) => store.balanceDisplayMode);
   const wallets = useAppStore((store) => store.wallets);
   const selectedWalletId = useAppStore((store) => store.selectedWalletId);
 
@@ -55,12 +47,12 @@ export function Home() {
   };
 
   function switchBalanceState(): void {
-    if (balanceState === BalanceState.SATS) {
-      setBalanceState(BalanceState.FIAT);
-    } else if (balanceState === BalanceState.FIAT) {
-      setBalanceState(BalanceState.HIDDEN);
+    if (balanceDisplayMode === "sats") {
+      useAppStore.getState().setBalanceDisplayMode("fiat");
+    } else if (balanceDisplayMode === "fiat") {
+      useAppStore.getState().setBalanceDisplayMode("hidden");
     } else {
-      setBalanceState(BalanceState.SATS);
+      useAppStore.getState().setBalanceDisplayMode("sats");
     }
   }
 
@@ -112,17 +104,17 @@ export function Home() {
                 {balance && !refreshingBalance ? (
                   <>
                     <Text className="text-foreground text-5xl font-bold2">
-                      {balanceState === BalanceState.SATS &&
+                      {balanceDisplayMode === "sats" &&
                         new Intl.NumberFormat().format(
                           Math.floor(balance.balance / 1000),
                         )}
-                      {balanceState === BalanceState.FIAT &&
+                      {balanceDisplayMode === "fiat" &&
                         getFiatAmount &&
                         getFiatAmount(Math.floor(balance.balance / 1000))}
-                      {balanceState === BalanceState.HIDDEN && "****"}
+                      {balanceDisplayMode === "hidden" && "****"}
                     </Text>
                     <Text className="text-muted-foreground text-3xl font-semibold2">
-                      {balanceState === BalanceState.SATS && "sats"}
+                      {balanceDisplayMode === "sats" && "sats"}
                     </Text>
                   </>
                 ) : (
@@ -132,10 +124,10 @@ export function Home() {
               <View className="flex justify-center items-center">
                 {balance && !refreshingBalance ? (
                   <Text className="text-center text-3xl text-muted-foreground font-semibold2">
-                    {balanceState === BalanceState.SATS &&
+                    {balanceDisplayMode === "sats" &&
                       getFiatAmount &&
                       getFiatAmount(Math.floor(balance.balance / 1000))}
-                    {balanceState === BalanceState.FIAT &&
+                    {balanceDisplayMode === "fiat" &&
                       new Intl.NumberFormat().format(
                         Math.floor(balance.balance / 1000),
                       ) + " sats"}