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 => { - - - + + + + +