Merge pull request #13861 from ethereum/refactor-use-clipboard

refactor use clipboard

Author: wackerow

src/components/Homepage/useHome.ts

@@ -27,7 +27,6 @@ import { GITHUB_REPO_URL } from "@/lib/constants"
 import SimpleDomainRegistryContent from "!!raw-loader!@/data/SimpleDomainRegistry.sol"
 import SimpleTokenContent from "!!raw-loader!@/data/SimpleToken.sol"
 import SimpleWalletContent from "!!raw-loader!@/data/SimpleWallet.sol"
-import { useClipboard, type UseClipboardReturn } from "@/hooks/useClipboard"
 import { useRtlFlip } from "@/hooks/useRtlFlip"
 
 export const useHome = () => {
@@ -46,15 +45,14 @@ export const useHome = () => {
     setModalOpen(true)
   }
 
-  const codeExamples: (CodeExample & { clipboard: UseClipboardReturn })[] = [
+  const codeExamples: CodeExample[] = [
     {
       title: t("page-index:page-index-developers-code-example-title-0"),
       description: t(
         "page-index:page-index-developers-code-example-description-0"
       ),
       codeLanguage: "language-solidity",
       code: SimpleWalletContent,
-      clipboard: useClipboard(SimpleWalletContent),
     },
     {
       title: t("page-index:page-index-developers-code-example-title-1"),
@@ -63,7 +61,6 @@ export const useHome = () => {
       ),
       codeLanguage: "language-solidity",
       code: SimpleTokenContent,
-      clipboard: useClipboard(SimpleTokenContent),
     },
     {
       title: t("page-index:page-index-developers-code-example-title-2"),
@@ -72,7 +69,6 @@ export const useHome = () => {
       ),
       codeLanguage: "language-javascript",
       code: CreateWalletContent,
-      clipboard: useClipboard(CreateWalletContent),
     },
     {
       title: t("page-index:page-index-developers-code-example-title-3"),
@@ -81,7 +77,6 @@ export const useHome = () => {
       ),
       codeLanguage: "language-solidity",
       code: SimpleDomainRegistryContent,
-      clipboard: useClipboard(SimpleDomainRegistryContent),
     },
   ]
 

src/hooks/useClipboard.ts

@@ -8,33 +8,22 @@ export type UseClipboardOptions = {
   timeout?: number
 }
 
-export type UseClipboardReturn = {
-  value: string
-  setValue: React.Dispatch<React.SetStateAction<string>>
-  onCopy: () => void
-  hasCopied: boolean
-}
-
-export const useClipboard = (
-  value: string,
-  { timeout }: UseClipboardOptions = {}
-): UseClipboardReturn => {
-  const [copyValue, setCopyValue] = useState(value)
+export const useClipboard = ({ timeout = 1500 }: UseClipboardOptions = {}) => {
   const [hasCopied, setHasCopied] = useState(false)
   const [_, copy] = useCopyToClipboard()
 
-  const onCopy = () => {
-    copy(value)
-      .then(() => {
-        setHasCopied(true)
-        setTimeout(() => {
-          setHasCopied(false)
-        }, timeout || 1500)
-      })
-      .catch((error) => {
-        console.error("Failed to copy!", error)
-      })
+  const onCopy = async (value: string) => {
+    try {
+      await copy(value)
+
+      setHasCopied(true)
+      setTimeout(() => {
+        setHasCopied(false)
+      }, timeout)
+    } catch (error) {
+      console.error("Failed to copy!", error)
+    }
   }
 
-  return { onCopy, hasCopied, value: copyValue, setValue: setCopyValue }
+  return { onCopy, hasCopied }
 }

src/pages/index.tsx

@@ -73,6 +73,7 @@ import {
   AccordionTrigger,
 } from "../../tailwind/ui/accordion"
 
+import { useClipboard } from "@/hooks/useClipboard"
 import { fetchCommunityEvents } from "@/lib/api/calendarEvents"
 import { fetchEthPrice } from "@/lib/api/fetchEthPrice"
 import { fetchGrowThePie } from "@/lib/api/fetchGrowThePie"
@@ -190,6 +191,8 @@ const HomePage = ({
     bentoItems,
   } = useHome()
 
+  const { onCopy, hasCopied } = useClipboard()
+
   return (
     <MainArticle className="flex w-full flex-col items-center" dir={dir}>
       <PageMetadata
@@ -411,7 +414,7 @@ const HomePage = ({
                 {/* Mobile */}
                 <Accordion type="single" collapsible className="md:hidden">
                   {codeExamples.map(
-                    ({ title, description, code, codeLanguage, clipboard }) => (
+                    ({ title, description, code, codeLanguage }) => (
                       <AccordionItem
                         key={title}
                         value={title}
@@ -438,10 +441,10 @@ const HomePage = ({
                               {code}
                             </Codeblock>
                             <Button
-                              onClick={clipboard.onCopy}
+                              onClick={() => onCopy(code)}
                               className="absolute end-4 top-24"
                             >
-                              {clipboard.hasCopied ? <MdCheck /> : <IoMdCopy />}
+                              {hasCopied ? <MdCheck /> : <IoMdCopy />}
                             </Button>
                           </Suspense>
                         </AccordionContent>