chore: separating app UI configs slice (#1215)

.ladle/components.tsx

@@ -23,7 +23,7 @@ import {
   AppThemeSystemSetting,
   setAppColorMode,
   setAppThemeSetting,
-} from '@/state/configs';
+} from '@/state/appUiConfigs';
 import { setLocaleLoaded, setSelectedLocale } from '@/state/localization';
 
 import './ladle.css';
@@ -65,7 +65,7 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
 
   return (
     <Provider store={store}>
-      <div tw="flex flex-row items-center gap-[8px] ">
+      <div tw="flex flex-row items-center gap-[8px]">
         <h4>Active Theme:</h4>
         <SelectMenu value={theme} onValueChange={setTheme}>
           {[

src/components/DisplayUnitTag.tsx

@@ -7,8 +7,8 @@ import { NORMAL_DEBOUNCE_MS } from '@/constants/debounce';
 import { DisplayUnit } from '@/constants/trade';
 
 import { useAppSelector } from '@/state/appTypes';
-import { setDisplayUnit } from '@/state/configs';
-import { getSelectedDisplayUnit } from '@/state/configsSelectors';
+import { setDisplayUnit } from '@/state/appUiConfigs';
+import { getSelectedDisplayUnit } from '@/state/appUiConfigsSelectors';
 
 import { getDisplayableAssetFromBaseAsset } from '@/lib/assetUtils';
 

src/components/QrCode.tsx

@@ -4,8 +4,8 @@ import QRCodeStyling, { Options } from 'qr-code-styling';
 import styled from 'styled-components';
 
 import { useAppSelector } from '@/state/appTypes';
-import { AppTheme } from '@/state/configs';
-import { getAppTheme } from '@/state/configsSelectors';
+import { AppTheme } from '@/state/appUiConfigs';
+import { getAppTheme } from '@/state/appUiConfigsSelectors';
 
 type ElementProps = {
   value: string;

src/constants/localStorage.ts

@@ -24,13 +24,7 @@ export enum LocalStorageKey {
   LastViewedMarket = 'dydx.LastViewedMarket',
   SelectedLocale = 'dydx.SelectedLocale',
   SelectedNetwork = 'dydx.SelectedNetwork',
-  SelectedTheme = 'dydx.SelectedTheme',
-  SelectedColorMode = 'dydx.SelectedColorMode',
   SelectedTradeLayout = 'dydx.SelectedTradeLayout',
-  HasSeenLaunchIncentives = 'dydx.HasSeenLaunchIncentives',
-  DefaultToAllMarketsInPositionsOrdersFills = 'dydx.DefaultToAllMarketsInPositionsOrdersFills',
-  SelectedDisplayUnit = 'dydx.SelectedDisplayUnit',
-  ShouldHideLaunchableMarkets = 'dydx.shouldHideLaunchableMarkets',
 
   // Discoverability
   HasSeenElectionBannerTRUMPWIN = 'dydx.HasSeenElectionBannerTRUMPWIN',

src/constants/styles/colors.ts

@@ -1,6 +1,6 @@
 import type { ThemeName } from 'public/tradingview/charting_library';
 
-import { AppColorMode, AppTheme } from '@/state/configs';
+import { AppColorMode, AppTheme } from '@/state/appUiConfigs';
 
 export const THEME_NAMES: Record<AppTheme, ThemeName> = {
   [AppTheme.Classic]: 'Classic',

src/hooks/tradingView/useChartLines.tsx

@@ -21,7 +21,7 @@ import {
   getIsAccountConnected,
 } from '@/state/accountSelectors';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
-import { getAppColorMode, getAppTheme } from '@/state/configsSelectors';
+import { getAppColorMode, getAppTheme } from '@/state/appUiConfigsSelectors';
 import {
   cancelOrderFailed,
   cancelOrderSubmitted,

src/hooks/tradingView/useTradingView.ts

@@ -18,7 +18,7 @@ import type { TvWidget } from '@/constants/tvchart';
 
 import { getSelectedNetwork } from '@/state/appSelectors';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
-import { getAppColorMode, getAppTheme } from '@/state/configsSelectors';
+import { getAppColorMode, getAppTheme } from '@/state/appUiConfigsSelectors';
 import { getSelectedLocale } from '@/state/localizationSelectors';
 import { getCurrentMarketId } from '@/state/perpetualsSelectors';
 import { updateChartConfig } from '@/state/tradingView';

src/hooks/tradingView/useTradingViewDatafeed.ts

@@ -30,7 +30,7 @@ import { Themes } from '@/styles/themes';
 import { store } from '@/state/_store';
 import { getMarketFills } from '@/state/accountSelectors';
 import { useAppSelector } from '@/state/appTypes';
-import { getAppColorMode, getAppTheme } from '@/state/configsSelectors';
+import { getAppColorMode, getAppTheme } from '@/state/appUiConfigsSelectors';
 import { getSelectedLocale } from '@/state/localizationSelectors';
 import { setCandles } from '@/state/perpetuals';
 import {
@@ -233,7 +233,7 @@ export const useTradingViewDatafeed = (
               );
             }
 
-            const volumeUnit = store.getState().configs.displayUnit;
+            const volumeUnit = store.getState().appUiConfigs.displayUnit;
 
             const bars = [
               ...cachedBars,

src/hooks/tradingView/useTradingViewLaunchable.ts

@@ -14,7 +14,7 @@ import { SUPPORTED_LOCALE_BASE_TAGS } from '@/constants/localization';
 import type { TvWidget } from '@/constants/tvchart';
 
 import { useAppSelector } from '@/state/appTypes';
-import { getAppColorMode, getAppTheme } from '@/state/configsSelectors';
+import { getAppColorMode, getAppTheme } from '@/state/appUiConfigsSelectors';
 import { getSelectedLocale } from '@/state/localizationSelectors';
 import { updateLaunchableMarketsChartConfig } from '@/state/tradingView';
 import { getTvChartConfig } from '@/state/tradingViewSelectors';

src/hooks/tradingView/useTradingViewTheme.ts

@@ -4,8 +4,8 @@ import { THEME_NAMES } from '@/constants/styles/colors';
 import type { ChartLine, TvWidget } from '@/constants/tvchart';
 
 import { useAppSelector } from '@/state/appTypes';
-import { AppColorMode, AppTheme } from '@/state/configs';
-import { getAppColorMode, getAppTheme } from '@/state/configsSelectors';
+import { AppColorMode, AppTheme } from '@/state/appUiConfigs';
+import { getAppColorMode, getAppTheme } from '@/state/appUiConfigsSelectors';
 
 import { assertNever } from '@/lib/assertNever';
 import { getChartLineColors, getWidgetOverrides } from '@/lib/tradingView/utils';

src/hooks/useAppThemeAndColorMode.tsx

@@ -5,8 +5,13 @@ import { ThemeProvider } from 'styled-components';
 import { Themes } from '@/styles/themes';
 
 import { useAppSelector } from '@/state/appTypes';
-import { AppColorMode, AppTheme, AppThemeSetting, AppThemeSystemSetting } from '@/state/configs';
-import { getAppColorMode, getAppThemeSetting } from '@/state/configsSelectors';
+import {
+  AppColorMode,
+  AppTheme,
+  AppThemeSetting,
+  AppThemeSystemSetting,
+} from '@/state/appUiConfigs';
+import { getAppColorMode, getAppThemeSetting } from '@/state/appUiConfigsSelectors';
 
 import { assertNever } from '@/lib/assertNever';
 

src/hooks/useMarketsData.ts

@@ -18,8 +18,8 @@ import {
 } from '@/hooks/usePerpetualMarketSparklines';
 
 import { useAppSelector } from '@/state/appTypes';
+import { getShouldHideLaunchableMarkets } from '@/state/appUiConfigsSelectors';
 import { getAssets } from '@/state/assetsSelectors';
-import { getShouldHideLaunchableMarkets } from '@/state/configsSelectors';
 import { getPerpetualMarkets, getPerpetualMarketsClobIds } from '@/state/perpetualsSelectors';
 
 import { getDisplayableAssetFromBaseAsset } from '@/lib/assetUtils';

src/hooks/usePreferenceMenu.tsx

@@ -15,8 +15,11 @@ import { useStringGetter } from '@/hooks/useStringGetter';
 import { Switch } from '@/components/Switch';
 
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
-import { OtherPreference, setDefaultToAllMarketsInPositionsOrdersFills } from '@/state/configs';
-import { getDefaultToAllMarketsInPositionsOrdersFills } from '@/state/configsSelectors';
+import {
+  OtherPreference,
+  setDefaultToAllMarketsInPositionsOrdersFills,
+} from '@/state/appUiConfigs';
+import { getDefaultToAllMarketsInPositionsOrdersFills } from '@/state/appUiConfigsSelectors';
 import { setSelectedTradeLayout } from '@/state/layout';
 import { getSelectedTradeLayout } from '@/state/layoutSelectors';
 

src/icons/chaos-labs.tsx

@@ -1,6 +1,6 @@
 import { useAppSelector } from '@/state/appTypes';
-import { AppTheme } from '@/state/configs';
-import { getAppTheme } from '@/state/configsSelectors';
+import { AppTheme } from '@/state/appUiConfigs';
+import { getAppTheme } from '@/state/appUiConfigsSelectors';
 
 export const ChaosLabsIcon: React.FC = () => {
   const appTheme = useAppSelector(getAppTheme);

src/layout/Header/HeaderDesktop.tsx

@@ -29,7 +29,7 @@ import { NetworkSelectMenu } from '@/views/menus/NetworkSelectMenu';
 import { NotificationsMenu } from '@/views/menus/NotificationsMenu';
 
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
-import { getHasSeenLaunchIncentives } from '@/state/configsSelectors';
+import { getHasSeenLaunchIncentives } from '@/state/appUiConfigsSelectors';
 import { openDialog } from '@/state/dialogs';
 
 import { getSimpleStyledOutputType } from '@/lib/genericFunctionalComponentUtils';

src/lib/tradingView/utils.ts

@@ -12,7 +12,7 @@ import type { ChartLineType } from '@/constants/tvchart';
 
 import { Themes } from '@/styles/themes';
 
-import { AppTheme, type AppColorMode } from '@/state/configs';
+import { AppTheme, type AppColorMode } from '@/state/appUiConfigs';
 
 import { getDisplayableTickerFromMarket } from '../assetUtils';
 import { testFlags } from '../testFlags';

src/pages/token/LaunchIncentivesPanel.tsx

@@ -24,7 +24,7 @@ import { Panel } from '@/components/Panel';
 import { TagSize, WarningTag } from '@/components/Tag';
 
 import { useAppDispatch } from '@/state/appTypes';
-import { markLaunchIncentivesSeen } from '@/state/configs';
+import { markLaunchIncentivesSeen } from '@/state/appUiConfigs';
 import { openDialog } from '@/state/dialogs';
 
 export const LaunchIncentivesPanel = ({ className }: { className?: string }) => {

src/pages/token/StakingRewardPanel.tsx

@@ -21,7 +21,7 @@ import { Panel } from '@/components/Panel';
 import { calculateCanAccountTrade } from '@/state/accountCalculators';
 import { getStakingRewards } from '@/state/accountSelectors';
 import { useAppDispatch, useAppSelector } from '@/state/appTypes';
-import { getChartDotBackground } from '@/state/configsSelectors';
+import { getChartDotBackground } from '@/state/appUiConfigsSelectors';
 import { openDialog } from '@/state/dialogs';
 
 import { BigNumberish } from '@/lib/numbers';

src/pages/trade/HorizontalPanel.tsx

@@ -38,8 +38,8 @@ import {
   getTradeInfoNumbers,
 } from '@/state/accountSelectors';
 import { useAppSelector } from '@/state/appTypes';
+import { getDefaultToAllMarketsInPositionsOrdersFills } from '@/state/appUiConfigsSelectors';
 import { getAssetImageUrl } from '@/state/assetsSelectors';
-import { getDefaultToAllMarketsInPositionsOrdersFills } from '@/state/configsSelectors';
 import { getHasUncommittedOrders } from '@/state/localOrdersSelectors';
 import { getCurrentMarketAssetId, getCurrentMarketId } from '@/state/perpetualsSelectors';
 

src/pages/vaults/VaultPnlChart.tsx

@@ -22,7 +22,7 @@ import { TriangleIndicator } from '@/components/TriangleIndicator';
 import { TimeSeriesChart } from '@/components/visx/TimeSeriesChart';
 
 import { useAppSelector } from '@/state/appTypes';
-import { getChartDotBackground } from '@/state/configsSelectors';
+import { getChartDotBackground } from '@/state/appUiConfigsSelectors';
 import { getSelectedLocale } from '@/state/localizationSelectors';
 
 import { MustBigNumber, getNumberSign } from '@/lib/numbers';

src/state/_store.ts

@@ -8,6 +8,7 @@ import { accountSlice } from './account';
 import { affiliatesSlice } from './affiliates';
 import { appSlice } from './app';
 import appMiddleware from './appMiddleware';
+import { appUiConfigsSlice } from './appUiConfigs';
 import { assetsSlice } from './assets';
 import { configsSlice } from './configs';
 import { dialogsSlice } from './dialogs';
@@ -28,6 +29,7 @@ const reducers = {
   account: accountSlice.reducer,
   affiliates: affiliatesSlice.reducer,
   app: appSlice.reducer,
+  appUiConfigs: appUiConfigsSlice.reducer,
   assets: assetsSlice.reducer,
   configs: configsSlice.reducer,
   dialogs: dialogsSlice.reducer,
@@ -47,9 +49,9 @@ const rootReducer = combineReducers(reducers);
 
 const persistConfig = {
   key: 'root',
-  version: 2,
+  version: 3,
   storage,
-  whitelist: ['affiliates', 'dismissable', 'tradingView', 'wallet'],
+  whitelist: ['affiliates', 'dismissable', 'tradingView', 'wallet', 'appUiConfigs'],
   migrate: customCreateMigrate({ debug: process.env.NODE_ENV !== 'production' }),
 };
 

src/state/appUiConfigs.ts

@@ -0,0 +1,107 @@
+import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+
+import { AnalyticsEvents } from '@/constants/analytics';
+import { DisplayUnit } from '@/constants/trade';
+
+import { track } from '@/lib/analytics/analytics';
+import { testFlags } from '@/lib/testFlags';
+
+export enum AppTheme {
+  Classic = 'Classic',
+  Dark = 'Dark',
+  Light = 'Light',
+}
+
+export enum AppThemeSystemSetting {
+  System = 'System',
+}
+
+export type AppThemeSetting = AppTheme | AppThemeSystemSetting;
+
+export enum AppColorMode {
+  GreenUp = 'GreenUp',
+  RedUp = 'RedUp',
+}
+
+export enum OtherPreference {
+  DisplayAllMarketsDefault = 'DisplayAllMarketsDefault',
+  GasToken = 'GasToken',
+  ReverseLayout = 'ReverseLayout',
+}
+
+export interface AppUIConfigsState {
+  appThemeSetting: AppThemeSetting;
+  appColorMode: AppColorMode;
+  hasSeenLaunchIncentives: boolean;
+  defaultToAllMarketsInPositionsOrdersFills: boolean;
+  displayUnit: DisplayUnit;
+  shouldHideLaunchableMarkets: boolean;
+}
+
+const { uiRefresh } = testFlags;
+
+export const initialState: AppUIConfigsState = {
+  appThemeSetting: uiRefresh ? AppTheme.Dark : AppTheme.Classic,
+  appColorMode: AppColorMode.GreenUp,
+  hasSeenLaunchIncentives: false,
+  defaultToAllMarketsInPositionsOrdersFills: true,
+  displayUnit: DisplayUnit.Asset,
+  shouldHideLaunchableMarkets: false,
+};
+
+export const appUiConfigsSlice = createSlice({
+  name: 'appUiConfigs',
+  initialState,
+  reducers: {
+    setDefaultToAllMarketsInPositionsOrdersFills: (
+      state: AppUIConfigsState,
+      { payload }: PayloadAction<boolean>
+    ) => {
+      state.defaultToAllMarketsInPositionsOrdersFills = payload;
+    },
+    setAppThemeSetting: (state: AppUIConfigsState, { payload }: PayloadAction<AppThemeSetting>) => {
+      state.appThemeSetting = payload;
+    },
+    setAppColorMode: (state: AppUIConfigsState, { payload }: PayloadAction<AppColorMode>) => {
+      state.appColorMode = payload;
+    },
+    markLaunchIncentivesSeen: (state: AppUIConfigsState) => {
+      state.hasSeenLaunchIncentives = true;
+    },
+    setShouldHideLaunchableMarkets: (
+      state: AppUIConfigsState,
+      { payload }: PayloadAction<boolean>
+    ) => {
+      state.shouldHideLaunchableMarkets = payload;
+    },
+    setDisplayUnit: (
+      state: AppUIConfigsState,
+      {
+        payload,
+      }: PayloadAction<{
+        newDisplayUnit: DisplayUnit;
+        entryPoint: string;
+        assetId: string;
+      }>
+    ) => {
+      const { newDisplayUnit, entryPoint, assetId } = payload;
+      state.displayUnit = newDisplayUnit;
+      track(
+        AnalyticsEvents.DisplayUnitToggled({
+          entryPoint,
+          assetId,
+          newDisplayUnit,
+        })
+      );
+    },
+  },
+});
+
+export const {
+  setDefaultToAllMarketsInPositionsOrdersFills,
+  setAppThemeSetting,
+  setAppColorMode,
+  markLaunchIncentivesSeen,
+  setShouldHideLaunchableMarkets,
+  setDisplayUnit,
+} = appUiConfigsSlice.actions;