update: use clipboard for copy icon

Author: wackerow

app/[locale]/staking/deposit-contract/_components/deposit-contract.tsx

@@ -1,7 +1,7 @@
 "use client"
-
 import { useEffect, useState } from "react"
 import makeBlockie from "ethereum-blockies-base64"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 
 import type { ChildOnlyProp, TranslationKey } from "@/lib/types"
 
@@ -375,16 +375,13 @@ const DepositContractPage = () => {
                         <CopyButton>
                           {!isCopied ? (
                             <>
-                              <Emoji text=":clipboard:" className="text-md" />
                               {t("page-staking-deposit-contract-copy")}
+                              <Clipboard className="ms-1" />
                             </>
                           ) : (
                             <>
-                              <Emoji
-                                text=":white_check_mark:"
-                                className="text-md"
-                              />
                               {t("page-staking-deposit-contract-copied")}
+                              <ClipboardCheck className="ms-1" />
                             </>
                           )}
                         </CopyButton>

src/components/CodeModal.tsx

@@ -1,5 +1,5 @@
 import { Children, type ReactElement } from "react"
-import { Check, Copy } from "lucide-react"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 
 import { Button } from "./ui/buttons/Button"
 import {
@@ -43,11 +43,13 @@ const CodeModal = ({ children, isOpen, setIsOpen, title }: CodeModalProps) => {
         >
           {hasCopied ? (
             <>
-              <Check /> {t("copied")}
+              {t("copied")}
+              <ClipboardCheck className="ms-1" />
             </>
           ) : (
             <>
-              <Copy /> {t("copy")}
+              {t("copy")}
+              <Clipboard className="ms-1" />
             </>
           )}
         </Button>

src/components/Codeblock.tsx

@@ -1,6 +1,6 @@
 "use client"
-
 import React, { useState } from "react"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 import Highlight, {
   defaultProps,
   Language,
@@ -10,7 +10,6 @@ import Prism from "prism-react-renderer/prism"
 
 // https://github.com/FormidableLabs/prism-react-renderer/tree/master#custom-language-support
 import CopyToClipboard from "@/components/CopyToClipboard"
-import Emoji from "@/components/Emoji"
 import { Flex } from "@/components/ui/flex"
 
 import { cn } from "@/lib/utils/cn"
@@ -304,16 +303,13 @@ const Codeblock = ({
                         <TopBarItem>
                           {!isCopied ? (
                             <>
-                              <Emoji text=":clipboard:" className="text-md" />{" "}
                               {t("copy")}
+                              <Clipboard className="mb-1 ms-1 inline-block size-[1em]" />
                             </>
                           ) : (
                             <>
-                              <Emoji
-                                text=":white_check_mark:"
-                                className="text-md"
-                              />{" "}
                               {t("copied")}
+                              <ClipboardCheck className="mb-1 ms-1 inline-block size-[1em]" />
                             </>
                           )}
                         </TopBarItem>

src/components/CopyToClipboard.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { CheckCircle, Copy } from "lucide-react"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 
 import { cn } from "@/lib/utils/cn"
 
@@ -42,9 +42,9 @@ export const CopyButton = ({ message, ...props }: CopyButtonProps) => {
   return (
     <Button variant="ghost" onClick={() => onCopy(message)} {...props}>
       {hasCopied ? (
-        <CheckCircle className="size-5" />
+        <ClipboardCheck className="size-5" />
       ) : (
-        <Copy className="size-5" />
+        <Clipboard className="size-5" />
       )}
     </Button>
   )

src/components/Homepage/CodeExamples.tsx

@@ -1,7 +1,7 @@
 "use client"
 
 import { Suspense, useState } from "react"
-import { Check, Copy } from "lucide-react"
+import { Clipboard, ClipboardCheck } from "lucide-react"
 import { useLocale } from "next-intl"
 
 import type { CodeExample } from "@/lib/interfaces"
@@ -93,9 +93,11 @@ const CodeExamples = ({ title, codeExamples }: CodeExamplesProps) => {
                     </Codeblock>
                     <CopyToClipboard
                       text={code}
-                      className="absolute end-4 top-4"
+                      className="absolute end-2 top-2 rounded p-2 hover:bg-primary/10 hover:text-primary"
                     >
-                      {(hasCopied) => (hasCopied ? <Check /> : <Copy />)}
+                      {(hasCopied) =>
+                        hasCopied ? <ClipboardCheck /> : <Clipboard />
+                      }
                     </CopyToClipboard>
                   </div>
                 </Suspense>

src/components/Simulator/WalletHome/AddressPill.tsx

@@ -1,4 +1,4 @@
-import { Copy } from "lucide-react"
+import { Clipboard } from "lucide-react"
 
 import { Flex, type FlexProps } from "@/components/ui/flex"
 
@@ -17,7 +17,7 @@ export const AddressPill = ({ ...btnProps }: AddressPillProps) => (
       {...btnProps}
     >
       <p>{FAKE_DEMO_ADDRESS}</p>
-      <Copy className="size-4 text-lg leading-none" />
+      <Clipboard className="size-4 text-lg leading-none" />
     </Flex>
   </NotificationPopover>
 )