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