diff --git a/src/components/ProfileSection.tsx b/src/components/ProfileSection.tsx index 298ae9d..323d5a6 100644 --- a/src/components/ProfileSection.tsx +++ b/src/components/ProfileSection.tsx @@ -4,7 +4,12 @@ import { QRCodeSVG } from 'qrcode.react' import { useState } from 'react' import { Link } from 'react-router-dom' import { toast } from 'react-toastify' -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 c6c4498..011b7cf 100644 --- a/src/layout/header.tsx +++ b/src/layout/header.tsx @@ -9,6 +9,7 @@ import { ZapPopUp } from '../components/Zap' import { useAppDispatch, useAppSelector, + useBodyScrollDisable, useDidMount, useNDKContext } from '../hooks' @@ -26,6 +27,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, @@ -65,6 +78,7 @@ export const Header = () => { }, [dispatch, findMetadata]) const handleLogin = () => { + handleOpen() launchNostrLoginDialog() } @@ -259,6 +273,8 @@ const TipButtonWithDialog = React.memo(() => { const [adminNpub, setAdminNpub] = useState(null) const [isOpen, setIsOpen] = useState(false) + useBodyScrollDisable(isOpen) + useDidMount(async () => { const adminNpubs = import.meta.env.VITE_ADMIN_NPUBS.split(',') setAdminNpub(adminNpubs[0]) @@ -320,6 +336,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 a82c87d..f238524 100644 --- a/src/pages/mod/internal/comment/index.tsx +++ b/src/pages/mod/internal/comment/index.tsx @@ -1,7 +1,13 @@ import { NDKEvent } from '@nostr-dev-kit/ndk' import { ZapPopUp } from 'components/Zap' 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, { @@ -495,6 +501,8 @@ const Zap = (props: Event) => { const userState = useAppSelector((state) => state.user) const { getTotalZapAmount } = useNDKContext() + useBodyScrollDisable(isOpen) + useDidMount(() => { getTotalZapAmount( props.pubkey, diff --git a/src/pages/mod/internal/zap/index.tsx b/src/pages/mod/internal/zap/index.tsx index a0169bb..996c8d2 100644 --- a/src/pages/mod/internal/zap/index.tsx +++ b/src/pages/mod/internal/zap/index.tsx @@ -1,5 +1,10 @@ import { ZapSplit } from 'components/Zap' -import { useAppSelector, useDidMount, useNDKContext } from 'hooks' +import { + useAppSelector, + useBodyScrollDisable, + useDidMount, + useNDKContext +} from 'hooks' import { useState } from 'react' import { toast } from 'react-toastify' import { ModDetails } from 'types' @@ -17,6 +22,8 @@ export const Zap = ({ modDetails }: ZapProps) => { const userState = useAppSelector((state) => state.user) const { getTotalZapAmount } = useNDKContext() + useBodyScrollDisable(isOpen) + useDidMount(() => { getTotalZapAmount( modDetails.author, diff --git a/src/styles/cardMod.css b/src/styles/cardMod.css index 3028908..7dae7cc 100644 --- a/src/styles/cardMod.css +++ b/src/styles/cardMod.css @@ -143,3 +143,10 @@ align-items: center; color: rgba(255, 255, 255, 0.25); } + +.IBMSMSMBSSTagsTag.IBMSMSMBSSTagsTagNSFW.IBMSMSMBSSTagsTagNSFWCard { + position: absolute; + bottom: 10px; + right: 10px; + backdrop-filter: blur(10px); +}