refactor: copy to clipboard button

Author: kernelwhisperer

.gitignore

@@ -80,3 +80,5 @@ CLAUDE.md
 
 # Github
 /.npmrc
+
+tsconfig.tsbuildinfo

apps/cow-fi/components/CopyToClipboard/index.tsx

@@ -1,33 +1,20 @@
-import { useEffect, useState } from 'react'
+import React from 'react'
+
+import { useCopyClipboard } from '@cowprotocol/common-hooks'
 
 import { CopyIcon, CopyMessage, CopyWrapper } from '@/components/TokenDetails/index.styles'
 
 export const CopyToClipboard = ({ text }: { text: string }) => {
-  const [copied, setCopied] = useState(false)
-
-  const copyToClipboard = async () => {
-    await navigator.clipboard.writeText(text)
-    setCopied(true)
-  }
-
-  useEffect(() => {
-    let timer = 0
-
-    if (copied) {
-      timer = window.setTimeout(() => {
-        setCopied(false)
-      }, 3000)
-    }
-
-    return () => {
-      window.clearTimeout(timer)
-    }
-  }, [copied])
+  const [copied, copyToClipboard] = useCopyClipboard(3000)
 
   return (
     <CopyWrapper>
       {copied && <CopyMessage>Copied!</CopyMessage>}
-      <CopyIcon src="/images/icons/click-to-copy.svg" alt="Copy contract address" onClick={copyToClipboard} />
+      <CopyIcon
+        src="/images/icons/click-to-copy.svg"
+        alt="Copy contract address"
+        onClick={() => copyToClipboard(text)}
+      />
     </CopyWrapper>
   )
 }

apps/cow-fi/components/ShareBlock.tsx

@@ -1,14 +1,15 @@
 'use client'
 
-import { useCallback, useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useState } from 'react'
 import type { ReactNode } from 'react'
 
+import { useCopyClipboard } from '@cowprotocol/common-hooks'
 import { Font, UI } from '@cowprotocol/ui'
 
 import SVG from 'react-inlinesvg'
 import styled from 'styled-components/macro'
 
-import { buildShareHref, copyUrl, openShare, type ShareTarget } from './ShareBlock.utils'
+import { buildShareHref, openShare, type ShareTarget } from './ShareBlock.utils'
 
 const ICON_PATH = '/images/icons/share'
 
