diff --git a/lib/state/appStore.ts b/lib/state/appStore.ts index a5fa0db..c29d972 100644 --- 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): 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()((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()((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()((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 index ca4366c..c668162 100644 --- 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.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 ? ( <> - {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" && "****"} - {balanceState === BalanceState.SATS && "sats"} + {balanceDisplayMode === "sats" && "sats"} ) : ( @@ -132,10 +124,10 @@ export function Home() { {balance && !refreshingBalance ? ( - {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"}