Clean-up UserThemeProvider

packages/uikit/src/providers/UserThemeProvider.tsx

@@ -1,55 +1,33 @@
-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;
         }
 
         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 <div></div>;
-    }
+    }, [uiPreferences?.theme, displayType, isPro]);
 
     return <ThemeProvider theme={currentTheme as DefaultTheme}>{children}</ThemeProvider>;
 };