diff --git a/src/components/common/CopyAddressButton/index.tsx b/src/components/common/CopyAddressButton/index.tsx
index 0082e2a924..10dac6f034 100644
--- 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
+ return {children}
}
export default CopyAddressButton
diff --git a/src/components/common/CopyButton/index.tsx b/src/components/common/CopyButton/index.tsx
index 9c14a5112e..0d697aa1ba 100644
--- 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 (
-
-
- {children ?? }
-
-
+
+ {children ?? (
+
+
+
+ )}
+
)
}
diff --git a/src/components/common/CopyTooltip/index.tsx b/src/components/common/CopyTooltip/index.tsx
new file mode 100644
index 0000000000..27b91b0762
--- /dev/null
+++ 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 (
+
+
+ {children}
+
+
+ )
+}
+
+export default CopyTooltip
diff --git a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
index 34041dbdfb..d2af893dd2 100644
--- 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 =
+ const shouldCopyPrefix = shouldPrefix && copyPrefix
return (
@@ -78,13 +78,13 @@ const SrcEthHashInfo = ({
- {showPrefix && shouldPrefix && prefix && {prefix}:}
- {shortAddress || isMobile ? shortenAddress(address) : address}
+
+ {showPrefix && shouldPrefix && prefix && {prefix}:}
+ {shortAddress || isMobile ? shortenAddress(address) : address}
+
- {showCopyButton && (
-
- )}
+ {showCopyButton && }
{hasExplorer && ExplorerButtonProps && (
diff --git a/src/components/sidebar/SidebarHeader/index.tsx b/src/components/sidebar/SidebarHeader/index.tsx
index 5a5ab43b20..6e8f3bb28b 100644
--- 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 => {