diff --git a/src/App.tsx b/src/App.tsx index 9296458fa..d55e65ddb 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,4 +1,4 @@ -import { lazy, Suspense, useMemo } from 'react'; +import { lazy, Suspense, useEffect, useMemo } from 'react'; import isPropValid from '@emotion/is-prop-valid'; import { FunkitProvider } from '@funkit/connect'; @@ -46,11 +46,13 @@ import { config, privyConfig } from '@/lib/wagmi'; import { RestrictionWarning } from './components/RestrictionWarning'; import { ComplianceStates } from './constants/compliance'; import { funkitConfig, funkitTheme } from './constants/funkit'; +import { LocalStorageKey } from './constants/localStorage'; import { useAnalytics } from './hooks/useAnalytics'; import { useBreakpoints } from './hooks/useBreakpoints'; import { useCommandMenu } from './hooks/useCommandMenu'; import { useComplianceState } from './hooks/useComplianceState'; import { useInitializePage } from './hooks/useInitializePage'; +import { useLocalStorage } from './hooks/useLocalStorage'; import { usePrefetchedQueries } from './hooks/usePrefetchedQueries'; import { useReferralCode } from './hooks/useReferralCode'; import { useShouldShowFooter } from './hooks/useShouldShowFooter'; @@ -61,6 +63,9 @@ import LaunchMarket from './pages/LaunchMarket'; import { AffiliatesPage } from './pages/affiliates/AffiliatesPage'; import { persistor } from './state/_store'; import { appQueryClient } from './state/appQueryClient'; +import { useAppDispatch, useAppSelector } from './state/appTypes'; +import { AppTheme, setAppThemeSetting } from './state/appUiConfigs'; +import { getAppThemeSetting } from './state/appUiConfigsSelectors'; import breakpoints from './styles/breakpoints'; import { CommunityChartContainer } from './views/Affiliates/community-chart/ProgramChartContainer'; @@ -101,6 +106,7 @@ const Content = () => { }, [location.hash]); const { dialogAreaRef } = useDialogArea() ?? {}; + useUiRefreshMigrations(); return ( <> @@ -178,6 +184,24 @@ const Content = () => { ); }; +function useUiRefreshMigrations() { + const themeSetting = useAppSelector(getAppThemeSetting); + const dispatch = useAppDispatch(); + const { uiRefresh } = testFlags; + const [seenUiRefresh, setSeenUiRefresh] = useLocalStorage({ + key: LocalStorageKey.HasSeenUiRefresh, + defaultValue: false, + }); + useEffect(() => { + if (uiRefresh && !seenUiRefresh) { + setSeenUiRefresh(true); + if (themeSetting === AppTheme.Classic) { + dispatch(setAppThemeSetting(AppTheme.Dark)); + } + } + }, [themeSetting, seenUiRefresh, uiRefresh, dispatch, setSeenUiRefresh]); +} + const wrapProvider = (Component: React.ComponentType, props?: any) => { // eslint-disable-next-line react/display-name return ({ children }: { children: React.ReactNode }) => ( diff --git a/src/constants/localStorage.ts b/src/constants/localStorage.ts index 72e794409..e3761c4dd 100644 --- a/src/constants/localStorage.ts +++ b/src/constants/localStorage.ts @@ -26,6 +26,7 @@ export enum LocalStorageKey { SelectedNetwork = 'dydx.SelectedNetwork', SelectedTradeLayout = 'dydx.SelectedTradeLayout', + HasSeenUiRefresh = 'dydx.HasSeenUiRefresh', // Discoverability HasSeenElectionBannerTRUMPWIN = 'dydx.HasSeenElectionBannerTRUMPWIN', HasSeenTradeFormMessageTRUMPWIN = 'dydx.HasSeenTradeFormMessageTRUMPWIN',