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