Fix: file-manager and swarm-desktop bugs (#714)

- drive capacity display with stamp polling
- download/upload progress handling
- overlay and tooltip issues
- FileMaganger readme
- ultra-light mode handling
- account feed view page
- download media files
- remove not found syncing link
- fix ultra light node wallet page
- tooltip issues
---------
Co-authored-by: Andrei Mitrea <andrei.mitrea.hq@gmail.com>
Co-authored-by: nidishk <nidishkrishnan45@gmail.com>
Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com>
Co-authored-by: Nándor Komlódi <nandor.komlodi@gmail.com>
Co-authored-by: rolandlor <33499567+rolandlor@users.noreply.github.com>

src/providers/File.tsx

@@ -59,6 +59,13 @@ export function Provider({ children }: Props): ReactElement {
       setPreviewBlob(videoBlob)
     }
 
+    if (metadata.isAudio) {
+      const audioFile = files[0]
+      const audioBlob = new Blob([audioFile], { type: audioFile.type })
+      setPreviewUri(URL.createObjectURL(audioBlob))
+      setPreviewBlob(audioBlob)
+    }
+
     if (metadata.isImage) {
       resize(files[0], PREVIEW_DIMENSIONS.maxWidth, PREVIEW_DIMENSIONS.maxHeight).then(blob => {
         setPreviewUri(URL.createObjectURL(blob)) // NOTE: Until it is cleared with URL.revokeObjectURL, the file stays allocated in memory

src/providers/FileManager.tsx

@@ -6,6 +6,7 @@ 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'
 
 interface ContextInterface {
   fm: FileManagerBase | null
@@ -178,7 +179,7 @@ export function Provider({ children }: Props) {
         return
       }
 
-      const { adminDrive: tmpAdminDrive, userDrives, expiredDrives } = findDrives(manager.getDrives(), usableStamps)
+      const { adminDrive: tmpAdminDrive, userDrives, expiredDrives } = findDrives(manager.driveList, usableStamps)
       setAdminDrive(tmpAdminDrive)
       setDrives(userDrives)
       setExpiredDrives(expiredDrives)
@@ -192,19 +193,17 @@ export function Provider({ children }: Props) {
     }
   }, [fm, syncDrives])
 
-  const refreshStamp = useCallback(
-    async (batchId: string): Promise<PostageBatch | undefined> => {
-      const usableStamps = await getUsableStamps(beeApi)
-      const refreshedStamp = usableStamps.find(s => s.batchID.toString() === batchId)
+  // no useCallback is needed because it caches the stamp
+  const refreshStamp = async (batchId: string): Promise<PostageBatch | undefined> => {
+    const usableStamps = await getUsableStamps(beeApi)
+    const refreshedStamp = usableStamps.find(s => s.batchID.toString() === batchId)
 
-      if (currentStamp && currentStamp.batchID.toString() === batchId && refreshedStamp) {
-        setCurrentStamp(refreshedStamp)
-      }
+    if (currentStamp && currentStamp.batchID.toString() === batchId && refreshedStamp) {
+      setCurrentStamp(refreshedStamp)
+    }
 
-      return refreshedStamp
-    },
-    [beeApi, currentStamp],
-  )
+    return refreshedStamp
+  }
 
   const init = useCallback(async (): Promise<FileManagerBase | null> => {
     const pk = getSignerPk()
@@ -226,6 +225,15 @@ export function Provider({ children }: Props) {
       setInitializationError(!success)
 
       if (success) {
+        if (manager.adminStamp && !manager.adminStamp.usable) {
+          // eslint-disable-next-line no-console
+          console.warn('Admin stamp exists but is not usable')
+          setShallReset(true)
+          setInitializationError(true)
+
+          return
+        }
+
         setFm(manager)
         syncDrives(manager)
         syncFiles(manager)
@@ -255,9 +263,10 @@ export function Provider({ children }: Props) {
     manager.emitter.on(FileManagerEvents.DRIVE_CREATED, handleDriveCreated)
     manager.emitter.on(FileManagerEvents.DRIVE_DESTROYED, handleDriveDestroyed)
     manager.emitter.on(FileManagerEvents.DRIVE_FORGOTTEN, handleDriveForgotten)
-    manager.emitter.on(FileManagerEvents.FILE_UPLOADED, ({ fileInfo }: { fileInfo: FileInfo }) =>
-      syncFiles(manager, fileInfo),
-    )
+    manager.emitter.on(FileManagerEvents.FILE_UPLOADED, ({ fileInfo }: { fileInfo: FileInfo }) => {
+      syncFiles(manager, fileInfo)
+      window.dispatchEvent(new CustomEvent(FILE_MANAGER_EVENTS.FILE_UPLOADED, { detail: { fileInfo } }))
+    })
     manager.emitter.on(FileManagerEvents.FILE_VERSION_RESTORED, ({ restored }: { restored: FileInfo }) =>
       syncFiles(manager, restored),
     )
@@ -287,7 +296,7 @@ export function Provider({ children }: Props) {
     const manager = await init()
 
     if (prevDriveId && manager) {
-      const refreshedDrive = manager.getDrives().find(d => d.id.toString() === prevDriveId)
+      const refreshedDrive = manager.driveList.find(d => d.id.toString() === prevDriveId)
       setCurrentDrive(refreshedDrive)
 
       const isValidCurrentStamp = (await getUsableStamps(beeApi)).find(

src/providers/Settings.tsx

@@ -66,7 +66,7 @@ export function Provider({ children, ...propsSettings }: Props): ReactElement {
     localStorage.getItem(LocalStorageKeys.providerUrl) || propsSettings.defaultRpcUrl || DEFAULT_RPC_URL
 
   const [apiUrl, setApiUrl] = useState<string>(
-    sessionStorage.getItem('api_host') ?? propsSettings.beeApiUrl ?? initialValues.apiUrl,
+    localStorage.getItem('api_host') ?? propsSettings.beeApiUrl ?? initialValues.apiUrl,
   )
   const [beeApi, setBeeApi] = useState<Bee | null>(null)
   const [desktopApiKey, setDesktopApiKey] = useState<string>(initialValues.desktopApiKey)
@@ -86,21 +86,32 @@ export function Provider({ children, ...propsSettings }: Props): ReactElement {
   }, [])
 
   useEffect(() => {
-    const url = makeHttpUrl(config?.['api-addr'] ?? apiUrl)
+    const url = makeHttpUrl(localStorage.getItem('api_host') ?? config?.['api-addr'] ?? apiUrl)
     try {
       setBeeApi(new Bee(url))
-      sessionStorage.setItem('api_host', url)
     } catch (e) {
       setBeeApi(null)
     }
   }, [config, apiUrl])
 
+  const updateApiUrl = (url: string) => {
+    const userProvidedUrl = makeHttpUrl(url)
+
+    try {
+      setBeeApi(new Bee(userProvidedUrl))
+      localStorage.setItem('api_host', userProvidedUrl)
+      setApiUrl(userProvidedUrl)
+    } catch (e) {
+      setBeeApi(null)
+    }
+  }
+
   return (
     <Context.Provider
       value={{
         apiUrl,
         beeApi,
-        setApiUrl,
+        setApiUrl: updateApiUrl,
         lockedApiSettings: Boolean(propsSettings.lockedApiSettings),
         desktopApiKey,
         isDesktop,