From 9e1036ac297842055bb91512987b684552b70ca5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ferenc=20S=C3=A1rai?= Date: Tue, 17 Feb 2026 17:19:10 +0100 Subject: [PATCH] fix: link_randomuuid_cache (#718) * fix: [SPDV-828] use react router link instead of href * fix: auto import issue * fix: replace randomuuid with getRandomValues= * fix: reset FM states if state is invalid * fix: use no-cache for stamp fetch * fix: clear cache and reload message * fix: shallReset flag * fix: identify browser platform and set help url accordingly * fix: edge browser detection * fix: use fallback chrome and verify for safari --------- Co-authored-by: Nandor Komlodi Co-authored-by: Balint Ujvari --- .../AdminStatusBar/AdminStatusBar.tsx | 6 ++-- .../PrivateKeyModal/PrivateKeyModal.tsx | 3 +- src/modules/filemanager/constants/tooltips.ts | 2 ++ src/modules/filemanager/utils/bee.ts | 1 + src/pages/filemanager/index.tsx | 26 ++++++++++++-- src/pages/not-found/PageNotFound.tsx | 4 ++- src/providers/FileManager.tsx | 8 ++++- src/providers/Platform.tsx | 36 +++++++++++++++++++ src/utils/index.ts | 1 + 9 files changed, 78 insertions(+), 9 deletions(-) diff --git a/src/modules/filemanager/components/AdminStatusBar/AdminStatusBar.tsx b/src/modules/filemanager/components/AdminStatusBar/AdminStatusBar.tsx index f5f6367..53f348c 100644 --- a/src/modules/filemanager/components/AdminStatusBar/AdminStatusBar.tsx +++ b/src/modules/filemanager/components/AdminStatusBar/AdminStatusBar.tsx @@ -12,6 +12,7 @@ import { UpgradeDriveModal } from '../UpgradeDriveModal/UpgradeDriveModal' import { UpgradeTimeoutModal } from '../UpgradeTimeoutModal/UpgradeTimeoutModal' import { FILE_MANAGER_EVENTS, POLLING_TIMEOUT_MS } from '../../constants/common' import { useStampPolling } from '../../hooks/useStampPolling' +import { TOOLTIPS } from '../../constants/tooltips' interface AdminStatusBarProps { adminStamp: PostageBatch | null @@ -226,10 +227,7 @@ export function AdminStatusBar({
File Manager Available: Until: {expiresAt}
- + {renderModalsAndOverlays()} diff --git a/src/modules/filemanager/components/PrivateKeyModal/PrivateKeyModal.tsx b/src/modules/filemanager/components/PrivateKeyModal/PrivateKeyModal.tsx index ab9026f..8e00b91 100644 --- a/src/modules/filemanager/components/PrivateKeyModal/PrivateKeyModal.tsx +++ b/src/modules/filemanager/components/PrivateKeyModal/PrivateKeyModal.tsx @@ -2,6 +2,7 @@ import { useState, ReactElement, useEffect } from 'react' import './PrivateKeyModal.scss' import { Button } from '../Button/Button' import { setSignerPk, getSigner } from '../../utils/common' +import { uuidV4 } from '../../../../utils' import { PrivateKey } from '@ethersphere/bee-js' import ClipboardIcon from 'remixicon-react/FileCopyLineIcon' import CheckDoubleLineIcon from 'remixicon-react/CheckDoubleLineIcon' @@ -31,7 +32,7 @@ export function PrivateKeyModal({ onSaved }: Props): ReactElement { } const handleGenerateNew = () => { - const id = crypto.randomUUID() + const id = uuidV4() const signer = getSigner(id) const privKey = signer.toHex() diff --git a/src/modules/filemanager/constants/tooltips.ts b/src/modules/filemanager/constants/tooltips.ts index 859a897..c663b58 100644 --- a/src/modules/filemanager/constants/tooltips.ts +++ b/src/modules/filemanager/constants/tooltips.ts @@ -53,6 +53,8 @@ This action will do two things: ADMIN_PURCHASE_BUTTON_ALREADY_EXISTED_ADMIN_DRIVE: `${getTitleWithStyle('Create Admin Drive')} It will create the Admin Drive.`, + ADMIN_STATUS_WARNING: + 'The File Manager works only while your storage remains valid. If it expires, all catalogue metadata is permanently lost.', // Drive Creation DRIVE_NAME: `${getTitleWithStyle('About Drive Name')} diff --git a/src/modules/filemanager/utils/bee.ts b/src/modules/filemanager/utils/bee.ts index fbffd4e..47bb479 100644 --- a/src/modules/filemanager/utils/bee.ts +++ b/src/modules/filemanager/utils/bee.ts @@ -172,6 +172,7 @@ export const handleCreateDrive = async (options: CreateDriveOptions): Promise(false) const [isCreationInProgress, setIsCreationInProgress] = useState(false) const [showConnectionError, setShowConnectionError] = useState(false) + const [cacheHelpUrl, setCacheHelpUrl] = useState(cacheClearUrls[BrowserPlatform.Chrome]) const { status } = useContext(BeeContext) const { beeApi } = useContext(SettingsContext) @@ -36,6 +38,13 @@ export function FileManagerPage(): ReactElement { useEffect(() => { isMountedRef.current = true + const getBrowserPlatform = async () => { + const browserPlatform = await detectBrowser() + setCacheHelpUrl(cacheClearUrls[browserPlatform]) + } + + getBrowserPlatform() + return () => { isMountedRef.current = false } @@ -162,8 +171,21 @@ export function FileManagerPage(): ReactElement {
+ Your File Manager state appears invalid. Please{' '} + + clear the browser cache + {' '} + and reload the page. Then you can reset the File Manager to continue. + + } + confirmLabel="Continue" onConfirm={() => { setShowResetModal(false) }} diff --git a/src/pages/not-found/PageNotFound.tsx b/src/pages/not-found/PageNotFound.tsx index 51b9f08..d7f2cca 100644 --- a/src/pages/not-found/PageNotFound.tsx +++ b/src/pages/not-found/PageNotFound.tsx @@ -1,13 +1,15 @@ import { ReactElement } from 'react' import { HistoryHeader } from '../../components/HistoryHeader' import { Typography } from '@material-ui/core' +import { Link } from 'react-router-dom' +import { ROUTES } from '../../routes' export default function PageNotFound(): ReactElement { return (
Page not found - The given url is invalid. Please go back or navigate to Home screen. + The given url is invalid. Please go back or navigate to Home screen.
) diff --git a/src/providers/FileManager.tsx b/src/providers/FileManager.tsx index f0093c8..0d026e4 100644 --- a/src/providers/FileManager.tsx +++ b/src/providers/FileManager.tsx @@ -5,8 +5,8 @@ import { FileManagerBase, FileManagerEvents } from '@solarpunkltd/file-manager-l import { Context as SettingsContext } from './Settings' import { DriveInfo } from '@solarpunkltd/file-manager-lib' import { getSignerPk } from '../modules/filemanager/utils/common' -import { getUsableStamps } from '../../src/modules/filemanager/utils/bee' import { FILE_MANAGER_EVENTS } from '../modules/filemanager/constants/common' +import { getUsableStamps } from '../modules/filemanager/utils/bee' interface ContextInterface { fm: FileManagerBase | null @@ -256,6 +256,12 @@ export function Provider({ children }: Props) { const handleResetState = (isInvalid: boolean) => { setShallReset(isInvalid) + setFiles([]) + setDrives([]) + setExpiredDrives([]) + setAdminDrive(null) + setCurrentDrive(undefined) + setCurrentStamp(undefined) } manager.emitter.on(FileManagerEvents.STATE_INVALID, handleResetState) diff --git a/src/providers/Platform.tsx b/src/providers/Platform.tsx index d24809a..c4e310d 100644 --- a/src/providers/Platform.tsx +++ b/src/providers/Platform.tsx @@ -55,6 +55,42 @@ function getOS(): Platforms | null { return null } +export enum BrowserPlatform { + Chrome = 'chrome', + Firefox = 'firefox', + Safari = 'safari', + Brave = 'brave', + Edge = 'edge', +} + +export async function isBraveBrowser(): Promise { + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + return (window.navigator.brave && (await window.navigator.brave.isBrave())) === true +} + +export async function detectBrowser(): Promise { + const ua = window.navigator.userAgent.toLowerCase() + + if (ua.includes('edge') || ua.includes('edg/')) return BrowserPlatform.Edge + + if (ua.includes('chrome') && (await isBraveBrowser())) return BrowserPlatform.Brave + + if (ua.includes('firefox')) return BrowserPlatform.Firefox + + if (ua.includes('safari') && !ua.includes('chrome')) return BrowserPlatform.Safari + + return BrowserPlatform.Chrome +} + +export const cacheClearUrls = { + chrome: 'https://support.google.com/accounts/answer/32050?hl=en&co=GENIE.Platform%3DDesktop', + brave: 'https://support.brave.app/hc/en-us/articles/360048833872-How-Do-I-Clear-Cookies-And-Site-Data-In-Brave', + firefox: 'https://support.mozilla.org/en-US/kb/how-clear-firefox-cache', + safari: 'https://support.apple.com/en-il/guide/safari/sfri47acf5d6/mac', + edge: 'https://support.microsoft.com/en-us/microsoft-edge/view-and-delete-browser-history-in-microsoft-edge-00cf7943-a9e1-975a-a33d-ac10ce454ca4', +} + export function Provider({ children }: Props): ReactElement { const [platform, setPlatform] = useState(SupportedPlatforms.Linux) diff --git a/src/utils/index.ts b/src/utils/index.ts index 17a74bc..bca7e79 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -211,6 +211,7 @@ interface Options { timeout?: number } +// TODO: merge this with FM component getUsableStamps() export function waitUntilStampUsable(batchId: BatchId | string, bee: Bee, options?: Options): Promise { return waitForStamp(batchId, bee, options) }