fix(feed): use portals for profile section popups

Fix #221

src/components/ProfileSection.tsx

@@ -28,6 +28,7 @@ import { ZapPopUp } from './Zap'
 import placeholder from '../assets/img/DEGMods Placeholder Img.png'
 import { NDKEvent, NDKSubscriptionCacheUsage } from '@nostr-dev-kit/ndk'
 import { useProfile } from 'hooks/useProfile'
+import { createPortal } from 'react-dom'
 
 type Props = {
   pubkey: string
@@ -250,15 +251,6 @@ export const ProfileQRButtonWithPopUp = ({
 
   useBodyScrollDisable(isOpen)
 
-  const onQrCodeClicked = async () => {
-    const href = `https://njump.me/${nprofile}`
-    const a = document.createElement('a')
-    a.href = href
-    a.target = '_blank' // Open in a new tab
-    a.rel = 'noopener noreferrer' // Recommended for security reasons
-    a.click()
-  }
-
   return (
     <>
       <div
@@ -278,6 +270,30 @@ export const ProfileQRButtonWithPopUp = ({
       </div>
 
       {isOpen && (
+        <ProfileQRPopup
+          nprofile={nprofile}
+          handleClose={() => setIsOpen(false)}
+        />
+      )}
+    </>
+  )
+}
+interface ProfileQRPopupProps {
+  nprofile: string
+  handleClose: () => void
+}
+
+const ProfileQRPopup = ({ nprofile, handleClose }: ProfileQRPopupProps) => {
+  const onQrCodeClicked = async () => {
+    const href = `https://njump.me/${nprofile}`
+    const a = document.createElement('a')
+    a.href = href
+    a.target = '_blank' // Open in a new tab
+    a.rel = 'noopener noreferrer' // Recommended for security reasons
+    a.click()
+  }
+
+  return createPortal(
     <div className='popUpMain'>
       <div className='ContainerMain'>
         <div className='popUpMainCardWrapper'>
@@ -286,10 +302,7 @@ export const ProfileQRButtonWithPopUp = ({
               <div className='popUpMainCardTopInfo'>
                 <h3>Nostr Address</h3>
               </div>
-                  <div
-                    className='popUpMainCardTopClose'
-                    onClick={() => setIsOpen(false)}
-                  >
+              <div className='popUpMainCardTopClose' onClick={handleClose}>
                 <svg
                   xmlns='http://www.w3.org/2000/svg'
                   viewBox='-96 0 512 512'
@@ -314,9 +327,8 @@ export const ProfileQRButtonWithPopUp = ({
           </div>
         </div>
       </div>
-        </div>
-      )}
-    </>
+    </div>,
+    document.body
   )
 }
 

src/components/Zap.tsx

@@ -27,6 +27,7 @@ import {
 } from '../utils'
 import { LoadingSpinner } from './LoadingSpinner'
 import { FALLBACK_PROFILE_IMAGE } from 'constants.ts'
+import { createPortal } from 'react-dom'
 
 type PresetAmountProps = {
   label: string
@@ -436,7 +437,7 @@ export const ZapPopUp = ({
     }
   }, [notCloseAfterZap, handleClose])
 
-  return (
+  return createPortal(
     <>
       {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
       <div className='popUpMain'>
@@ -513,7 +514,8 @@ export const ZapPopUp = ({
           </div>
         </div>
       </div>
-    </>
+    </>,
+    document.body
   )
 }