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);
+}