@@ -170,16 +171,15 @@ interface ShareState {
   webShareSupported: boolean
   copied: boolean
   handleShare: (target: ShareTarget) => void
-  handleCopy: () => Promise<void>
+  handleCopy: () => void
   handleWebShare: () => Promise<void>
 }
 
 function useShareBlockState({ url, title, onShare }: ShareBlockProps): ShareState {
   const [shareUrl, setShareUrl] = useState(url)
   const [shareTitle, setShareTitle] = useState(title)
   const [webShareSupported, setWebShareSupported] = useState(false)
-  const [copied, setCopied] = useState(false)
-  const copyTimeoutRef = useRef<number | null>(null)
+  const [copied, setCopied] = useCopyClipboard(1500)
 
   useEffect(() => {
     const canonicalLink = document.querySelector<HTMLLinkElement>('link[rel="canonical"]')
@@ -195,14 +195,6 @@ function useShareBlockState({ url, title, onShare }: ShareBlockProps): ShareStat
     setWebShareSupported(Boolean(navigator.share))
   }, [title, url])
 
-  useEffect(() => {
-    return () => {
-      if (copyTimeoutRef.current !== null) {
-        window.clearTimeout(copyTimeoutRef.current)
-      }
-    }
-  }, [])
-
   const handleShare = useCallback(
     (target: ShareTarget) => {
       if (!shareUrl) return
@@ -218,16 +210,11 @@ function useShareBlockState({ url, title, onShare }: ShareBlockProps): ShareStat
     [shareUrl, shareTitle, title, onShare],
   )
 
-  const handleCopy = useCallback(async () => {
+  const handleCopy = useCallback(() => {
     if (!shareUrl) return
-    await copyUrl(shareUrl)
-    setCopied(true)
-    if (copyTimeoutRef.current !== null) {
-      window.clearTimeout(copyTimeoutRef.current)
-    }
-    copyTimeoutRef.current = window.setTimeout(() => setCopied(false), 1500)
+    setCopied(shareUrl)
     onShare?.()
-  }, [shareUrl, onShare])
+  }, [shareUrl, setCopied, onShare])
 
   const handleWebShare = useCallback(async () => {
     if (!shareUrl || !navigator.share) return

apps/cow-fi/components/ShareBlock.utils.ts

@@ -34,20 +34,3 @@ export function openShare(href: string): void {
     popup.opener = null
   }
 }
-
-export async function copyUrl(url: string): Promise<void> {
-  try {
-    await navigator.clipboard.writeText(url)
-    return
-  } catch {}
-
-  const ta = document.createElement('textarea')
-  ta.value = url
-  ta.style.position = 'fixed'
-  ta.style.left = '-9999px'
-  document.body.appendChild(ta)
-  ta.focus()
-  ta.select()
-  document.execCommand('copy')
-  document.body.removeChild(ta)
-}

apps/cow-fi/hooks/useWebShare.ts

@@ -7,9 +7,6 @@ import { Trans } from '@lingui/react/macro'
 import { CheckCircle, Copy } from 'react-feather'
 import styled, { DefaultTheme, StyledComponentProps } from 'styled-components/macro'
 
-import { TransactionStatusText } from 'legacy/components/Copy/index'
-
-// MOD imports
 export const CopyIcon = styled(LinkStyledButton)<{ copyIconWidth?: string }>`
   --iconSize: var(${UI.ICON_SIZE_NORMAL});
   color: inherit;
@@ -33,6 +30,16 @@ export const CopyIcon = styled(LinkStyledButton)<{ copyIconWidth?: string }>`
   }
 `
 
+export const TransactionStatusText = styled.span<{ isCopied?: boolean }>`
+  ${({ theme }) => theme.flexRowNoWrap};
+  color: ${({ isCopied }) => (isCopied ? `var(${UI.COLOR_SUCCESS})` : 'inherit')};
+  align-items: center;
+
+  ${CopyIcon} {
+    color: currentColor;
+  }
+`
+
 const CheckCircleIconWrapper = styled(CheckCircle)`
   margin: 0 4px 0 0;
 `

apps/cowswap-frontend/src/legacy/components/Copy/CopyMod.tsx

@@ -1,19 +1,5 @@
-import { UI } from '@cowprotocol/ui'
+import Copy, { CopyIcon, TransactionStatusText } from './CopyMod'
 
-import styled from 'styled-components/macro'
-
-import Copy, { CopyIcon } from './CopyMod'
-
-export const TransactionStatusText = styled.span<{ isCopied?: boolean }>`
-  ${({ theme }) => theme.flexRowNoWrap};
-  color: ${({ isCopied }) => (isCopied ? `var(${UI.COLOR_SUCCESS})` : 'inherit')};
-  align-items: center;
-
-  ${CopyIcon} {
-    color: currentColor;
-  }
-`
-
-export { CopyIcon }
+export { CopyIcon, TransactionStatusText }
 
 export default Copy

apps/cowswap-frontend/src/legacy/components/Copy/index.tsx

@@ -1,10 +1,8 @@
-import { type MouseEvent, type ReactNode, useCallback } from 'react'
+import { type ReactNode } from 'react'
 
-import { useCopyClipboard } from '@cowprotocol/common-hooks'
 import { HoverTooltip, RowFixed } from '@cowprotocol/ui'
 
 import { Trans, useLingui } from '@lingui/react/macro'
-import { Check, Copy } from 'react-feather'
 
 import { QuoteIdTooltipContent } from './QuoteIdTooltipContent'
 import { QuoteVerificationBadge } from './QuoteVerificationIndicator'
@@ -24,31 +22,17 @@ interface QuoteIdValueProps {
 
 export function QuoteIdValue({ quoteId }: QuoteIdValueProps): ReactNode {
   const { t } = useLingui()
-  const [isCopied, setCopied] = useCopyClipboard(1500)
-
-  const handleCopy = useCallback(
-    (event: MouseEvent<HTMLButtonElement>) => {
-      event.stopPropagation()
-      setCopied(quoteId)
-    },
-    [quoteId, setCopied],
-  )
-
   return (
     <styledEl.QuoteIdValueWrapper>
       <styledEl.QuoteIdReference>{formatQuoteIdReference(quoteId)}</styledEl.QuoteIdReference>
-      <styledEl.CopyQuoteIdButton onClick={handleCopy} aria-label={t`Copy full quote ID`}>
-        {isCopied ? (
-          <>
-            <Check size={14} />
-            <styledEl.CopiedLabel>
-              <Trans>Copied!</Trans>
-            </styledEl.CopiedLabel>
-          </>
-        ) : (
-          <Copy size={14} />
-        )}
-      </styledEl.CopyQuoteIdButton>
+      <styledEl.CopyQuoteIdButton
+        value={quoteId}
+        timeoutMs={1500}
+        iconSize={14}
+        copiedLabel={<Trans>Copied!</Trans>}
+        aria-label={t`Copy full quote ID`}
+        onClick={(event) => event.stopPropagation()}
+      />
     </styledEl.QuoteIdValueWrapper>
   )
 }

apps/cowswap-frontend/src/modules/account/containers/CopyHelper/index.tsx

@@ -1,4 +1,4 @@
-import { LinkStyledButton, UI } from '@cowprotocol/ui'
+import { CopyButton } from '@cowprotocol/ui'
 
 import styled from 'styled-components/macro'
 
@@ -20,7 +20,7 @@ export const QuoteIdTransactionText = styled(TransactionText)`
   align-items: center;
 `
 
-export const CopyQuoteIdButton = styled(LinkStyledButton)`
+export const CopyQuoteIdButton = styled(CopyButton)`
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -34,10 +34,9 @@ export const CopyQuoteIdButton = styled(LinkStyledButton)`
     text-decoration: none;
     opacity: 1;
   }
-`
 
-export const CopiedLabel = styled.span`
-  color: var(${UI.COLOR_SUCCESS});
-  font-size: 11px;
-  line-height: 1;
+  > span {
+    font-size: 11px;
+    line-height: 1;
+  }
 `