Feat: copy addresses on click

safe-global · Nov 21, 2023 · 9e05eed · 9e05eed
1 parent 09a88f6
commit 9e05eed
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 52 deletions.
diff --git a/src/components/common/CopyAddressButton/index.tsx b/src/components/common/CopyAddressButton/index.tsx
@@ -1,19 +1,20 @@
-import { type ReactElement } from 'react'
-
+import type { ReactNode, ReactElement } from 'react'
 import CopyButton from '../CopyButton'
 
 const CopyAddressButton = ({
   prefix,
   address,
   copyPrefix,
+  children,
 }: {
   prefix?: string
   address: string
   copyPrefix?: boolean
+  children?: ReactNode
 }): ReactElement => {
   const addressText = copyPrefix && prefix ? `${prefix}:${address}` : address
 
-  return <CopyButton text={addressText} />
+  return <CopyButton text={addressText}>{children}</CopyButton>
 }
 
 export default CopyAddressButton
diff --git a/src/components/common/CopyButton/index.tsx b/src/components/common/CopyButton/index.tsx
@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react'
-import React, { type ReactElement, type SyntheticEvent, useCallback, useState } from 'react'
+import React, { type ReactElement } from 'react'
 import CopyIcon from '@/public/images/common/copy.svg'
-import { IconButton, SvgIcon, Tooltip } from '@mui/material'
+import { IconButton, SvgIcon } from '@mui/material'
+import CopyTooltip from '../CopyTooltip'
 
 const CopyButton = ({
   text,
@@ -17,44 +18,14 @@ const CopyButton = ({
   ariaLabel?: string
   onCopy?: () => void
 }): ReactElement => {
-  const [tooltipText, setTooltipText] = useState(initialToolTipText)
-  const [isCopyEnabled, setIsCopyEnabled] = useState(true)
-
-  const handleCopy = useCallback(
-    (e: SyntheticEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      try {
-        navigator.clipboard.writeText(text).then(() => setTooltipText('Copied'))
-        onCopy?.()
-      } catch (err) {
-        setIsCopyEnabled(false)
-        setTooltipText('Copying is disabled in your browser')
-      }
-    },
-    [text, onCopy],
-  )
-
-  const handleMouseLeave = useCallback(() => {
-    setTimeout(() => {
-      if (isCopyEnabled) {
-        setTooltipText(initialToolTipText)
-      }
-    }, 500)
-  }, [initialToolTipText, isCopyEnabled])
-
   return (
-    <Tooltip title={tooltipText} placement="top" onMouseLeave={handleMouseLeave}>
-      <IconButton
-        aria-label={initialToolTipText}
-        onClick={handleCopy}
-        size="small"
-        className={className}
-        disabled={!isCopyEnabled}
-      >
-        {children ?? <SvgIcon component={CopyIcon} inheritViewBox color="border" fontSize="small" />}
-      </IconButton>
-    </Tooltip>
+    <CopyTooltip text={text} onCopy={onCopy} initialToolTipText={initialToolTipText}>
+      {children ?? (
+        <IconButton aria-label={initialToolTipText} size="small" className={className}>
+          <SvgIcon component={CopyIcon} inheritViewBox color="border" fontSize="small" />
+        </IconButton>
+      )}
+    </CopyTooltip>
   )
 }
 

diff --git a/src/components/common/CopyTooltip/index.tsx b/src/components/common/CopyTooltip/index.tsx
@@ -0,0 +1,53 @@
+import type { ReactNode } from 'react'
+import React, { type ReactElement, type SyntheticEvent, useCallback, useState } from 'react'
+import { Tooltip } from '@mui/material'
+
+const cursorPointer = { cursor: 'pointer' }
+
+const CopyTooltip = ({
+  text,
+  children,
+  initialToolTipText = 'Copy to clipboard',
+  onCopy,
+}: {
+  text: string
+  children?: ReactNode
+  initialToolTipText?: string
+  onCopy?: () => void
+}): ReactElement => {
+  const [tooltipText, setTooltipText] = useState(initialToolTipText)
+  const [isCopyEnabled, setIsCopyEnabled] = useState(true)
+
+  const handleCopy = useCallback(
+    (e: SyntheticEvent) => {
+      e.preventDefault()
+      e.stopPropagation()
+      try {
+        navigator.clipboard.writeText(text).then(() => setTooltipText('Copied'))
+        onCopy?.()
+      } catch (err) {
+        setIsCopyEnabled(false)
+        setTooltipText('Copying is disabled in your browser')
+      }
+    },
+    [text, onCopy],
+  )
+
+  const handleMouseLeave = useCallback(() => {
+    setTimeout(() => {
+      if (isCopyEnabled) {
+        setTooltipText(initialToolTipText)
+      }
+    }, 500)
+  }, [initialToolTipText, isCopyEnabled])
+
+  return (
+    <Tooltip title={tooltipText} placement="top" onMouseLeave={handleMouseLeave}>
+      <span onClick={handleCopy} style={cursorPointer}>
+        {children}
+      </span>
+    </Tooltip>
+  )
+}
+
+export default CopyTooltip
diff --git a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
@@ -50,8 +50,8 @@ const SrcEthHashInfo = ({
   const shouldPrefix = isAddress(address)
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-
   const identicon = <Identicon address={address} size={avatarSize} />
+  const shouldCopyPrefix = shouldPrefix && copyPrefix
 
   return (
     <div className={css.container}>
@@ -78,13 +78,13 @@ const SrcEthHashInfo = ({
 
         <div className={css.addressContainer}>
           <Box fontWeight="inherit" fontSize="inherit">
-            {showPrefix && shouldPrefix && prefix && <b>{prefix}:</b>}
-            <span>{shortAddress || isMobile ? shortenAddress(address) : address}</span>
+            <CopyAddressButton prefix={prefix} address={address} copyPrefix={shouldCopyPrefix}>
+              {showPrefix && shouldPrefix && prefix && <b>{prefix}:</b>}
+              <span>{shortAddress || isMobile ? shortenAddress(address) : address}</span>
+            </CopyAddressButton>
           </Box>
 
-          {showCopyButton && (
-            <CopyAddressButton prefix={prefix} address={address} copyPrefix={shouldPrefix && copyPrefix} />
-          )}
+          {showCopyButton && <CopyAddressButton prefix={prefix} address={address} copyPrefix={shouldCopyPrefix} />}
 
           {hasExplorer && ExplorerButtonProps && (
             <Box color="border.main">

diff --git a/src/components/sidebar/SidebarHeader/index.tsx b/src/components/sidebar/SidebarHeader/index.tsx
@@ -20,7 +20,6 @@ import { selectSettings } from '@/store/settingsSlice'
 import { useCurrentChain } from '@/hooks/useChains'
 import { getBlockExplorerLink } from '@/utils/chains'
 import EthHashInfo from '@/components/common/EthHashInfo'
-import CopyButton from '@/components/common/CopyButton'
 import QrCodeButton from '../QrCodeButton'
 import Track from '@/components/common/Track'
 import { OVERVIEW_EVENTS } from '@/services/analytics/events/overview'
@@ -29,6 +28,7 @@ import { useVisibleBalances } from '@/hooks/useVisibleBalances'
 import EnvHintButton from '@/components/settings/EnvironmentVariables/EnvHintButton'
 import useSafeAddress from '@/hooks/useSafeAddress'
 import ExplorerButton from '@/components/common/ExplorerButton'
+import CopyTooltip from '@/components/common/CopyTooltip'
 
 const SafeHeader = (): ReactElement => {
   const currency = useAppSelector(selectCurrency)
@@ -88,9 +88,11 @@ const SafeHeader = (): ReactElement => {
           </Track>
 
           <Track {...OVERVIEW_EVENTS.COPY_ADDRESS}>
-            <CopyButton text={addressCopyText} className={css.iconButton}>
-              <SvgIcon component={CopyIconBold} inheritViewBox color="primary" fontSize="small" />
-            </CopyButton>
+            <CopyTooltip text={addressCopyText}>
+              <IconButton className={css.iconButton}>
+                <SvgIcon component={CopyIconBold} inheritViewBox color="primary" fontSize="small" />
+              </IconButton>
+            </CopyTooltip>
           </Track>
 
           <Track {...OVERVIEW_EVENTS.OPEN_EXPLORER}>