Adding useClipboard hook (#425)

corbanbrook · web-flow · commit 7691f778ab31 · 2025-05-08T12:39:21.000-04:00
* Adding useClipboard hook

* Using useClipboard hook rather than react-copy-to-clipboard
diff --git a/packages/checkout/package.json b/packages/checkout/package.json
@@ -36,7 +36,6 @@
     "motion": "^12.9.2",
     "pako": "^2.1.0",
     "qrcode.react": "^4.2.0",
-    "react-copy-to-clipboard": "^5.1.0",
     "timeago-react": "^3.0.7"
   },
   "peerDependencies": {
@@ -58,7 +57,6 @@
     "@0xsequence/connect": "workspace:*",
     "@tanstack/react-query": "^5.74.11",
     "@types/pako": "^2.0.3",
-    "@types/react-copy-to-clipboard": "^5.0.7",
     "ethers": "^6.13.7",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
diff --git a/packages/checkout/src/components/CopyButton.tsx b/packages/checkout/src/components/CopyButton.tsx
@@ -1,32 +1,27 @@
 import { Button, CheckmarkIcon, CopyIcon } from '@0xsequence/design-system'
-import React, { useEffect, useState, type ComponentProps } from 'react'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { useClipboard } from '@0xsequence/hooks'
+import React, { type ComponentProps } from 'react'
 
 type ButtonProps = ComponentProps<typeof Button>
 
 interface CopyButtonProps extends ButtonProps {
   text: string
+  inline?: boolean
 }
 
 export const CopyButton = (props: CopyButtonProps) => {
-  const { text, size = 'xs', ...rest } = props
-  const [isCopied, setCopy] = useState(false)
+  const { text, size = 'xs', inline = false, ...rest } = props
+  const [isCopied, setCopied] = useClipboard({ timeout: 4000 })
 
-  useEffect(() => {
-    if (isCopied) {
-      setTimeout(() => {
-        setCopy(false)
-      }, 4000)
-    }
-  }, [isCopied])
-
-  const handleCopy = () => {
-    setCopy(true)
-  }
-
-  return (
-    <CopyToClipboard text={text} onCopy={handleCopy}>
-      <Button size={size} leftIcon={isCopied ? CheckmarkIcon : CopyIcon} label={isCopied ? 'Copied' : 'Copy'} {...rest} />
-    </CopyToClipboard>
+  return inline ? (
+    <Button size={size} variant="text" leftIcon={isCopied ? CheckmarkIcon : CopyIcon} onClick={() => setCopied(text)} />
+  ) : (
+    <Button
+      size={size}
+      leftIcon={isCopied ? CheckmarkIcon : CopyIcon}
+      label={isCopied ? 'Copied' : 'Copy'}
+      onClick={() => setCopied(text)}
+      {...rest}
+    />
   )
 }
diff --git a/packages/checkout/src/views/PaymentSelection/TransferFunds.tsx b/packages/checkout/src/views/PaymentSelection/TransferFunds.tsx
@@ -1,7 +1,6 @@
 import { Card, CheckmarkIcon, CopyIcon, IconButton, Text, truncateAddress } from '@0xsequence/design-system'
+import { useClipboard } from '@0xsequence/hooks'
 import { QRCodeCanvas } from 'qrcode.react'
-import { useEffect, useState } from 'react'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { useAccount } from 'wagmi'
 
 import { useSelectPaymentModal, useTransferFundsModal } from '../../hooks'
@@ -10,19 +9,7 @@ export const TransferFunds = () => {
   const { openTransferFundsModal } = useTransferFundsModal()
   const { openSelectPaymentModal, closeSelectPaymentModal, selectPaymentSettings } = useSelectPaymentModal()
   const { address: userAddress } = useAccount()
-  const [isCopied, setCopy] = useState(false)
-
-  useEffect(() => {
-    if (isCopied) {
-      setTimeout(() => {
-        setCopy(false)
-      }, 4000)
-    }
-  }, [isCopied])
-
-  const handleCopy = () => {
-    setCopy(true)
-  }
+  const [isCopied, setCopied] = useClipboard({ timeout: 4000 })
 
   const onClickQrCode = (e: React.MouseEvent<HTMLDivElement>) => {
     e.preventDefault()
@@ -83,14 +70,13 @@ export const TransferFunds = () => {
             e.preventDefault()
           }}
         >
-          <CopyToClipboard text={userAddress || ''} onCopy={handleCopy}>
-            <IconButton
-              className="text-muted"
-              variant="base"
-              size="md"
-              icon={isCopied ? () => <CheckmarkIcon size="lg" /> : () => <CopyIcon size="lg" />}
-            />
-          </CopyToClipboard>
+          <IconButton
+            className="text-muted"
+            variant="base"
+            size="md"
+            icon={isCopied ? () => <CheckmarkIcon size="lg" /> : () => <CopyIcon size="lg" />}
+            onClick={() => setCopied(userAddress || '')}
+          />
         </div>
       </Card>
     </div>
diff --git a/packages/checkout/src/views/TransferToWallet/CopyButton.tsx b/packages/checkout/src/views/TransferToWallet/CopyButton.tsx
diff --git a/packages/checkout/src/views/TransferToWallet/QRCode.tsx b/packages/checkout/src/views/TransferToWallet/QRCode.tsx
@@ -1,7 +1,7 @@
 import { Skeleton } from '@0xsequence/design-system'
 import { QRCodeCanvas } from 'qrcode.react'
 
-import { CopyButton } from './CopyButton'
+import { CopyButton } from '../../components/CopyButton'
 
 interface QRCodeProps {
   value: string | undefined
diff --git a/packages/hooks/package.json b/packages/hooks/package.json
@@ -58,5 +58,8 @@
     "viem": "^2.28.1",
     "vite": "^6.3.4",
     "vitest": "^2.1.9"
+  },
+  "dependencies": {
+    "copy-to-clipboard": "^3.3.3"
   }
 }
diff --git a/packages/hooks/src/hooks/useClipboard.ts b/packages/hooks/src/hooks/useClipboard.ts
@@ -0,0 +1,31 @@
+import copy from 'copy-to-clipboard'
+import { useEffect, useState } from 'react'
+
+interface UseClipboardProps {
+  timeout?: number
+}
+
+export const useClipboard = (props?: UseClipboardProps) => {
+  const [isCopied, setIsCopied] = useState(false)
+  const timeout = props && props.timeout
+
+  useEffect(() => {
+    if (isCopied) {
+      const id = setTimeout(() => {
+        setIsCopied(false)
+      }, timeout)
+
+      return () => {
+        clearTimeout(id)
+      }
+    }
+  }, [isCopied, timeout])
+
+  return [
+    isCopied,
+    (text: string) => {
+      copy(text)
+      setIsCopied(true)
+    }
+  ] as const
+}
diff --git a/packages/hooks/src/index.ts b/packages/hooks/src/index.ts
@@ -42,4 +42,5 @@ export { useGetSwapQuote } from './hooks/Combination/useGetSwapQuote'
 export { useGetSwapRoutes } from './hooks/Combination/useGetSwapRoutes'
 
 // Etc
-export { useClearCachedBalances } from './hooks/useClearCachedBalances.js'
+export { useClearCachedBalances } from './hooks/useClearCachedBalances'
+export { useClipboard } from './hooks/useClipboard'
diff --git a/packages/wallet-widget/package.json b/packages/wallet-widget/package.json
@@ -37,8 +37,7 @@
     "fuse.js": "^6.6.2",
     "micro-observables": "1.7.2",
     "motion": "^12.9.2",
-    "qrcode.react": "^4.2.0",
-    "react-copy-to-clipboard": "^5.1.0"
+    "qrcode.react": "^4.2.0"
   },
   "peerDependencies": {
     "@0xsequence/api": "2.3.11",
@@ -60,7 +59,6 @@
     "@0xsequence/connect": "workspace:*",
     "@0xsequence/hooks": "workspace:*",
     "@tanstack/react-query": "^5.74.11",
-    "@types/react-copy-to-clipboard": "^5.0.7",
     "ethers": "^6.13.7",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
diff --git a/packages/wallet-widget/src/components/CopyButton.tsx b/packages/wallet-widget/src/components/CopyButton.tsx
@@ -1,6 +1,6 @@
 import { Button, CheckmarkIcon, CopyIcon } from '@0xsequence/design-system'
-import { useEffect, useState, type ComponentProps } from 'react'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
+import { useClipboard } from '@0xsequence/hooks'
+import type { ComponentProps } from 'react'
 
 type ButtonProps = ComponentProps<typeof Button>
 
@@ -11,31 +11,18 @@ interface CopyButtonProps extends ButtonProps {
 
 export const CopyButton = (props: CopyButtonProps) => {
   const { buttonVariant = 'icon', text, size = 'xs', ...rest } = props
-  const [isCopied, setCopy] = useState(false)
-
-  useEffect(() => {
-    if (isCopied) {
-      setTimeout(() => {
-        setCopy(false)
-      }, 2000)
-    }
-  }, [isCopied])
-
-  const handleCopy = () => {
-    setCopy(true)
-  }
+  const [isCopied, setCopied] = useClipboard({ timeout: 4000 })
 
   const label = isCopied ? 'Copied!' : 'Copy'
 
   return (
-    <CopyToClipboard text={text} onCopy={handleCopy}>
-      <Button
-        size={size!}
-        leftIcon={isCopied ? CheckmarkIcon : CopyIcon}
-        label={buttonVariant === 'with-label' ? label : undefined}
-        variant={buttonVariant === 'icon' ? 'ghost' : 'glass'}
-        {...rest}
-      />
-    </CopyToClipboard>
+    <Button
+      size={size!}
+      leftIcon={isCopied ? CheckmarkIcon : CopyIcon}
+      label={buttonVariant === 'with-label' ? label : undefined}
+      variant={buttonVariant === 'icon' ? 'ghost' : 'glass'}
+      onClick={() => setCopied(text)}
+      {...rest}
+    />
   )
 }
diff --git a/packages/wallet-widget/src/views/Receive.tsx b/packages/wallet-widget/src/views/Receive.tsx
@@ -1,8 +1,7 @@
 import { getNetwork } from '@0xsequence/connect'
 import { Button, CopyIcon, Image, ShareIcon, Text } from '@0xsequence/design-system'
+import { useClipboard } from '@0xsequence/hooks'
 import { QRCodeCanvas } from 'qrcode.react'
-import { useEffect, useState } from 'react'
-import { CopyToClipboard } from 'react-copy-to-clipboard'
 import { useAccount } from 'wagmi'
 
 import { NetworkSelect } from '../components/Select/NetworkSelect'
@@ -12,23 +11,11 @@ const isVowel = (char: string) => ['a', 'e', 'i', 'o', 'u'].includes(char.toLowe
 
 export const Receive = () => {
   const { address, chain } = useAccount()
-  const [isCopied, setCopied] = useState<boolean>(false)
+  const [isCopied, setCopied] = useClipboard({ timeout: 4000 })
 
   const networkInfo = getNetwork(chain?.id || 1)
   const networkName = networkInfo.title || networkInfo.name
 
-  useEffect(() => {
-    if (isCopied) {
-      setTimeout(() => {
-        setCopied(false)
-      }, 4000)
-    }
-  }, [isCopied])
-
-  const onClickCopy = () => {
-    setCopied(true)
-  }
-
   const onClickShare = () => {
     if (typeof window !== 'undefined') {
       window.open(`https://twitter.com/intent/tweet?text=Here%20is%20my%20address%20${address}`)
@@ -64,9 +51,7 @@ export const Receive = () => {
           </div>
         </div>
         <div className="flex gap-3">
-          <CopyToClipboard text={address || ''}>
-            <Button onClick={onClickCopy} leftIcon={CopyIcon} label={isCopied ? 'Copied!' : 'Copy'} />
-          </CopyToClipboard>
+          <Button onClick={() => setCopied(address || '')} leftIcon={CopyIcon} label={isCopied ? 'Copied!' : 'Copy'} />
           <Button onClick={onClickShare} leftIcon={ShareIcon} label="Share" />
         </div>
         <div className="flex justify-center items-center" style={{ maxWidth: '260px', textAlign: 'center' }}>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

Original file line number	Diff line number	Diff line change
`@@ -58,5 +58,8 @@`
`58`	`58`	`"viem": "^2.28.1",`
`59`	`59`	`"vite": "^6.3.4",`
`60`	`60`	`"vitest": "^2.1.9"`
	`61`	`+ },`
	`62`	`+ "dependencies": {`
	`63`	`+ "copy-to-clipboard": "^3.3.3"`
`61`	`64`	`}`
`62`	`65`	`}`