fix: use toggleBodyScroll method

Author: mhenriette

src/components/popups/KYCVerification.tsx

@@ -5,6 +5,7 @@ import { useSelector } from "@/hooks/useTypedSelector";
 import { KYCSTATUS, closeVerificationModal, launchWebSdk, triggerCompleteAction } from "@/store/feature/kyc.slice";
 import { useDispatch } from "@/hooks/useTypedDispatch";
 import { useMemo } from "react";
+import { toggleBodyScrolling } from "@/store/feature/ui.slice";
 
 /**
  * KYCVerification Props Interface
@@ -39,6 +40,7 @@ export default function KYCVerification({ onCompleted }: KYCVerificationProps) {
   const kycStatus = user?.kycStatus;
 
   const closeModal = () => {
+    dispatch(toggleBodyScrolling(false));
     dispatch(closeVerificationModal());
   };
   const verify = () => {

src/components/sections/profile/Header.tsx

@@ -16,6 +16,7 @@ import { useDiscordConnect } from "@/hooks/useDiscordConnect";
 import { User } from "@/types/bounty";
 import { IRootState } from "@/store";
 import Link from "next/link";
+import { toggleBodyScrolling } from "@/store/feature/ui.slice";
 
 /**
  * interface for ProfileHeader multiSelector
@@ -64,8 +65,10 @@ export default function ProfileHeader() {
   }, [isCurrentUser, isKycVerified]);
 
   const dispatch = useDispatch();
+
   const triggerKYCVerification = () => {
     dispatch(openVerificationModal({}));
+    dispatch(toggleBodyScrolling(true))
   };
 
   const { canConnectDiscord, triggerDiscordOauth } = useDiscordConnect();

src/components/ui/Popup.tsx

@@ -1,5 +1,5 @@
 import classNames from "classnames";
-import { ReactElement, useEffect } from "react";
+import { ReactElement} from "react";
 
 /**
  * Popups interface props
@@ -32,14 +32,6 @@ interface PopupProps {
  */
 export default function Popup({ center, onClose, show, children, className = "" }: PopupProps): ReactElement {
 
-  useEffect(() => {
-    if (show) {
-      document.body.style.overflow = "hidden";
-    } else {
-      document.body.style.overflow = "auto";
-    }
-  }, [show]);
-
   return show ? (
     <div className={classNames(`fixed z-999 w-screen h-screen overflow-y-scroll top-0 left-0 ${className}`, { "flex items-center": center })}>
       <div className="opacity-25 fixed inset-0 z-0 bg-black w-full h-screen top-0 left-0" onClick={onClose} />