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/pages/account/stamps/AccountStamps.tsx

@@ -1,36 +1,36 @@
-import { CircularProgress, Container, createStyles, makeStyles } from '@material-ui/core'
+import { CircularProgress, Container } from '@mui/material'
 import { ReactElement, useContext, useEffect } from 'react'
 import { useNavigate } from 'react-router'
 import PlusSquare from 'remixicon-react/AddBoxLineIcon'
+import { makeStyles } from 'tss-react/mui'
+
 import { ChainSync } from '../../../components/ChainSync'
 import { Loading } from '../../../components/Loading'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
-import { Context as BeeContext, CheckState } from '../../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
 import { Context as StampsContext } from '../../../providers/Stamps'
 import { ROUTES } from '../../../routes'
 import StampsTable from '../../stamps/StampsTable'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
 
-const useStyles = makeStyles(() =>
-  createStyles({
-    root: {
-      width: '100%',
-      display: 'grid',
-    },
-    actions: {
-      display: 'flex',
-      width: '100%',
-      flex: '0 1 auto',
-      flexWrap: 'wrap',
-      alignItems: 'center',
-    },
-  }),
-)
+const useStyles = makeStyles()(() => ({
+  root: {
+    width: '100%',
+    display: 'grid',
+  },
+  actions: {
+    display: 'flex',
+    width: '100%',
+    flex: '0 1 auto',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+  },
+}))
 
 export function AccountStamps(): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   const navigate = useNavigate()