feat: sync and update with all changes from fork (#720)

* feat: sync and update with all changes from fork
* refactor: extract clipboard copy logic into custom hook
* fix: correct spelling of DEFAULT_REFRESH_FREQUENCY_MS in Stamps and WalletBalance providers
* refactor(ui-tests): replace fixed sleeps with condition-based waits
* fix: handle null values for size and granteeCount in infoGroups
* fix(lint): add newline at end of file in useClipboardCopy hook
* fix(ui-tests): page.goto URL
* refactor: update import paths for useClipboardCopy

---------

Co-authored-by: Ferenc Sárai <sarai.ferenc@gmail.com>

src/@types/react-identicons/index.d.ts

@@ -1,15 +0,0 @@
-declare module 'react-identicons' {
-  interface Props {
-    string: string
-    size?: number
-    padding?: number
-    bg?: string
-    fg?: string
-    palette?: string[]
-    count?: number
-    getColor?: () => string
-  }
-
-  const Identicon = (props: Props): JSXElementConstructor => ReactNode //eslint-disable-line @typescript-eslint/no-unused-vars
-  export default Identicon
-}

src/App.css

@@ -15,8 +15,19 @@
 }
 
 .App {
-  font-family: 'iAWriterQuattroV', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu',
-    'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  font-family:
+    'iAWriterQuattroV',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    'Roboto',
+    'Oxygen',
+    'Ubuntu',
+    'Cantarell',
+    'Fira Sans',
+    'Droid Sans',
+    'Helvetica Neue',
+    sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/App.tsx

@@ -1,9 +1,9 @@
-import CssBaseline from '@material-ui/core/CssBaseline'
-import { ThemeProvider } from '@material-ui/core/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import { ThemeProvider } from '@mui/material/styles'
 import { SnackbarProvider } from 'notistack'
 import { ReactElement } from 'react'
 import { HashRouter as Router } from 'react-router-dom'
-import './App.css'
+
 import Dashboard from './layout/Dashboard'
 import { Provider as BeeProvider } from './providers/Bee'
 import { Provider as FeedsProvider } from './providers/Feeds'
@@ -17,6 +17,8 @@ import { Provider as BalanceProvider } from './providers/WalletBalance'
 import BaseRouter from './routes'
 import { theme } from './theme'
 
+import './App.css'
+
 interface Props {
   beeApiUrl?: string
   defaultRpcUrl?: string

src/components/AlertUploadSize.tsx

@@ -1,7 +1,7 @@
-import Collapse from '@material-ui/core/Collapse'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { Alert, AlertTitle } from '@material-ui/lab'
+import { Alert, AlertTitle } from '@mui/material'
+import Collapse from '@mui/material/Collapse'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
 
 const LIMIT = 100000000 // 100 megabytes
 
@@ -9,18 +9,16 @@ interface Props {
   files: File[]
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      marginTop: theme.spacing(2),
-      marginBottom: theme.spacing(2),
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  root: {
+    width: '100%',
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+  },
+}))
 
 export default function UploadSizeAlert(props: Props): ReactElement | null {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   const totalSize = props.files.reduce((previous, current) => previous + current.size, 0)
 

src/components/Card.tsx

@@ -1,9 +1,13 @@
-import { createStyles, makeStyles, Theme, Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
 import { ReactElement } from 'react'
 import Check from 'remixicon-react/CheckLineIcon'
 import AlertCircle from 'remixicon-react/ErrorWarningFillIcon'
 import Connecting from 'remixicon-react/LinksLineIcon'
 import RefreshLine from 'remixicon-react/RefreshLineIcon'
+import { makeStyles } from 'tss-react/mui'
+
+import { CheckState } from '../providers/Bee'
+
 import { SwarmButton, SwarmButtonProps } from './SwarmButton'
 
 interface Props {
@@ -11,64 +15,64 @@ interface Props {
   title: string
   subtitle: string
   buttonProps: SwarmButtonProps
-  status: 'ok' | 'error' | 'loading' | 'connecting'
+  status: CheckState
 }
 
 const useStyles = (backgroundColor: string) =>
-  makeStyles((theme: Theme) =>
-    createStyles({
-      root: {
-        flexGrow: 1,
-        flexBasis: '100px',
-      },
-      wrapper: {
-        backgroundColor,
-        padding: '16px',
-        display: 'flex',
-        flexDirection: 'column',
-        alignItems: 'center',
-        textAlign: 'center',
-        height: '130px',
-      },
-      iconWrapper: {
-        display: 'flex',
-        alignItems: 'flex-start',
-        marginBottom: '18px',
-      },
-      button: {
-        width: '100%',
-        marginTop: '2px',
-        backgroundColor,
-        '&:hover': {
+  makeStyles()(theme => ({
+    root: {
+      flexGrow: 1,
+      flexBasis: '100px',
+    },
+    wrapper: {
+      backgroundColor,
+      padding: '16px',
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      textAlign: 'center',
+      height: '130px',
+    },
+    iconWrapper: {
+      display: 'flex',
+      alignItems: 'flex-start',
+      marginBottom: '18px',
+    },
+    button: {
+      width: '100%',
+      marginTop: '2px',
+      backgroundColor,
+      '&:hover': {
+        backgroundColor: theme.palette.primary.main,
+        color: 'white',
+        boxShadow: 'none',
+        // https://github.com/mui-org/material-ui/issues/22543
+        '@media (hover: none)': {
           backgroundColor: theme.palette.primary.main,
           color: 'white',
           boxShadow: 'none',
-          // https://github.com/mui-org/material-ui/issues/22543
-          '@media (hover: none)': {
-            backgroundColor: theme.palette.primary.main,
-            color: 'white',
-            boxShadow: 'none',
-          },
         },
       },
-    }),
-  )
+    },
+  }))
 
 export default function Card({ buttonProps, icon, title, subtitle, status }: Props): ReactElement {
-  const backgroundColor = status === 'error' ? 'white' : '#f3f3f3'
+  const backgroundColor = status === CheckState.ERROR ? 'white' : '#f3f3f3'
   const { className, ...rest } = buttonProps
-  const classes = useStyles(backgroundColor)()
+  const { classes } = useStyles(backgroundColor)()
 
   let statusIcon = null
 
-  if (status === 'ok') {
+  if (status === CheckState.OK) {
     statusIcon = <Check size="13" color="#09ca6c" />
-  } else if (status === 'error') {
-    statusIcon = <AlertCircle size="13" color="#f44336" />
-  } else if (status === 'loading') {
-    statusIcon = <RefreshLine size="13" color="orange" />
-  } else if (status === 'connecting') {
+  } else if (CheckState.STARTING) {
+    statusIcon = <RefreshLine size="13" color="#d99400d5" />
+  } else if (CheckState.CONNECTING) {
     statusIcon = <Connecting size="13" color="#0074D9" />
+  } else if (CheckState.WARNING) {
+    statusIcon = <Connecting size="13" color="#cbd900" />
+  } else {
+    statusIcon = <AlertCircle size="13" color="#f44336" />
   }
 
   return (

src/components/CashoutModal.tsx

@@ -1,13 +1,14 @@
-import { CircularProgress, Container } from '@material-ui/core'
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import DialogActions from '@material-ui/core/DialogActions'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogContentText from '@material-ui/core/DialogContentText'
-import DialogTitle from '@material-ui/core/DialogTitle'
+import { CircularProgress, Container } from '@mui/material'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogContentText from '@mui/material/DialogContentText'
+import DialogTitle from '@mui/material/DialogTitle'
 import { useSnackbar } from 'notistack'
 import { ReactElement, useContext, useState } from 'react'
 import Zap from 'remixicon-react/FlashlightLineIcon'
+
 import { Context as SettingsContext } from '../providers/Settings'
 
 interface Props {
@@ -41,7 +42,8 @@ export default function CheckoutModal({ peerId, uncashedAmount }: Props): ReactE
           })
         })
         .catch((e: Error) => {
-          console.error(e) // eslint-disable-line
+          // eslint-disable-next-line no-console
+          console.error(e)
           enqueueSnackbar(<span>Error: {e.message}</span>, { variant: 'error' })
         })
         .finally(() => {

src/components/ChainSync.tsx

@@ -1,8 +1,12 @@
 import { ChainState } from '@ethersphere/bee-js'
 import { useContext, useEffect, useState } from 'react'
+
 import { Context } from '../providers/Settings'
+
 import ExpandableListItem from './ExpandableListItem'
 
+const CHAIN_STATE_INTERVAL_MS = 3_000
+
 export function ChainSync() {
   const { beeApi } = useContext(Context)
   const [chainState, setChainState] = useState<ChainState | null>(null)
@@ -13,8 +17,9 @@ export function ChainSync() {
         return
       }
 
-      beeApi.getChainState().then(setChainState).catch(console.error) // eslint-disable-line
-    }, 3_000)
+      // eslint-disable-next-line no-console
+      beeApi.getChainState().then(setChainState).catch(console.error)
+    }, CHAIN_STATE_INTERVAL_MS)
 
     return () => clearInterval(interval)
   })

src/components/ClipboardCopy.tsx

@@ -1,8 +1,7 @@
-import type { ReactElement } from 'react'
-import IconButton from '@material-ui/core/IconButton'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
-import Clipboard from 'remixicon-react/ClipboardLineIcon'
+import IconButton from '@mui/material/IconButton'
 import { useSnackbar } from 'notistack'
+import type { ReactElement } from 'react'
+import Clipboard from 'remixicon-react/ClipboardLineIcon'
 
 interface Props {
   value: string
@@ -10,14 +9,20 @@ interface Props {
 
 export default function ClipboardCopy({ value }: Props): ReactElement {
   const { enqueueSnackbar } = useSnackbar()
-  const handleCopy = () => enqueueSnackbar(`Copied: ${value}`, { variant: 'success' })
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value)
+      enqueueSnackbar(`Copied: ${value}`, { variant: 'success' })
+    } catch {
+      enqueueSnackbar('Failed to copy to clipboard', { variant: 'error' })
+    }
+  }
 
   return (
     <div style={{ marginRight: '3px', marginLeft: '3px' }}>
       <IconButton color="primary" size="small" onClick={handleCopy}>
-        <CopyToClipboard text={value}>
-          <Clipboard style={{ height: '20px' }} />
-        </CopyToClipboard>
+        <Clipboard style={{ height: '20px' }} />
       </IconButton>
     </div>
   )

src/components/CloseButton.tsx

@@ -1,22 +1,20 @@
-import { createStyles, makeStyles, Theme } from '@material-ui/core'
-import { Close } from '@material-ui/icons'
+import { Close } from '@mui/icons-material'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
 
 interface Props {
   onClose: () => void
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    wrapper: {
-      padding: theme.spacing(1),
-      cursor: 'pointer',
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  wrapper: {
+    padding: theme.spacing(1),
+    cursor: 'pointer',
+  },
+}))
 
 export function CloseButton({ onClose }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   return (
     <div className={classes.wrapper} onClick={onClose}>

src/components/Code.tsx

@@ -1,23 +1,21 @@
-import { createStyles, makeStyles, Theme } from '@material-ui/core'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
 
 interface Props {
   children: string
   prettify?: boolean
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    wrapper: {
-      overflow: 'scroll',
-      background: '#ffffff',
-    },
-    pre: {
-      maxHeight: '6em',
-      padding: theme.spacing(2),
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  wrapper: {
+    overflow: 'scroll',
+    background: '#ffffff',
+  },
+  pre: {
+    maxHeight: '6em',
+    padding: theme.spacing(2),
+  },
+}))
 
 function prettifyString(string: string): string {
   try {
@@ -28,7 +26,7 @@ function prettifyString(string: string): string {
 }
 
 export function Code({ children, prettify }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   return (
     <div className={classes.wrapper}>

src/components/CodeBlockTabs.tsx

@@ -1,8 +1,10 @@
 import { ReactElement, useContext } from 'react'
-import TabsContainer from './TabsContainer'
-import CodeBlock from './CodeBlock'
+
 import { Context } from '../providers/Platform'
 
+import CodeBlock from './CodeBlock'
+import TabsContainer from './TabsContainer'
+
 interface Props {
   linux: string
   mac: string

src/components/DocumentationText.tsx

@@ -1,21 +1,20 @@
-import { createStyles, makeStyles, Typography } from '@material-ui/core'
+import { Typography } from '@mui/material'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
 
 interface Props {
   children: (string | ReactElement)[] | (string | ReactElement)
 }
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    text: {
-      color: '#606060',
-      fontSize: '0.9rem',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  text: {
+    color: '#606060',
+    fontSize: '0.9rem',
+  },
+}))
 
 export function DocumentationText({ children }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   return <Typography className={classes.text}>{children}</Typography>
 }

src/components/ErrorBoundary.tsx

@@ -28,7 +28,8 @@ export default class ErrorBoundary extends Component<Props, State> {
       this.errorReporting(error)
     }
 
-    console.error({ error, errorInfo }) // eslint-disable-line
+    // eslint-disable-next-line no-console
+    console.error({ error, errorInfo })
   }
 
   render(): ReactElement {

src/components/EthereumAddress.tsx

@@ -1,56 +0,0 @@
-import { Typography } from '@material-ui/core/'
-import { EthAddress } from '@ethersphere/bee-js'
-import { ReactElement } from 'react'
-import Identicon from 'react-identicons'
-import { BLOCKCHAIN_EXPLORER_URL } from '../constants'
-import ClipboardCopy from './ClipboardCopy'
-import { Flex } from './Flex'
-import QRCodeModal from './QRCodeModal'
-
-interface Props {
-  address: EthAddress | undefined
-  hideBlockie?: boolean
-  transaction?: boolean
-  truncate?: boolean
-}
-
-export default function EthereumAddress(props: Props): ReactElement {
-  return (
-    <Typography component="div" variant="subtitle1">
-      {props.address ? (
-        <Flex>
-          {props.hideBlockie ? null : (
-            <div style={{ paddingTop: '5px', marginRight: '10px' }}>
-              <Identicon size={20} string={props.address.toChecksum()} />
-            </div>
-          )}
-          <div>
-            <a
-              style={
-                props.truncate
-                  ? {
-                      marginRight: '7px',
-                      maxWidth: '200px',
-                      overflow: 'hidden',
-                      textOverflow: 'ellipsis',
-                      whiteSpace: 'nowrap',
-                      display: 'block',
-                    }
-                  : { marginRight: '7px' }
-              }
-              href={`${BLOCKCHAIN_EXPLORER_URL}/${props.transaction ? 'tx' : 'address'}/${props.address}`}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {props.address}
-            </a>
-          </div>
-          <QRCodeModal value={props.address.toChecksum()} label={'Ethereum Address'} />
-          <ClipboardCopy value={props.address.toChecksum()} />
-        </Flex>
-      ) : (
-        '-'
-      )}
-    </Typography>
-  )
-}

src/components/ExpandableElement.tsx

@@ -1,38 +1,36 @@
-import { Collapse, ListItem } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ExpandLess, ExpandMore } from '@material-ui/icons'
+import { ExpandLess, ExpandMore } from '@mui/icons-material'
+import { Collapse, ListItemButton } from '@mui/material'
 import { ReactElement, ReactNode, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      padding: 0,
-      margin: 0,
-      marginTop: theme.spacing(4),
-      '&:first-child': {
-        marginTop: 0,
-      },
+const useStyles = makeStyles()(theme => ({
+  root: {
+    width: '100%',
+    padding: 0,
+    margin: 0,
+    marginTop: theme.spacing(4),
+    '&:first-of-type': {
+      marginTop: 0,
     },
-    rootLevel1: { marginTop: theme.spacing(1) },
-    rootLevel2: { marginTop: theme.spacing(0.5) },
-    header: {
-      backgroundColor: theme.palette.background.paper,
+  },
+  rootLevel1: { marginTop: theme.spacing(1) },
+  rootLevel2: { marginTop: theme.spacing(0.5) },
+  header: {
+    backgroundColor: theme.palette.background.paper,
+  },
+  contentLevel0: {
+    marginTop: theme.spacing(1),
+  },
+  contentLevel12: {
+    marginTop: theme.spacing(0.25),
+    '& > li:last-of-type': {
+      marginBottom: theme.spacing(2),
     },
-    contentLevel0: {
-      marginTop: theme.spacing(1),
-    },
-    contentLevel12: {
-      marginTop: theme.spacing(0.25),
-      '& > li:last-of-type': {
-        marginBottom: theme.spacing(2),
-      },
-    },
-    infoText: {
-      color: '#c9c9c9',
-    },
-  }),
-)
+  },
+  infoText: {
+    color: '#c9c9c9',
+  },
+}))
 
 interface Props {
   children: ReactNode
@@ -41,7 +39,7 @@ interface Props {
 }
 
 export default function ExpandableElement({ children, expandable, defaultOpen }: Props): ReactElement | null {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [open, setOpen] = useState<boolean>(Boolean(defaultOpen))
 
   const handleClick = () => {
@@ -50,10 +48,10 @@ export default function ExpandableElement({ children, expandable, defaultOpen }:
 
   return (
     <div className={`${classes.root} ${classes.rootLevel2}`}>
-      <ListItem button onClick={handleClick} className={classes.header}>
+      <ListItemButton onClick={handleClick} className={classes.header}>
         {children}
         {open ? <ExpandLess /> : <ExpandMore />}
-      </ListItem>
+      </ListItemButton>
       <Collapse in={open} timeout="auto" unmountOnExit>
         <div className={classes.contentLevel12}>{expandable}</div>
       </Collapse>

src/components/ExpandableList.tsx

@@ -1,36 +1,35 @@
-import { Collapse, ListItem, ListItemText, Typography } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ExpandLess, ExpandMore } from '@material-ui/icons'
+import { ExpandLess, ExpandMore } from '@mui/icons-material'
+import { Collapse, ListItemButton, ListItemText, Typography } from '@mui/material'
 import { ReactElement, ReactNode, useState } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
 import { Flex } from './Flex'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      width: '100%',
-      padding: 0,
-      margin: 0,
-      marginTop: theme.spacing(4),
-      '&:first-child': {
-        marginTop: 0,
-      },
+const useStyles = makeStyles()(theme => ({
+  root: {
+    width: '100%',
+    padding: 0,
+    margin: 0,
+    marginTop: theme.spacing(4),
+    '&:first-of-type': {
+      marginTop: 0,
     },
-    rootLevel1: { marginTop: theme.spacing(1) },
-    rootLevel2: { marginTop: theme.spacing(0.5) },
-    header: {
-      backgroundColor: theme.palette.background.paper,
-    },
-    contentLevel0: {
-      marginTop: theme.spacing(1),
-    },
-    contentLevel12: {
-      marginTop: theme.spacing(0.25),
-    },
-    infoText: {
-      color: '#c9c9c9',
-    },
-  }),
-)
+  },
+  rootLevel1: { marginTop: theme.spacing(1) },
+  rootLevel2: { marginTop: theme.spacing(0.5) },
+  header: {
+    backgroundColor: theme.palette.background.paper,
+  },
+  contentLevel0: {
+    marginTop: theme.spacing(1),
+  },
+  contentLevel12: {
+    marginTop: theme.spacing(0.25),
+  },
+  infoText: {
+    color: '#c9c9c9',
+  },
+}))
 
 interface Props {
   children?: ReactNode
@@ -41,7 +40,7 @@ interface Props {
 }
 
 export default function ExpandableList({ children, label, level, defaultOpen, info }: Props): ReactElement | null {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [open, setOpen] = useState<boolean>(Boolean(defaultOpen))
 
   const handleClick = () => {
@@ -64,7 +63,7 @@ export default function ExpandableList({ children, label, level, defaultOpen, in
 
   return (
     <div className={`${classes.root} ${rootLevelClass}`}>
-      <ListItem button onClick={handleClick} className={classes.header}>
+      <ListItemButton onClick={handleClick} className={classes.header}>
         <ListItemText primary={<Typography variant={typographyVariant}>{label}</Typography>} />
         <Flex>
           {!open && (
@@ -74,7 +73,7 @@ export default function ExpandableList({ children, label, level, defaultOpen, in
           )}
           {open ? <ExpandLess /> : <ExpandMore />}
         </Flex>
-      </ListItem>
+      </ListItemButton>
       <Collapse in={open} timeout="auto" unmountOnExit>
         <div className={contentLevelClass}>{children}</div>
       </Collapse>

src/components/ExpandableListItem.tsx

@@ -1,27 +1,25 @@
-import { Grid, IconButton, Tooltip, Typography } from '@material-ui/core'
-import ListItem from '@material-ui/core/ListItem'
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { Box, IconButton, Tooltip, Typography } from '@mui/material'
+import ListItemButton from '@mui/material/ListItemButton'
 import { ReactElement, ReactNode } from 'react'
 import Info from 'remixicon-react/InformationLineIcon'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    header: {
-      backgroundColor: theme.palette.background.paper,
-      marginBottom: theme.spacing(0.25),
-      wordBreak: 'break-word',
+const useStyles = makeStyles()(theme => ({
+  header: {
+    backgroundColor: theme.palette.background.paper,
+    marginBottom: theme.spacing(0.25),
+    wordBreak: 'break-word',
+  },
+  copyValue: {
+    cursor: 'pointer',
+    padding: theme.spacing(1),
+    borderRadius: 0,
+    '&:hover': {
+      backgroundColor: '#fcf2e8',
+      color: theme.palette.primary.main,
     },
-    copyValue: {
-      cursor: 'pointer',
-      padding: theme.spacing(1),
-      borderRadius: 0,
-      '&:hover': {
-        backgroundColor: '#fcf2e8',
-        color: theme.palette.primary.main,
-      },
-    },
-  }),
-)
+  },
+}))
 
 interface Props {
   label?: ReactNode
@@ -30,25 +28,31 @@ interface Props {
 }
 
 export default function ExpandableListItem({ label, value, tooltip }: Props): ReactElement | null {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   return (
-    <ListItem className={classes.header}>
-      <Grid container direction="row" justifyContent="space-between" alignItems="center">
-        {label && <Typography variant="body1">{label}</Typography>}
-        {value && (
-          <Typography variant="body2">
-            {value}
-            {tooltip && (
-              <Tooltip title={tooltip} placement="top" arrow>
-                <IconButton size="small" className={classes.copyValue}>
-                  <Info strokeWidth={1} />
-                </IconButton>
-              </Tooltip>
-            )}
-          </Typography>
+    <ListItemButton className={classes.header}>
+      <Box display="flex" flexDirection="row" alignItems="center" width="100%">
+        {label && (
+          <Box flex={2}>
+            <Typography variant="body1">{label}</Typography>
+          </Box>
         )}
-      </Grid>
-    </ListItem>
+        {value && (
+          <Box flex={1} textAlign="right">
+            <Typography variant="body2">
+              {value}
+              {tooltip && (
+                <Tooltip title={tooltip} placement="top" arrow>
+                  <IconButton size="small" className={classes.copyValue}>
+                    <Info strokeWidth={1} />
+                  </IconButton>
+                </Tooltip>
+              )}
+            </Typography>
+          </Box>
+        )}
+      </Box>
+    </ListItemButton>
   )
 }

src/components/ExpandableListItemActions.tsx

@@ -1,27 +1,25 @@
-import { Grid } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Grid } from '@mui/material'
 import { ReactElement, ReactNode } from 'react'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    wrapper: {
-      display: 'flex',
-      flexDirection: 'row',
-      flexWrap: 'wrap',
-    },
-    action: {
-      marginBottom: theme.spacing(1),
-      marginRight: theme.spacing(1),
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  wrapper: {
+    display: 'flex',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  action: {
+    marginBottom: theme.spacing(1),
+    marginRight: theme.spacing(1),
+  },
+}))
 
 interface Props {
   children: ReactNode | ReactNode[]
 }
 
 export default function ExpandableListItemActions({ children }: Props): ReactElement | null {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   if (Array.isArray(children)) {
     return (

src/components/ExpandableListItemInput.tsx

@@ -1,53 +1,52 @@
-import { Box, Grid, IconButton, InputBase, ListItem, Typography } from '@material-ui/core'
-import Collapse from '@material-ui/core/Collapse'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ChangeEvent, ReactElement, useState } from 'react'
+import { Box, IconButton, InputBase, ListItemButton, Typography } from '@mui/material'
+import Collapse from '@mui/material/Collapse'
+import React, { ChangeEvent, ReactElement, useState } from 'react'
 import type { RemixiconReactIconProps } from 'remixicon-react'
 import Check from 'remixicon-react/CheckLineIcon'
 import X from 'remixicon-react/CloseLineIcon'
 import Edit from 'remixicon-react/PencilLineIcon'
 import Minus from 'remixicon-react/SubtractLineIcon'
+import { makeStyles } from 'tss-react/mui'
+
 import ExpandableListItemActions from './ExpandableListItemActions'
 import ExpandableListItemNote from './ExpandableListItemNote'
 import { SwarmButton } from './SwarmButton'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    header: {
-      backgroundColor: theme.palette.background.paper,
-      marginBottom: theme.spacing(0.25),
-      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
-      wordBreak: 'break-word',
+const useStyles = makeStyles()(theme => ({
+  header: {
+    backgroundColor: theme.palette.background.paper,
+    marginBottom: theme.spacing(0.25),
+    borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+    wordBreak: 'break-word',
+  },
+  headerOpen: {
+    borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+  },
+  copyValue: {
+    cursor: 'pointer',
+    padding: theme.spacing(1),
+    borderRadius: 0,
+    '&:hover': {
+      backgroundColor: '#fcf2e8',
+      color: theme.palette.primary.main,
     },
-    headerOpen: {
-      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
-    },
-    copyValue: {
-      cursor: 'pointer',
-      padding: theme.spacing(1),
-      borderRadius: 0,
-      '&:hover': {
-        backgroundColor: '#fcf2e8',
-        color: theme.palette.primary.main,
-      },
-    },
-    content: {
-      marginTop: theme.spacing(1),
-      marginBottom: theme.spacing(1),
-    },
-    keyMargin: {
-      marginRight: theme.spacing(1),
-    },
-    unselectableLabel: {
-      cursor: 'default',
-      userSelect: 'none',
-      // Many browsers don't support yet the general user-select css property
-      WebkitUserSelect: 'none',
-      MozUserSelect: 'none',
-      msUserSelect: 'none',
-    },
-  }),
-)
+  },
+  content: {
+    marginTop: theme.spacing(1),
+    marginBottom: theme.spacing(1),
+  },
+  keyMargin: {
+    marginRight: theme.spacing(1),
+  },
+  unselectableLabel: {
+    cursor: 'default',
+    userSelect: 'none',
+    // Many browsers don't support yet the general user-select css property
+    WebkitUserSelect: 'none',
+    MozUserSelect: 'none',
+    msUserSelect: 'none',
+  },
+}))
 
 interface Props {
   label: string
@@ -65,99 +64,118 @@ interface Props {
   locked?: boolean
 }
 
-export default function ExpandableListItemKey({
+export default function ExpandableListItemInput({
   label,
-  value,
-  onConfirm,
-  onChange,
+  value = '',
+  placeholder,
+  helperText,
+  expandedOnly,
   confirmLabel,
   confirmLabelDisabled,
   confirmIcon,
-  expandedOnly,
-  helperText,
-  placeholder,
   loading,
+  onChange,
+  onConfirm,
   mapperFn,
   locked,
 }: Props): ReactElement | null {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [open, setOpen] = useState(Boolean(expandedOnly))
   const [inputValue, setInputValue] = useState<string>(value || '')
   const toggleOpen = () => setOpen(!open)
-  const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    let newValue = e.target.value
+
     if (mapperFn) {
-      e.target.value = mapperFn(e.target.value)
+      newValue = mapperFn(newValue)
     }
+    setInputValue(newValue)
 
-    setInputValue(e.target.value.trim())
-
-    if (onChange) onChange(e.target.value.trim())
+    if (onChange) onChange(newValue)
   }
 
   return (
-    <>
-      <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
-        <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
-          <Grid container direction="row" justifyContent="space-between" alignItems="center">
-            {label && (
-              <Typography variant="body1" className={classes.unselectableLabel}>
+    <ListItemButton className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
+      <Box display="flex" flexDirection="column" width="100%">
+        <Box display="flex" flexDirection="row" alignItems="center" width="100%">
+          {label && (
+            <Box flex={1} minWidth={0}>
+              <Typography variant="body1" className={classes.unselectableLabel} component="span">
                 {label}
               </Typography>
+            </Box>
+          )}
+          <Box flex={3} display="flex" alignItems="center" justifyContent="flex-end" minWidth={0} gap={1}>
+            {!open && value && (
+              <Typography
+                variant="body2"
+                component="span"
+                sx={{ minWidth: 0, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+              >
+                {value}
+              </Typography>
             )}
-            <Typography variant="body2">
-              <div>
-                {!open && value}
-                {!expandedOnly && !locked && (
-                  <IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
-                    {open ? <Minus strokeWidth={1} /> : <Edit strokeWidth={1} />}
-                  </IconButton>
-                )}
-              </div>
-            </Typography>
-          </Grid>
-          <Collapse in={open} timeout="auto" unmountOnExit>
-            <InputBase
-              value={inputValue}
-              placeholder={placeholder}
-              onChange={handleChange}
-              fullWidth
-              className={classes.content}
-              autoFocus
-              hidden={locked}
-            />
-          </Collapse>
-        </Grid>
-      </ListItem>
-      <Collapse in={open} timeout="auto" unmountOnExit>
-        {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
-        <Box mt={2}>
-          <ExpandableListItemActions>
-            <SwarmButton
-              disabled={
-                loading ||
-                inputValue === value ||
-                Boolean(confirmLabelDisabled) || // Disable if external validation is provided
-                (inputValue === '' && value === undefined) // Disable if no initial value was not provided and the field is empty. The undefined check is improtant so that it is possible to submit with empty input in other cases
-              }
-              loading={loading}
-              iconType={confirmIcon ?? Check}
-              onClick={() => {
-                if (onConfirm) onConfirm(inputValue)
-              }}
-            >
-              {confirmLabel || 'Save'}
-            </SwarmButton>
-            <SwarmButton
-              disabled={loading || inputValue === value || inputValue === ''}
-              iconType={X}
-              onClick={() => setInputValue(value || '')}
-              cancel
-            >
-              Cancel
-            </SwarmButton>
-          </ExpandableListItemActions>
+            {!expandedOnly && !locked && (
+              <IconButton size="small" className={classes.copyValue} onClick={toggleOpen}>
+                {open ? <Minus strokeWidth={1} /> : <Edit strokeWidth={1} />}
+              </IconButton>
+            )}
+          </Box>
         </Box>
-      </Collapse>
-    </>
+        <Collapse in={open} timeout="auto" unmountOnExit>
+          <Box display="flex" flexDirection="column" width="100%">
+            <Box display="flex" alignItems="center" width="100%" minWidth={0}>
+              <InputBase
+                value={inputValue}
+                placeholder={placeholder}
+                onChange={handleChange}
+                fullWidth
+                className={classes.content}
+                autoFocus
+                hidden={locked}
+                inputProps={{
+                  style: {
+                    width: '100%',
+                    minWidth: 220,
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                  },
+                  maxLength: 512,
+                }}
+              />
+            </Box>
+            {helperText && <ExpandableListItemNote>{helperText}</ExpandableListItemNote>}
+            <Box mt={2}>
+              <ExpandableListItemActions>
+                <SwarmButton
+                  disabled={
+                    loading ||
+                    inputValue === value ||
+                    Boolean(confirmLabelDisabled) ||
+                    (inputValue === '' && value === undefined)
+                  }
+                  loading={loading}
+                  iconType={confirmIcon ?? Check}
+                  onClick={() => {
+                    onConfirm?.(inputValue.trim())
+                  }}
+                >
+                  {confirmLabel || 'Save'}
+                </SwarmButton>
+                <SwarmButton
+                  disabled={loading || inputValue === value || inputValue === ''}
+                  iconType={X}
+                  onClick={() => setInputValue(value || '')}
+                  cancel
+                >
+                  Cancel
+                </SwarmButton>
+              </ExpandableListItemActions>
+            </Box>
+          </Box>
+        </Collapse>
+      </Box>
+    </ListItemButton>
   )
 }

src/components/ExpandableListItemKey.tsx

@@ -1,40 +1,38 @@
-import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
-import Collapse from '@material-ui/core/Collapse'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Collapse, Grid, IconButton, ListItemButton, Tooltip, Typography } from '@mui/material'
 import { ReactElement, useState } from 'react'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
 import Eye from 'remixicon-react/EyeLineIcon'
 import Minus from 'remixicon-react/SubtractLineIcon'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    header: {
-      backgroundColor: theme.palette.background.paper,
-      marginBottom: theme.spacing(0.25),
-      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
-      wordBreak: 'break-word',
+import { useClipboardCopy } from '../hooks/useClipboardCopy'
+
+const useStyles = makeStyles()(theme => ({
+  header: {
+    backgroundColor: theme.palette.background.paper,
+    marginBottom: theme.spacing(0.25),
+    borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+    wordBreak: 'break-word',
+  },
+  headerOpen: {
+    borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+  },
+  copyValue: {
+    cursor: 'pointer',
+    padding: theme.spacing(1),
+    borderRadius: 0,
+    '&:hover': {
+      backgroundColor: '#fcf2e8',
+      color: theme.palette.primary.main,
     },
-    headerOpen: {
-      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
-    },
-    copyValue: {
-      cursor: 'pointer',
-      padding: theme.spacing(1),
-      borderRadius: 0,
-      '&:hover': {
-        backgroundColor: '#fcf2e8',
-        color: theme.palette.primary.main,
-      },
-    },
-    content: {
-      marginTop: theme.spacing(2),
-      marginBottom: theme.spacing(2),
-    },
-    keyMargin: {
-      marginRight: theme.spacing(1),
-    },
-  }),
-)
+  },
+  content: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+  },
+  keyMargin: {
+    marginRight: theme.spacing(1),
+  },
+}))
 
 interface Props {
   label: string
@@ -57,13 +55,11 @@ const split = (s: string): string[] => {
 }
 
 export default function ExpandableListItemKey({ label, value, expanded }: Props): ReactElement | null {
-  const classes = useStyles()
-  const [open, setOpen] = useState(expanded || false)
-  const [copied, setCopied] = useState(false)
-  const toggleOpen = () => setOpen(!open)
+  const { classes } = useStyles()
 
-  const tooltipClickHandler = () => setCopied(true)
-  const tooltipCloseHandler = () => setCopied(false)
+  const [open, setOpen] = useState(expanded || false)
+  const { copied, handleCopy, tooltipCloseHandler } = useClipboardCopy(value)
+  const toggleOpen = () => setOpen(!open)
 
   const splitValues = split(value)
   const hasPrefix = isPrefixedHexString(value)
@@ -72,17 +68,19 @@ export default function ExpandableListItemKey({ label, value, expanded }: Props)
   }`
 
   return (
-    <ListItem className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
+    <ListItemButton className={`${classes.header} ${open ? classes.headerOpen : ''}`}>
       <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
         <Grid container direction="row" justifyContent="space-between" alignItems="center">
-          {label && <Typography variant="body1">{label}</Typography>}
-          <Typography variant="body2">
+          {label && (
+            <Typography variant="body1" component="span">
+              {label}
+            </Typography>
+          )}
+          <Typography variant="body2" component="span">
             {!open && (
               <span className={classes.copyValue}>
                 <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
-                  <CopyToClipboard text={value}>
-                    <span onClick={tooltipClickHandler}>{value ? spanText : ''}</span>
-                  </CopyToClipboard>
+                  <span onClick={handleCopy}>{value ? spanText : ''}</span>
                 </Tooltip>
               </span>
             )}
@@ -94,22 +92,20 @@ export default function ExpandableListItemKey({ label, value, expanded }: Props)
         <Collapse in={open} timeout="auto" unmountOnExit>
           <div className={classes.content}>
             <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
-              <CopyToClipboard text={value}>
-                {/* This has to be wrapped in two spans otherwise either the tooltip or the highlighting does not work*/}
-                <span onClick={tooltipClickHandler}>
-                  <span className={classes.copyValue}>
-                    {splitValues.map((s, i) => (
-                      <Typography variant="body2" key={i} className={classes.keyMargin} component="span">
-                        {s}
-                      </Typography>
-                    ))}
-                  </span>
+              {/* This has to be wrapped in two spans otherwise either the tooltip or the highlighting does not work*/}
+              <span onClick={handleCopy}>
+                <span className={classes.copyValue}>
+                  {splitValues.map((s, i) => (
+                    <Typography variant="body2" key={i} className={classes.keyMargin} component="span">
+                      {s}
+                    </Typography>
+                  ))}
                 </span>
-              </CopyToClipboard>
+              </span>
             </Tooltip>
           </div>
         </Collapse>
       </Grid>
-    </ListItem>
+    </ListItemButton>
   )
 }

src/components/ExpandableListItemLink.tsx

@@ -1,48 +1,47 @@
-import { Grid, IconButton, ListItem, Tooltip, Typography } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
-import { ArrowForward, OpenInNewSharp } from '@material-ui/icons'
-import { ReactElement, useState } from 'react'
-import CopyToClipboard from 'react-copy-to-clipboard'
+import { ArrowForward, OpenInNewSharp } from '@mui/icons-material'
+import { Grid, IconButton, ListItemButton, Tooltip, Typography } from '@mui/material'
+import { ReactElement } from 'react'
 import { useNavigate } from 'react-router'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    header: {
-      backgroundColor: theme.palette.background.paper,
-      marginBottom: theme.spacing(0.25),
-      borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
-      wordBreak: 'break-word',
+import { useClipboardCopy } from '../hooks/useClipboardCopy'
+
+const useStyles = makeStyles()(theme => ({
+  header: {
+    backgroundColor: theme.palette.background.paper,
+    marginBottom: theme.spacing(0.25),
+    borderLeft: `${theme.spacing(0.25)}px solid rgba(0,0,0,0)`,
+    wordBreak: 'break-word',
+  },
+  headerOpen: {
+    borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+  },
+  openLinkIcon: {
+    cursor: 'pointer',
+    padding: theme.spacing(1),
+    borderRadius: 0,
+    '&:hover': {
+      backgroundColor: '#fcf2e8',
+      color: theme.palette.primary.main,
     },
-    headerOpen: {
-      borderLeft: `${theme.spacing(0.25)}px solid ${theme.palette.primary.main}`,
+  },
+  content: {
+    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
+  },
+  keyMargin: {
+    marginRight: theme.spacing(1),
+  },
+  copyValue: {
+    cursor: 'pointer',
+    padding: theme.spacing(1),
+    borderRadius: 0,
+    '&:hover': {
+      backgroundColor: '#fcf2e8',
+      color: theme.palette.primary.main,
     },
-    openLinkIcon: {
-      cursor: 'pointer',
-      padding: theme.spacing(1),
-      borderRadius: 0,
-      '&:hover': {
-        backgroundColor: '#fcf2e8',
-        color: theme.palette.primary.main,
-      },
-    },
-    content: {
-      marginTop: theme.spacing(2),
-      marginBottom: theme.spacing(2),
-    },
-    keyMargin: {
-      marginRight: theme.spacing(1),
-    },
-    copyValue: {
-      cursor: 'pointer',
-      padding: theme.spacing(1),
-      borderRadius: 0,
-      '&:hover': {
-        backgroundColor: '#fcf2e8',
-        color: theme.palette.primary.main,
-      },
-    },
-  }),
-)
+  },
+}))
 
 interface Props {
   label: string
@@ -59,12 +58,9 @@ export default function ExpandableListItemLink({
   navigationType = 'NEW_WINDOW',
   allowClipboard = true,
 }: Props): ReactElement | null {
-  const classes = useStyles()
-  const [copied, setCopied] = useState(false)
+  const { classes } = useStyles()
   const navigate = useNavigate()
-
-  const tooltipClickHandler = () => setCopied(true)
-  const tooltipCloseHandler = () => setCopied(false)
+  const { copied, handleCopy, tooltipCloseHandler } = useClipboardCopy(value)
 
   const displayValue = value.length > 22 ? value.slice(0, 19) + '...' : value
 
@@ -77,7 +73,7 @@ export default function ExpandableListItemLink({
   }
 
   return (
-    <ListItem className={classes.header}>
+    <ListItemButton className={classes.header}>
       <Grid container direction="column" justifyContent="space-between" alignItems="stretch">
         <Grid container direction="row" justifyContent="space-between" alignItems="center">
           {label && <Typography variant="body1">{label}</Typography>}
@@ -85,9 +81,7 @@ export default function ExpandableListItemLink({
             {allowClipboard && (
               <span className={classes.copyValue}>
                 <Tooltip title={copied ? 'Copied' : 'Copy'} placement="top" arrow onClose={tooltipCloseHandler}>
-                  <CopyToClipboard text={value}>
-                    <span onClick={tooltipClickHandler}>{displayValue}</span>
-                  </CopyToClipboard>
+                  <span onClick={handleCopy}>{displayValue}</span>
                 </Tooltip>
               </span>
             )}
@@ -99,6 +93,6 @@ export default function ExpandableListItemLink({
           </Typography>
         </Grid>
       </Grid>
-    </ListItem>
+    </ListItemButton>
   )
 }

src/components/ExpandableListItemNote.tsx

@@ -1,32 +1,30 @@
+import { Typography } from '@mui/material'
+import ListItemButton from '@mui/material/ListItemButton'
 import { ReactElement, ReactNode } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Typography } from '@material-ui/core'
-import ListItem from '@material-ui/core/ListItem'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    header: {
-      backgroundColor: '#F7F7F7',
-      marginBottom: theme.spacing(0.25),
-    },
-    typography: {
-      color: '#242424',
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  header: {
+    backgroundColor: '#F7F7F7',
+    marginBottom: theme.spacing(0.25),
+  },
+  typography: {
+    color: '#242424',
+  },
+}))
 
 interface Props {
   children?: ReactNode | ReactNode[]
 }
 
 export default function ExpandableListItemNote({ children }: Props): ReactElement | null {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   return (
-    <ListItem className={classes.header}>
+    <ListItemButton className={classes.header}>
       <Typography variant="body1" className={classes.typography}>
         {children}
       </Typography>
-    </ListItem>
+    </ListItemButton>
   )
 }

src/components/FitAudio.tsx

@@ -1,14 +1,12 @@
-import { createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    audio: {
-      width: '100%',
-      maxWidth: '250px',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  audio: {
+    width: '100%',
+    maxWidth: '250px',
+  },
+}))
 
 interface AudioProps {
   src: string | undefined
@@ -17,12 +15,17 @@ interface AudioProps {
 }
 
 export function FitAudio(props: AudioProps): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   const inlineStyles: Record<string, string> = {}
 
-  props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
-  props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+  if (props.maxHeight) {
+    inlineStyles.maxHeight = props.maxHeight
+  }
+
+  if (props.maxWidth) {
+    inlineStyles.maxWidth = props.maxWidth
+  }
 
   return <audio className={classes.audio} src={props.src} style={inlineStyles} controls />
 }

src/components/FitImage.tsx

@@ -1,15 +1,13 @@
-import { createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    image: {
-      width: '100%',
-      height: '100%',
-      objectFit: 'cover',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  image: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+}))
 
 interface Props {
   alt: string
@@ -19,12 +17,17 @@ interface Props {
 }
 
 export function FitImage(props: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   const inlineStyles: Record<string, string> = {}
 
-  props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
-  props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+  if (props.maxHeight) {
+    inlineStyles.maxHeight = props.maxHeight
+  }
+
+  if (props.maxWidth) {
+    inlineStyles.maxWidth = props.maxWidth
+  }
 
   return <img className={classes.image} alt={props.alt} src={props.src} style={inlineStyles} />
 }

src/components/FitVideo.tsx

@@ -1,15 +1,13 @@
-import { createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    video: {
-      width: '100%',
-      height: '100%',
-      objectFit: 'cover',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  video: {
+    width: '100%',
+    height: '100%',
+    objectFit: 'cover',
+  },
+}))
 
 interface VideoProps {
   src: string | undefined
@@ -18,12 +16,17 @@ interface VideoProps {
 }
 
 export function FitVideo(props: VideoProps): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   const inlineStyles: Record<string, string> = {}
 
-  props.maxHeight && (inlineStyles.maxHeight = props.maxHeight)
-  props.maxWidth && (inlineStyles.maxWidth = props.maxWidth)
+  if (props.maxHeight) {
+    inlineStyles.maxHeight = props.maxHeight
+  }
+
+  if (props.maxWidth) {
+    inlineStyles.maxWidth = props.maxWidth
+  }
 
   return <video className={classes.video} src={props.src} style={inlineStyles} controls />
 }

src/components/History.tsx

@@ -1,6 +1,8 @@
 import { ReactElement, useEffect, useState } from 'react'
+
 import { getPrettyDateString } from '../utils/date'
-import { getHistorySafe, HistoryItem, HISTORY_KEYS } from '../utils/local-storage'
+import { getHistorySafe, HISTORY_KEYS, HistoryItem } from '../utils/localStorage'
+
 import ExpandableList from './ExpandableList'
 import ExpandableListItemLink from './ExpandableListItemLink'
 

src/components/HistoryHeader.tsx

@@ -1,25 +1,24 @@
-import { Box, createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
-import { ArrowBack } from '@material-ui/icons'
+import { ArrowBack } from '@mui/icons-material'
+import { Box, Grid, Typography } from '@mui/material'
 import { ReactElement } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { makeStyles } from 'tss-react/mui'
 
 interface Props {
   children: string
 }
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    pressable: {
-      cursor: 'pointer',
-    },
-    icon: {
-      color: '#242424',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  pressable: {
+    cursor: 'pointer',
+  },
+  icon: {
+    color: '#242424',
+  },
+}))
 
 export function HistoryHeader({ children }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const navigate = useNavigate()
 
   function goBack() {

src/components/Loading.tsx

@@ -1,4 +1,4 @@
-import { CircularProgress, Grid } from '@material-ui/core'
+import { CircularProgress, Grid } from '@mui/material'
 import { ReactElement } from 'react'
 
 export function Loading(): ReactElement {

src/components/Map.tsx

@@ -1,6 +1,7 @@
 import type { Peer } from '@ethersphere/bee-js'
 import DottedMap, { DottedMapWithoutCountriesLib } from 'dotted-map/without-countries'
 import { CSSProperties, ReactElement, useContext, useEffect, useState } from 'react'
+
 import mapData from '../assets/data/map-data.json'
 import nodesDb from '../assets/data/nodes-db.json'
 import { Context } from '../providers/Bee'
@@ -18,17 +19,10 @@ interface MapRecord {
 type MapDB = Record<string, MapRecord>
 
 const fullMapDb = nodesDb as unknown as MapDB
-const deduplicatedRecords = deduplicate(fullMapDb)
 
-function deduplicate(db: MapDB): MapRecord[] {
-  const noDuplicates: Record<string, MapRecord> = {}
-
-  Object.entries(fullMapDb).forEach(([key, record]) => {
-    noDuplicates[`${record.lat} ${record.lng}`] = record
-  })
-
-  return Object.values(noDuplicates)
-}
+const deduplicatedRecords = Object.values(
+  Object.fromEntries(Object.values(fullMapDb).map(r => [`${r.lat} ${r.lng}`, r])),
+)
 
 function findIntersection(db: MapDB, peers: Peer[]): MapRecord[] {
   const noDuplicates: Record<string, MapRecord> = {}
@@ -47,27 +41,45 @@ function addPins(map: DottedMap, pins: MapRecord[], color: string) {
   })
 }
 
+enum PeerColors {
+  Black = '#303030',
+  Green = '#09CA6C',
+  LightGrey = '#dadada',
+  White = '#eaeaea',
+}
+
 const mapPrecomputed = new DottedMap({ map: JSON.parse(mapData) })
 const mapNoPins = new DottedMap({ map: JSON.parse(mapData) })
-addPins(mapPrecomputed, deduplicatedRecords, '#303030')
+addPins(mapPrecomputed, deduplicatedRecords, PeerColors.Black)
 
-const mapSvgOptions: DottedMapWithoutCountriesLib.SvgSettings = { shape: 'hexagon', radius: 0.21, color: '#dadada' }
+const mapSvgOptions: DottedMapWithoutCountriesLib.SvgSettings = {
+  shape: 'hexagon',
+  radius: 0.21,
+  color: PeerColors.LightGrey,
+}
 
 export default function Card({ style, error }: Props): ReactElement {
   const { peers } = useContext(Context)
   const [map, setMap] = useState<string>(mapPrecomputed.getSVG(mapSvgOptions))
 
   useEffect(() => {
-    // Display error map
-    if (error) setMap(mapNoPins.getSVG({ ...mapSvgOptions, color: '#eaeaea' }))
+    let newSvg: string
 
-    // Display just the base map without any connections
-    if (!peers) return
+    if (error) {
+      newSvg = mapNoPins.getSVG({ ...mapSvgOptions, color: PeerColors.White })
+    } else if (peers) {
+      const points = findIntersection(fullMapDb, peers)
+      const mapNew = Object.create(mapPrecomputed)
+      addPins(mapNew, points, PeerColors.Green)
+      newSvg = mapNew.getSVG(mapSvgOptions)
+    } else {
+      return
+    }
 
-    const points = findIntersection(fullMapDb, peers)
-    const mapNew = Object.create(mapPrecomputed)
-    addPins(mapNew, points, '#09CA6C')
-    setMap(mapNew.getSVG(mapSvgOptions))
+    if (newSvg !== map) {
+      setMap(newSvg)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [peers, error])
 
   return (

src/components/ProgressBar.tsx

@@ -1,7 +1,7 @@
+import Box from '@mui/material/Box'
+import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgress'
+import Typography from '@mui/material/Typography'
 import React, { ReactElement } from 'react'
-import LinearProgress, { LinearProgressProps } from '@material-ui/core/LinearProgress'
-import Typography from '@material-ui/core/Typography'
-import Box from '@material-ui/core/Box'
 
 interface Props {
   linearProgressProps?: LinearProgressProps

src/components/ProgressIndicator.tsx

@@ -1,39 +1,38 @@
-import { createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { Grid, Typography } from '@mui/material'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
 
 interface Props {
   steps: string[]
   index: number
 }
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    wrapper: {
-      height: '52px',
-      display: 'flex',
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    todo: {
-      background: '#f7f7f7',
-      color: '#c9c9c9',
-    },
-    inProgress: {
-      background: '#ffffff',
-      color: '#242424',
-      height: '52px',
-    },
-    done: {
-      background: '#f7f7f7',
-      color: '#606060',
-      height: '52px',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  wrapper: {
+    height: '52px',
+    display: 'flex',
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  todo: {
+    background: '#f7f7f7',
+    color: '#c9c9c9',
+  },
+  inProgress: {
+    background: '#ffffff',
+    color: '#242424',
+    height: '52px',
+  },
+  done: {
+    background: '#f7f7f7',
+    color: '#606060',
+    height: '52px',
+  },
+}))
 
 export function ProgressIndicator({ steps, index }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   function pickClass(i: number): string {
     if (i === index) {

src/components/QRCodeModal.tsx

@@ -1,7 +1,7 @@
+import { FilterCenterFocusSharp } from '@mui/icons-material'
+import { Dialog, DialogTitle, IconButton } from '@mui/material'
 import { ReactElement, useState } from 'react'
-import QRCode from 'qrcode.react'
-import { IconButton, Dialog, DialogTitle } from '@material-ui/core'
-import { FilterCenterFocusSharp } from '@material-ui/icons'
+import QRCode from 'react-qr-code'
 
 interface Props {
   value: string
@@ -27,15 +27,7 @@ export default function QRCodeModal(props: Props): ReactElement {
       <Dialog onClose={handleClose} aria-labelledby="simple-dialog-title" open={open}>
         <div style={{ padding: '30px', textAlign: 'center' }}>
           <DialogTitle id="simple-dialog-title">{props.label}</DialogTitle>
-          <QRCode
-            value={props.value}
-            size={150}
-            bgColor={'#ffffff'}
-            fgColor={'#000000'}
-            level={'L'}
-            includeMargin={false}
-            renderAs={'svg'}
-          />
+          <QRCode value={props.value} size={150} bgColor={'#ffffff'} fgColor={'#000000'} level={'L'} />
         </div>
       </Dialog>
     </div>

src/components/SideBar.tsx

@@ -1,73 +1,73 @@
-import { Box, Divider, Drawer, Grid, List, Link as MUILink, Typography } from '@material-ui/core'
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
 import { BeeModes } from '@ethersphere/bee-js'
+import { Box, Divider, Drawer, Grid, Link as MUILink, List, Typography } from '@mui/material'
 import { ReactElement, useContext } from 'react'
 import { Link } from 'react-router-dom'
 import FilesIcon from 'remixicon-react/ArrowUpDownLineIcon'
-import FileManagerIcon from 'remixicon-react/FolderOpenLineIcon'
 import DocsIcon from 'remixicon-react/BookOpenLineIcon'
 import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
+import FileManagerIcon from 'remixicon-react/FolderOpenLineIcon'
 import GithubIcon from 'remixicon-react/GithubFillIcon'
 import HomeIcon from 'remixicon-react/Home3LineIcon'
 import SettingsIcon from 'remixicon-react/Settings2LineIcon'
 import AccountIcon from 'remixicon-react/Wallet3LineIcon'
+import { makeStyles } from 'tss-react/mui'
+
 import DashboardLogo from '../assets/dashboard-logo.svg'
 import DesktopLogo from '../assets/desktop-logo.svg'
 import { BEE_DOCS_HOST, GITHUB_BEE_DASHBOARD_URL } from '../constants'
 import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
 import { ROUTES } from '../routes'
+
 import SideBarItem from './SideBarItem'
 import SideBarStatus from './SideBarStatus'
 
 const drawerWidth = 300
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexWrap: 'nowrap',
-      minHeight: '100vh',
-      paddingTop: theme.spacing(8),
-      paddingBottom: theme.spacing(8),
-    },
-    drawer: {
-      width: drawerWidth,
-      flexShrink: 0,
-    },
-    drawerPaper: {
-      width: drawerWidth,
-      backgroundColor: '#212121',
-      zIndex: 988,
-    },
-    logo: {
-      marginLeft: theme.spacing(8),
-      marginRight: theme.spacing(8),
-    },
-    icon: {
-      height: theme.spacing(4),
-    },
-    divider: {
-      backgroundColor: '#2c2c2c',
-      marginLeft: theme.spacing(4),
-      marginRight: theme.spacing(4),
-    },
-    link: {
-      color: '#9f9f9f',
+const useStyles = makeStyles()(theme => ({
+  root: {
+    flexWrap: 'nowrap',
+    minHeight: '100vh',
+    paddingTop: theme.spacing(8),
+    paddingBottom: theme.spacing(8),
+  },
+  drawer: {
+    width: drawerWidth,
+    flexShrink: 0,
+  },
+  drawerPaper: {
+    width: drawerWidth,
+    backgroundColor: '#212121',
+    zIndex: 988,
+  },
+  logo: {
+    marginLeft: theme.spacing(8),
+    marginRight: theme.spacing(8),
+  },
+  icon: {
+    height: theme.spacing(4),
+  },
+  divider: {
+    backgroundColor: '#2c2c2c',
+    marginLeft: theme.spacing(4),
+    marginRight: theme.spacing(4),
+  },
+  link: {
+    color: '#9f9f9f',
+    textDecoration: 'none',
+    '&:hover': {
       textDecoration: 'none',
-      '&:hover': {
-        textDecoration: 'none',
 
-        // https://github.com/mui-org/material-ui/issues/22543
-        '@media (hover: none)': {
-          textDecoration: 'none',
-        },
+      // https://github.com/mui-org/material-ui/issues/22543
+      '@media (hover: none)': {
+        textDecoration: 'none',
       },
     },
-  }),
-)
+  },
+}))
 
 export default function SideBar(): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { isDesktop } = useContext(SettingsContext)
   const { nodeInfo } = useContext(BeeContext)
 

src/components/SideBarItem.tsx

@@ -1,9 +1,9 @@
-import { ListItem, ListItemIcon, ListItemText } from '@material-ui/core'
-import { createStyles, makeStyles, Theme, withStyles } from '@material-ui/core/styles'
+import { ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
 import type { ReactElement, ReactNode } from 'react'
 import { matchPath, useLocation } from 'react-router-dom'
+import { makeStyles } from 'tss-react/mui'
 
-const StyledListItem = withStyles((theme: Theme) => ({
+const useItemStyles = makeStyles()(theme => ({
   root: {
     paddingLeft: theme.spacing(4),
     paddingRight: theme.spacing(4),
@@ -13,8 +13,6 @@ const StyledListItem = withStyles((theme: Theme) => ({
       backgroundColor: '#2c2c2c',
       color: '#f9f9f9',
     },
-  },
-  button: {
     '&:hover': {
       backgroundColor: '#2c2c2c',
       color: '#f9f9f9',
@@ -26,18 +24,16 @@ const StyledListItem = withStyles((theme: Theme) => ({
       },
     },
   },
-}))(ListItem)
+}))
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    icon: {
-      color: 'inherit',
-    },
-    activeIcon: {
-      color: theme.palette.primary.main,
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  icon: {
+    color: 'inherit',
+  },
+  activeIcon: {
+    color: theme.palette.primary.main,
+  },
+}))
 
 interface Props {
   iconStart?: ReactNode
@@ -48,17 +44,18 @@ interface Props {
 }
 
 export default function SideBarItem({ iconStart, iconEnd, path, label, pathMatcherSubstring }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
+  const { classes: itemClasses } = useItemStyles()
   const location = useLocation()
   const isSelected = pathMatcherSubstring
     ? location.pathname.startsWith(pathMatcherSubstring)
     : Boolean(path && matchPath(location.pathname, path))
 
   return (
-    <StyledListItem button selected={isSelected} disableRipple>
+    <ListItemButton className={itemClasses.root} selected={isSelected} disableRipple>
       <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconStart}</ListItemIcon>
       <ListItemText primary={label} />
       <ListItemIcon className={isSelected ? classes.activeIcon : classes.icon}>{iconEnd}</ListItemIcon>
-    </StyledListItem>
+    </ListItemButton>
   )
 }

src/components/SideBarStatus.tsx

@@ -1,53 +1,52 @@
+import { ListItemButton, ListItemIcon, ListItemText, Typography } from '@mui/material'
 import { ReactElement, useContext } from 'react'
 import { matchPath, useLocation } from 'react-router-dom'
 import ArrowRight from 'remixicon-react/ArrowRightLineIcon'
+import { makeStyles } from 'tss-react/mui'
 
-import { ListItem, ListItemIcon, ListItemText, Typography } from '@material-ui/core'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
 import { Context } from '../providers/Bee'
+
 import StatusIcon from './StatusIcon'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    icon: {
-      color: 'inherit',
-    },
-    iconSmall: {
-      height: theme.spacing(2),
-    },
+const useStyles = makeStyles()(theme => ({
+  icon: {
+    color: 'inherit',
+  },
+  iconSmall: {
+    height: theme.spacing(2),
+  },
 
-    root: {
-      height: theme.spacing(4),
-      paddingLeft: theme.spacing(1),
-      paddingRight: theme.spacing(4),
-      color: '#f9f9f9',
-      borderLeft: '0px solid rgba(0,0,0,0)',
-      '&.Mui-selected, &.Mui-selected:hover': {
-        borderLeft: `0px solid ${theme.palette.primary.main}`,
-        backgroundColor: '#2c2c2c',
-      },
+  root: {
+    height: theme.spacing(4),
+    paddingLeft: theme.spacing(1),
+    paddingRight: theme.spacing(4),
+    color: '#f9f9f9',
+    borderLeft: '0px solid rgba(0,0,0,0)',
+    '&.Mui-selected, &.Mui-selected:hover': {
+      borderLeft: `0px solid ${theme.palette.primary.main}`,
+      backgroundColor: '#2c2c2c',
     },
-    rootError: {
-      backgroundColor: 'rgba(255, 58, 82, 0.25)',
-    },
-    button: {
-      '&:hover': {
+  },
+  rootError: {
+    backgroundColor: 'rgba(255, 58, 82, 0.25)',
+  },
+  button: {
+    '&:hover': {
+      backgroundColor: '#2c2c2c',
+      color: 'white',
+
+      // https://github.com/mui-org/material-ui/issues/22543
+      '@media (hover: none)': {
         backgroundColor: '#2c2c2c',
         color: 'white',
-
-        // https://github.com/mui-org/material-ui/issues/22543
-        '@media (hover: none)': {
-          backgroundColor: '#2c2c2c',
-          color: 'white',
-        },
       },
     },
-    smallerText: {
-      fontSize: '0.9rem',
-      whiteSpace: 'nowrap',
-    },
-  }),
-)
+  },
+  smallerText: {
+    fontSize: '0.9rem',
+    whiteSpace: 'nowrap',
+  },
+}))
 
 interface Props {
   path?: string
@@ -55,14 +54,13 @@ interface Props {
 
 export default function SideBarItem({ path }: Props): ReactElement {
   const { status, isLoading } = useContext(Context)
-  const classes = useStyles()
+  const { classes } = useStyles()
   const location = useLocation()
   const isSelected = Boolean(path && matchPath(location.pathname, path))
 
   return (
-    <ListItem
-      button
-      classes={{ root: `${classes.root} ${status.all ? '' : classes.rootError}`, button: classes.button }}
+    <ListItemButton
+      classes={{ root: `${classes.root} ${status.all ? '' : classes.rootError}` }}
       selected={isSelected}
       disableRipple
     >
@@ -73,6 +71,6 @@ export default function SideBarItem({ path }: Props): ReactElement {
       <ListItemIcon className={classes.icon}>
         {status.all ? null : <ArrowRight className={classes.iconSmall} />}
       </ListItemIcon>
-    </ListItem>
+    </ListItemButton>
   )
 }

src/components/StampExtensionModal.tsx

@@ -1,13 +1,13 @@
-import { Box } from '@material-ui/core'
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import DialogActions from '@material-ui/core/DialogActions'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import Input from '@material-ui/core/Input'
 import { BatchId, Bee } from '@ethersphere/bee-js'
+import { Box } from '@mui/material'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogTitle from '@mui/material/DialogTitle'
+import Input from '@mui/material/Input'
 import { useSnackbar } from 'notistack'
-import { ReactElement, ReactNode, useState } from 'react'
+import React, { ReactElement, ReactNode, useState } from 'react'
 
 interface Props {
   type: 'Topup' | 'Dilute'

src/components/StatusIcon.tsx

@@ -1,5 +1,6 @@
-import { CircularProgress } from '@material-ui/core'
+import { CircularProgress } from '@mui/material'
 import type { ReactElement } from 'react'
+
 import { CheckState } from '../providers/Bee'
 
 interface Props {

src/components/StripedWrapper.tsx

@@ -1,31 +1,29 @@
-import { createStyles, makeStyles } from '@material-ui/core'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
 
 interface Props {
   children: ReactElement | ReactElement[]
 }
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    wrapper: {
-      display: 'flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: '175px',
-      height: '175px',
-      background: `repeating-linear-gradient(
+const useStyles = makeStyles()(() => ({
+  wrapper: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: '175px',
+    height: '175px',
+    background: `repeating-linear-gradient(
                         45deg,
                         #efefef,
                         #efefef 4px,
                         #ffffff 4px,
                         #ffffff 8px
                     )`,
-    },
-  }),
-)
+  },
+}))
 
 export function StripedWrapper({ children }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   return <div className={classes.wrapper}>{children}</div>
 }

src/components/SwarmButton.tsx

@@ -1,6 +1,7 @@
-import { Button, ButtonProps, CircularProgress, createStyles, makeStyles } from '@material-ui/core'
+import { Button, ButtonProps, CircularProgress } from '@mui/material'
 import React, { ReactElement } from 'react'
 import type { RemixiconReactIconProps } from 'remixicon-react'
+import { makeStyles } from 'tss-react/mui'
 
 export interface SwarmButtonProps extends ButtonProps {
   iconType: React.ComponentType<RemixiconReactIconProps>
@@ -9,34 +10,32 @@ export interface SwarmButtonProps extends ButtonProps {
   variant?: 'text' | 'contained' | 'outlined'
 }
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    button: {
-      height: '42px',
-      position: 'relative',
-      whiteSpace: 'nowrap',
-      color: '#242424',
-      '&:hover, &:focus': {
-        '& svg': {
-          fill: '#fff',
-          transition: '0.1s',
-        },
+const useStyles = makeStyles()(() => ({
+  button: {
+    height: '42px',
+    position: 'relative',
+    whiteSpace: 'nowrap',
+    color: '#242424',
+    '&:hover, &:focus': {
+      '& svg': {
+        fill: '#fff',
+        transition: '0.1s',
       },
     },
-    cancelButton: {
-      background: '#f7f7f7',
-      color: '#606060',
-    },
-    spinnerWrapper: {
-      position: 'absolute',
-      left: '50%',
-      top: '50%',
-      width: '40px',
-      height: '40px',
-      transform: 'translate(-50%, -50%)',
-    },
-  }),
-)
+  },
+  cancelButton: {
+    background: '#f7f7f7',
+    color: '#606060',
+  },
+  spinnerWrapper: {
+    position: 'absolute',
+    left: '50%',
+    top: '50%',
+    width: '40px',
+    height: '40px',
+    transform: 'translate(-50%, -50%)',
+  },
+}))
 
 export function SwarmButton({
   children,
@@ -50,7 +49,7 @@ export function SwarmButton({
   style,
   ...other
 }: SwarmButtonProps): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   function getIconColor() {
     if (loading || disabled) {

src/components/SwarmDialog.tsx

@@ -1,4 +1,4 @@
-import { Box, Dialog, Grid } from '@material-ui/core'
+import { Box, Dialog, Grid } from '@mui/material'
 import { ReactElement } from 'react'
 
 interface Props {

src/components/SwarmDivider.tsx

@@ -1,4 +1,4 @@
-import { Box, Divider } from '@material-ui/core'
+import { Box, Divider } from '@mui/material'
 import { ReactElement } from 'react'
 
 interface Props {

src/components/SwarmSelect.tsx

@@ -1,12 +1,10 @@
-import { createStyles, FormHelperText, makeStyles, MenuItem, Select as MuiSelect, Theme } from '@material-ui/core'
+import { FormHelperText, MenuItem, Select as MuiSelect, SelectChangeEvent } from '@mui/material'
 import { Field } from 'formik'
-import { Select } from 'formik-material-ui'
+import { Select } from 'formik-mui'
 import { ReactElement, ReactNode } from 'react'
+import { makeStyles } from 'tss-react/mui'
 
-export type SelectEvent = React.ChangeEvent<{
-  name?: string | undefined
-  value: unknown
-}>
+export type SelectEvent = SelectChangeEvent<string>
 
 function renderValue(value: unknown): ReactNode {
   if (typeof value === 'string') {
@@ -28,33 +26,31 @@ interface Props {
   options: { value: string; label: string }[]
   onChange?: (event: SelectEvent) => void
   formik?: boolean
-  defaultValue?: string
+  value?: string
   placeholder?: string
   disabled?: boolean
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    select: {
-      borderRadius: 0,
-      background: theme.palette.background.paper,
-      '& fieldset': {
-        border: 0,
-      },
-      '& .MuiSelect-select': {
-        '&:focus': {
-          background: theme.palette.background.paper,
-        },
+const useStyles = makeStyles()(theme => ({
+  select: {
+    borderRadius: 0,
+    background: theme.palette.background.paper,
+    '& fieldset': {
+      border: 0,
+    },
+    '& .MuiSelect-select': {
+      '&:focus': {
+        background: theme.palette.background.paper,
       },
     },
-    option: {
-      height: '52px',
-    },
-  }),
-)
+  },
+  option: {
+    height: '52px',
+  },
+}))
 
 export function SwarmSelect({
-  defaultValue,
+  value,
   formik,
   name,
   options,
@@ -63,7 +59,7 @@ export function SwarmSelect({
   placeholder,
   disabled = false,
 }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   if (formik) {
     return (
@@ -76,7 +72,7 @@ export function SwarmSelect({
           name={name}
           fullWidth
           variant="outlined"
-          defaultValue={defaultValue}
+          value={value}
           className={classes.select}
           displayEmpty
           renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}
@@ -102,7 +98,7 @@ export function SwarmSelect({
         fullWidth
         variant="outlined"
         className={classes.select}
-        defaultValue={defaultValue}
+        value={value}
         onChange={onChange}
         displayEmpty
         renderValue={(value: unknown) => (value ? renderValue(value) : placeholder)}

src/components/SwarmTextInput.tsx

@@ -1,7 +1,8 @@
-import { createStyles, makeStyles, TextField as SimpleTextField, Theme } from '@material-ui/core'
+import { TextField as SimpleTextField } from '@mui/material'
 import { Field } from 'formik'
-import { TextField } from 'formik-material-ui'
+import { TextField } from 'formik-mui'
 import { ChangeEvent, ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
 
 interface Props {
   name: string
@@ -14,25 +15,23 @@ interface Props {
   onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    field: {
-      background: theme.palette.background.paper,
-      '& fieldset': {
-        border: 0,
-      },
-      '& .Mui-focused': {
-        background: theme.palette.background.paper,
-      },
-      '& .MuiInputBase-root': {
-        background: theme.palette.background.paper,
-      },
-      '& .MuiFilledInput-root': {
-        borderRadius: 0,
-      },
+const useStyles = makeStyles()(theme => ({
+  field: {
+    background: theme.palette.background.paper,
+    '& fieldset': {
+      border: 0,
     },
-  }),
-)
+    '& .Mui-focused': {
+      background: theme.palette.background.paper,
+    },
+    '& .MuiInputBase-root': {
+      background: theme.palette.background.paper,
+    },
+    '& .MuiFilledInput-root': {
+      borderRadius: 0,
+    },
+  },
+}))
 
 export function SwarmTextInput({
   name,
@@ -44,7 +43,7 @@ export function SwarmTextInput({
   defaultValue,
   placeholder,
 }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   if (formik) {
     return (

src/components/TabsContainer.tsx

@@ -1,6 +1,6 @@
+import { Tab, Tabs } from '@mui/material'
 import React, { ReactElement, ReactNode } from 'react'
-import { makeStyles, Theme, createStyles } from '@material-ui/core/styles'
-import { Tab, Tabs } from '@material-ui/core'
+import { makeStyles } from 'tss-react/mui'
 
 interface TabPanelProps {
   children?: ReactNode
@@ -18,16 +18,14 @@ function TabPanel(props: TabPanelProps) {
   )
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexGrow: 1,
-    },
-    content: {
-      marginTop: theme.spacing(2),
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  root: {
+    flexGrow: 1,
+  },
+  content: {
+    marginTop: theme.spacing(2),
+  },
+}))
 
 interface TabsValues {
   component: ReactNode
@@ -41,10 +39,10 @@ interface Props {
 }
 
 export default function SimpleTabs({ values, index, indexChanged }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [value, setValue] = React.useState<number>(index || 0)
 
-  const handleChange = (event: React.ChangeEvent<Record<string, never>>, newValue: number) => {
+  const handleChange = (_event: React.SyntheticEvent, newValue: number) => {
     if (indexChanged) indexChanged(newValue)
     else setValue(newValue)
   }

src/components/TitleWithClose.tsx

@@ -1,5 +1,7 @@
-import { createStyles, Grid, makeStyles, Typography } from '@material-ui/core'
+import { Grid, Typography } from '@mui/material'
 import { ReactElement } from 'react'
+import { makeStyles } from 'tss-react/mui'
+
 import { CloseButton } from './CloseButton'
 
 interface Props {
@@ -7,17 +9,15 @@ interface Props {
   onClose: () => void
 }
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    text: {
-      color: '#606060',
-      fontWeight: 'bold',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  text: {
+    color: '#606060',
+    fontWeight: 'bold',
+  },
+}))
 
 export function TitleWithClose({ children, onClose }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   return (
     <Grid container justifyContent="space-between" alignItems="center">

src/components/TopologyStats.tsx

@@ -1,6 +1,8 @@
 import type { Topology } from '@ethersphere/bee-js'
 import type { ReactElement } from 'react'
+
 import { pickThreshold, ThresholdValues } from '../utils/threshold'
+
 import ExpandableListItem from './ExpandableListItem'
 
 interface Props {

src/components/TroubleshootConnectionCard.tsx

@@ -1,40 +1,39 @@
-import { Button, Grid, Link as MuiLink, Typography } from '@material-ui/core/'
-import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
+import { Button, Grid, Link as MuiLink, Typography } from '@mui/material'
 import type { ReactElement } from 'react'
-import Activity from 'remixicon-react/PulseLineIcon'
 import { Link } from 'react-router-dom'
-import { ROUTES } from '../routes'
-import { BEE_DISCORD_HOST, BEE_DOCS_HOST } from '../constants'
+import Activity from 'remixicon-react/PulseLineIcon'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      height: '100%',
+import { BEE_DISCORD_HOST, BEE_DOCS_HOST } from '../constants'
+import { ROUTES } from '../routes'
+
+const useStyles = makeStyles()(theme => ({
+  root: {
+    height: '100%',
+  },
+  content: {
+    maxWidth: 500,
+    marginBottom: theme.spacing(4),
+    '&:last-child': {
+      marginBottom: 0,
     },
-    content: {
-      maxWidth: 500,
-      marginBottom: theme.spacing(4),
-      '&:last-child': {
-        marginBottom: 0,
-      },
-    },
-    icon: {
-      height: '1rem',
-    },
-  }),
-)
+  },
+  icon: {
+    height: '1rem',
+  },
+}))
 
 export default function TroubleshootConnectionCard(): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   return (
     <Grid container direction="column" justifyContent="center" alignItems="center" className={classes.root}>
-      <Grid item className={classes.content}>
+      <Grid className={classes.content}>
         <Typography variant="h1" align="center">
           Uh oh, it looks like your node is not connected.
         </Typography>
       </Grid>
-      <Grid item className={classes.content}>
+      <Grid className={classes.content}>
         <Typography align="center">
           Please check your node status to fix the problem. You can also check out the{' '}
           <MuiLink href={BEE_DOCS_HOST} target="_blank" rel="noreferrer">
@@ -47,7 +46,7 @@ export default function TroubleshootConnectionCard(): ReactElement {
           .
         </Typography>
       </Grid>
-      <Grid item className={classes.content}>
+      <Grid className={classes.content}>
         <Typography align="center">
           <Button
             component={Link}

src/components/Waiting.tsx

@@ -1,4 +1,4 @@
-import { CircularProgress, Grid } from '@material-ui/core'
+import { CircularProgress, Grid } from '@mui/material'
 import { ReactElement } from 'react'
 
 export function Waiting(): ReactElement {

src/components/WithdrawDepositModal.tsx

@@ -1,14 +1,14 @@
-import Button from '@material-ui/core/Button'
-import Dialog from '@material-ui/core/Dialog'
-import DialogActions from '@material-ui/core/DialogActions'
-import DialogContent from '@material-ui/core/DialogContent'
-import DialogContentText from '@material-ui/core/DialogContentText'
-import DialogTitle from '@material-ui/core/DialogTitle'
-import FormHelperText from '@material-ui/core/FormHelperText'
-import Input from '@material-ui/core/Input'
 import { BZZ, TransactionId } from '@ethersphere/bee-js'
+import Button from '@mui/material/Button'
+import Dialog from '@mui/material/Dialog'
+import DialogActions from '@mui/material/DialogActions'
+import DialogContent from '@mui/material/DialogContent'
+import DialogContentText from '@mui/material/DialogContentText'
+import DialogTitle from '@mui/material/DialogTitle'
+import FormHelperText from '@mui/material/FormHelperText'
+import Input from '@mui/material/Input'
 import { useSnackbar } from 'notistack'
-import { ReactElement, ReactNode, useState } from 'react'
+import React, { ReactElement, ReactNode, useState } from 'react'
 
 interface Props {
   successMessage: string
@@ -54,7 +54,8 @@ export default function WithdrawDepositModal({
       setOpen(false)
       enqueueSnackbar(`${successMessage} Transaction ${transactionHash}`, { variant: 'success' })
     } catch (e) {
-      console.error(e) // eslint-disable-line
+      // eslint-disable-next-line no-console
+      console.error(e)
       enqueueSnackbar(`${errorMessage} Error: ${(e as Error).message}`, { variant: 'error' })
     }
   }
@@ -77,7 +78,7 @@ export default function WithdrawDepositModal({
 
   return (
     <div>
-      <Button variant="contained" onClick={handleClickOpen} startIcon={icon}>
+      <Button variant="text" onClick={handleClickOpen} startIcon={icon}>
         {label}
       </Button>
       <Dialog open={open} onClose={handleClose} aria-labelledby="form-dialog-title">

src/containers/DepositModal.tsx

@@ -1,6 +1,7 @@
 import { BZZ } from '@ethersphere/bee-js'
 import { ReactElement, useContext } from 'react'
 import Download from 'remixicon-react/DownloadLineIcon'
+
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
 import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
@@ -22,7 +23,7 @@ export default function DepositModal(): ReactElement {
           throw new Error('Bee URL is not valid')
         }
 
-        const transactionHash = await beeApi.depositTokens(amount)
+        const transactionHash = await beeApi.depositBZZToChequebook(amount)
         refresh()
 
         return transactionHash

src/containers/StakeModal.tsx

@@ -1,6 +1,7 @@
 import { BZZ } from '@ethersphere/bee-js'
 import { ReactElement, useContext } from 'react'
 import Download from 'remixicon-react/DownloadLineIcon'
+
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
 import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'

src/containers/WithdrawModal.tsx

@@ -1,6 +1,7 @@
 import { BZZ } from '@ethersphere/bee-js'
 import { ReactElement, useContext } from 'react'
 import Upload from 'remixicon-react/UploadLineIcon'
+
 import WithdrawDepositModal from '../components/WithdrawDepositModal'
 import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
@@ -22,7 +23,7 @@ export default function WithdrawModal(): ReactElement {
           throw new Error('Bee URL is not valid')
         }
 
-        const transactionHash = await beeApi.withdrawTokens(amount)
+        const transactionHash = await beeApi.withdrawBZZFromChequebook(amount)
         refresh()
 
         return transactionHash

src/hooks/accounting.ts

@@ -1,5 +1,6 @@
 import { AllSettlements, Bee, BZZ, LastCashoutActionResponse, PeerBalance, Settlements } from '@ethersphere/bee-js'
 import { useEffect, useState } from 'react'
+
 import { makeRetriablePromise, unwrapPromiseSettlements } from '../utils'
 
 interface UseAccountingHook {

src/hooks/apiHooks.test.ts

@@ -1,53 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks'
-import cors from 'cors'
-import express from 'express'
-import type { Server } from 'http'
-import { useBeeDesktop } from './apiHooks'
-
-interface AddressInfo {
-  address: string
-  family: string
-  port: number
-}
-
-export function mockServer(data: Record<string | number | symbol, string | boolean>): Promise<Server> {
-  const app = express()
-  app.use(cors())
-
-  app.get('/info', (req, res) => {
-    res.send(data)
-  })
-
-  return new Promise(resolve => {
-    const server = app.listen(() => {
-      resolve(server)
-    })
-  })
-}
-
-let serverCorrect: Server
-
-let serverCorrectURL: string
-
-beforeAll(async () => {
-  serverCorrect = await mockServer({ autoUpdateEnabled: true, version: '0.1.0' })
-  const portServerCorrect = (serverCorrect.address() as AddressInfo).port
-  serverCorrectURL = `http://localhost:${portServerCorrect}`
-})
-
-afterAll(async () => {
-  await new Promise(resolve => serverCorrect.close(resolve))
-})
-
-describe('useBeeDesktop', () => {
-  it('should not have error when connected to bee-desktop', async () => {
-    const { result, waitFor } = renderHook(() => useBeeDesktop(true, serverCorrectURL))
-
-    await waitFor(() => {
-      expect(result.current.isLoading).toBe(false)
-    })
-    expect(result.current.desktopAutoUpdateEnabled).toBe(true)
-    expect(result.current.beeDesktopVersion).toBe('0.1.0')
-    expect(result.current.error).toBe(null)
-  })
-})

src/hooks/apiHooks.tsx

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { useEffect, useState } from 'react'
+
 import { GITHUB_REPO_URL } from '../constants'
 import { BeeConfig, getDesktopConfiguration, getLatestBeeDesktopVersion } from '../utils/desktop'
 
@@ -21,6 +22,8 @@ export interface NewDesktopVersionHook {
   newBeeDesktopVersion: string
 }
 
+const REACHABILITY_CHECK_INTERVAL_MS = 10_000
+
 export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesktopHook => {
   const [reachable, setReachable] = useState(false)
   const [desktopAutoUpdateEnabled, setDesktopAutoUpdateEnabled] = useState<boolean>(true)
@@ -30,6 +33,9 @@ export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesk
 
   useEffect(() => {
     if (!isBeeDesktop) {
+      setLoading(false)
+      setError(null)
+
       return
     }
 
@@ -45,32 +51,25 @@ export const useBeeDesktop = (isBeeDesktop = false, desktopUrl: string): BeeDesk
     }
 
     runReachabilityCheck()
-    const interval = setInterval(runReachabilityCheck, 10_000)
+    const interval = setInterval(runReachabilityCheck, REACHABILITY_CHECK_INTERVAL_MS)
+
+    axios
+      .get(`${desktopUrl}/info`)
+      .then(res => {
+        setBeeDesktopVersion(res.data?.version)
+        setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled)
+        setError(null)
+      })
+      .catch(e => {
+        setError(e)
+      })
+      .finally(() => {
+        setLoading(false)
+      })
 
     return () => clearInterval(interval)
   }, [desktopUrl, isBeeDesktop])
 
-  useEffect(() => {
-    if (!isBeeDesktop) {
-      setLoading(false)
-      setError(null)
-    } else {
-      axios
-        .get(`${desktopUrl}/info`)
-        .then(res => {
-          setBeeDesktopVersion(res.data?.version)
-          setDesktopAutoUpdateEnabled(res.data?.autoUpdateEnabled)
-          setError(null)
-        })
-        .catch(e => {
-          setError(e)
-        })
-        .finally(() => {
-          setLoading(false)
-        })
-    }
-  }, [desktopUrl, isBeeDesktop])
-
   return { error, isLoading, beeDesktopVersion, desktopAutoUpdateEnabled, reachable }
 }
 

src/hooks/useClipboardCopy.tsx

@@ -0,0 +1,33 @@
+import { IconButton } from '@mui/material'
+import { closeSnackbar, useSnackbar } from 'notistack'
+import { useState } from 'react'
+import CloseLineIcon from 'remixicon-react/CloseLineIcon'
+
+export function useClipboardCopy(value: string) {
+  const { enqueueSnackbar } = useSnackbar()
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(value)
+      setCopied(true)
+    } catch {
+      enqueueSnackbar(`Failed to copy text`, {
+        variant: 'error',
+        action: key => (
+          <IconButton onClick={() => closeSnackbar(key)} size="small" color="inherit">
+            <CloseLineIcon fontSize="small" />
+          </IconButton>
+        ),
+      })
+    }
+  }
+
+  const tooltipCloseHandler = () => setCopied(false)
+
+  return {
+    copied,
+    handleCopy,
+    tooltipCloseHandler,
+  }
+}

src/index.tsx

@@ -1,19 +1,21 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
+
 import App from './App'
-import './index.css'
 import reportWebVitals from './reportWebVitals'
 
-const desktopEnabled = process.env.REACT_APP_BEE_DESKTOP_ENABLED === 'true'
-const desktopUrl = process.env.REACT_APP_BEE_DESKTOP_URL
-const beeApiUrl = process.env.REACT_APP_BEE_HOST
-const defaultRpcUrl = process.env.REACT_APP_DEFAULT_RPC_URL
+import './index.css'
 
-ReactDOM.render(
+const desktopEnabled = import.meta.env.VITE_BEE_DESKTOP_ENABLED === 'true'
+const desktopUrl = import.meta.env.VITE_BEE_DESKTOP_URL
+const beeApiUrl = import.meta.env.VITE_BEE_HOST
+const defaultRpcUrl = import.meta.env.VITE_DEFAULT_RPC_URL
+
+const root = createRoot(document.getElementById('root') as HTMLElement)
+root.render(
   <React.StrictMode>
     <App isDesktop={desktopEnabled} desktopUrl={desktopUrl} beeApiUrl={beeApiUrl} defaultRpcUrl={defaultRpcUrl} />
   </React.StrictMode>,
-  document.getElementById('root'),
 )
 
 // If you want to start measuring performance in your app, pass a function

src/layout/Dashboard.tsx

@@ -1,8 +1,10 @@
-import { Button, CircularProgress, Container, IconButton } from '@material-ui/core'
-import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'
+import { Button, CircularProgress, Container, IconButton } from '@mui/material'
 import { useSnackbar } from 'notistack'
 import React, { ReactElement, useContext, useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
 import CloseIcon from 'remixicon-react/CloseCircleLineIcon'
+import { makeStyles } from 'tss-react/mui'
+
 import ErrorBoundary from '../components/ErrorBoundary'
 import { Flex } from '../components/Flex'
 import SideBar from '../components/SideBar'
@@ -10,20 +12,17 @@ import { BEE_DESKTOP_LATEST_RELEASE_PAGE } from '../constants'
 import { useBeeDesktop, useNewBeeDesktopVersion } from '../hooks/apiHooks'
 import { Context as BeeContext } from '../providers/Bee'
 import { Context as SettingsContext } from '../providers/Settings'
-import { useLocation } from 'react-router-dom'
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    content: {
-      backgroundColor: theme.palette.background.default,
-      minHeight: '100vh',
-    },
+const useStyles = makeStyles()(theme => ({
+  content: {
+    backgroundColor: theme.palette.background.default,
+    minHeight: '100vh',
+  },
 
-    fileManagerOn: {
-      padding: '0px',
-    },
-  }),
-)
+  fileManagerOn: {
+    padding: '0px',
+  },
+}))
 
 interface Props {
   children?: ReactElement
@@ -34,7 +33,7 @@ const Dashboard = (props: Props): ReactElement => {
   const location = useLocation()
 
   const isFileManagerOn = location.pathname.startsWith('/filemanager')
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   const { isLoading } = useContext(BeeContext)
   const { isDesktop, desktopUrl } = useContext(SettingsContext)

src/modules/filemanager/components/AdminStatusBar/AdminStatusBar.tsx

@@ -1,18 +1,20 @@
-import { ReactElement, useState, useMemo, useEffect, useContext, useCallback } from 'react'
-import './AdminStatusBar.scss'
-import { ProgressBar } from '../ProgressBar/ProgressBar'
-import { Tooltip } from '../Tooltip/Tooltip'
 import { PostageBatch } from '@ethersphere/bee-js'
 import { DriveInfo, estimateDriveListMetadataSize } from '@solarpunkltd/file-manager-lib'
+import { ReactElement, useCallback, useContext, useEffect, useMemo, useState } from 'react'
+
 import { Context as FMContext } from '../../../../providers/FileManager'
-import { ConfirmModal } from '../ConfirmModal/ConfirmModal'
-import { calculateStampCapacityMetrics } from '../../utils/bee'
 import { getHumanReadableFileSize } from '../../../../utils/file'
+import { FILE_MANAGER_EVENTS, POLLING_TIMEOUT_MS } from '../../constants/common'
+import { TOOLTIPS } from '../../constants/tooltips'
+import { useStampPolling } from '../../hooks/useStampPolling'
+import { calculateStampCapacityMetrics } from '../../utils/bee'
+import { ConfirmModal } from '../ConfirmModal/ConfirmModal'
+import { ProgressBar } from '../ProgressBar/ProgressBar'
+import { Tooltip } from '../Tooltip/Tooltip'
 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'
+
+import './AdminStatusBar.scss'
 
 interface AdminStatusBarProps {
   adminStamp: PostageBatch | null

src/modules/filemanager/components/Button/Button.tsx

@@ -1,4 +1,5 @@
 import { ReactElement } from 'react'
+
 import './Button.scss'
 
 interface ButtonProps {

src/modules/filemanager/components/ConfirmModal/ConfirmModal.tsx

@@ -1,8 +1,10 @@
-import { ReactElement } from 'react'
+import React, { ReactElement } from 'react'
+import { createPortal } from 'react-dom'
+
+import { Button } from '../Button/Button'
+
 import '../../styles/global.scss'
 import './ConfirmModal.scss'
-import { Button } from '../Button/Button'
-import { createPortal } from 'react-dom'
 
 interface ConfirmModalProps {
   title?: React.ReactNode

src/modules/filemanager/components/CreateDriveModal/CreateDriveModal.tsx

@@ -1,20 +1,21 @@
+import { BeeModes, BZZ, DAI, Duration, RedundancyLevel, Size, Utils } from '@ethersphere/bee-js'
 import { ReactElement, useContext, useEffect, useRef, useState } from 'react'
 
-import { BeeModes, BZZ, DAI, Duration, RedundancyLevel, Size, Utils } from '@ethersphere/bee-js'
-import './CreateDriveModal.scss'
-import { CustomDropdown } from '../CustomDropdown/CustomDropdown'
-import { Button } from '../Button/Button'
-import { fmFetchCost, handleCreateDrive } from '../../utils/bee'
-import { getExpiryDateByLifetime } from '../../utils/common'
+import { Context as BeeContext } from '../../../../providers/Bee'
+import { Context as FMContext } from '../../../../providers/FileManager'
+import { Context as SettingsContext } from '../../../../providers/Settings'
+import { getHumanReadableFileSize } from '../../../../utils/file'
 import { erasureCodeMarks } from '../../constants/common'
 import { desiredLifetimeOptions } from '../../constants/stamps'
-import { Context as BeeContext } from '../../../../providers/Bee'
-import { Context as SettingsContext } from '../../../../providers/Settings'
-import { FMSlider } from '../Slider/Slider'
-import { Context as FMContext } from '../../../../providers/FileManager'
-import { getHumanReadableFileSize } from '../../../../utils/file'
-import { Tooltip } from '../Tooltip/Tooltip'
 import { TOOLTIPS } from '../../constants/tooltips'
+import { fmFetchCost, handleCreateDrive } from '../../utils/bee'
+import { getExpiryDateByLifetime } from '../../utils/common'
+import { Button } from '../Button/Button'
+import { CustomDropdown } from '../CustomDropdown/CustomDropdown'
+import { FMSlider } from '../Slider/Slider'
+import { Tooltip } from '../Tooltip/Tooltip'
+
+import './CreateDriveModal.scss'
 
 const minMarkValue = Math.min(...erasureCodeMarks.map(mark => mark.value))
 const maxMarkValue = Math.max(...erasureCodeMarks.map(mark => mark.value))
@@ -26,7 +27,7 @@ interface CreateDriveModalProps {
   onCreationStarted: (driveName: string) => void
   onCreationError: (name: string) => void
 }
-// TODO: select existing batch id or create a new one - just like in InitialModal
+
 export function CreateDriveModal({
   onCancelClick,
   onDriveCreated,
@@ -72,7 +73,7 @@ export function CreateDriveModal({
     }
   }, [duplicate, nameExists])
 
-  const handleCapacityChange = (value: number, index: number) => {
+  const handleCapacityChange = (_: number, index: number) => {
     setCapacityIndex(index)
   }
 

src/modules/filemanager/components/CustomDropdown/CustomDropdown.tsx

@@ -1,9 +1,11 @@
-import { useState, useRef } from 'react'
-import './CustomDropdown.scss'
+import { useRef, useState } from 'react'
 import ArrowDropdown from 'remixicon-react/ArrowDropDownLineIcon'
+
 import { useClickOutside } from '../../hooks/useClickOutside'
 import { Tooltip } from '../Tooltip/Tooltip'
 
+import './CustomDropdown.scss'
+
 interface Option {
   value: number
   label: string
@@ -31,7 +33,7 @@ export function CustomDropdown({
   infoText,
 }: CustomDropdownProps) {
   const [open, setOpen] = useState(false)
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = useRef<HTMLDivElement | null>(null)
 
   useClickOutside(ref, () => setOpen(false), open)
 

src/modules/filemanager/components/DeleteFileModal/DeleteFileModal.tsx

@@ -1,17 +1,17 @@
+import FormControl from '@mui/material/FormControl'
+import FormControlLabel from '@mui/material/FormControlLabel'
+import Radio from '@mui/material/Radio'
 import { ReactElement, useState } from 'react'
-import './DeleteFileModal.scss'
-import { Button } from '../Button/Button'
 import { createPortal } from 'react-dom'
-import TrashIcon from 'remixicon-react/DeleteBin6LineIcon'
 import AlertIcon from 'remixicon-react/AlertLineIcon'
+import TrashIcon from 'remixicon-react/DeleteBin6LineIcon'
 
-import Radio from '@material-ui/core/Radio'
-import FormControlLabel from '@material-ui/core/FormControlLabel'
-import FormControl from '@material-ui/core/FormControl'
+import { TOOLTIPS } from '../../constants/tooltips'
+import { FileAction } from '../../constants/transfers'
+import { Button } from '../Button/Button'
 import { Tooltip } from '../Tooltip/Tooltip'
 
-import { FileAction } from '../../constants/transfers'
-import { TOOLTIPS } from '../../constants/tooltips'
+import './DeleteFileModal.scss'
 
 interface DeleteFileModalProps {
   name?: string

src/modules/filemanager/components/DestroyDriveModal/DestroyDriveModal.tsx

@@ -1,9 +1,11 @@
+import { DriveInfo } from '@solarpunkltd/file-manager-lib'
 import { ReactElement, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+import { Button } from '../Button/Button'
+
 import '../../styles/global.scss'
 import './DestroyDriveModal.scss'
-import { Button } from '../Button/Button'
-import { createPortal } from 'react-dom'
-import { DriveInfo } from '@solarpunkltd/file-manager-lib'
 
 interface DestroyDriveModalProps {
   drive: DriveInfo

src/modules/filemanager/components/ErrorModal/ErrorModal.tsx

@@ -1,7 +1,9 @@
 import { ReactElement } from 'react'
-import './ErrorModal.scss'
+
 import { Button } from '../Button/Button'
 
+import './ErrorModal.scss'
+
 interface ErrorModalProps {
   label: string
   onClick: () => void

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

@@ -1,20 +1,20 @@
-import { ReactElement, useState, useMemo, useEffect } from 'react'
-import { Warning } from '@material-ui/icons'
+import { PostageBatch } from '@ethersphere/bee-js'
+import { Warning } from '@mui/icons-material'
+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 CalendarIcon from 'remixicon-react/CalendarLineIcon'
+import DriveIcon from 'remixicon-react/HardDrive2LineIcon'
+
+import { calculateStampCapacityMetrics } from '../../utils/bee'
+import { getDaysLeft } from '../../utils/common'
+import { Button } from '../Button/Button'
+import { UpgradeDriveModal } from '../UpgradeDriveModal/UpgradeDriveModal'
+
 import './ExpiringNotificationModal.scss'
 import '../../styles/global.scss'
 
-import { Button } from '../Button/Button'
-import { createPortal } from 'react-dom'
-import DriveIcon from 'remixicon-react/HardDrive2LineIcon'
-import CalendarIcon from 'remixicon-react/CalendarLineIcon'
-import AlertIcon from 'remixicon-react/AlertLineIcon'
-import { UpgradeDriveModal } from '../UpgradeDriveModal/UpgradeDriveModal'
-import { getDaysLeft } from '../../utils/common'
-
-import { PostageBatch } from '@ethersphere/bee-js'
-import { DriveInfo, FileInfo } from '@solarpunkltd/file-manager-lib'
-import { calculateStampCapacityMetrics } from '../../utils/bee'
-
 const EXPIRING_ITEMS_PAGE_SIZE = 3
 
 interface ExpiringNotificationModalProps {
@@ -52,7 +52,10 @@ export function ExpiringNotificationModal({
   const paginatedStamps = sortedStamps.slice(startIndex, startIndex + EXPIRING_ITEMS_PAGE_SIZE)
 
   useEffect(() => {
-    setCurrentPage(0)
+    if (currentPage !== 0) {
+      setCurrentPage(0)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [stamps])
 
   if (stamps.length === 0) return <></>

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

@@ -1,52 +1,69 @@
-import { ReactElement, useEffect, useLayoutEffect, useRef, useState, useContext, useMemo, useCallback } from 'react'
-import './FileBrowser.scss'
-import { FileBrowserHeader } from './FileBrowserHeader/FileBrowserHeader'
-import { FileBrowserContent } from './FileBrowserContent/FileBrowserContent'
-import { useContextMenu } from '../../hooks/useContextMenu'
-import { NotificationBar } from '../NotificationBar/NotificationBar'
-import { FileAction, FileTransferType, TransferStatus, ViewType } from '../../constants/transfers'
-import { FileProgressNotification } from '../FileProgressNotification/FileProgressNotification'
+import { PostageBatch } from '@ethersphere/bee-js'
+import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import React, {
+  ReactElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+
+import { useSearch } from '../../../../pages/filemanager/SearchContext'
 import { useView } from '../../../../pages/filemanager/ViewContext'
 import { Context as FMContext } from '../../../../providers/FileManager'
-import { useTransfers } from '../../hooks/useTransfers'
-import { useSearch } from '../../../../pages/filemanager/SearchContext'
-import { useFileFiltering } from '../../hooks/useFileFiltering'
-import { useDragAndDrop } from '../../hooks/useDragAndDrop'
-import { useBulkActions } from '../../hooks/useBulkActions'
-import { SortKey, SortDir, useSorting } from '../../hooks/useSorting'
-
-import { Point, Dir, safeSetState, getFileId } from '../../utils/common'
-import { computeContextMenuPosition } from '../../utils/ui'
-import { FileBrowserTopBar } from './FileBrowserTopBar/FileBrowserTopBar'
-import { handleDestroyAndForgetDrive } from '../../utils/bee'
 import { Context as SettingsContext } from '../../../../providers/Settings'
-import { ErrorModal } from '../ErrorModal/ErrorModal'
-import { FileBrowserModals } from './FileBrowserModals'
-import { FileBrowserContextMenu } from './FileBrowserMenu/FileBrowserContextMenu'
-import { DriveInfo, FileInfo } from '@solarpunkltd/file-manager-lib'
+import { FileAction, FileTransferType, TransferStatus, ViewType } from '../../constants/transfers'
+import { useBulkActions } from '../../hooks/useBulkActions'
+import { useContextMenu } from '../../hooks/useContextMenu'
+import { useDragAndDrop } from '../../hooks/useDragAndDrop'
+import { useFileFiltering } from '../../hooks/useFileFiltering'
+import { SortDir, SortKey, useSorting } from '../../hooks/useSorting'
+import { useTransfers } from '../../hooks/useTransfers'
+import { handleDestroyAndForgetDrive } from '../../utils/bee'
+import { Dir, getFileId, Point, safeSetState } from '../../utils/common'
+import { computeContextMenuPosition } from '../../utils/ui'
 import { ProgressDestroyModal } from '../DestroyDriveModal/DestroyDriveModal'
+import { ErrorModal } from '../ErrorModal/ErrorModal'
+import { FileProgressNotification } from '../FileProgressNotification/FileProgressNotification'
+import { NotificationBar } from '../NotificationBar/NotificationBar'
 
-const renderDestroySpinner = (
-  isDestroying: boolean,
-  isProgressModalOpen: boolean,
-  currentDrive: DriveInfo | undefined,
-  setter: () => void,
-) => {
+import { FileBrowserContent } from './FileBrowserContent/FileBrowserContent'
+import { FileBrowserHeader } from './FileBrowserHeader/FileBrowserHeader'
+import { FileBrowserContextMenu } from './FileBrowserMenu/FileBrowserContextMenu'
+import { FileBrowserTopBar } from './FileBrowserTopBar/FileBrowserTopBar'
+import { FileBrowserModals } from './FileBrowserModals'
+
+import './FileBrowser.scss'
+
+function DestroyProgressModal({
+  isDestroying,
+  isProgressModalOpen,
+  currentDrive,
+  onMinimize,
+}: {
+  isDestroying: boolean
+  isProgressModalOpen: boolean
+  currentDrive?: DriveInfo
+  onMinimize: () => void
+}) {
   if (isProgressModalOpen && isDestroying && currentDrive) {
-    return <ProgressDestroyModal drive={currentDrive} onMinimize={setter} />
+    return <ProgressDestroyModal drive={currentDrive} onMinimize={onMinimize} />
   }
 
   return null
 }
 
-const showDestroyModal = (isDestroying: boolean, setter: () => void) => {
+function DestroyingOverlay({ isDestroying, onClick }: { isDestroying: boolean; onClick: () => void }) {
   if (!isDestroying) return null
 
   return (
     <div className="fm-refresh-overlay" aria-busy="true" aria-live="polite">
       <div
         className="fm-refresh-content"
-        onClick={setter}
+        onClick={onClick}
         style={{ cursor: 'pointer' }}
         title="Click to show progress modal"
       >
@@ -57,6 +74,22 @@ const showDestroyModal = (isDestroying: boolean, setter: () => void) => {
   )
 }
 
+function ErrorModalBlock({
+  showError,
+  label,
+  onOk,
+}: {
+  showError: boolean
+  label: string
+  onOk: () => void
+}): ReactElement | null {
+  if (!showError) {
+    return null
+  }
+
+  return <ErrorModal label={label} onClick={onOk} />
+}
+
 const extractFilesFromClipboardEvent = (e: React.ClipboardEvent): File[] => {
   const out: File[] = []
   const items = e.clipboardData?.items ?? []
@@ -78,6 +111,67 @@ interface FileBrowserProps {
   setErrorMessage?: (error: string) => void
 }
 
+type FileBrowserContextMenuBlockProps = {
+  showContext: boolean
+  contextRef: React.RefObject<HTMLDivElement | null>
+  safePos: { x: number; y: number }
+  dropDir: Dir
+  drives: DriveInfo[]
+  view: ViewType
+  bulk: ReturnType<typeof useBulkActions>
+  adminStamp: PostageBatch | undefined
+  doRefresh: () => void
+  onContextUploadFile: () => void
+  setConfirmBulkRestore: (b: boolean) => void
+  setShowBulkDeleteModal: (b: boolean) => void
+  setShowDestroyDriveModal: (b: boolean) => void
+}
+
+function FileBrowserContextMenuBlock({
+  showContext,
+  contextRef,
+  safePos,
+  dropDir,
+  drives,
+  view,
+  bulk,
+  adminStamp,
+  doRefresh,
+  onContextUploadFile,
+  setConfirmBulkRestore,
+  setShowBulkDeleteModal,
+  setShowDestroyDriveModal,
+}: FileBrowserContextMenuBlockProps): ReactElement | null {
+  if (!showContext) {
+    return null
+  }
+
+  return (
+    <div
+      ref={contextRef}
+      className="fm-file-browser-context-menu fm-context-menu"
+      style={{ top: safePos.y, left: safePos.x }}
+      data-drop={dropDir}
+      onMouseDown={e => e.stopPropagation()}
+      onClick={e => e.stopPropagation()}
+    >
+      <FileBrowserContextMenu
+        drives={drives}
+        view={view}
+        selectedFilesCount={bulk.selectedFiles.length}
+        onRefresh={doRefresh}
+        enableRefresh={Boolean(adminStamp)}
+        onUploadFile={onContextUploadFile}
+        onBulkDownload={() => bulk.bulkDownload(bulk.selectedFiles)}
+        onBulkRestore={() => setConfirmBulkRestore(true)}
+        onBulkDelete={() => setShowBulkDeleteModal(true)}
+        onBulkDestroy={() => setShowDestroyDriveModal(true)}
+        onBulkForget={() => bulk.bulkForget(bulk.selectedFiles)}
+      />
+    </div>
+  )
+}
+
 export function FileBrowser({ errorMessage, setErrorMessage }: FileBrowserProps): ReactElement {
   const { showContext, pos, contextRef, handleContextMenu, handleCloseContext } = useContextMenu<HTMLDivElement>()
   const { view, setActualItemView } = useView()
@@ -120,11 +214,14 @@ export function FileBrowser({ errorMessage, setErrorMessage }: FileBrowserProps)
   const q = query.trim().toLowerCase()
   const isSearchMode = q.length > 0
 
-  const getDriveName = (fi: FileInfo): string => {
-    const match = drives.find(d => d.id.toString() === fi.driveId.toString())
+  const getDriveName = useCallback(
+    (driveId: string): string => {
+      const match = drives.find(d => d.id.toString() === driveId)
 
-    return match?.name ?? ''
-  }
+      return match?.name ?? ''
+    },
+    [drives],
+  )
 
   const openTopbarMenu = (anchorEl: HTMLElement) => {
     const r = anchorEl.getBoundingClientRect()
@@ -133,9 +230,7 @@ export function FileBrowser({ errorMessage, setErrorMessage }: FileBrowserProps)
     const minY = (bodyRect?.top ?? 0) + 8
     const clickY = Math.max(Math.round(r.bottom + 6), minY)
     const fakeEvt = {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
       preventDefault: () => {},
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
       stopPropagation: () => {},
       clientX: clickX,
       clientY: clickY,
@@ -379,7 +474,6 @@ export function FileBrowser({ errorMessage, setErrorMessage }: FileBrowserProps)
   const showDragOverlay = isDragging && Boolean(currentDrive)
   const fileCountText = bulk.selectedFiles.length === 1 ? 'file' : 'files'
 
-  // Memoize onBulk object to prevent FileBrowserContent rerenders
   const onBulk = useMemo(
     () => ({
       download: () => bulk.bulkDownload(bulk.selectedFiles),
@@ -445,42 +539,32 @@ export function FileBrowser({ errorMessage, setErrorMessage }: FileBrowserProps)
               onBulk={onBulk}
               setErrorMessage={setErrorMessage}
             />
-            {showError && (
-              <ErrorModal
-                label={errorMessage || 'An error occurred'}
-                onClick={() => {
-                  setShowError(false)
-                  setErrorMessage?.('')
+            <ErrorModalBlock
+              showError={Boolean(showError)}
+              label={errorMessage || 'An error occurred'}
+              onOk={() => {
+                setShowError(false)
+                setErrorMessage?.('')
 
-                  return
-                }}
-              />
-            )}
+                return
+              }}
+            />
 
-            {showContext && (
-              <div
-                ref={contextRef}
-                className="fm-file-browser-context-menu fm-context-menu"
-                style={{ top: safePos.y, left: safePos.x }}
-                data-drop={dropDir}
-                onMouseDown={e => e.stopPropagation()}
-                onClick={e => e.stopPropagation()}
-              >
-                <FileBrowserContextMenu
-                  drives={drives}
-                  view={view}
-                  selectedFilesCount={bulk.selectedFiles.length}
-                  onRefresh={doRefresh}
-                  enableRefresh={Boolean(fm?.adminStamp)}
-                  onUploadFile={onContextUploadFile}
-                  onBulkDownload={() => bulk.bulkDownload(bulk.selectedFiles)}
-                  onBulkRestore={() => setConfirmBulkRestore(true)}
-                  onBulkDelete={() => setShowBulkDeleteModal(true)}
-                  onBulkDestroy={() => setShowDestroyDriveModal(true)}
-                  onBulkForget={() => bulk.bulkForget(bulk.selectedFiles)}
-                />
-              </div>
-            )}
+            <FileBrowserContextMenuBlock
+              showContext={showContext}
+              contextRef={contextRef}
+              safePos={safePos}
+              dropDir={dropDir}
+              drives={drives}
+              view={view}
+              bulk={bulk}
+              adminStamp={fm?.adminStamp}
+              doRefresh={doRefresh}
+              onContextUploadFile={onContextUploadFile}
+              setConfirmBulkRestore={setConfirmBulkRestore}
+              setShowBulkDeleteModal={setShowBulkDeleteModal}
+              setShowDestroyDriveModal={setShowDestroyDriveModal}
+            />
           </div>
 
           {showDragOverlay && (
@@ -537,9 +621,13 @@ export function FileBrowser({ errorMessage, setErrorMessage }: FileBrowserProps)
             </div>
           )}
 
-          {showDestroyModal(isDestroying, () => setIsProgressModalOpen(true))}
-
-          {renderDestroySpinner(isDestroying, isProgressModalOpen, currentDrive, () => setIsProgressModalOpen(false))}
+          <DestroyingOverlay isDestroying={isDestroying} onClick={() => setIsProgressModalOpen(true)} />
+          <DestroyProgressModal
+            isDestroying={isDestroying}
+            isProgressModalOpen={isProgressModalOpen}
+            currentDrive={currentDrive}
+            onMinimize={() => setIsProgressModalOpen(false)}
+          />
         </div>
 
         <div className="fm-file-browser-footer">
@@ -556,7 +644,7 @@ export function FileBrowser({ errorMessage, setErrorMessage }: FileBrowserProps)
             type={FileTransferType.Download}
             open={isDownloading}
             items={downloadItems}
-            onRowClose={name => cancelOrDismissDownload(name)}
+            onRowClose={(name: string) => cancelOrDismissDownload(name)}
             onCloseAll={() => dismissAllDownloads()}
           />
           <NotificationBar setErrorMessage={setErrorMessage} />

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

@@ -1,8 +1,9 @@
-import { ReactElement, useCallback, memo } from 'react'
-import { FileItem } from '../FileItem/FileItem'
-import { FileInfo, DriveInfo } from '@solarpunkltd/file-manager-lib'
+import { DriveInfo, FileInfo } from '@solarpunkltd/file-manager-lib'
+import { memo, ReactElement, useCallback } from 'react'
+
 import { DownloadProgress, TrackDownloadProps, ViewType } from '../../../constants/transfers'
 import { getFileId } from '../../../utils/common'
+import { FileItem } from '../FileItem/FileItem'
 
 interface FileBrowserContentProps {
   listToRender: FileInfo[]

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

@@ -1,8 +1,10 @@
 import { ReactElement } from 'react'
 import DownIcon from 'remixicon-react/ArrowDownSLineIcon'
+
 import { useBulkActions } from '../../../hooks/useBulkActions'
 import { SortDir, SortKey } from '../../../hooks/useSorting'
-import { capitalizeFirstLetter } from '../../../../../../src/modules/filemanager/utils/common'
+
+import { capitalizeFirstLetter } from '@/modules/filemanager/utils/common'
 
 interface FileBrowserHeaderProps {
   isSearchMode: boolean

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

@@ -1,10 +1,12 @@
-import { ContextMenu } from '../../ContextMenu/ContextMenu'
-import { ReactElement } from 'react'
-import '../FileBrowser.scss'
-import { ViewType } from '../../../constants/transfers'
 import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import { ReactElement } from 'react'
+
+import { ViewType } from '../../../constants/transfers'
+import { ContextMenu } from '../../ContextMenu/ContextMenu'
 import { Tooltip } from '../../Tooltip/Tooltip'
 
+import '../FileBrowser.scss'
+
 interface FileBrowserContextMenuProps {
   drives: DriveInfo[]
   view: ViewType

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

@@ -1,11 +1,12 @@
+import type { DriveInfo, FileInfo } from '@solarpunkltd/file-manager-lib'
 import { ReactElement } from 'react'
-import type { FileInfo, DriveInfo } from '@solarpunkltd/file-manager-lib'
+
+import { TOOLTIPS } from '../../constants/tooltips'
+import { FileAction } from '../../constants/transfers'
 import { ConfirmModal } from '../ConfirmModal/ConfirmModal'
-import { Tooltip } from '../Tooltip/Tooltip'
 import { DeleteFileModal } from '../DeleteFileModal/DeleteFileModal'
 import { DestroyDriveModal } from '../DestroyDriveModal/DestroyDriveModal'
-import { FileAction } from '../../constants/transfers'
-import { TOOLTIPS } from '../../constants/tooltips'
+import { Tooltip } from '../Tooltip/Tooltip'
 
 interface FileBrowserModalsProps {
   showDeleteModal: boolean

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

@@ -1,8 +1,10 @@
 import { ReactElement } from 'react'
-import './FileBrowserTopBar.scss'
+
 import { useView } from '../../../../../pages/filemanager/ViewContext'
 import { ViewType } from '../../../constants/transfers'
 
+import './FileBrowserTopBar.scss'
+
 type Props = {
   onOpenMenu?: (anchorEl: HTMLElement) => void
   canOpen?: boolean

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

@@ -1,33 +1,62 @@
-import { ReactElement, useContext, useLayoutEffect, useMemo, useState, useRef, useEffect, useCallback } from 'react'
 import { PostageBatch } from '@ethersphere/bee-js'
 import { DriveInfo, FileInfo } from '@solarpunkltd/file-manager-lib'
+import React, {
+  ReactElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 
-import './FileItem.scss'
-import { GetIconElement } from '../../../utils/GetIconElement'
-import { ContextMenu } from '../../ContextMenu/ContextMenu'
-import { useContextMenu } from '../../../hooks/useContextMenu'
-import { Context as SettingsContext } from '../../../../../providers/Settings'
-import { DownloadProgress, TrackDownloadProps, ViewType } from '../../../constants/transfers'
-import { GetInfoModal } from '../../GetInfoModal/GetInfoModal'
-import { VersionHistoryModal } from '../../VersionHistoryModal/VersionHistoryModal'
-import { DeleteFileModal } from '../../DeleteFileModal/DeleteFileModal'
-import { RenameFileModal } from '../../RenameFileModal/RenameFileModal'
-import { buildGetInfoGroups } from '../../../utils/infoGroups'
-import type { FilePropertyGroup } from '../../../utils/infoGroups'
 import { useView } from '../../../../../pages/filemanager/ViewContext'
 import { Context as FMContext } from '../../../../../providers/FileManager'
-import { DestroyDriveModal } from '../../DestroyDriveModal/DestroyDriveModal'
-import { ConfirmModal } from '../../ConfirmModal/ConfirmModal'
-import { Tooltip } from '../../Tooltip/Tooltip'
-import { Dir, formatBytes, isTrashed, safeSetState, truncateNameMiddle } from '../../../utils/common'
-import { FileAction } from '../../../constants/transfers'
-import { TOOLTIPS } from '../../../constants/tooltips'
-import { startDownloadingQueue, createDownloadAbort } from '../../../utils/download'
-import { computeContextMenuPosition } from '../../../utils/ui'
-import { getUsableStamps, handleDestroyAndForgetDrive, verifyDriveSpace } from '../../../utils/bee'
-import { guessMime } from '../../../utils/view'
-import { performFileOperation, FileOperation } from '../../../utils/fileOperations'
+import { Context as SettingsContext } from '../../../../../providers/Settings'
 import { uuidV4 } from '../../../../../utils'
+import { TOOLTIPS } from '../../../constants/tooltips'
+import { DownloadProgress, FileAction, TrackDownloadProps, ViewType } from '../../../constants/transfers'
+import { useContextMenu } from '../../../hooks/useContextMenu'
+import { getUsableStamps, handleDestroyAndForgetDrive, verifyDriveSpace } from '../../../utils/bee'
+import { Dir, formatBytes, isTrashed, safeSetState, truncateNameMiddle } from '../../../utils/common'
+import { createDownloadAbort, startDownloadingQueue } from '../../../utils/download'
+import { FileOperation, performFileOperation } from '../../../utils/fileOperations'
+import { GetIconElement } from '../../../utils/GetIconElement'
+import type { FilePropertyGroup } from '../../../utils/infoGroups'
+import { buildGetInfoGroups } from '../../../utils/infoGroups'
+import { computeContextMenuPosition } from '../../../utils/ui'
+import { ConfirmModal } from '../../ConfirmModal/ConfirmModal'
+import { ContextMenu } from '../../ContextMenu/ContextMenu'
+import { DeleteFileModal } from '../../DeleteFileModal/DeleteFileModal'
+import { DestroyDriveModal } from '../../DestroyDriveModal/DestroyDriveModal'
+import { GetInfoModal } from '../../GetInfoModal/GetInfoModal'
+import { RenameFileModal } from '../../RenameFileModal/RenameFileModal'
+import { Tooltip } from '../../Tooltip/Tooltip'
+import { VersionHistoryModal } from '../../VersionHistoryModal/VersionHistoryModal'
+
+import './FileItem.scss'
+
+const MenuItem = ({
+  disabled,
+  danger,
+  onClick,
+  children,
+}: {
+  disabled?: boolean
+  danger?: boolean
+  onClick?: () => void
+  children: React.ReactNode
+}) => (
+  <div
+    className={`fm-context-item${danger ? ' red' : ''}`}
+    aria-disabled={disabled ? 'true' : 'false'}
+    style={disabled ? { opacity: 0.5, pointerEvents: 'none' } : undefined}
+    onClick={disabled ? undefined : onClick}
+  >
+    {children}
+  </div>
+)
 
 interface FileItemProps {
   fileInfo: FileInfo
@@ -131,12 +160,6 @@ export function FileItem({
     return out
   }, [files, currentDrive, fileInfo.topic])
 
-  const handleItemContextMenu = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (e.shiftKey) return
-    handleContextMenu(e)
-  }
-
-  // TODO: handleOpen shall only be available for images, videos etc... -> do not download 10GB into memory
   const handleDownload = useCallback(
     async (isNewWindow?: boolean) => {
       if (!fm || !beeApi) return
@@ -241,7 +264,7 @@ export function FileItem({
         )
 
         refreshStamp(driveStamp.batchID.toString())
-      } catch (e: unknown) {
+      } catch {
         setErrorMessage?.(`Error renaming file ${latestFileInfo.name}`)
         setShowError(true)
       }
@@ -250,41 +273,16 @@ export function FileItem({
     [fm, driveStamp, currentDrive, latestFileInfo, takenNames, refreshStamp, setErrorMessage, setShowError],
   )
 
-  const MenuItem = ({
-    disabled,
-    danger,
-    onClick,
-    children,
-  }: {
-    disabled?: boolean
-    danger?: boolean
-    onClick?: () => void
-    children: React.ReactNode
-  }) => (
-    <div
-      className={`fm-context-item${danger ? ' red' : ''}`}
-      aria-disabled={disabled ? 'true' : 'false'}
-      style={disabled ? { opacity: 0.5, pointerEvents: 'none' } : undefined}
-      onClick={disabled ? undefined : onClick}
-    >
-      {children}
-    </div>
-  )
-
-  const isBulk = (bulkSelectedCount ?? 0) > 1
-
   const renderContextMenuItems = useCallback(() => {
+    const isBulk = (bulkSelectedCount ?? 0) > 1
+
     const viewItem = (
       <MenuItem disabled={isBulk} onClick={() => handleDownload(true)}>
         View / Open
       </MenuItem>
     )
 
-    const downloadItem = isBulk ? (
-      <MenuItem onClick={onBulk.download}>Download</MenuItem>
-    ) : (
-      <MenuItem onClick={() => handleDownload(false)}>Download</MenuItem>
-    )
+    const downloadItem = <MenuItem onClick={isBulk ? onBulk.download : () => handleDownload(false)}>Download</MenuItem>
 
     const getInfoItem = (
       <MenuItem
@@ -405,15 +403,15 @@ export function FileItem({
       </>
     )
   }, [
-    isBulk,
     view,
+    currentDrive,
+    drives,
+    bulkSelectedCount,
+    onBulk,
+    fileInfo.driveId,
     handleDownload,
     handleCloseContext,
     openGetInfo,
-    onBulk,
-    currentDrive,
-    drives,
-    fileInfo.driveId,
     setErrorMessage,
     setShowError,
   ])
@@ -463,11 +461,15 @@ export function FileItem({
     return <div className="fm-file-item-content">Error</div>
   }
 
-  const { mime } = guessMime(fileInfo.name, fileInfo.customMetadata)
-  const mimeType = mime.split('/')[0]?.toLowerCase() || 'file'
-
   return (
-    <div className="fm-file-item-content" onContextMenu={handleItemContextMenu} onClick={handleCloseContext}>
+    <div
+      className="fm-file-item-content"
+      onContextMenu={(e: React.MouseEvent<HTMLDivElement>) => {
+        if (e.shiftKey) return
+        handleContextMenu(e)
+      }}
+      onClick={handleCloseContext}
+    >
       <div className="fm-file-item-content-item fm-checkbox">
         <input
           type="checkbox"
@@ -478,7 +480,7 @@ export function FileItem({
       </div>
 
       <div className="fm-file-item-content-item fm-name" onDoubleClick={() => handleDownload(true)}>
-        <GetIconElement icon={mimeType} />
+        <GetIconElement name={fileInfo.name} metadata={fileInfo.customMetadata} />
         {truncateNameMiddle(fileInfo.name)}
       </div>
 

src/modules/filemanager/components/FileProgressNotification/FileProgressNotification.tsx

@@ -1,9 +1,11 @@
 import { ReactElement, useEffect, useMemo, useRef, useState } from 'react'
-import './FileProgressNotification.scss'
-import UpIcon from 'remixicon-react/ArrowUpSLineIcon'
 import DownIcon from 'remixicon-react/ArrowDownSLineIcon'
+import UpIcon from 'remixicon-react/ArrowUpSLineIcon'
+
+import { FileTransferType, ProgressItem, TransferStatus } from '../../constants/transfers'
 import { FileProgressWindow } from '../FileProgressWindow/FileProgressWindow'
-import { FileTransferType, TransferStatus, ProgressItem } from '../../constants/transfers'
+
+import './FileProgressNotification.scss'
 
 interface FileProgressNotificationProps {
   label?: string
@@ -14,6 +16,8 @@ interface FileProgressNotificationProps {
   onCloseAll?: () => void
 }
 
+const HIDER_TIMEOUT_MS = 3000
+
 export function FileProgressNotification({
   label,
   type,
@@ -49,7 +53,7 @@ export function FileProgressNotification({
       autoHideTimer.current = window.setTimeout(() => {
         setShowFileProgressWindow(false)
         autoHideTimer.current = null
-      }, 3000) as unknown as number
+      }, HIDER_TIMEOUT_MS) as unknown as number
     }
 
     return () => {

src/modules/filemanager/components/FileProgressWindow/FileProgressWindow.tsx

@@ -1,12 +1,13 @@
 import { ReactElement, useLayoutEffect, useRef } from 'react'
-import CloseIcon from 'remixicon-react/CloseLineIcon'
 import ArrowDownIcon from 'remixicon-react/ArrowDownSLineIcon'
-import './FileProgressWindow.scss'
+import CloseIcon from 'remixicon-react/CloseLineIcon'
+
+import { FileTransferType, ProgressItem, TransferBarColor, TransferStatus } from '../../constants/transfers'
+import { capitalizeFirstLetter, truncateNameMiddle } from '../../utils/common'
 import { GetIconElement } from '../../utils/GetIconElement'
 import { ProgressBar } from '../ProgressBar/ProgressBar'
-import { FileTransferType, TransferBarColor, TransferStatus, ProgressItem } from '../../constants/transfers'
-import { capitalizeFirstLetter, truncateNameMiddle } from '../../utils/common'
-import { guessMime } from '../../utils/view'
+
+import './FileProgressWindow.scss'
 
 interface FileProgressWindowProps {
   items?: ProgressItem[]
@@ -138,9 +139,6 @@ export function FileProgressWindow({
 
           const centerDisplay = getCenterText() || '\u00A0'
 
-          const { mime } = guessMime(item.name)
-          const mimeType = mime.split('/')[0].toLowerCase() || 'file'
-
           return (
             <div
               className="fm-file-progress-window-file-item"
@@ -148,7 +146,7 @@ export function FileProgressWindow({
               ref={idx === 0 ? firstRowRef : undefined}
             >
               <div className="fm-file-progress-window-file-type-icon">
-                <GetIconElement size="14" icon={mimeType} color="black" />
+                <GetIconElement size="14" name={item.name} color="black" />
               </div>
 
               <div className="fm-file-progress-window-file-datas">

src/modules/filemanager/components/FormbricksIntegration/FormbricksIntegration.tsx

@@ -1,10 +1,12 @@
-import { useEffect, useRef, useCallback } from 'react'
-import { useLocation } from 'react-router-dom'
 import formbricks from '@formbricks/js'
+import { useCallback, useEffect, useRef } from 'react'
+import { useLocation } from 'react-router-dom'
+
+import { LocalStorageKeys } from '../../../../utils/localStorage'
 
-const FM_CLICK_STORAGE_KEY = 'fm_click_count_v1'
-const FM_SURVEY_TRIGGERED_KEY = 'fm_survey_triggered_v1'
 const FM_CLICK_THRESHOLD = 25
+const FM_FORMBRICKS_TRACK_CODE = 'file_manager_engagement_25_clicks'
+const FORMBRICKS_INIT_TIMEOUT_MS = 1000
 
 interface FormbricksIntegrationProps {
   isActive: boolean
@@ -16,14 +18,14 @@ export function FormbricksIntegration({ isActive }: FormbricksIntegrationProps)
   const formbricksReadyRef = useRef(false)
   const pendingEventRef = useRef(false)
 
-  const environmentId = process.env.REACT_APP_FORMBRICKS_ENV_ID
-  const appUrl = process.env.REACT_APP_FORMBRICKS_APP_URL
+  const environmentId = import.meta.env.VITE_FORMBRICKS_ENV_ID
+  const appUrl = import.meta.env.VITE_FORMBRICKS_APP_URL
 
   const flushPendingEvent = useCallback(() => {
-    if (pendingEventRef.current && localStorage.getItem(FM_SURVEY_TRIGGERED_KEY) !== 'true') {
+    if (pendingEventRef.current && localStorage.getItem(LocalStorageKeys.fmSurveyTriggered) !== 'true') {
       try {
-        formbricks.track('file_manager_engagement_25_clicks')
-        localStorage.setItem(FM_SURVEY_TRIGGERED_KEY, 'true')
+        formbricks.track(FM_FORMBRICKS_TRACK_CODE)
+        localStorage.setItem(LocalStorageKeys.fmSurveyTriggered, 'true')
         pendingEventRef.current = false
       } catch {
         // no-op
@@ -45,7 +47,7 @@ export function FormbricksIntegration({ isActive }: FormbricksIntegrationProps)
           appUrl,
         })
 
-        await new Promise(resolve => setTimeout(resolve, 1000))
+        await new Promise(resolve => setTimeout(resolve, FORMBRICKS_INIT_TIMEOUT_MS))
 
         if (!cancelled) {
           formbricksReadyRef.current = true
@@ -79,11 +81,11 @@ export function FormbricksIntegration({ isActive }: FormbricksIntegrationProps)
     if (!isActive) return
 
     const handleClick = async () => {
-      if (localStorage.getItem(FM_SURVEY_TRIGGERED_KEY) === 'true') return
+      if (localStorage.getItem(LocalStorageKeys.fmSurveyTriggered) === 'true') return
 
       let count = 0
       try {
-        const stored = localStorage.getItem(FM_CLICK_STORAGE_KEY)
+        const stored = localStorage.getItem(LocalStorageKeys.fmClickStorage)
 
         if (stored) count = parseInt(stored, 10) || 0
       } catch {
@@ -92,7 +94,7 @@ export function FormbricksIntegration({ isActive }: FormbricksIntegrationProps)
 
       count += 1
       try {
-        localStorage.setItem(FM_CLICK_STORAGE_KEY, String(count))
+        localStorage.setItem(LocalStorageKeys.fmClickStorage, String(count))
       } catch {
         // no-op
       }
@@ -111,8 +113,8 @@ export function FormbricksIntegration({ isActive }: FormbricksIntegrationProps)
         }
 
         try {
-          await formbricks.track('file_manager_engagement_25_clicks')
-          localStorage.setItem(FM_SURVEY_TRIGGERED_KEY, 'true')
+          await formbricks.track(FM_FORMBRICKS_TRACK_CODE)
+          localStorage.setItem(LocalStorageKeys.fmSurveyTriggered, 'true')
         } catch {
           // no-op
         }

src/modules/filemanager/components/GetInfoModal/GetInfoModal.tsx

@@ -1,11 +1,12 @@
-import { ReactElement, useState, useEffect } from 'react'
-import './GetInfoModal.scss'
-import { Button } from '../Button/Button'
+import { ReactElement, useEffect, useRef, useState } from 'react'
 import { createPortal } from 'react-dom'
-import InfoIcon from 'remixicon-react/InformationLineIcon'
 import ClipboardIcon from 'remixicon-react/FileCopyLineIcon'
+import InfoIcon from 'remixicon-react/InformationLineIcon'
 
 import type { FileProperty, FilePropertyGroup } from '../../utils/infoGroups'
+import { Button } from '../Button/Button'
+
+import './GetInfoModal.scss'
 
 interface GetInfoModalProps {
   name: string
@@ -13,31 +14,35 @@ interface GetInfoModalProps {
   onCancelClick: () => void
 }
 
+const COPY_TIMEOUT_MS = 2000
+
 export function GetInfoModal({ name, onCancelClick, properties }: GetInfoModalProps): ReactElement {
   const modalRoot = document.querySelector('.fm-main') || document.body
   const [copiedKey, setCopiedKey] = useState<string | null>(null)
-  const timeoutRef = useState<{ [key: string]: NodeJS.Timeout }>({})[0]
+
+  const timeoutRef = useRef<Record<string, NodeJS.Timeout>>({})
 
   useEffect(() => {
     return () => {
-      Object.values(timeoutRef).forEach(timeout => clearTimeout(timeout))
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      Object.values(timeoutRef.current).forEach(clearTimeout)
     }
-  }, [timeoutRef])
+  }, [])
 
   const handleCopy = async (prop: FileProperty) => {
     try {
       await navigator.clipboard.writeText(prop.raw ?? prop.value)
 
-      if (timeoutRef[prop.key]) {
-        clearTimeout(timeoutRef[prop.key])
+      if (timeoutRef.current[prop.key]) {
+        clearTimeout(timeoutRef.current[prop.key])
       }
 
       setCopiedKey(prop.key)
 
-      timeoutRef[prop.key] = setTimeout(() => {
+      timeoutRef.current[prop.key] = setTimeout(() => {
         setCopiedKey(prev => (prev === prop.key ? null : prev))
-        delete timeoutRef[prop.key]
-      }, 2000)
+        delete timeoutRef.current[prop.key]
+      }, COPY_TIMEOUT_MS)
     } catch {
       /* noop */
     }

src/modules/filemanager/components/Header/Header.scss

@@ -1,3 +1,5 @@
+@use 'sass:color';
+
 $bg-900: #212121;
 $bg-800: #262626;
 $bg-700: #3e3e3e;
@@ -13,7 +15,7 @@ $accent: #ed8131;
   height: 60px;
   padding: 10px 16px;
   background: $bg-900;
-  border-bottom: 1px solid rgba(255,255,255,0.04);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
 }
 
 .fm-header-left {
@@ -22,51 +24,73 @@ $accent: #ed8131;
   gap: 12px;
 }
 .fm-header-logo {
-  width: 40px; height: 40px;
+  width: 40px;
+  height: 40px;
   border-radius: 6px;
   background: $accent;
   color: $text-100;
-  display: grid; place-items: center;
+  display: grid;
+  place-items: center;
   font-weight: 700;
-  svg { width: 18px; height: 18px; }
+  svg {
+    width: 18px;
+    height: 18px;
+  }
 }
 .fm-header-title {
   color: $text-100;
   font-weight: 600;
-  letter-spacing: .2px;
+  letter-spacing: 0.2px;
 }
 
 .fm-header-search {
   flex: 1 1 auto;
   max-width: 900px;
-  display: flex; align-items: center; gap: 8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
   background: $bg-700;
   border: 1px solid $border-400;
   color: $text-300;
-  height: 36px; padding: 0 10px;
+  height: 36px;
+  padding: 0 10px;
   border-radius: 8px;
 
   &:focus-within {
     border-color: $accent;
-    box-shadow: 0 0 0 2px rgba(237,129,49,0.25);
+    box-shadow: 0 0 0 2px rgba(237, 129, 49, 0.25);
   }
 
-  .fm-header-search-icon { flex: 0 0 auto; }
+  .fm-header-search-icon {
+    flex: 0 0 auto;
+  }
 
   input {
     flex: 1 1 auto;
-    background: transparent; border: none; outline: none;
+    background: transparent;
+    border: none;
+    outline: none;
     height: 100%;
-    color: $text-100; font-size: 14px;
+    color: $text-100;
+    font-size: 14px;
 
-    &::placeholder { color: $text-300; }
+    &::placeholder {
+      color: $text-300;
+    }
   }
 
   .fm-header-search-clear {
-    appearance: none; border: none; background: transparent;
-    color: $text-300; font-size: 18px; line-height: 1;
-    padding: 0 2px; cursor: pointer;
-    &:hover { color: $text-100; }
+    appearance: none;
+    border: none;
+    background: transparent;
+    color: $text-300;
+    font-size: 18px;
+    line-height: 1;
+    padding: 0 2px;
+    cursor: pointer;
+    &:hover {
+      color: $text-100;
+    }
   }
 }
 
@@ -76,7 +100,9 @@ $accent: #ed8131;
 }
 
 .fm-filter-btn {
-  display: inline-flex; align-items: center; gap: 6px;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
   padding: 6px 10px;
   border-radius: 8px;
   border: 1px solid $border-400;
@@ -85,59 +111,83 @@ $accent: #ed8131;
   font-size: 13px;
   cursor: pointer;
 
-  &:hover { background: mix($bg-800, #fff, 92%); }
-  &:focus-visible { outline: 2px solid rgba(237,129,49,0.4); outline-offset: 2px; }
+  &:hover {
+    background: color.mix($bg-800, #fff, 92%);
+  }
+  &:focus-visible {
+    outline: 2px solid rgba(237, 129, 49, 0.4);
+    outline-offset: 2px;
+  }
 
-  &[aria-expanded="true"] {
+  &[aria-expanded='true'] {
     border-color: $accent;
-    box-shadow: 0 0 0 2px rgba(237,129,49,0.25);
+    box-shadow: 0 0 0 2px rgba(237, 129, 49, 0.25);
   }
 }
 
 .fm-filter-menu {
   position: absolute;
-  right: 0; top: calc(100% + 6px);
+  right: 0;
+  top: calc(100% + 6px);
   min-width: 260px;
   background: $bg-800;
   border: 1px solid $border-400;
   border-radius: 10px;
-  box-shadow: 0 10px 24px rgba(0,0,0,0.25);
+  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
   padding: 10px;
   z-index: 2000;
   color: $text-100;
 }
 
-.fm-filter-group + .fm-filter-group { margin-top: 10px; }
+.fm-filter-group + .fm-filter-group {
+  margin-top: 10px;
+}
 
 .fm-filter-group-title {
   font-size: 12px;
   color: $text-300;
   margin-bottom: 6px;
   text-transform: uppercase;
-  letter-spacing: .04em;
+  letter-spacing: 0.04em;
 }
 
 .fm-filter-row {
-  display: flex; align-items: center; gap: 8px;
-  padding: 6px 4px; border-radius: 6px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 4px;
+  border-radius: 6px;
   cursor: default;
   color: $text-100;
 
-  input[type="checkbox"], input[type="radio"] {
-    width: 14px; height: 14px; margin: 0;
+  input[type='checkbox'],
+  input[type='radio'] {
+    width: 14px;
+    height: 14px;
+    margin: 0;
     accent-color: $accent;
   }
 
-  &:hover { background: rgba(255,255,255,0.05); }
+  &:hover {
+    background: rgba(255, 255, 255, 0.05);
+  }
 }
 
 .fm-filter-sep {
   height: 1px;
-  background: rgba(255,255,255,0.08);
+  background: rgba(255, 255, 255, 0.08);
   margin: 8px 0;
 }
 
-.fm-header-filters { display: none; }
-.fm-header-filters-label { display: none; }
-.fm-header-chip-group { display: none; }
-.fm-chip { display: none; }
+.fm-header-filters {
+  display: none;
+}
+.fm-header-filters-label {
+  display: none;
+}
+.fm-header-chip-group {
+  display: none;
+}
+.fm-chip {
+  display: none;
+}

src/modules/filemanager/components/Header/Header.tsx

@@ -1,11 +1,13 @@
-import { ReactElement, useMemo, useState, useEffect, useRef, useContext } from 'react'
-import SearchIcon from 'remixicon-react/SearchLineIcon'
+import { ReactElement, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import FileIcon from 'remixicon-react/File2LineIcon'
 import FilterIcon from 'remixicon-react/FilterLineIcon'
-import './Header.scss'
+import SearchIcon from 'remixicon-react/SearchLineIcon'
+
 import { useSearch } from '../../../../pages/filemanager/SearchContext'
 import { Context as FMContext } from '../../../../providers/FileManager'
 
+import './Header.scss'
+
 // Defaults used to determine “active filters”
 const DEFAULT_FILTERS = {
   scope: 'selected' as 'selected' | 'all',

src/modules/filemanager/components/InitialModal/InitialModal.tsx

@@ -1,22 +1,22 @@
+import { BeeModes, BZZ, DAI, Duration, PostageBatch, RedundancyLevel, Size, Utils } from '@ethersphere/bee-js'
+import { ADMIN_STAMP_LABEL } from '@solarpunkltd/file-manager-lib'
 import { ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 
-import { BeeModes, BZZ, DAI, Duration, PostageBatch, RedundancyLevel, Size, Utils } from '@ethersphere/bee-js'
-import './InitialModal.scss'
-import { CustomDropdown } from '../CustomDropdown/CustomDropdown'
-import { Button } from '../Button/Button'
-import { calculateStampCapacityMetrics, fmFetchCost, getUsableStamps, handleCreateDrive } from '../../utils/bee'
-import { getExpiryDateByLifetime, safeSetState } from '../../utils/common'
+import { Context as BeeContext } from '../../../../providers/Bee'
+import { Context as FMContext } from '../../../../providers/FileManager'
+import { Context as SettingsContext } from '../../../../providers/Settings'
 import { erasureCodeMarks } from '../../constants/common'
 import { desiredLifetimeOptions } from '../../constants/stamps'
-import { Context as SettingsContext } from '../../../../providers/Settings'
-import { Context as BeeContext } from '../../../../providers/Bee'
-
-import { FMSlider } from '../Slider/Slider'
-import { Context as FMContext } from '../../../../providers/FileManager'
-import { ADMIN_STAMP_LABEL } from '@solarpunkltd/file-manager-lib'
-import { ProgressBar } from '../ProgressBar/ProgressBar'
-import { Tooltip } from '../Tooltip/Tooltip'
 import { TOOLTIPS } from '../../constants/tooltips'
+import { calculateStampCapacityMetrics, fmFetchCost, getUsableStamps, handleCreateDrive } from '../../utils/bee'
+import { getExpiryDateByLifetime, safeSetState } from '../../utils/common'
+import { Button } from '../Button/Button'
+import { CustomDropdown } from '../CustomDropdown/CustomDropdown'
+import { ProgressBar } from '../ProgressBar/ProgressBar'
+import { FMSlider } from '../Slider/Slider'
+import { Tooltip } from '../Tooltip/Tooltip'
+
+import './InitialModal.scss'
 
 interface InitialModalProps {
   resetState: boolean

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

@@ -1,13 +1,15 @@
-import { ReactElement, useContext, useEffect, useState } from 'react'
-import './NotificationBar.scss'
-import UpIcon from 'remixicon-react/ArrowUpSLineIcon'
-import { ExpiringNotificationModal } from '../ExpiringNotificationModal/ExpiringNotificationModal'
-import { getUsableStamps } from '../../utils/bee'
-import { Context as SettingsContext } from '../../../../providers/Settings'
 import { PostageBatch } from '@ethersphere/bee-js'
-import { Context as FMContext } from '../../../../providers/FileManager'
 import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import UpIcon from 'remixicon-react/ArrowUpSLineIcon'
+
+import { Context as FMContext } from '../../../../providers/FileManager'
+import { Context as SettingsContext } from '../../../../providers/Settings'
 import { FILE_MANAGER_EVENTS } from '../../constants/common'
+import { getUsableStamps } from '../../utils/bee'
+import { ExpiringNotificationModal } from '../ExpiringNotificationModal/ExpiringNotificationModal'
+
+import './NotificationBar.scss'
 
 const NUMBER_OF_DAYS_WARNING = 7
 const DAYS_TO_MILLISECONDS_MULTIPLIER = 24 * 60 * 60 * 1000

src/modules/filemanager/components/PrivateKeyModal/PrivateKeyModal.tsx

@@ -1,26 +1,32 @@
-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 { ReactElement, useState } from 'react'
 import CheckDoubleLineIcon from 'remixicon-react/CheckDoubleLineIcon'
-import { Tooltip } from '../Tooltip/Tooltip'
+import ClipboardIcon from 'remixicon-react/FileCopyLineIcon'
+
 import { TOOLTIPS } from '../../constants/tooltips'
+import { getSigner, setSignerPk } from '../../utils/common'
+import { Button } from '../Button/Button'
+import { Tooltip } from '../Tooltip/Tooltip'
+
+import './PrivateKeyModal.scss'
+
+import { uuidV4 } from '@/utils'
 
 type Props = { onSaved: () => void }
 
+const generateNewPrivateKey = (): string => {
+  const id = uuidV4()
+  const signer = getSigner(id)
+
+  return signer.toHex()
+}
+
 export function PrivateKeyModal({ onSaved }: Props): ReactElement {
-  const [value, setValue] = useState('')
+  const [value, setValue] = useState(generateNewPrivateKey())
   const [confirmValue, setConfirmValue] = useState('')
   const [showError, setShowError] = useState(false)
   const [copied, setCopied] = useState(false)
 
-  useEffect(() => {
-    handleGenerateNew()
-  }, [])
-
   const handleCopyPrivateKey = async () => {
     try {
       await navigator.clipboard.writeText(value)
@@ -32,11 +38,7 @@ export function PrivateKeyModal({ onSaved }: Props): ReactElement {
   }
 
   const handleGenerateNew = () => {
-    const id = uuidV4()
-    const signer = getSigner(id)
-    const privKey = signer.toHex()
-
-    setValue(privKey)
+    setValue(generateNewPrivateKey())
     setConfirmValue('')
     setCopied(false)
     setShowError(false)

src/modules/filemanager/components/RenameFileModal/RenameFileModal.tsx

@@ -1,12 +1,13 @@
-import { ReactElement, useEffect, useMemo, useRef, useState } from 'react'
+import React, { ReactElement, useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import EditIcon from 'remixicon-react/EditLineIcon'
+
+import { safeSetState } from '../../utils/common'
+import { Button } from '../Button/Button'
+
 import '../../styles/global.scss'
 import './RenameFileModal.scss'
 
-import { Button } from '../Button/Button'
-import EditIcon from 'remixicon-react/EditLineIcon'
-import { createPortal } from 'react-dom'
-import { safeSetState } from '../../utils/common'
-
 const maxFileNameLength = 60
 
 interface RenameFileModalProps {

src/modules/filemanager/components/Sidebar/DriveItem/DriveItem.tsx

@@ -1,28 +1,30 @@
-import { ReactElement, useState, useContext, useEffect, useMemo, useCallback, useRef, memo } from 'react'
-import { createPortal } from 'react-dom'
-import Drive from 'remixicon-react/HardDrive2LineIcon'
-import DriveFill from 'remixicon-react/HardDrive2FillIcon'
-import MoreFill from 'remixicon-react/MoreFillIcon'
-import './DriveItem.scss'
-import { ProgressBar } from '../../ProgressBar/ProgressBar'
-import { ContextMenu } from '../../ContextMenu/ContextMenu'
-import { useContextMenu } from '../../../hooks/useContextMenu'
-import { Button } from '../../Button/Button'
-import { DestroyDriveModal, ProgressDestroyModal } from '../../DestroyDriveModal/DestroyDriveModal'
-import { UpgradeDriveModal } from '../../UpgradeDriveModal/UpgradeDriveModal'
-import { UpgradeTimeoutModal } from '../../UpgradeTimeoutModal/UpgradeTimeoutModal'
-import { ViewType } from '../../../constants/transfers'
-import { useView } from '../../../../../pages/filemanager/ViewContext'
-import { Context as FMContext } from '../../../../../providers/FileManager'
 import { PostageBatch } from '@ethersphere/bee-js'
 import { DriveInfo } from '@solarpunkltd/file-manager-lib'
-import { calculateStampCapacityMetrics, handleDestroyAndForgetDrive } from '../../../utils/bee'
+import React, { memo, ReactElement, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import DriveFill from 'remixicon-react/HardDrive2FillIcon'
+import Drive from 'remixicon-react/HardDrive2LineIcon'
+import MoreFill from 'remixicon-react/MoreFillIcon'
+
+import { useView } from '../../../../../pages/filemanager/ViewContext'
+import { Context as FMContext } from '../../../../../providers/FileManager'
 import { Context as SettingsContext } from '../../../../../providers/Settings'
-import { truncateNameMiddle } from '../../../utils/common'
-import { Tooltip } from '../../Tooltip/Tooltip'
-import { TOOLTIPS } from '../../../constants/tooltips'
 import { FILE_MANAGER_EVENTS, UPLOAD_POLLING_TIMEOUT_MS } from '../../../constants/common'
+import { TOOLTIPS } from '../../../constants/tooltips'
+import { ViewType } from '../../../constants/transfers'
+import { useContextMenu } from '../../../hooks/useContextMenu'
 import { useStampPolling } from '../../../hooks/useStampPolling'
+import { calculateStampCapacityMetrics, handleDestroyAndForgetDrive } from '../../../utils/bee'
+import { truncateNameMiddle } from '../../../utils/common'
+import { Button } from '../../Button/Button'
+import { ContextMenu } from '../../ContextMenu/ContextMenu'
+import { DestroyDriveModal, ProgressDestroyModal } from '../../DestroyDriveModal/DestroyDriveModal'
+import { ProgressBar } from '../../ProgressBar/ProgressBar'
+import { Tooltip } from '../../Tooltip/Tooltip'
+import { UpgradeDriveModal } from '../../UpgradeDriveModal/UpgradeDriveModal'
+import { UpgradeTimeoutModal } from '../../UpgradeTimeoutModal/UpgradeTimeoutModal'
+
+import './DriveItem.scss'
 
 function useDriveEventListeners(
   driveId: string,

src/modules/filemanager/components/Sidebar/DriveItem/ExpiredDriveItem.tsx

@@ -1,16 +1,18 @@
-import { ReactElement, useState, useContext } from 'react'
-import { createPortal } from 'react-dom'
-import Drive from 'remixicon-react/HardDrive2LineIcon'
-import DriveFill from 'remixicon-react/HardDrive2FillIcon'
-import MoreFill from 'remixicon-react/MoreFillIcon'
-import { ContextMenu } from '../../ContextMenu/ContextMenu'
-import { useContextMenu } from '../../../hooks/useContextMenu'
 import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import React, { ReactElement, useContext, useState } from 'react'
+import { createPortal } from 'react-dom'
+import DriveFill from 'remixicon-react/HardDrive2FillIcon'
+import Drive from 'remixicon-react/HardDrive2LineIcon'
+import MoreFill from 'remixicon-react/MoreFillIcon'
+
 import { Context as FMContext } from '../../../../../providers/FileManager'
+import { useContextMenu } from '../../../hooks/useContextMenu'
 import { handleDestroyAndForgetDrive } from '../../../utils/bee'
-import { ConfirmModal } from '../../ConfirmModal/ConfirmModal'
-import './DriveItem.scss'
 import { truncateNameMiddle } from '../../../utils/common'
+import { ConfirmModal } from '../../ConfirmModal/ConfirmModal'
+import { ContextMenu } from '../../ContextMenu/ContextMenu'
+
+import './DriveItem.scss'
 
 interface Props {
   drive: DriveInfo

src/modules/filemanager/components/Sidebar/Sidebar.tsx

@@ -1,27 +1,29 @@
-import { ReactElement, useContext, useEffect, useState } from 'react'
-
-import './Sidebar.scss'
-import Add from 'remixicon-react/AddLineIcon'
-import Folder from 'remixicon-react/Folder3LineIcon'
-import FolderFill from 'remixicon-react/Folder3FillIcon'
-import ArrowRight from 'remixicon-react/ArrowRightSLineIcon'
-import ArrowDown from 'remixicon-react/ArrowDownSLineIcon'
-import Delete from 'remixicon-react/DeleteBin6LineIcon'
-import DeleteFill from 'remixicon-react/DeleteBin6FillIcon'
-import History from 'remixicon-react/HistoryLineIcon'
-import HistoryFill from 'remixicon-react/HistoryFillIcon'
-import { DriveItem } from './DriveItem/DriveItem'
-import { ExpiredDriveItem } from './DriveItem/ExpiredDriveItem'
-import { CreateDriveModal } from '../CreateDriveModal/CreateDriveModal'
-import { ViewType } from '../../constants/transfers'
 import { PostageBatch } from '@ethersphere/bee-js'
-import { Context as SettingsContext } from '../../../../providers/Settings'
+import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import { ReactElement, useContext, useEffect, useState } from 'react'
+import Add from 'remixicon-react/AddLineIcon'
+import ArrowDown from 'remixicon-react/ArrowDownSLineIcon'
+import ArrowRight from 'remixicon-react/ArrowRightSLineIcon'
+import DeleteFill from 'remixicon-react/DeleteBin6FillIcon'
+import Delete from 'remixicon-react/DeleteBin6LineIcon'
+import FolderFill from 'remixicon-react/Folder3FillIcon'
+import Folder from 'remixicon-react/Folder3LineIcon'
+import HistoryFill from 'remixicon-react/HistoryFillIcon'
+import History from 'remixicon-react/HistoryLineIcon'
+
 import { useView } from '../../../../pages/filemanager/ViewContext'
 import { Context as FMContext } from '../../../../providers/FileManager'
-import { getUsableStamps } from '../../utils/bee'
-import { DriveInfo } from '@solarpunkltd/file-manager-lib'
-import { truncateNameMiddle } from '../../utils/common'
+import { Context as SettingsContext } from '../../../../providers/Settings'
 import { FILE_MANAGER_EVENTS } from '../../constants/common'
+import { ViewType } from '../../constants/transfers'
+import { getUsableStamps } from '../../utils/bee'
+import { truncateNameMiddle } from '../../utils/common'
+import { CreateDriveModal } from '../CreateDriveModal/CreateDriveModal'
+
+import { DriveItem } from './DriveItem/DriveItem'
+import { ExpiredDriveItem } from './DriveItem/ExpiredDriveItem'
+
+import './Sidebar.scss'
 
 interface SidebarProps {
   loading: boolean

src/modules/filemanager/components/Slider/Slider.tsx

@@ -1,9 +1,10 @@
+import Slider from '@mui/material/Slider'
 import { ReactElement, useState } from 'react'
-import './Slider.scss'
-import Slider from '@material-ui/core/Slider'
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles } from 'tss-react/mui'
 
-const useStyles = makeStyles({
+import './Slider.scss'
+
+const useStyles = makeStyles()({
   root: {
     width: '98%',
     marginLeft: '-3px',
@@ -50,7 +51,7 @@ export function FMSlider({
   step,
 }: FMSliderProps): ReactElement {
   const [value, setValue] = useState(defaultValue || 0)
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   return (
     <>

src/modules/filemanager/components/Tooltip/Tooltip.tsx

@@ -1,5 +1,6 @@
-import { ReactElement, useState, useRef, useCallback } from 'react'
+import React, { ReactElement, useCallback, useRef, useState } from 'react'
 import InfoIcon from 'remixicon-react/InformationLineIcon'
+
 import './Tooltip.scss'
 
 interface TooltipProps {
@@ -82,7 +83,7 @@ export function Tooltip({
               }
             : undefined
         }
-        // eslint-disable-next-line react/no-danger
+        // Safe: label is always from static TOOLTIPS constant or hardcoded strings, never user input
         dangerouslySetInnerHTML={{ __html: label }}
       />
     </span>

src/modules/filemanager/components/UpgradeDriveModal/UpgradeDriveModal.tsx

@@ -1,13 +1,3 @@
-import { ReactElement, useCallback, useContext, useEffect, useRef, useState } from 'react'
-import './UpgradeDriveModal.scss'
-import '../../styles/global.scss'
-import { Warning } from '@material-ui/icons'
-import { createPortal } from 'react-dom'
-import DriveIcon from 'remixicon-react/HardDrive2LineIcon'
-import DatabaseIcon from 'remixicon-react/Database2LineIcon'
-import WalletIcon from 'remixicon-react/Wallet3LineIcon'
-import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
-import CalendarIcon from 'remixicon-react/CalendarLineIcon'
 import {
   BatchId,
   BeeRequestOptions,
@@ -19,18 +9,29 @@ import {
   Size,
   Utils,
 } from '@ethersphere/bee-js'
+import { Warning } from '@mui/icons-material'
 import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import { ReactElement, useCallback, useContext, useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import CalendarIcon from 'remixicon-react/CalendarLineIcon'
+import DatabaseIcon from 'remixicon-react/Database2LineIcon'
+import ExternalLinkIcon from 'remixicon-react/ExternalLinkLineIcon'
+import DriveIcon from 'remixicon-react/HardDrive2LineIcon'
+import WalletIcon from 'remixicon-react/Wallet3LineIcon'
 
-import { CustomDropdown } from '../CustomDropdown/CustomDropdown'
-import { Button } from '../Button/Button'
-import { desiredLifetimeOptions } from '../../constants/stamps'
 import { Context as BeeContext } from '../../../../providers/Bee'
-import { fromBytesConversion, getExpiryDateByLifetime, truncateNameMiddle } from '../../utils/common'
-import { Context as SettingsContext } from '../../../../providers/Settings'
 import { Context as FMContext } from '../../../../providers/FileManager'
+import { Context as SettingsContext } from '../../../../providers/Settings'
 import { getHumanReadableFileSize } from '../../../../utils/file'
-import { useStampPolling } from '../../hooks/useStampPolling'
 import { FILE_MANAGER_EVENTS, POLLING_TIMEOUT_MS } from '../../constants/common'
+import { desiredLifetimeOptions } from '../../constants/stamps'
+import { useStampPolling } from '../../hooks/useStampPolling'
+import { fromBytesConversion, getExpiryDateByLifetime, truncateNameMiddle } from '../../utils/common'
+import { Button } from '../Button/Button'
+import { CustomDropdown } from '../CustomDropdown/CustomDropdown'
+
+import './UpgradeDriveModal.scss'
+import '../../styles/global.scss'
 
 interface UpgradeDriveModalProps {
   stamp: PostageBatch
@@ -117,7 +118,7 @@ export function UpgradeDriveModal({
 
       try {
         cost = await beeApi?.getExtensionCost(batchId, capacity, duration, options, encryption, erasureCodeLevel)
-      } catch (e) {
+      } catch {
         setErrorMessage?.('Failed to calculate extension cost')
         setShowError(true)
 
@@ -281,7 +282,7 @@ export function UpgradeDriveModal({
                   icon={<CalendarIcon size="14px" color="rgb(237, 129, 49)" />}
                   options={desiredLifetimeOptions}
                   value={lifetimeIndex}
-                  onChange={(value, index) => {
+                  onChange={(value, _) => {
                     setLifetimeIndex(value)
                   }}
                 />

src/modules/filemanager/components/UpgradeTimeoutModal/UpgradeTimeoutModal.tsx

@@ -1,6 +1,8 @@
 import { ReactElement } from 'react'
 import { createPortal } from 'react-dom'
+
 import { Button } from '../Button/Button'
+
 import '../../styles/global.scss'
 import './UpgradeTimeoutModal.scss'
 

src/modules/filemanager/components/UploadConflictModal/UploadConflictModal.tsx

@@ -1,8 +1,10 @@
 import { ReactElement, useMemo, useState } from 'react'
+import WarningIcon from 'remixicon-react/ErrorWarningLineIcon'
+
+import { Button } from '../Button/Button'
+
 import './UploadConflictModal.scss'
 import '../../styles/global.scss'
-import { Button } from '../Button/Button'
-import WarningIcon from 'remixicon-react/ErrorWarningLineIcon'
 
 interface Props {
   filename: string

src/modules/filemanager/components/VersionHistoryModal/VersionHistoryModal.tsx

@@ -1,24 +1,24 @@
-import { ReactElement, useEffect, useMemo, useState, useCallback, useContext } from 'react'
-import './VersionHistoryModal.scss'
-import '../../styles/global.scss'
-
-import { Button } from '../Button/Button'
+import { FeedIndex } from '@ethersphere/bee-js'
+import { FileInfo } from '@solarpunkltd/file-manager-lib'
+import { ReactElement, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 import { createPortal } from 'react-dom'
 import HistoryIcon from 'remixicon-react/HistoryLineIcon'
 
 import { Context as FMContext } from '../../../../providers/FileManager'
-import { FileInfo } from '@solarpunkltd/file-manager-lib'
-import { FeedIndex } from '@ethersphere/bee-js'
-import { ConflictAction, useUploadConflictDialog } from '../../hooks/useUploadConflictDialog'
-import { ConfirmModal } from '../ConfirmModal/ConfirmModal'
-import { Tooltip } from '../Tooltip/Tooltip'
 import { TOOLTIPS } from '../../constants/tooltips'
-
-import { verifyDriveSpace } from '../../utils/bee'
-import { indexStrToBigint, truncateNameMiddle } from '../../utils/common'
-import { VersionsList } from './VersionList/VersionList'
 import { ActionTag, DownloadProgress, TrackDownloadProps } from '../../constants/transfers'
 import { useTransfers } from '../../hooks/useTransfers'
+import { ConflictAction, useUploadConflictDialog } from '../../hooks/useUploadConflictDialog'
+import { verifyDriveSpace } from '../../utils/bee'
+import { indexStrToBigint, truncateNameMiddle } from '../../utils/common'
+import { Button } from '../Button/Button'
+import { ConfirmModal } from '../ConfirmModal/ConfirmModal'
+import { Tooltip } from '../Tooltip/Tooltip'
+
+import { VersionsList } from './VersionList/VersionList'
+
+import './VersionHistoryModal.scss'
+import '../../styles/global.scss'
 
 const VERSION_HISTORY_PAGE_SIZE = 5
 

src/modules/filemanager/components/VersionHistoryModal/VersionList/VersionList.tsx

@@ -1,24 +1,23 @@
-import './VersionList.scss'
-import '../../../styles/global.scss'
-import { memo, useState, useCallback, useContext } from 'react'
-
-import { Button } from '../../Button/Button'
-import CalendarIcon from 'remixicon-react/CalendarLineIcon'
-import UserIcon from 'remixicon-react/UserLineIcon'
-import DownloadIcon from 'remixicon-react/Download2LineIcon'
-
 import { FileInfo } from '@solarpunkltd/file-manager-lib'
+import { memo, useCallback, useContext, useState } from 'react'
+import CalendarIcon from 'remixicon-react/CalendarLineIcon'
+import DownloadIcon from 'remixicon-react/Download2LineIcon'
+import UserIcon from 'remixicon-react/UserLineIcon'
 
 import { Context as FMContext } from '../../../../../providers/FileManager'
+import { Context as SettingsContext } from '../../../../../providers/Settings'
+import { uuidV4 } from '../../../../../utils'
+import { TOOLTIPS } from '../../../constants/tooltips'
+import { ActionTag, DownloadProgress, TrackDownloadProps } from '../../../constants/transfers'
+import { useContextMenu } from '../../../hooks/useContextMenu'
 import { capitalizeFirstLetter, formatBytes, indexStrToBigint, truncateNameMiddle } from '../../../utils/common'
 import { startDownloadingQueue } from '../../../utils/download'
-import { ActionTag, DownloadProgress, TrackDownloadProps } from '../../../constants/transfers'
-import { Context as SettingsContext } from '../../../../../providers/Settings'
-import { useContextMenu } from '../../../hooks/useContextMenu'
-import { uuidV4 } from '../../../../../utils'
+import { Button } from '../../Button/Button'
 import { ConfirmModal } from '../../ConfirmModal/ConfirmModal'
 import { Tooltip } from '../../Tooltip/Tooltip'
-import { TOOLTIPS } from '../../../constants/tooltips'
+
+import './VersionList.scss'
+import '../../../styles/global.scss'
 
 interface VersionListProps {
   versions: FileInfo[]

src/modules/filemanager/constants/common.ts

@@ -1,4 +1,5 @@
 import { FeedIndex, RedundancyLevel } from '@ethersphere/bee-js'
+
 import { capitalizeFirstLetter } from '../utils/common'
 
 export const FEED_INDEX_ZERO = FeedIndex.fromBigInt(BigInt(0))
@@ -17,7 +18,7 @@ export const FILE_MANAGER_EVENTS = {
   DRIVE_UPGRADE_TIMEOUT: 'fm:drive-upgrade-timeout',
 } as const
 
-export type FileManagerEventName = typeof FILE_MANAGER_EVENTS[keyof typeof FILE_MANAGER_EVENTS]
+export type FileManagerEventName = (typeof FILE_MANAGER_EVENTS)[keyof typeof FILE_MANAGER_EVENTS]
 
 export const POLLING_TIMEOUT_MS = 90000
 export const UPLOAD_POLLING_TIMEOUT_MS = 10000

src/modules/filemanager/constants/tooltips.ts

@@ -55,8 +55,6 @@ This action will do two things:
 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')}
 Set a human-readable label for this drive (e.g. Personal files). This name is stored as metadata.`,
 

src/modules/filemanager/hooks/useBulkActions.ts

@@ -1,14 +1,15 @@
-import { useCallback, useMemo, useRef, useState, useContext, useEffect } from 'react'
-import type { FileInfo } from '@solarpunkltd/file-manager-lib'
 import { PostageBatch } from '@ethersphere/bee-js'
+import type { FileInfo } from '@solarpunkltd/file-manager-lib'
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
+
 import { Context as FMContext } from '../../../providers/FileManager'
 import { Context as SettingsContext } from '../../../providers/Settings'
-import { startDownloadingQueue } from '../utils/download'
-import { formatBytes, getFileId, safeSetState } from '../utils/common'
+import { uuidV4 } from '../../../utils'
 import { DownloadProgress, TrackDownloadProps } from '../constants/transfers'
 import { getUsableStamps } from '../utils/bee'
-import { performBulkFileOperation, FileOperation } from '../utils/fileOperations'
-import { uuidV4 } from '../../../utils'
+import { formatBytes, getFileId, safeSetState } from '../utils/common'
+import { startDownloadingQueue } from '../utils/download'
+import { FileOperation, performBulkFileOperation } from '../utils/fileOperations'
 
 interface BulkOptions {
   listToRender: FileInfo[]

src/modules/filemanager/hooks/useClickOutside.tsx

@@ -1,11 +1,15 @@
-import { useEffect } from 'react'
+import React, { useEffect } from 'react'
 
-export function useClickOutside<T extends Element>(ref: React.RefObject<T>, onClickOutside: () => void, active = true) {
+export function useClickOutside<T extends HTMLDivElement>(
+  ref: React.RefObject<T | null>,
+  onClickOutside: () => void,
+  active = true,
+) {
   useEffect(() => {
     if (!active) return
 
     function handleDocumentClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
+      if (ref?.current && !ref.current.contains(e.target as Node)) {
         onClickOutside()
       }
     }

src/modules/filemanager/hooks/useContextMenu.tsx

@@ -1,11 +1,13 @@
-import { useState, useRef } from 'react'
-import { useClickOutside } from './useClickOutside'
+import React, { useRef, useState } from 'react'
+
 import { Point } from '../utils/common'
 
+import { useClickOutside } from './useClickOutside'
+
 export function useContextMenu<T extends Element = HTMLDivElement>() {
   const [showContext, setShowContext] = useState(false)
   const [pos, setPos] = useState<Point>({ x: 0, y: 0 })
-  const contextRef = useRef<T | null>(null)
+  const contextRef = useRef<HTMLDivElement | null>(null)
 
   function handleContextMenu(e: React.MouseEvent<T> | MouseEvent) {
     e.preventDefault()

src/modules/filemanager/hooks/useDragAndDrop.ts

@@ -1,5 +1,5 @@
-import { useCallback, useRef, useState } from 'react'
 import { DriveInfo } from '@solarpunkltd/file-manager-lib'
+import React, { useCallback, useRef, useState } from 'react'
 
 interface UseDragAndDropProps {
   onFilesDropped: (files: FileList) => void