refactor: moved theme to config

src/components/index.ts

@@ -1,2 +1 @@
-export * from './Theme';
 export * from './Disclaimer';

src/config/Theme/index.ts

@@ -0,0 +1,14 @@
+import { getMuiThemeConfig } from './muiThemeConfig';
+import { customTheme as rainbowTheme } from './rainbowTheme';
+import { lightTheme, darkTheme } from './theme';
+
+export const getCustomThemes = () => {
+  return {
+    main: {
+      light: lightTheme,
+      dark: darkTheme,
+    },
+    mui: getMuiThemeConfig,
+    rainbow: rainbowTheme,
+  };
+};

src/config/index.ts

@@ -1,6 +1,7 @@
 import { createPublicClient, http } from 'viem';
 import { mainnet } from 'viem/chains';
 import { Config } from '~/types';
+import { getCustomThemes } from './Theme';
 import { getConstants } from './constants';
 import { getEnv } from './env';
 
@@ -13,4 +14,5 @@ export const publicClient = createPublicClient({
 export const getConfig = (): Config => ({
   ...getEnv(),
   ...getConstants(),
+  ...getCustomThemes(),
 });

src/providers/ThemeProvider.tsx

@@ -1,6 +1,6 @@
 import { createContext, useEffect, useMemo, useState } from 'react';
 import { ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
-import { getMuiThemeConfig } from '~/components';
+import { getConfig } from '~/config';
 import { Theme, ThemeName } from '~/types';
 import { THEME_KEY, getTheme } from '~/utils';
 
@@ -17,6 +17,8 @@ interface StateProps {
 export const ThemeContext = createContext({} as ContextType);
 
 export const ThemeProvider = ({ children }: StateProps) => {
+  const getMuiThemeConfig = getConfig().mui;
+
   const defaultTheme = 'dark';
 
   const [theme, setTheme] = useState<ThemeName>(defaultTheme);
@@ -27,7 +29,7 @@ export const ThemeProvider = ({ children }: StateProps) => {
     localStorage.setItem(THEME_KEY, newTheme);
     setTheme(newTheme);
   };
-  const muiTheme = useMemo(() => getMuiThemeConfig(currentTheme, theme), [currentTheme, theme]);
+  const muiTheme = useMemo(() => getMuiThemeConfig(currentTheme, theme), [currentTheme, theme, getMuiThemeConfig]);
 
   // Load theme from local storage on load
   useEffect(() => {

src/types/Config.ts

@@ -1,3 +1,5 @@
+import { CustomThemes } from '~/types';
+
 export interface Env {
   RPC_URL: string;
   PROJECT_ID: string;
@@ -8,4 +10,4 @@ export interface Constants {
   //...
 }
 
-export interface Config extends Env, Constants {}
+export interface Config extends Env, Constants, CustomThemes {}

src/types/Theme.ts

@@ -1,3 +1,6 @@
+import { Theme as MuiTheme } from '@mui/material';
+import { Theme as RainbowTheme } from '@rainbow-me/rainbowkit';
+
 export type ThemeName = 'light' | 'dark';
 
 export interface Theme {
@@ -17,3 +20,12 @@ export interface Theme {
 export interface PropTheme {
   theme: Theme;
 }
+
+export interface CustomThemes {
+  main: {
+    light: Theme;
+    dark: Theme;
+  };
+  mui: (currentTheme: Theme, themeName: ThemeName) => MuiTheme;
+  rainbow: RainbowTheme;
+}

src/utils/config.ts

@@ -2,7 +2,7 @@ import { connectorsForWallets } from '@rainbow-me/rainbowkit';
 import { rainbowWallet, walletConnectWallet, injectedWallet } from '@rainbow-me/rainbowkit/wallets';
 import { createConfig, http, cookieStorage, createStorage } from 'wagmi';
 import { localhost, sepolia } from 'wagmi/chains';
-import { getConfig } from '../config';
+import { getConfig } from '~/config';
 
 const { PROJECT_ID } = getConfig();
 

src/utils/getTheme.ts

@@ -1,13 +1,15 @@
-import { darkTheme, lightTheme } from '~/components/Theme';
+import { getConfig } from '~/config';
 import { Theme, ThemeName } from '~/types';
 
 export const getTheme = (theme?: ThemeName): Theme => {
+  const { dark, light } = getConfig().main;
+
   switch (theme) {
     case 'light':
-      return lightTheme;
+      return light;
     case 'dark':
-      return darkTheme;
+      return dark;
     default:
-      return lightTheme;
+      return light;
   }
 };