fix: for upcoming v0.53.1 (#731)

* fix: swap error caused by invalid id and batchcount
* fix: enhance creation messages for admin drive and user drives (#238)
* fix: enhance creation messages for admin drive and user drives
* fix: update creation message to indicate longer processing time
* fix: identity and wallet creation (#240)
* fix: asset preview types
* fix: fm search unicode text
* fix: feed identity and stamp usage
* fix: ui display changes (#239)
* fix: ui layout changes

* fix: stamp buy and dilute (#242)

fix: vite polyfill warning for stream
refactor: stamp depth and amount validation

* fix: spdv-917 (#243)

* fix: spdv-917

* refactor: spdv-917

* fix: add syncing message for Bee node and update page state handling spdv-955 (#244)

* fix: spdv-1037 (#245)

* fix: spdv-1038 (#246)

* fix: spdv-1038

* refactor: spdv-1038

* fix: validate stamp before every upgrade click (#247)

* fix: validate stamp before every upgrade click
---------

Co-authored-by: Roland Seres <roland.seres90@gmail.com>

* fix: use tochecksum() and toplurbigint() for ethers v6 compatibility (#248)

---------

Co-authored-by: Balint Ujvari <balint.ujvari@solarpunk.buzz>
Co-authored-by: Bálint Ujvári <58116288+bosi95@users.noreply.github.com>
Co-authored-by: rolandlor <33499567+rolandlor@users.noreply.github.com>
Co-authored-by: Roland Seres <roland.seres90@gmail.com>

src/modules/filemanager/components/ExpiringNotificationModal/ExpiringNotificationModal.tsx

@@ -1,9 +1,10 @@
-import { PostageBatch } from '@ethersphere/bee-js'
+import { Bee, PostageBatch } from '@ethersphere/bee-js'
 import { DriveInfo, FileInfo } from '@solarpunkltd/file-manager-lib'
 import { ReactElement, useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 import AlertIcon from 'remixicon-react/AlertLineIcon'
 
+import { validateStampStillExists } from '../../utils/bee'
 import { getDaysLeft } from '../../utils/common'
 import { Button } from '../Button/Button'
 import { UpgradeDriveModal } from '../UpgradeDriveModal/UpgradeDriveModal'
@@ -16,19 +17,23 @@ import '../../styles/global.scss'
 const EXPIRING_ITEMS_PAGE_SIZE = 3
 
 interface ExpiringNotificationModalProps {
+  bee: Bee
   stamps: PostageBatch[]
   drives: DriveInfo[]
   files: FileInfo[]
   onCancelClick: () => void
   setErrorMessage?: (error: string) => void
+  setShowError: (show: boolean) => void
 }
 
 export function ExpiringNotificationModal({
+  bee,
   stamps,
   drives,
   files,
   onCancelClick,
   setErrorMessage,
+  setShowError,
 }: ExpiringNotificationModalProps): ReactElement {
   const [showUpgradeDriveModal, setShowUpgradeDriveModal] = useState(false)
   const [actualStamp, setActualStamp] = useState<PostageBatch | undefined>(undefined)
@@ -75,7 +80,18 @@ export function ExpiringNotificationModal({
                 files={files}
                 currentPage={currentPage}
                 index={index}
-                onUpgradeClick={(stamp, drive) => {
+                onUpgradeClick={async (stamp, drive) => {
+                  const isStampValid = await validateStampStillExists(bee, stamp.batchID)
+
+                  if (!isStampValid) {
+                    setErrorMessage?.(
+                      `Drive ${drive.name} has expired. Please clear the browser cache and reload the page.`,
+                    )
+                    setShowError(true)
+
+                    return
+                  }
+
                   setActualStamp(stamp)
                   setActualDrive(drive)
                   setShowUpgradeDriveModal(true)

src/modules/filemanager/components/FileBrowser/FileBrowser.tsx

@@ -10,6 +10,7 @@ import React, {
   useRef,
   useState,
 } from 'react'
+import { createPortal } from 'react-dom'
 
 import { useSearch } from '../../../../pages/filemanager/SearchContext'
 import { useView } from '../../../../pages/filemanager/ViewContext'
@@ -87,7 +88,9 @@ function ErrorModalBlock({
     return null
   }
 
-  return <ErrorModal label={label} onClick={onOk} />
+  const modalRoot = document.querySelector('.fm-main') || document.body
+
+  return createPortal(<ErrorModal label={label} onClick={onOk} />, modalRoot)
 }
 
 const extractFilesFromClipboardEvent = (e: React.ClipboardEvent): File[] => {
@@ -431,8 +434,10 @@ export function FileBrowser({ errorMessage, setErrorMessage }: FileBrowserProps)
       if (rafIdRef.current) {
         cancelAnimationFrame(rafIdRef.current)
       }
+
+      setShowError(false)
     }
-  }, [])
+  }, [setShowError])
 
   useEffect(() => {
     let title = currentDrive?.name || ''

src/modules/filemanager/components/NotificationBar/NotificationBar.tsx

@@ -30,7 +30,7 @@ export function NotificationBar({ setErrorMessage }: NotificationBarProps): Reac
   const [stampsToExpire, setStampsToExpire] = useState<PostageBatch[]>([])
   const [drivesToExpire, setDrivesToExpire] = useState<DriveInfo[]>([])
   const { beeApi } = useContext(SettingsContext)
-  const { drives, files, adminDrive } = useContext(FMContext)
+  const { drives, files, adminDrive, setShowError } = useContext(FMContext)
 
   const showExpiration = stampsToExpire.length > 0
 
@@ -109,8 +109,9 @@ export function NotificationBar({ setErrorMessage }: NotificationBarProps): Reac
       <div className="fm-notification-bar fm-red-font" onClick={() => setShowExpiringModal(true)}>
         {stampsToExpire.length} drive{stampsToExpire.length > 1 ? 's' : ''} expiring soon <UpIcon size="16px" />
       </div>
-      {showExpiringModal && (
+      {showExpiringModal && beeApi && (
         <ExpiringNotificationModal
+          bee={beeApi}
           stamps={stampsToExpire}
           drives={drivesToExpire}
           files={files}
@@ -118,6 +119,7 @@ export function NotificationBar({ setErrorMessage }: NotificationBarProps): Reac
             setShowExpiringModal(false)
           }}
           setErrorMessage={setErrorMessage}
+          setShowError={setShowError}
         />
       )}
     </>