🎨 refactor header to use window position hook

src/components/ConnectorDesktop.tsx

@@ -12,7 +12,7 @@ import { useWeb3Updated } from "../app/hooks/use-web3-updated";
 import pending from "../assets/ui/status/pending.svg";
 import { spinAnimation } from "../styles/animations/SpinAnimation";
 import { pendingTransactionsCount } from "../state/transactionsSlice";
-import { useWindowPosition } from "../app/hooks/use-window-position";
+import useWindowPosition from "../app/hooks/use-window-position";
 
 const StyledConnectorDesktop = styled.div`
   display: flex;

src/components/Header.tsx

@@ -1,11 +1,12 @@
-import React, { useEffect, useState } from "react";
+import React from "react";
 import styled from "styled-components";
 import { Link } from "react-router-dom";
 
 import logo from "../assets/logo/logo.svg";
 import Connector from "./Connector";
 import NavItems from "./NavItems";
 import Banner from "./Banner";
+import useWindowPosition from "../app/hooks/use-window-position";
 
 type HeaderProps = {
   isSticky: boolean;
@@ -58,23 +59,10 @@ const Logo = styled.img`
 `;
 
 const Header = (): JSX.Element => {
-  const [scrollPosition, setScrollPosition] = useState(0);
-
-  const handleScroll = () => {
-    const position = window.pageYOffset;
-    setScrollPosition(position);
-  };
-
-  useEffect(() => {
-    window.addEventListener("scroll", handleScroll, { passive: true });
-
-    return () => {
-      window.removeEventListener("scroll", handleScroll);
-    };
-  }, []);
+  const windowPosition = useWindowPosition();
 
   return (
-    <StyledHeader isSticky={scrollPosition > 40}>
+    <StyledHeader isSticky={windowPosition > 40}>
       <Banner />
       <Content>
         <Link to="/">