Replace MUI useScrollTrigger hook with simple hook

Author: buberdds

src/app/components/PageLayout/Header.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
-import useScrollTrigger from '@mui/material/useScrollTrigger'
 import { useTheme } from '@mui/material/styles'
+import { useScrolled } from '../../hooks/useScrolled'
 import { HomePageLink } from './Logotype'
 import { NetworkSelector } from './NetworkSelector'
 import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
@@ -16,24 +16,19 @@ export const Header: FC = () => {
   const { isDesktop } = useScreenSize()
   const scope = useScopeParam()
   const withScopeSelector = !!scope && isScopeSelectorNeeded(scope)
-  const scrollTrigger = useScrollTrigger({
-    disableHysteresis: true,
-    threshold: 0,
-  })
+  const scrolled = useScrolled()
 
   return (
     <header
-      className="flex flex-col w-full box-border flex-shrink-0 sticky z-[1100] top-0 right-0 left-auto transition-colors duration-300 ease-in-out shadow-md"
+      className="flex flex-col w-full box-border flex-shrink-0 sticky z-[1100] top-0 right-0 left-auto shadow-md"
       style={{
-        backgroundColor: scrollTrigger
-          ? theme.palette.layout.contrastSecondary
-          : theme.palette.layout.secondary,
+        backgroundColor: theme.palette.layout.contrastSecondary,
       }}
     >
       <div className="px-4">
         <div className="grid grid-cols-12 pt-3 pb-4 px-0 md:px-[4%]">
           <div className="col-span-6 xl:col-span-3 flex items-center">
-            <HomePageLink showText={!scrollTrigger && !isMobile} />
+            <HomePageLink showText={!scrolled && !isMobile} />
           </div>
 
           {withScopeSelector && (

src/app/hooks/useScrolled.ts

@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react'
+
+export function useScrolled(): boolean {
+  const [scrolled, setScrolled] = useState(false)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 0)
+    }
+
+    handleScroll()
+    window.addEventListener('scroll', handleScroll, { passive: true })
+
+    return () => window.removeEventListener('scroll', handleScroll)
+  }, [])
+
+  return scrolled
+}