diff --git a/src/components/ProfileSection.tsx b/src/components/ProfileSection.tsx index 170c1e4..e52e940 100644 --- a/src/components/ProfileSection.tsx +++ b/src/components/ProfileSection.tsx @@ -5,7 +5,12 @@ import { useState } from 'react' import { Link } from 'react-router-dom' import { toast } from 'react-toastify' import { RelayController, UserRelaysType } from '../controllers' -import { useAppSelector, useDidMount, useNDKContext } from '../hooks' +import { + useAppSelector, + useBodyScrollDisable, + useDidMount, + useNDKContext +} from '../hooks' import { appRoutes, getProfilePageRoute } from '../routes' import '../styles/author.css' import '../styles/innerPage.css' @@ -254,6 +259,8 @@ export const ProfileQRButtonWithPopUp = ({ }: QRButtonWithPopUpProps) => { const [isOpen, setIsOpen] = useState(false) + useBodyScrollDisable(isOpen) + const nprofile = nip19.nprofileEncode({ pubkey }) @@ -335,6 +342,8 @@ type ZapButtonWithPopUpProps = { const ZapButtonWithPopUp = ({ pubkey }: ZapButtonWithPopUpProps) => { const [isOpen, setIsOpen] = useState(false) + useBodyScrollDisable(isOpen) + return ( <>
{ + useEffect(() => { + if (disable) document.body.style.overflow = 'hidden' + + return () => { + document.body.style.overflow = '' + } + }, [disable]) +} diff --git a/src/layout/header.tsx b/src/layout/header.tsx index bc4c2b8..faae13e 100644 --- a/src/layout/header.tsx +++ b/src/layout/header.tsx @@ -10,6 +10,7 @@ import { MetadataController } from '../controllers' import { useAppDispatch, useAppSelector, + useBodyScrollDisable, useDidMount, useNDKContext } from '../hooks' @@ -27,6 +28,18 @@ export const Header = () => { const { findMetadata } = useNDKContext() const userState = useAppSelector((state) => state.user) + // Track nostr-login extension modal open state + const [isOpen, setIsOpen] = useState(false) + const handleOpen = () => setIsOpen(true) + const handleClose = () => setIsOpen(false) + useEffect(() => { + window.addEventListener('nlCloseModal', handleClose) + return () => { + window.removeEventListener('nlCloseModal', handleClose) + } + }, []) + useBodyScrollDisable(isOpen) + useEffect(() => { initNostrLogin({ darkMode: true, @@ -66,6 +79,7 @@ export const Header = () => { }, [dispatch, findMetadata]) const handleLogin = () => { + handleOpen() launchNostrLoginDialog() } @@ -260,6 +274,8 @@ const TipButtonWithDialog = React.memo(() => { const [adminNpub, setAdminNpub] = useState(null) const [isOpen, setIsOpen] = useState(false) + useBodyScrollDisable(isOpen) + useDidMount(async () => { const metadataController = await MetadataController.getInstance() setAdminNpub(metadataController.adminNpubs[0]) @@ -321,6 +337,8 @@ const TipButtonWithDialog = React.memo(() => { const RegisterButtonWithDialog = () => { const [showPopUp, setShowPopUp] = useState(false) + useBodyScrollDisable(showPopUp) + return ( <> { const [isBlocked, setIsBlocked] = useState(false) const [isAddedToNSFW, setIsAddedToNSFW] = useState(false) + useBodyScrollDisable(showReportPopUp) + useEffect(() => { if (userState.auth && userState.user?.pubkey) { const pubkey = userState.user.pubkey as string diff --git a/src/pages/mod/internal/comment/index.tsx b/src/pages/mod/internal/comment/index.tsx index 2f5b721..3c92b25 100644 --- a/src/pages/mod/internal/comment/index.tsx +++ b/src/pages/mod/internal/comment/index.tsx @@ -5,7 +5,13 @@ import { UserRelaysType } from 'controllers' import { formatDate } from 'date-fns' -import { useAppSelector, useDidMount, useNDKContext, useReactions } from 'hooks' +import { + useAppSelector, + useBodyScrollDisable, + useDidMount, + useNDKContext, + useReactions +} from 'hooks' import { useComments } from 'hooks/useComments' import { Event, kinds, nip19, UnsignedEvent } from 'nostr-tools' import React, { @@ -502,6 +508,8 @@ const Zap = (props: Event) => { const [totalZappedAmount, setTotalZappedAmount] = useState(0) + useBodyScrollDisable(isOpen) + useDidMount(() => { RelayController.getInstance() .getTotalZapAmount( diff --git a/src/pages/mod/internal/zap/index.tsx b/src/pages/mod/internal/zap/index.tsx index 93e8bad..e40a07c 100644 --- a/src/pages/mod/internal/zap/index.tsx +++ b/src/pages/mod/internal/zap/index.tsx @@ -1,6 +1,6 @@ import { ZapSplit } from 'components/Zap' import { RelayController } from 'controllers' -import { useAppSelector, useDidMount } from 'hooks' +import { useAppSelector, useBodyScrollDisable, useDidMount } from 'hooks' import { useState } from 'react' import { toast } from 'react-toastify' import { ModDetails } from 'types' @@ -18,6 +18,8 @@ export const Zap = ({ modDetails }: ZapProps) => { const [totalZappedAmount, setTotalZappedAmount] = useState(0) + useBodyScrollDisable(isOpen) + useDidMount(() => { RelayController.getInstance() .getTotalZapAmount(