delete use-state-persisted and use user settings store. Fix store exp…

…iration
econia-labs · Mar 4, 2025 · f0a70d2 · f0a70d2
1 parent 3b68452
commit f0a70d2
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 80 deletions.
diff --git a/src/typescript/frontend/src/components/charts/PrivateChart.tsx b/src/typescript/frontend/src/components/charts/PrivateChart.tsx
@@ -30,7 +30,7 @@ import { useRouter } from "next/navigation";
 import { ROUTES } from "router/routes";
 import path from "path";
 import { emojisToName } from "lib/utils/emojis-to-name-or-symbol";
-import { useEventStore } from "context/event-store-context";
+import { useEventStore, useUserSettings } from "context/event-store-context";
 import { getPeriodStartTimeFromTime } from "@sdk/utils";
 import { getSymbolEmojisInString, symbolToEmojis, toMarketEmojiData } from "@sdk/emoji_data";
 import { type PeriodicStateEventModel, type MarketMetadataModel } from "@sdk/indexer-v2/types";
@@ -45,7 +45,6 @@ import {
 import { emoji, parseJSON } from "utils";
 import { Emoji } from "utils/emoji";
 import { getAptosClient } from "@sdk/utils/aptos-client";
-import useStatePersisted from "@hooks/use-state-persisted";
 import { createSwitch } from "components/charts/EmptyCandlesSwitch";
 
 const configurationData: DatafeedConfiguration = {
@@ -78,10 +77,10 @@ export const Chart = (props: ChartContainerProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const router = useRouter();
   const symbol = props.symbol;
-  const [showEmptyCandles, setShowEmptyCandles] = useStatePersisted(
-    "chart.showEmptyCandles",
-    false
-  );
+
+  const showEmptyBars = useUserSettings((s) => s.showEmptyBars);
+  const setShowEmptyBars = useUserSettings((s) => s.setShowEmptyBars);
+
   const subscribeToPeriod = useEventStore((s) => s.subscribeToPeriod);
   const unsubscribeFromPeriod = useEventStore((s) => s.unsubscribeFromPeriod);
   const setLatestBars = useEventStore((s) => s.setLatestBars);
@@ -146,8 +145,8 @@ export const Chart = (props: ChartContainerProps) => {
           exchange: EXCHANGE_NAME,
           listed_exchange: "",
           session: "24x7",
-          // If has_empty_bars is undefined, we use showEmptyCandles value, which contains the value from local storage.
-          has_empty_bars: has_empty_bars ? has_empty_bars === "true" || false : showEmptyCandles,
+          // If has_empty_bars is undefined, we use showEmptyBars value, which contains the value from local storage.
+          has_empty_bars: has_empty_bars ? has_empty_bars === "true" || false : showEmptyBars,
           has_seconds: false,
           has_intraday: true,
           has_daily: true,
@@ -368,7 +367,7 @@ export const Chart = (props: ChartContainerProps) => {
         const btn = tvWidget.current.createButton();
 
         const { setState } = createSwitch(btn, {
-          initialState: showEmptyCandles,
+          initialState: showEmptyBars,
           label: "Empty candles",
           onTitle: "Hide empty candles",
           offTitle: "Show empty candles",
@@ -377,7 +376,7 @@ export const Chart = (props: ChartContainerProps) => {
         btn.addEventListener("click", () => {
           const chart = tvWidget.current?.activeChart();
           if (!chart) return;
-          setShowEmptyCandles((prev) => {
+          setShowEmptyBars((prev) => {
             const show = !prev;
             chart.setSymbol(formatSymbolWithParams(chart.symbol(), { has_empty_bars: show }));
             setState(show);

diff --git a/src/typescript/frontend/src/configs/local-storage-keys.ts b/src/typescript/frontend/src/configs/local-storage-keys.ts
@@ -51,7 +51,7 @@ export function readLocalStorageCache<T>(key: keyof typeof LOCAL_STORAGE_KEYS):
       return null;
     }
     // Check for staleness.
-    if (new Date(cache.expiry) > new Date()) {
+    if (!cache.expiry || new Date(cache.expiry) > new Date()) {
       return cache.data;
     }
   } catch (e) {

diff --git a/src/typescript/frontend/src/hooks/use-state-persisted.ts b/src/typescript/frontend/src/hooks/use-state-persisted.ts
diff --git a/src/typescript/frontend/src/lib/store/user-settings-store.ts b/src/typescript/frontend/src/lib/store/user-settings-store.ts
@@ -3,10 +3,12 @@ import { createStore } from "zustand";
 
 export type UserSettingsState = {
   animate: boolean;
+  showEmptyBars: boolean;
 };
 
 export type UserSettingsActions = {
   setAnimate: (value: boolean) => void;
+  setShowEmptyBars: (fn: (prev: boolean) => boolean) => void;
   userAgent: string;
   toggleAnimate: () => void;
 };
@@ -19,6 +21,7 @@ const saveSettings = (state: UserSettingsState) => {
 
 const defaultValues: UserSettingsState = {
   animate: true,
+  showEmptyBars: true,
 };
 
 const readSettings = (): UserSettingsState => readLocalStorageCache("settings") ?? defaultValues;
@@ -27,15 +30,21 @@ export const createUserSettingsStore = (userAgent: string) =>
   createStore<UserSettingsStore>()((set) => ({
     ...readSettings(),
     userAgent,
+    setShowEmptyBars: (fn: (prev: boolean) => boolean) =>
+      set((state) => {
+        const newState = { ...state, showEmptyBars: fn(state.showEmptyBars) };
+        saveSettings(newState);
+        return newState;
+      }),
     setAnimate: (value) =>
-      set(() => {
-        const state = { animate: value };
-        saveSettings(state);
-        return state;
+      set((state) => {
+        const newState = { ...state, animate: value };
+        saveSettings(newState);
+        return newState;
       }),
     toggleAnimate: () =>
       set((state) => {
-        const newState = { animate: !state.animate };
+        const newState = { ...state, animate: !state.animate };
         saveSettings(newState);
         return newState;
       }),