diff --git a/packages/uikit/src/providers/UserThemeProvider.tsx b/packages/uikit/src/providers/UserThemeProvider.tsx index 8b37dc869..1734d0f46 100644 --- a/packages/uikit/src/providers/UserThemeProvider.tsx +++ b/packages/uikit/src/providers/UserThemeProvider.tsx @@ -1,37 +1,25 @@ -import { FC, PropsWithChildren, useEffect, useMemo } from 'react'; +import { FC, PropsWithChildren, useMemo } from 'react'; import { DefaultTheme, ThemeProvider } from 'styled-components'; -import { availableThemes, useMutateUserUIPreferences, useUserUIPreferences } from '../state/theme'; -import { usePrevious } from '../hooks/usePrevious'; +import { availableThemes, useUserUIPreferences } from '../state/theme'; + export const UserThemeProvider: FC< PropsWithChildren<{ displayType?: 'compact' | 'full-width'; isPro?: boolean; isProSupported?: boolean; }> -> = ({ children, displayType, isPro, isProSupported }) => { - const { data: uiPreferences, isFetched: isUIPreferencesLoaded } = useUserUIPreferences(); - const { mutateAsync } = useMutateUserUIPreferences(); - const isProPrev = usePrevious(isPro); - - const [currentTheme, currentThemeName] = useMemo(() => { - let themeName = uiPreferences?.theme; +> = ({ children, displayType, isPro }) => { + const { data: uiPreferences } = useUserUIPreferences(); - if (themeName === 'pro' && isPro === false) { - themeName = 'dark'; - } - - if (!themeName && isPro) { - themeName = 'pro'; - } + const [currentTheme, _currentThemeName] = useMemo(() => { + let themeName: 'dark' | 'pro' = 'dark'; + let theme = availableThemes[themeName]; - if (isProPrev === false && isPro) { - themeName = 'pro'; + if (isPro === true) { + themeName = (uiPreferences?.theme || 'pro') as 'dark' | 'pro'; + theme = availableThemes[themeName]; } - themeName = themeName || 'dark'; - - const theme = availableThemes[themeName]; - if (displayType) { theme.displayType = displayType; } @@ -39,17 +27,7 @@ export const UserThemeProvider: FC< window.document.body.style.background = theme.backgroundPage; return [theme, themeName]; - }, [uiPreferences?.theme, displayType, isPro, isProPrev]); - - useEffect(() => { - if (currentTheme && uiPreferences && currentThemeName !== uiPreferences.theme) { - mutateAsync({ theme: currentThemeName as 'dark' | 'pro' }); - } - }, [mutateAsync, currentThemeName, uiPreferences]); - - if (!isUIPreferencesLoaded || (isPro === undefined && isProSupported)) { - return
; - } + }, [uiPreferences?.theme, displayType, isPro]); return {children}; };