refactor(ThemeProvider): remove Chakra provider and remove useColorMode from useNav

Author: TylerAPfledderer

src/components/Nav/useNav.ts

@@ -18,7 +18,6 @@ import {
   BsUiChecksGrid,
 } from "react-icons/bs"
 import { PiFlask, PiUsersFourLight } from "react-icons/pi"
-import { useColorMode } from "@chakra-ui/react"
 
 import EthereumIcon from "@/components/icons/ethereum-icon.svg"
 
@@ -29,8 +28,6 @@ import type { NavSections } from "./types"
 export const useNav = () => {
   const { t } = useTranslation("common")
   const { setTheme, resolvedTheme } = useTheme()
-  // TODO Remove when removing chakra provider
-  const { setColorMode } = useColorMode()
 
   const linkSections: NavSections = {
     learn: {
@@ -476,7 +473,7 @@ export const useNav = () => {
     const targetTheme = resolvedTheme === "dark" ? "light" : "dark"
 
     setTheme(targetTheme)
-    setColorMode(targetTheme)
+    // setColorMode(targetTheme)
 
     trackCustomEvent({
       eventCategory: "nav bar",

src/components/ThemeProvider.tsx

@@ -1,45 +1,24 @@
-import { useMemo } from "react"
-import merge from "lodash/merge"
 import { ThemeProvider as NextThemesProvider } from "next-themes"
 import type { ThemeProviderProps } from "next-themes/dist/types"
-import { ChakraBaseProvider, createLocalStorageManager } from "@chakra-ui/react"
-
-import customTheme from "@/@chakra-ui/theme"
 
 import { COLOR_MODE_STORAGE_KEY } from "@/lib/constants"
 
-import { useLocaleDirection } from "@/hooks/useLocaleDirection"
-
-const colorModeManager = createLocalStorageManager(COLOR_MODE_STORAGE_KEY)
-
 /**
  * Primary theming wrapper for use with color mode. Uses the theme provider
  * from `next-themes`.
  *
  * Applied to _app.tsx as the main provider for the project, and supplied as the
  * primary decorator to Storybook.
- *
- * NOTE: This also includes the Chakra Provider. This will be removed after migration to ShadCN/Tailwind is complete
  */
 const ThemeProvider = ({ children }: Pick<ThemeProviderProps, "children">) => {
-  const direction = useLocaleDirection()
-
-  const theme = useMemo(() => merge(customTheme, { direction }), [direction])
   return (
     <NextThemesProvider
       attribute="data-theme"
       defaultTheme="light"
-      enableSystem={false}
       disableTransitionOnChange
       storageKey={COLOR_MODE_STORAGE_KEY}
     >
-      <ChakraBaseProvider
-        theme={theme}
-        colorModeManager={colorModeManager}
-        resetCSS={false}
-      >
-        {children}
-      </ChakraBaseProvider>
+      {children}
     </NextThemesProvider>
   )
 }