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,45 +270,65 @@ export const ProfileQRButtonWithPopUp = ({
       </div>
 
       {isOpen && (
-        <div className='popUpMain'>
+        <ProfileQRPopup
-          <div className='ContainerMain'>
+          nprofile={nprofile}
-            <div className='popUpMainCardWrapper'>
+          handleClose={() => setIsOpen(false)}
-              <div className='popUpMainCard popUpMainCardQR'>
+        />
-                <div className='popUpMainCardTop'>
+      )}
-                  <div className='popUpMainCardTopInfo'>
+    </>
-                    <h3>Nostr Address</h3>
+  )
-                  </div>
+}
-                  <div
+interface ProfileQRPopupProps {
-                    className='popUpMainCardTopClose'
+  nprofile: string
-                    onClick={() => setIsOpen(false)}
+  handleClose: () => void
-                  >
+}
-                    <svg
+
-                      xmlns='http://www.w3.org/2000/svg'
+const ProfileQRPopup = ({ nprofile, handleClose }: ProfileQRPopupProps) => {
-                      viewBox='-96 0 512 512'
+  const onQrCodeClicked = async () => {
-                      width='1em'
+    const href = `https://njump.me/${nprofile}`
-                      height='1em'
+    const a = document.createElement('a')
-                      fill='currentColor'
+    a.href = href
-                      style={{ zIndex: 1 }}
+    a.target = '_blank' // Open in a new tab
-                    >
+    a.rel = 'noopener noreferrer' // Recommended for security reasons
-                      <path d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'></path>
+    a.click()
-                    </svg>
+  }
-                  </div>
+
-                </div>
+  return createPortal(
-                <div className='popUpMainCardBottom'>
+    <div className='popUpMain'>
-                  <QRCodeSVG
+      <div className='ContainerMain'>
-                    className='popUpMainCardBottomQR'
+        <div className='popUpMainCardWrapper'>
-                    onClick={onQrCodeClicked}
+          <div className='popUpMainCard popUpMainCardQR'>
-                    value={nprofile}
+            <div className='popUpMainCardTop'>
-                    height={235}
+              <div className='popUpMainCardTopInfo'>
-                    width={235}
+                <h3>Nostr Address</h3>
-                  />
-                </div>
               </div>
+              <div className='popUpMainCardTopClose' onClick={handleClose}>
+                <svg
+                  xmlns='http://www.w3.org/2000/svg'
+                  viewBox='-96 0 512 512'
+                  width='1em'
+                  height='1em'
+                  fill='currentColor'
+                  style={{ zIndex: 1 }}
+                >
+                  <path d='M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z'></path>
+                </svg>
+              </div>
+            </div>
+            <div className='popUpMainCardBottom'>
+              <QRCodeSVG
+                className='popUpMainCardBottomQR'
+                onClick={onQrCodeClicked}
+                value={nprofile}
+                height={235}
+                width={235}
+              />
             </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
   )
 }