diff --git a/cypress/e2e/pages/owners.pages.js b/cypress/e2e/pages/owners.pages.js
index f0276a325b..0ed01d629a 100644
--- a/cypress/e2e/pages/owners.pages.js
+++ b/cypress/e2e/pages/owners.pages.js
@@ -3,7 +3,6 @@ import * as main from '../pages/main.page'
import * as createWallet from '../pages/create_wallet.pages'
import * as navigation from '../pages/navigation.page'
-const copyToClipboardBtn = 'button[aria-label="Copy to clipboard"]'
const tooltipLabel = (label) => `span[aria-label="${label}"]`
const removeOwnerBtn = 'span[data-track="settings: Remove owner"] > span > button'
const replaceOwnerBtn = 'span[data-track="settings: Replace owner"] > span > button'
@@ -106,7 +105,6 @@ export function hoverOverDeleteOwnerBtn(index) {
export function openRemoveOwnerWindow(btn) {
cy.get(removeOwnerBtn).eq(btn).click({ force: true })
- cy.get(copyToClipboardBtn).parent().eq(2).find('span').contains('0x').should('be.visible')
cy.get('div').contains(removeOwnerStr).should('exist')
}
@@ -114,7 +112,6 @@ export function openReplaceOwnerWindow() {
cy.get(replaceOwnerBtn).click({ force: true })
cy.get(newOwnerName).should('be.visible')
cy.get(newOwnerAddress).should('be.visible')
- cy.get(copyToClipboardBtn).parent().eq(2).find('span').contains('0x').should('be.visible')
}
export function verifyTooltipLabel(label) {
cy.get(tooltipLabel(label)).should('be.visible')
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 732ab2db21..f5123e6424 100644
--- a/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
+++ b/src/components/common/EthHashInfo/SrcEthHashInfo/index.tsx
@@ -20,6 +20,7 @@ export type EthHashInfoProps = {
showPrefix?: boolean
copyPrefix?: boolean
shortAddress?: boolean
+ copyAddress?: boolean
customAvatar?: string
hasExplorer?: boolean
avatarSize?: number
@@ -36,6 +37,7 @@ const SrcEthHashInfo = ({
copyPrefix,
showPrefix,
shortAddress = true,
+ copyAddress = true,
showAvatar = true,
avatarSize,
name,
@@ -47,8 +49,15 @@ const SrcEthHashInfo = ({
const shouldPrefix = isAddress(address)
const theme = useTheme()
const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
-
const identicon =
+ const shouldCopyPrefix = shouldPrefix && copyPrefix
+
+ const addressElement = (
+ <>
+ {showPrefix && shouldPrefix && prefix && {prefix}:}
+ {shortAddress || isMobile ? shortenAddress(address) : address}
+ >
+ )
return (
@@ -74,13 +83,16 @@ const SrcEthHashInfo = ({
- {showPrefix && shouldPrefix && prefix && {prefix}:}
- {shortAddress || isMobile ? shortenAddress(address) : address}
+ {copyAddress ? (
+
+ {addressElement}
+
+ ) : (
+ addressElement
+ )}
- {showCopyButton && (
-
- )}
+ {showCopyButton &&
}
{hasExplorer && ExplorerButtonProps && (
diff --git a/src/components/common/WalletOverview/index.tsx b/src/components/common/WalletOverview/index.tsx
index b13d3c9fe0..69c3125c0f 100644
--- a/src/components/common/WalletOverview/index.tsx
+++ b/src/components/common/WalletOverview/index.tsx
@@ -45,7 +45,14 @@ const WalletOverview = ({ wallet }: { wallet: ConnectedWallet }): ReactElement =
{wallet.ens ? (
{wallet.ens}
) : (
-
+
)}
diff --git a/src/components/sidebar/SafeListItem/index.tsx b/src/components/sidebar/SafeListItem/index.tsx
index 3a0313633b..626a70be3d 100644
--- a/src/components/sidebar/SafeListItem/index.tsx
+++ b/src/components/sidebar/SafeListItem/index.tsx
@@ -107,7 +107,15 @@ const SafeListItem = ({
}}
secondaryTypographyProps={{ component: 'div', color: 'primary' }}
primary={name || ''}
- secondary={
}
+ secondary={
+
+ }
/>
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 => {