feat(CopyButton): add HoverTooltip for copy feedback

.gitignore

@@ -78,4 +78,4 @@ CLAUDE.md
 # Github
 /.npmrc
 
-tsconfig.tsbuildinfo
+*tsbuildinfo

apps/cowswap-frontend/package.json

@@ -133,6 +133,7 @@
     "workbox-strategies": "^6.6.1"
   },
   "devDependencies": {
+    "@storybook/react-vite": "^10.3.1",
     "@testing-library/react": "16.3.0",
     "@types/ms": "^2.1.0",
     "@types/ms.macro": "^2.0.0",

apps/cowswap-frontend/src/common/pure/AddressInputPanel/hooks/useAddressResolution.ts

@@ -10,7 +10,11 @@ export function useAddressResolution(
   targetChainId: TargetChainId | undefined,
 ): { address: string | null; loading: boolean; name: string | null } {
   const strategy = getAddressValidationStrategy(targetChainId)
-  const { address: ensAddress, loading: ensLoading, name } = useENS(strategy.supportsENS ? value : undefined)
+  const {
+    address: ensAddress,
+    loading: ensLoading,
+    name,
+  } = useENS((strategy.supportsENS ? value : undefined) as `0x${string}` | undefined)
 
   return useMemo(() => {
     if (!strategy.supportsENS) {

apps/cowswap-frontend/src/common/pure/ReceiveAmount/index.tsx

@@ -36,6 +36,7 @@ export function ReceiveAmount(props: ReceiveAmountProps): ReactNode {
       <div>
         <span>{!isSell ? t`From (incl. fees)` : t`Receive (incl. fees)`}</span>
         <styledEl.QuestionHelperWrapped
+          placement="right"
           text={
             bridgeEstimatedAmounts ? (
               <BridgeReceiveAmountInfo bridgeEstimatedAmounts={bridgeEstimatedAmounts} />

apps/cowswap-frontend/src/legacy/components/Copy/CopyHelper.stories.tsx

@@ -0,0 +1,25 @@
+import CopyHelper from './CopyHelper'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Cowswap/CopyHelper',
+  component: CopyHelper,
+  args: {
+    toCopy: '0x1234567890abcdef1234567890abcdef12345678',
+    children: 'Copy address',
+  },
+} satisfies Meta<typeof CopyHelper>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const IconOnly: Story = {
+  args: {
+    children: undefined,
+    hideCopiedLabel: true,
+  },
+}

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

@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react'
+import React, { MouseEvent, ReactNode } from 'react'
 
 import { useCopyClipboard } from '@cowprotocol/common-hooks'
 import { UI, LinkStyledButton } from '@cowprotocol/ui'
@@ -63,15 +63,11 @@ interface CopyHelperProps
   hideCopiedLabel?: boolean
 }
 
-// TODO: Add proper return type annotation
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export default function CopyHelper(props: CopyHelperProps) {
+export default function CopyHelper(props: CopyHelperProps): ReactNode {
   const { toCopy, children, clickableLink, copyIconWidth, hideCopiedLabel = false, ...rest } = props
   const [isCopied, setCopied] = useCopyClipboard()
 
-  // TODO: Add proper return type annotation
-  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+  const handleClick = (event: MouseEvent<HTMLButtonElement>): void => {
     event.stopPropagation()
     setCopied(toCopy)
   }

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

@@ -1,4 +1,4 @@
-import Copy, { CopyIcon, TransactionStatusText } from './CopyMod'
+import Copy, { CopyIcon, TransactionStatusText } from './CopyHelper'
 
 export { CopyIcon, TransactionStatusText }
 

apps/cowswap-frontend/src/locales/en-US.po

@@ -1055,7 +1055,7 @@ msgstr "Sending {nativeTokenSymbol}"
 msgid "Tokens"
 msgstr "Tokens"
 
-#: apps/cowswap-frontend/src/legacy/components/Copy/CopyMod.tsx
+#: apps/cowswap-frontend/src/legacy/components/Copy/CopyHelper.tsx
 msgid "Copied"
 msgstr "Copied"
 

apps/cowswap-frontend/src/modules/affiliate/containers/AffiliatePartnerCodeInfo.tsx

@@ -4,13 +4,12 @@ import LockedIcon from '@cowprotocol/assets/images/icon-locked-2.svg'
 import ICON_QR_CODE from '@cowprotocol/assets/images/icon-qr-code-v2.svg'
 import ICON_SOCIAL_X from '@cowprotocol/assets/images/icon-social-x.svg'
 import { formatShortDate } from '@cowprotocol/common-utils'
+import { CopyButton } from '@cowprotocol/ui'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
 import { Trans } from '@lingui/react/macro'
 import SVG from 'react-inlinesvg'
 
-import CopyHelper from 'legacy/components/Copy'
-
 import { useModalState } from 'common/hooks/useModalState'
 
 import { AffiliatePartnerQrModal } from './AffiliatePartnerQrModal'
@@ -64,7 +63,7 @@ export function AffiliatePartnerCodeInfo(): ReactNode {
         <LinkedCard>
           <LinkedCodeRow>
             <LinkedCopy>
-              <CopyHelper toCopy={refCode} iconSize={16} hideCopiedLabel />
+              <CopyButton value={refCode} iconSize={16} iconOnly />
               <LinkedCodeText>{refCode}</LinkedCodeText>
             </LinkedCopy>
             <LinkedBadge>
@@ -74,7 +73,7 @@ export function AffiliatePartnerCodeInfo(): ReactNode {
           </LinkedCodeRow>
           <LinkedLinkRow>
             <LinkedCopy>
-              <CopyHelper toCopy={referralLink} iconSize={16} hideCopiedLabel />
+              <CopyButton value={referralLink} iconSize={16} iconOnly />
               <LinkedLinkText>
                 {referralLink
                   .split(/(ref=)/)

apps/cowswap-frontend/src/modules/affiliate/containers/AffiliateTraderCodeInfo.tsx

@@ -5,15 +5,13 @@ import CheckIcon from '@cowprotocol/assets/cow-swap/order-check.svg'
 import LockedIcon from '@cowprotocol/assets/images/icon-locked-2.svg'
 import { useTimeAgo } from '@cowprotocol/common-hooks'
 import { formatDateWithTimezone, formatShortDate } from '@cowprotocol/common-utils'
-import { ButtonPrimary, HelpTooltip } from '@cowprotocol/ui'
+import { ButtonPrimary, CopyButton, HelpTooltip } from '@cowprotocol/ui'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
 import { Trans } from '@lingui/react/macro'
 import ms from 'ms.macro'
 import SVG from 'react-inlinesvg'
 
-import CopyHelper from 'legacy/components/Copy'
-
 import { useAffiliateTraderInfo } from '../hooks/useAffiliateTraderInfo'
 import { useAffiliateTraderStats } from '../hooks/useAffiliateTraderStats'
 import { useIsRefCodeExpired } from '../hooks/useIsRefCodeExpired'
@@ -63,7 +61,7 @@ export function AffiliateTraderCodeInfo(): ReactNode {
           <LinkedCard $isExpired={isExpired}>
             <LinkedCodeRow $isExpired={isExpired}>
               <LinkedCopy>
-                <CopyHelper toCopy={savedCode} iconSize={16} hideCopiedLabel />
+                <CopyButton value={savedCode} iconSize={16} iconOnly />
                 <LinkedCodeText>{savedCode}</LinkedCodeText>
               </LinkedCopy>
               {isExpired ? (

apps/cowswap-frontend/src/modules/affiliate/pure/AffiliatePartner/AffiliatePartnerCodeForm.tsx

@@ -1,14 +1,12 @@
 import { KeyboardEvent, ReactNode, useCallback, useId } from 'react'
 
-import { HelpTooltip, UI } from '@cowprotocol/ui'
+import { CopyButton, HelpTooltip, UI } from '@cowprotocol/ui'
 
 import { t } from '@lingui/core/macro'
 import { Trans } from '@lingui/react/macro'
 import { RotateCw } from 'react-feather'
 import styled from 'styled-components/macro'
 
-import CopyHelper from 'legacy/components/Copy'
-
 import { REF_CODE_MIN_LENGTH } from 'modules/affiliate'
 
 import { AffiliatePartnerCodeErrorMessage } from './AffiliatePartnerCodeErrorMessage'
@@ -158,10 +156,10 @@ function ReferralLinkPreview({ previewLink, isCopyDisabled }: ReferralLinkPrevie
     <ConnectedPreviewCard>
       <LinkedLinkRow>
         <LinkedCopy>
-          <CopyHelper
-            toCopy={previewLink}
+          <CopyButton
+            value={previewLink}
             iconSize={16}
-            hideCopiedLabel
+            iconOnly
             disabled={isCopyDisabled}
             aria-label={isCopyDisabled ? t`Enter a code to copy the referral link` : t`Copy referral link`}
           />

apps/cowswap-frontend/src/modules/orderProgressBar/hooks/useOrderProgressBarProps.ts

@@ -85,7 +85,7 @@ export function useOrderProgressBarProps(
   )
 
   const surplusData = useGetSurplusData(order)
-  const receiverEnsName = useENS(order?.receiver).name || undefined
+  const receiverEnsName = useENS(order?.receiver as `0x${string}` | undefined)?.name || undefined
 
   const props = useMemo(() => {
     // Add supplementary stuff

apps/explorer/package.json

@@ -83,6 +83,7 @@
     "yaml": "^2.8.1"
   },
   "devDependencies": {
+    "@storybook/react-vite": "^10.3.1",
     "@testing-library/react": "16.3.0",
     "@types/cytoscape": "^3.21.9",
     "@types/cytoscape-popper": "^2.0.0",

apps/storybook/src/main.ts

@@ -67,10 +67,17 @@ function getStorybookProcessEnv(configType: 'DEVELOPMENT' | 'PRODUCTION'): Recor
   }
 }
 
-const workspaceAliases = getWorkspaceAliases()
+const workspaceAliases = [
+  ...getWorkspaceAliases(),
+  { find: /^@\/(.*)$/, replacement: path.resolve(process.cwd(), 'apps/cow-fi/$1') },
+]
 
 const config: StorybookConfig = {
-  stories: ['../../../libs/ui/src/**/*.stories.@(ts|tsx)'],
+  stories: [
+    '../../../libs/ui/src/**/*.stories.@(ts|tsx)',
+    '../../../apps/cowswap-frontend/src/**/*.stories.@(ts|tsx)',
+    // '../../../apps/explorer/src/components/common/CopyButton/CopyButton.stories.@(ts|tsx)',
+  ],
   addons: [getAbsolutePath('@storybook/addon-a11y'), getAbsolutePath('@storybook/addon-docs')],
   framework: {
     name: getAbsolutePath('@storybook/react-vite'),

apps/storybook/src/preview.tsx

@@ -1,4 +1,8 @@
 /* eslint-disable @nx/enforce-module-boundaries */
+import { DEFAULT_LOCALE } from '@cowprotocol/common-const'
+
+import { i18n } from '@lingui/core'
+import { I18nProvider } from '@lingui/react'
 import { createGlobalStyle, ThemeProvider } from 'styled-components/macro'
 
 import { Color } from '../../../libs/ui/src/colors'
@@ -8,6 +12,9 @@ import { ThemeColorVars } from '../../../libs/ui/src/theme/ThemeColorVars'
 
 import type { Preview } from '@storybook/react-vite'
 
+i18n.load(DEFAULT_LOCALE, {})
+i18n.activate(DEFAULT_LOCALE)
+
 type ThemeMode = 'dark' | 'light'
 
 const checkerboardBackground = `repeating-conic-gradient(
@@ -57,10 +64,12 @@ const preview: Preview = {
       const theme = baseTheme(themeMode)
 
       return (
-        <ThemeProvider theme={theme}>
-          <GlobalStyle $themeMode={themeMode} />
-          <Story />
-        </ThemeProvider>
+        <I18nProvider i18n={i18n}>
+          <ThemeProvider theme={theme}>
+            <GlobalStyle $themeMode={themeMode} />
+            <Story />
+          </ThemeProvider>
+        </I18nProvider>
       )
     },
   ],

libs/ui/package.json

@@ -24,24 +24,26 @@
     }
   },
   "dependencies": {
-    "@cowprotocol/cow-sdk": "9.0.2",
+    "@base-ui/react": "^1.4.1",
     "@cowprotocol/analytics": "workspace:*",
     "@cowprotocol/assets": "workspace:*",
     "@cowprotocol/common-const": "workspace:*",
     "@cowprotocol/common-hooks": "workspace:*",
     "@cowprotocol/common-utils": "workspace:*",
     "@cowprotocol/core": "workspace:*",
+    "@cowprotocol/cow-sdk": "9.0.2",
+    "@cowprotocol/currency": "workspace:*",
     "@cowprotocol/types": "workspace:*",
     "@cowprotocol/ui-utils": "workspace:*",
     "@lingui/core": "^5.4.1",
     "@lingui/react": "^5.4.1",
     "@popperjs/core": "^2.4.4",
     "@reach/menu-button": "^0.18.0",
     "@reach/portal": "^0.18.0",
-    "@cowprotocol/currency": "workspace:*",
     "bignumber.js": "^9.1.2",
     "color2k": "^2.0.2",
     "jotai": "2.16.2",
+    "ms.macro": "^2.0.0",
     "next": "15.2.8",
     "polished": "^4.0.5",
     "react": "19.1.2",
@@ -56,6 +58,7 @@
   "devDependencies": {
     "@storybook/addon-docs": "^10.3.1",
     "@storybook/react-vite": "^10.3.1",
+    "@types/ms.macro": "^2.0.0",
     "@types/react": "19.1.3",
     "@types/rebass": "^4.0.10",
     "@types/styled-components": "5.1.34"

libs/ui/src/index.ts

@@ -52,6 +52,7 @@ export * from './pure/TokenAmount'
 export * from './pure/TokenName'
 export * from './pure/TokenSymbol'
 export * from './pure/Tooltip'
+export * from './pure/Tooltip/Tooltip'
 export * from './pure/TruncatedText'
 export * from './styles'
 export * from './theme'

libs/ui/src/pure/CopyButton/CopyButton.stories.tsx

@@ -0,0 +1,27 @@
+import { CopyButton } from './index'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'UI/CopyButton',
+  component: CopyButton,
+  args: {
+    value: '0x1234567890abcdef1234567890abcdef12345678',
+    children: 'Copy address',
+    copiedLabel: 'Copied',
+  },
+} satisfies Meta<typeof CopyButton>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {}
+
+export const IconOnly: Story = {
+  args: {
+    children: undefined,
+    iconOnly: true,
+    'aria-label': 'Copy address',
+  },
+}

libs/ui/src/pure/CopyButton/index.tsx

@@ -8,6 +8,7 @@ import styled from 'styled-components/macro'
 
 import { UI } from '../../enum'
 import { LinkStyledButton } from '../LinkStyledButton'
+import { NewTooltip } from '../Tooltip/Tooltip'
 
 export interface CopyButtonState {
   isCopied: boolean
@@ -21,7 +22,7 @@ export interface CopyButtonProps
   children?: CopyButtonChildren
   copiedLabel?: ReactNode
   idleLabel?: ReactNode
-  showCopiedLabel?: boolean
+  iconOnly?: boolean
   iconSize?: number
   iconPosition?: 'left' | 'right'
   color?: string
@@ -50,7 +51,7 @@ export function CopyButton(props: CopyButtonProps): ReactNode {
     children,
     copiedLabel = <Trans>Copied</Trans>,
     idleLabel,
-    showCopiedLabel = true,
+    iconOnly = false,
     iconSize = 16,
     iconPosition = 'left',
     color,
@@ -78,9 +79,8 @@ export function CopyButton(props: CopyButtonProps): ReactNode {
   const renderedChildren = typeof children === 'function' ? children({ isCopied }) : children
   const idleContent = renderedChildren ?? idleLabel
   const icon = isCopied ? <Check size={iconSize} /> : <Copy size={iconSize} />
-  const content = isCopied ? showCopiedLabel ? <span>{copiedLabel}</span> : null : idleContent
-
-  return (
+  const content = isCopied ? iconOnly ? null : <span>{copiedLabel}</span> : idleContent
+  const button = (
     <StyledCopyButton
       type={type ?? 'button'}
       onClick={handleClick}
@@ -93,4 +93,12 @@ export function CopyButton(props: CopyButtonProps): ReactNode {
       {iconPosition === 'left' ? content : icon}
     </StyledCopyButton>
   )
+
+  return !idleContent && iconOnly ? (
+    <NewTooltip content={isCopied ? copiedLabel : 'Copy to clipboard'} placement="top">
+      {button}
+    </NewTooltip>
+  ) : (
+    button
+  )
 }