refactor: replace Chakra useBreakpointValue with local export

Author: TylerAPfledderer

src/components/EnergyConsumptionChart/index.tsx

@@ -12,7 +12,6 @@ import ChartDataLabels from "chartjs-plugin-datalabels"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { Bar } from "react-chartjs-2"
-import { useBreakpointValue } from "@chakra-ui/react"
 
 import type { Lang } from "@/lib/types"
 
@@ -21,6 +20,7 @@ import { Center } from "@/components/ui/flex"
 import { wrapLabel } from "@/lib/utils/charts"
 import { isLangRightToLeft } from "@/lib/utils/translations"
 
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
 import useColorModeValue from "@/hooks/useColorModeValue"
 import { useIsClient } from "@/hooks/useIsClient"
 

src/components/Morpher.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react"
-import { useBreakpointValue } from "@chakra-ui/react"
 
 import { Button } from "@/components/Buttons"
 
@@ -9,6 +8,8 @@ import {
   MOBILE_LANGUAGE_BUTTON_NAME,
 } from "@/lib/constants"
 
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
 const Morpher = () => {
   const [state, setState] = useState({
     text: "Ethereum",

src/components/Simulator/WalletHome/NFTList.tsx

@@ -1,16 +1,12 @@
 import React from "react"
-import {
-  Box,
-  Flex,
-  type FlexProps,
-  Text,
-  useBreakpointValue,
-} from "@chakra-ui/react"
+import { Box, Flex, type FlexProps, Text } from "@chakra-ui/react"
 
 import { Image } from "@/components/Image"
 
 import type { NFT } from "./interfaces"
 
+import { useBreakpointValue } from "@/hooks/useBreakpointValue"
+
 type NFTListProps = FlexProps & {
   nfts: Array<NFT>
 }