From dec50f2fa41e1481601932f778fc619a52f97293 Mon Sep 17 00:00:00 2001 From: Onizuka-wl Date: Wed, 2 Oct 2024 16:41:37 -0300 Subject: [PATCH] refactor: moved theme to config --- src/components/Theme/index.ts | 3 --- src/components/index.ts | 1 - src/config/Theme/index.ts | 14 ++++++++++++++ src/{components => config}/Theme/muiThemeConfig.ts | 0 src/{components => config}/Theme/rainbowTheme.ts | 0 src/{components => config}/Theme/theme.ts | 0 src/config/index.ts | 2 ++ src/providers/ThemeProvider.tsx | 6 ++++-- src/types/Config.ts | 4 +++- src/types/Theme.ts | 12 ++++++++++++ src/utils/config.ts | 2 +- src/utils/getTheme.ts | 10 ++++++---- 12 files changed, 42 insertions(+), 12 deletions(-) delete mode 100644 src/components/Theme/index.ts create mode 100644 src/config/Theme/index.ts rename src/{components => config}/Theme/muiThemeConfig.ts (100%) rename src/{components => config}/Theme/rainbowTheme.ts (100%) rename src/{components => config}/Theme/theme.ts (100%) diff --git a/src/components/Theme/index.ts b/src/components/Theme/index.ts deleted file mode 100644 index 9ddce8b..0000000 --- a/src/components/Theme/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './rainbowTheme'; -export * from './theme'; -export * from './muiThemeConfig'; diff --git a/src/components/index.ts b/src/components/index.ts index 0fe1f0b..0c33483 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,2 +1 @@ -export * from './Theme'; export * from './Disclaimer'; diff --git a/src/config/Theme/index.ts b/src/config/Theme/index.ts new file mode 100644 index 0000000..74e6654 --- /dev/null +++ b/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, + }; +}; diff --git a/src/components/Theme/muiThemeConfig.ts b/src/config/Theme/muiThemeConfig.ts similarity index 100% rename from src/components/Theme/muiThemeConfig.ts rename to src/config/Theme/muiThemeConfig.ts diff --git a/src/components/Theme/rainbowTheme.ts b/src/config/Theme/rainbowTheme.ts similarity index 100% rename from src/components/Theme/rainbowTheme.ts rename to src/config/Theme/rainbowTheme.ts diff --git a/src/components/Theme/theme.ts b/src/config/Theme/theme.ts similarity index 100% rename from src/components/Theme/theme.ts rename to src/config/Theme/theme.ts diff --git a/src/config/index.ts b/src/config/index.ts index 04ba601..3428c71 100644 --- a/src/config/index.ts +++ b/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(), }); diff --git a/src/providers/ThemeProvider.tsx b/src/providers/ThemeProvider.tsx index c4429fc..565f26a 100644 --- a/src/providers/ThemeProvider.tsx +++ b/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(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(() => { diff --git a/src/types/Config.ts b/src/types/Config.ts index 23cc631..b5a45ab 100644 --- a/src/types/Config.ts +++ b/src/types/Config.ts @@ -1,3 +1,5 @@ +import { CutomThemes } 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, CutomThemes {} diff --git a/src/types/Theme.ts b/src/types/Theme.ts index 22f9536..42196d4 100644 --- a/src/types/Theme.ts +++ b/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 CutomThemes { + main: { + light: Theme; + dark: Theme; + }; + mui: (currentTheme: Theme, themeName: ThemeName) => MuiTheme; + rainbow: RainbowTheme; +} diff --git a/src/utils/config.ts b/src/utils/config.ts index 4dc62dc..f305006 100644 --- a/src/utils/config.ts +++ b/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(); diff --git a/src/utils/getTheme.ts b/src/utils/getTheme.ts index 1878344..54d2b06 100644 --- a/src/utils/getTheme.ts +++ b/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; } };