Add copy paste address

client/src/ui/components/AccountDetails.tsx

@@ -6,6 +6,8 @@ import DisconnectButton from "./DisconnectButton";
 import useAccountCustom from "@/hooks/useAccountCustom";
 import { useControllerUsername } from "@/hooks/useControllerUsername";
 import { FaucetButton } from "./FaucetButton";
+import { Copy } from "lucide-react";
+import { useState } from "react";
 
 const { VITE_PUBLIC_GAME_TOKEN_ADDRESS, VITE_PUBLIC_GAME_TOKEN_SYMBOL } =
   import.meta.env;
@@ -19,17 +21,33 @@ const AccountDetails = () => {
   const { account } = useAccountCustom();
   const { username } = useControllerUsername();
   const isMdOrLarger = useMediaQuery({ query: "(min-width: 768px)" });
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async () => {
+    if (account?.address) {
+      await navigator.clipboard.writeText(account.address);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
 
   if (status === "connected" && account?.address) {
     return (
       <div className="flex gap-3 items-center flex-col w-full">
-        <div className="flex items-center gap-3 w-full">
+        <div className="flex items-center gap-2 w-full">
           <div className="flex items-center gap-1 md:gap-2 rounded-lg bg-secondary text-secondary-foreground shadow-sm px-2 md:px-3 py-1 justify-between h-[36px] w-full">
             <div className="px-1">{username}</div>
             <p className="text-sm">
               {shortAddress(account.address, isMdOrLarger ? 5 : 6)}
             </p>
           </div>
+          <button
+            onClick={handleCopy}
+            className="flex items-center justify-center h-[36px] w-[36px] rounded-lg bg-secondary text-secondary-foreground hover:bg-secondary/80 transition-colors"
+            title={copied ? "Copied!" : "Copy address"}
+          >
+            <Copy className={`h-4 ${copied ? "text-green-500" : ""}`} />
+          </button>
           <DisconnectButton />
         </div>
         <div className="flex w-full gap-3">