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,
+    },
+    getMui: getMuiThemeConfig,
+    rainbow: rainbowTheme,
+  };
+};

src/config/env.ts

@@ -1,13 +1,11 @@
 import { Env } from '~/types';
 
-export const getEnv = (): Env => {
-  const NEXT_PUBLIC_RPC_URL = process.env.NEXT_PUBLIC_RPC_URL;
-  const NEXT_PUBLIC_PROJECT_ID = process.env.NEXT_PUBLIC_PROJECT_ID;
-  const NEXT_PUBLIC_ALCHEMY_KEY = process.env.NEXT_PUBLIC_ALCHEMY_KEY;
+const env: Env = {
+  RPC_URL: process.env.NEXT_PUBLIC_RPC_URL as string,
+  PROJECT_ID: process.env.NEXT_PUBLIC_PROJECT_ID as string,
+  ALCHEMY_KEY: process.env.NEXT_PUBLIC_ALCHEMY_KEY as string,
+};
 
-  return {
-    RPC_URL: NEXT_PUBLIC_RPC_URL as string,
-    PROJECT_ID: NEXT_PUBLIC_PROJECT_ID as string,
-    ALCHEMY_KEY: NEXT_PUBLIC_ALCHEMY_KEY as string,
-  };
+export const getEnv = (): Env => {
+  return env;
 };

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';
 
@@ -11,6 +12,7 @@ export const publicClient = createPublicClient({
 });
 
 export const getConfig = (): Config => ({
-  ...getEnv(),
-  ...getConstants(),
+  env: getEnv(),
+  constants: getConstants(),
+  customThemes: 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 { getMui: getMuiThemeConfig } = getConfig().customThemes;
+
   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,8 @@ export interface Constants {
   //...
 }
 
-export interface Config extends Env, Constants {}
+export interface Config {
+  env: Env;
+  constants: Constants;
+  customThemes: 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;
+  };
+  getMui: (currentTheme: Theme, themeName: ThemeName) => MuiTheme;
+  rainbow: RainbowTheme;
+}

src/utils/config.ts

@@ -2,9 +2,9 @@ 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();
+const { PROJECT_ID } = getConfig().env;
 
 const getWallets = () => {
   if (PROJECT_ID) {

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().customThemes.main;
+
   switch (theme) {
     case 'light':
-      return lightTheme;
+      return light;
     case 'dark':
-      return darkTheme;
+      return dark;
     default:
-      return lightTheme;
+      return light;
   }
 };