fix(web): fix #596 copy-to-clipboard issue (#602)

web/hooks/use-copy-to-clipboard.ts

@@ -1,29 +1,31 @@
-import { useState } from 'react'
+import { useCallback, useState } from 'react'
+import writeText from 'copy-to-clipboard'
 
 type CopiedValue = string | null
 type CopyFn = (text: string) => Promise<boolean>
 
 function useCopyToClipboard(): [CopiedValue, CopyFn] {
-    const [copiedText, setCopiedText] = useState<CopiedValue>(null)
+  const [copiedText, setCopiedText] = useState<CopiedValue>(null)
 
-    const copy: CopyFn = async text => {
-        if (!navigator?.clipboard) {
-            console.warn('Clipboard not supported')
-            return false
-        }
+  const copy: CopyFn = useCallback(async (text: string) => {
+    if (!navigator?.clipboard) {
+      console.warn('Clipboard not supported')
+      return false
+    }
 
-        try {
-            await navigator.clipboard.writeText(text)
-            setCopiedText(text)
-            return true
-        } catch (error) {
-            console.warn('Copy failed', error)
-            setCopiedText(null)
-            return false
-        }
+    try {
+      writeText(text)
+      setCopiedText(text)
+      return true
+    }
+    catch (error) {
+      console.warn('Copy failed', error)
+      setCopiedText(null)
+      return false
     }
+  }, [])
 
-    return [copiedText, copy]
+  return [copiedText, copy]
 }
 
-export default useCopyToClipboard
+export default useCopyToClipboard