chore: adding useScreenSize hook (#5669)

* feat: adding useScreenSize hook

* updating isTablet

* adding comments

src/hooks/useScreenSize.ts

+// HOW TO USE:
+// the hook returns a record of booleans, where the key is the name of the breakpoint
+// if the screen size is greater than or equal to the breakpoint, the value will be true
+// for example if the screen size is 1024px, the value of the 'md' key will be true and the value of the 'lg' key will be true
+// if you were to check if the screen is smaller than a breakpoint you would check if it is false
+
+import { useEffect, useState } from 'react'
+import { BREAKPOINTS } from 'theme'
+
+const isClient = typeof window !== 'undefined'
+
+function getScreenSize(): Record<keyof typeof BREAKPOINTS, boolean> {
+  return Object.keys(BREAKPOINTS).reduce(
+    (obj, key) =>
+      Object.assign(obj, {
+        [key]: isClient ? window.innerWidth >= BREAKPOINTS[key as keyof typeof BREAKPOINTS] : false,
+      }),
+    {} as Record<keyof typeof BREAKPOINTS, boolean>
+  )
+}
+
+export function useScreenSize(): Record<keyof typeof BREAKPOINTS, boolean> {
+  const [screenSize, setScreenSize] = useState(getScreenSize())
+
+  useEffect(() => {
+    function handleResize() {
+      setScreenSize(getScreenSize())
+    }
+
+    if (isClient) {
+      window.addEventListener('resize', handleResize)
+      return () => {
+        window.removeEventListener('resize', handleResize)
+      }
+    }
+    return undefined
+  }, [])
+
+  return screenSize
+}

src/nft/hooks/useIsMobile.ts

-import { breakpoints } from 'nft/css/sprinkles.css'
-import { useEffect, useState } from 'react'
-
-const isClient = typeof window !== 'undefined'
-
-export function getIsMobile() {
-  return isClient ? window.innerWidth < breakpoints.sm : false
-}
+// @deprecated in favor of useScreenSize
+import { useScreenSize } from 'hooks/useScreenSize'
 
 export function useIsMobile(): boolean {
-  const [isMobile, setIsMobile] = useState(getIsMobile)
-
-  useEffect(() => {
-    function handleResize() {
-      setIsMobile(getIsMobile())
-    }
-
-    if (isClient) {
-      window.addEventListener('resize', handleResize)
-      return () => {
-        window.removeEventListener('resize', handleResize)
-      }
-    }
-    return undefined
-  }, [])
+  const isScreenSize = useScreenSize()
+  const isMobile = !isScreenSize['sm']
 
   return isMobile
 }

src/nft/hooks/useIsTablet.ts

-import { breakpoints } from 'nft/css/sprinkles.css'
-import { useEffect, useState } from 'react'
-
-const isClient = typeof window !== 'undefined'
-
-function getIsTablet() {
-  return isClient ? window.innerWidth < breakpoints.lg && window.innerWidth >= breakpoints.sm : false
-}
+// @deprecated in favor of useScreenSize
+import { useScreenSize } from 'hooks/useScreenSize'
 
 export function useIsTablet(): boolean {
-  const [isTablet, setIsTablet] = useState(getIsTablet)
-
-  useEffect(() => {
-    function handleResize() {
-      setIsTablet(getIsTablet())
-    }
-
-    if (isClient) {
-      window.addEventListener('resize', handleResize)
-      return () => {
-        window.removeEventListener('resize', handleResize)
-      }
-    }
-    return undefined
-  }, [])
+  const isScreenSize = useScreenSize()
+  const isTablet = !isScreenSize['lg'] && isScreenSize['sm']
 
   return isTablet
 }

src/nft/utils/scrollToTop.ts

-import { getIsMobile } from 'nft/hooks'
+import { breakpoints } from 'nft/css/sprinkles.css'
+const isClient = typeof window !== 'undefined'
+
+function getIsMobile() {
+  return isClient ? window.innerWidth < breakpoints.sm : false
+}
 
 export const scrollToTop = () => {
   const isMobile = getIsMobile()