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/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>
   )
 }