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/AccountNavigation.tsx

@@ -1,7 +1,9 @@
-import { createStyles, makeStyles, Tab, Tabs, Theme } from '@material-ui/core'
 import { BeeModes } from '@ethersphere/bee-js'
-import { ReactElement, useContext } from 'react'
+import { Tab, Tabs } from '@mui/material'
+import React, { ReactElement, useContext } from 'react'
 import { useNavigate } from 'react-router-dom'
+import { makeStyles } from 'tss-react/mui'
+
 import { Context } from '../../providers/Bee'
 import { ACCOUNT_TABS } from '../../routes'
 
@@ -17,28 +19,26 @@ interface Props {
   active: 'WALLET' | 'CHEQUEBOOK' | 'STAMPS' | 'FEEDS' | 'STAKING'
 }
 
-const useStyles = makeStyles((theme: Theme) =>
-  createStyles({
-    root: {
-      flexGrow: 1,
-      marginBottom: theme.spacing(4),
-      textTransform: 'none',
-      marginLeft: theme.spacing(-0.25),
-      marginRight: theme.spacing(-0.25),
-    },
-    tab: {
-      marginLeft: theme.spacing(0.25),
-      marginRight: theme.spacing(0.25),
-    },
-  }),
-)
+const useStyles = makeStyles()(theme => ({
+  root: {
+    flexGrow: 1,
+    marginBottom: theme.spacing(4),
+    textTransform: 'none',
+    marginLeft: theme.spacing(-0.25),
+    marginRight: theme.spacing(-0.25),
+  },
+  tab: {
+    marginLeft: theme.spacing(0.25),
+    marginRight: theme.spacing(0.25),
+  },
+}))
 
 export function AccountNavigation({ active }: Props): ReactElement {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const navigate = useNavigate()
   const { nodeInfo } = useContext(Context)
 
-  function onChange(event: React.ChangeEvent<Record<string, never>>, newValue: number) {
+  function onChange(_event: React.SyntheticEvent, newValue: number) {
     navigate(ACCOUNT_TABS[newValue])
   }
 

src/pages/account/Header.tsx

@@ -1,4 +1,4 @@
-import { Box, Typography } from '@material-ui/core'
+import { Box, Typography } from '@mui/material'
 import { ReactElement } from 'react'
 
 export function Header(): ReactElement {

src/pages/account/chequebook/AccountChequebook.tsx

@@ -1,5 +1,6 @@
-import { Box } from '@material-ui/core'
+import { Box } from '@mui/material'
 import { ReactElement, useContext } from 'react'
+
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
@@ -8,7 +9,7 @@ import TroubleshootConnectionCard from '../../../components/TroubleshootConnecti
 import DepositModal from '../../../containers/DepositModal'
 import WithdrawModal from '../../../containers/WithdrawModal'
 import { useAccounting } from '../../../hooks/accounting'
-import { Context as BeeContext, CheckState } from '../../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
 import { Context as SettingsContext } from '../../../providers/Settings'
 import PeerBalances from '../../accounting/PeerBalances'
 import { AccountNavigation } from '../AccountNavigation'

src/pages/account/feeds/AccountFeeds.tsx

@@ -1,19 +1,20 @@
-import { Box } from '@material-ui/core'
 import { NULL_TOPIC } from '@ethersphere/bee-js'
+import { Box } from '@mui/material'
 import { ReactElement, useContext, useState } from 'react'
 import { useNavigate } from 'react-router'
 import PlusSquare from 'remixicon-react/AddBoxLineIcon'
 import Trash from 'remixicon-react/DeleteBin7LineIcon'
 import Download from 'remixicon-react/Download2LineIcon'
 import Info from 'remixicon-react/InformationLineIcon'
+
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
-import { Context as BeeContext, CheckState } from '../../../providers/Bee'
-import { Identity, Context as IdentityContext } from '../../../providers/Feeds'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
+import { Context as IdentityContext, Identity } from '../../../providers/Feeds'
 import { ROUTES } from '../../../routes'
 import { formatEnum } from '../../../utils'
 import { persistIdentitiesWithoutUpdate } from '../../../utils/identity'

src/pages/account/staking/AccountStaking.tsx

@@ -1,11 +1,12 @@
 import { ReactElement, useContext, useState } from 'react'
+
 import ExpandableList from '../../../components/ExpandableList'
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
 import { Loading } from '../../../components/Loading'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
 import StakeModal from '../../../containers/StakeModal'
-import { Context as BeeContext, CheckState } from '../../../providers/Bee'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
 

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()
 

src/pages/account/wallet/AccountWallet.tsx

@@ -1,21 +1,22 @@
-import { Box, Grid, Typography } from '@material-ui/core'
 import { BeeModes } from '@ethersphere/bee-js'
+import { Box, Grid, Typography } from '@mui/material'
 import { ReactElement, useContext } from 'react'
 import { useNavigate } from 'react-router'
 import Download from 'remixicon-react/DownloadLineIcon'
 import Gift from 'remixicon-react/GiftLineIcon'
 import Link from 'remixicon-react/LinkIcon'
+
 import ExpandableListItem from '../../../components/ExpandableListItem'
 import ExpandableListItemActions from '../../../components/ExpandableListItemActions'
 import ExpandableListItemKey from '../../../components/ExpandableListItemKey'
 import { SwarmButton } from '../../../components/SwarmButton'
 import TroubleshootConnectionCard from '../../../components/TroubleshootConnectionCard'
-import { Context as BeeContext, CheckState } from '../../../providers/Bee'
+import { WalletInfoCard } from '../../../pages/info/WalletInfoCard'
+import { CheckState, Context as BeeContext } from '../../../providers/Bee'
 import { Context as SettingsContext } from '../../../providers/Settings'
 import { ROUTES } from '../../../routes'
 import { AccountNavigation } from '../AccountNavigation'
 import { Header } from '../Header'
-import { WalletInfoCard } from '../../../pages/info/WalletInfoCard'
 
 export function AccountWallet(): ReactElement {
   const { nodeAddresses, nodeInfo, status, walletBalance } = useContext(BeeContext)