feat: Add copy to clipboard icons next to all ethereum addresses

Author: tusharshah21

frontend/src/components/CopyAddressToClipboard.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface CopyAddressToClipboardProps {
+  address: string;
+  displayAddress?: string;
+  className?: string;
+  iconSize?: "sm" | "md";
+  showFeedback?: boolean;
+}
+
+export function CopyAddressToClipboard({
+  address,
+  displayAddress,
+  className,
+  iconSize = "sm",
+  showFeedback = true,
+}: CopyAddressToClipboardProps) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    
+    try {
+      await navigator.clipboard.writeText(address);
+      if (showFeedback) {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+      }
+    } catch (err) {
+      console.error("Failed to copy address:", err);
+    }
+  };
+
+  const iconClasses = cn(
+    "transition-colors hover:text-gray-700 cursor-pointer",
+    iconSize === "sm" ? "h-3.5 w-3.5" : "h-4 w-4",
+    copied ? "text-green-600" : "text-gray-500"
+  );
+
+  return (
+    <div className={cn("inline-flex items-center gap-2", className)}>
+      {displayAddress && (
+        <span className="font-mono">{displayAddress}</span>
+      )}
+      <button
+        onClick={handleCopy}
+        className="inline-flex items-center justify-center p-1 rounded hover:bg-gray-100 transition-colors"
+        title={copied ? "Copied!" : "Copy full address to clipboard"}
+        aria-label={copied ? "Address copied" : "Copy address to clipboard"}
+      >
+        {copied ? (
+          <Check className={iconClasses} />
+        ) : (
+          <Copy className={iconClasses} />
+        )}
+      </button>
+    </div>
+  );
+}
+
+export default CopyAddressToClipboard;

frontend/src/components/profiles/list/ProfileCard.tsx

@@ -12,6 +12,7 @@ import { useAccount } from "wagmi";
 import DeleteProfileDialog from "../action-buttons/DeleteProfileDialog";
 import { AddAttestationDialog } from "../action-buttons/AddAttestationDialog";
 import AddressTokenBalance from "@/components/AddressTokenBalance";
+import CopyAddressToClipboard from "@/components/CopyAddressToClipboard";
 
 interface ProfileCardProps {
   address: string;
@@ -75,10 +76,15 @@ export function ProfileCard({
               </span>
             )}
           </CardTitle>
-          <CardDescription className="font-mono">
-            <a href={`/profiles/${address}`} className="hover:underline">
+          <CardDescription>
+            <a href={`/profiles/${address}`} className="hover:underline font-mono">
               {displayAddress}
             </a>
+            <CopyAddressToClipboard 
+              address={address}
+              className="ml-2"
+              iconSize="sm"
+            />
           </CardDescription>
           <AddressTokenBalance address={address as `0x${string}`} />
         </div>

frontend/src/components/profiles/profile-page/ProfileAttestations.tsx

@@ -8,6 +8,7 @@ import {
   AccordionTrigger,
 } from "@/components/ui/accordion";
 import { useGetProfiles } from "@/hooks/profiles/use-get-profiles";
+import CopyAddressToClipboard from "@/components/CopyAddressToClipboard";
 
 export function ProfileAttestations({ address }: { address: string }) {
   const attestationsQuery = useGetAttestations();
@@ -87,17 +88,22 @@ export function ProfileAttestations({ address }: { address: string }) {
                           <p className="text-sm text-gray-800">
                             {it.justification}
                           </p>
-                          <p className="text-xs text-gray-500 mt-1">
-                            Issued by{" "}
+                          <div className="text-xs text-gray-500 mt-1 flex items-center gap-1">
+                            <span>Issued by{" "}</span>
                             <a
                               className="text-indigo-600 hover:underline"
                               href={`/profiles/${it.issuer}`}
                             >
                               {profileNameByAddress.get(
                                 it.issuer.toLowerCase()
-                              ) || it.issuer}
+                              ) || `${it.issuer.slice(0, 6)}...${it.issuer.slice(-4)}`}
                             </a>
-                          </p>
+                            <CopyAddressToClipboard 
+                              address={it.issuer}
+                              iconSize="sm"
+                              showFeedback={false}
+                            />
+                          </div>
                         </div>
                       </div>
                     </li>

frontend/src/components/profiles/profile-page/ProfileHeader.tsx

@@ -3,6 +3,7 @@ import { useAccount } from "wagmi";
 import { useMemo } from "react";
 import { useGetProfiles } from "@/hooks/profiles/use-get-profiles";
 import AddressTokenBalance from "@/components/AddressTokenBalance";
+import CopyAddressToClipboard from "@/components/CopyAddressToClipboard";
 
 export function ProfileHeader({ address }: { address: string }) {
   const profilesQuery = useGetProfiles();
@@ -43,7 +44,12 @@ export function ProfileHeader({ address }: { address: string }) {
           )}
         </h1>
         {displayAddress ? (
-          <p className="font-mono text-sm text-gray-600">{displayAddress}</p>
+          <CopyAddressToClipboard 
+            address={address}
+            displayAddress={displayAddress}
+            className="text-sm text-gray-600"
+            iconSize="sm"
+          />
         ) : null}
         <AddressTokenBalance address={address as `0x${string}`} />
       </div>